あなたが開発者ではなく SEO スペシャリストである場合は、Web サイト開発の複雑さをすべて利用する必要はおそらくありません。 ただし、Web サイトのコーディング方法はパフォーマンス、ひいては SEO の可能性に大きな影響を与えるため、基本を知っておく必要があります。 の中に HTMLタグに投稿する, ウェブサイトの SEO を効率的に行うために理解する必要がある HTML の基本について説明しました。 今回は、開発者が Web サイトの見栄えを良くし、インタラクティブにするために使用する他のコーディング言語について詳しく説明します。 

言語は JavaScript です。この投稿では、Web サイトを監査するときに直面する可能性のある主な JS 関連のエラーについて説明します。 それぞれのエラーがなぜ重要なのか、そしてどのように修正できるのかを説明します。 修正部分は、おそらく Web サイト開発者に割り当てることになるでしょう。 ただ、今回は彼らと同じ言語で話すことになります。

JavaScriptはSEOにとって良いのか悪いのか？

残念ながら、この質問に対する簡単な答えはありません。 本当にすべては状況次第です！

JavaScript が以下に重点を置いて考え抜かれて実装されると、 ページエクスペリエンス、パフォーマンスの最適化、および適切な インデキシング SEO とユーザーの両方にとって有益なテクニックです。 最も注目に値するのは、ユーザー エクスペリエンスが向上する可能性があることです。 JavaScript を使用した Web サイトには、ユーザー エンゲージメントを高めるのに最適なさまざまな種類のアニメーションやトランジションが含まれる傾向があります。

さて、対話性と検索エンジンの使いやすさのバランスが取れないと、Web サイトはクロール可能性の制限、ページの読み込み時間の長さ、互換性の問題などの問題に直面する可能性が高くなります。 これらすべての問題が組み合わさると、直帰率が高くなる可能性があります。 私たちもそれは望んでいません！

また、Web サイトの可視性やランキングに対する JavaScript の影響については議論が続いていますが、JavaScript が Web サイトの最適化に対する脅威であると言うのは正確ではありません。 それでも、JavaScript を誤って使用すると、ランキングの可能性に悪影響を及ぼす可能性があるため、少なくともいくつかの基本的な Javascript SEO 実践に従うことをお勧めします。 これらについては後ほど説明します。 心配しないでください。すぐにこのスクリプト言語の力を最大限に活用できるようになります。

JavaScript SEOとは何ですか?

JavaScript SEO と Web サイトのパフォーマンスを成功させるためのその重要性について詳しく説明する前に、まず JavaScript 自体の本質を確認しましょう。

JavaScript は、主に Web サイトにインタラクティブな要素や動的コンテンツを追加するために使用されるスクリプト言語です。 1995 年に Netscape Communications の Brendan Eich によって作成され、それ以来、Web 上で最も広く使用されているプログラミング言語の XNUMX つになりました。 ポップアップ フォーム、インタラクティブな地図、アニメーション グラフィック、コンテンツが継続的に更新される Web サイト (天気予報、為替レートなど) はすべて、JavaScript の実装例です。 

2023 年 XNUMX 月現在、JavaScript は 最も広く使用されているクライアント側プログラミング言語、次に Flash と Java が続きます。 いくつかの 最も人気のあるウェブサイト 現在この言語を使用しているのは、Google、Facebook、Microsoft、Youtube、Twitter、Netflix などです。

SEランキングではJavaScriptも使用しております。 SE ランキング プラットフォームで見られるクールなエフェクトの多くも JS を利用しています。 たとえば、私たちの ページ変更の監視 ランディング ページには、ツールの動作を説明するために設計された JavaScript を利用したアニメーションが追加されました。 

JavaScript が Web サイトをどのように変換するかをよりよく理解していただくために、JavaScript を無効にしたランディング ページの同じセクションを示してみましょう。

JavaScript と Web サイト開発において JavaScript が果たす役割については理解できたので、今度は JavaScript SEO に焦点を移しましょう。

JS SEO には、JavaScript テクノロジーに大きく依存する Web サイトの最適化が含まれます。 これまで、検索エンジンのアルゴリズムは主に静的な HTML コンテンツの解析と理解に重点を置いていたため、JavaScript 依存の Web ページを適切にインデックス付けしてクロールするのに苦労していました。 検索エンジンは、JavaScript コンテンツを解釈してインデックスを作成する機能において大幅な進歩を遂げました。 それにもかかわらず、JavaScript によってもたらされる課題に対処し、サイトの検索エンジンの可視性を向上させるには、JavaScript SEO 実践を実装することが不可欠です。

確かに、Google が JavaScript をレンダリングする方法と、JS コードを検索しやすくする方法を理解していれば、これらすべての問題は回避できます。

Google による JavaScript の処理方法

最近、Google は JavaScript をクロールしてインデックスに登録する能力が XNUMX 倍も向上しました。 しかし、そのプロセスはまだかなり複雑で、多くのことがうまくいかない可能性があります。 

通常の HTML ページでは、すべてが単純明快です。 Googlebot はページをクロールし、内部リンクを含むそのコンテンツを解析します。 その後、コンテンツのインデックスが作成され、検出された URL がクロール キューに追加され、プロセスが最初から最初から始まります。 

JavaScript が方程式に追加されると、プロセスは少し複雑になります。 通常は JS ファイルへの XNUMX つのリンクのように見える JavaScript 内に何が隠されているかを確認するには、Googlebot はまずそれを解析、コンパイル、実行する必要があります。 これは JS レンダリングと呼ばれ、この段階が完了した後にのみ、Google は理解できる言語である HTML タグ内のページのすべてのコンテンツを確認できるようになります。 この時点で、Google は JS を利用した要素のインデックス作成と、JS 内に隠された URL のクロール キューへの追加を進めることができます。

さて、これらの複雑さはSEOの観点から心配すべきことでしょうか? ちょうどXNUMX年前まではそうでした。

JavaScript のレンダリングは非常にリソースを必要とし、コストがかかるため、最近まで Google すぐにはレンダリングされません JavaScript。 まず、ページのすぐに利用できるプレーン HTML 部分のインデックスを作成し、その後、いわゆるインデックス作成の第 2018 波中に、Google が JavaScript を処理します。 XNUMX年に遡ると、ジョン・ミューラー 主張した ページが表示されるまでに数日から数週間かかったということです。 したがって、JavaScript に大きく依存している Web サイトでは、ページのインデックスが高速に作成されることは期待できません。 さらに、Google が内部リンクをすぐにたどることができないため、新しいページがクロール キューに入る際に問題が発生する可能性があります。

のいずれかで JavaScript SEO オフィスアワー, Martin Splitt 氏は、レンダリング キューの移動が大幅に速くなり、ページは通常数分、場合によっては数秒以内にレンダリングされるとウェブマスターを安心させました。 それでも、検索に適した方法で JavaScript をコーディングするのは依然としてかなり難しく、毎週 JavaScript SEO オフィスアワー セッションは明らかにこれを証明しています。 ユーザーが共有するケースは、JavaScript が適切にコーディングされていない場合、事態が深刻な問題を引き起こす可能性があることを示しています。 いくつかの一般的な問題を取り上げて私の主張を説明しましょう。

Google はあなたのコンテンツに関与しません

Google は、隠されたコンテンツが表示されている限り、それを参照してインデックスに登録できます。 DOM- これは、ブラウザーによってレンダリングされる前に、ソース HTML コードが送信される場所です。 この段階では、JavaScript を使用してコンテンツを変更できます。 

ここで、最初の HTML にページのコンテンツ全体が含まれており、次のようにするとします。 CSSプロパティ コンテンツの一部を非表示にし、JS を使用してユーザーがこれらの非表示部分を明らかにできるようにします。 この場合、コンテンツは HTML コード内にまだ存在し、ユーザーに対してのみ非表示になっているため、問題はありません。Google は CSS コード内に何が隠されているかを引き続き確認できます。 

一方、最初の HTML に一部のコンテンツが含まれておらず、クリック トリガーの JavaScript によってコンテンツが DOM に読み込まれる場合、Googlebot はクリックできないため、Google はこの種のコンテンツを認識しません。 ただし、この問題は次のように実装することで解決できる可能性があります。 サーバー側のレンダリング—これは、JS がサーバー側で実行され、Google が既成の最終 HTML コードを取得するときです。 動的レンダリング 逃げ道にもなり得る。

Googleはスクロールしない

JavaScript は、無限スクロールを実装したり、UX のために一部のコンテンツを非表示にして、ユーザーがボタンをクリックすると追加情報を表示できるようにするためによく使用されます。

ここでの問題は、Googlebot はユーザーがブラウザで行うようにクリックやスクロールをしないことです。

確かに独自の回避策がありますが、使用するテクノロジーによってはうまくいくかどうかが決まります。 また、Google が理解できない方法で実装すると、JS を利用したコンテンツの一部がインデックスに登録されなくなります。

無限スクロールの場合は、 オーバースクロールイベントは避けるべきです JavaScript コードを呼び出すには Googlebot が実際にページをスクロールする必要があるため、これは Google では処理できません。 代わりに、次を使用して無限スクロールと遅延読み込みを実装できます。 交差オブザーバーAPI または、無限スクロールと一緒にページ分割された読み込みを有効にします。

JS と CSS がどのように連携するか

Javascript は主に Web ページにインタラクティブ性や動的な動作を追加するために使用されますが、CSS (Cascading Style Sheets の略) を使用すると、スタイリッシュな Web サイトを作成できます。 これにより、開発者はサイトの HTML 要素のレイアウト、色、フォント、その他の視覚的側面を定義できます。 CSS は常に HTML と一緒に使用されます。 ギフトボックスを華やかに彩る包装紙です。 プレーンな HTML Web ページは、設定された幅と左側の配置を除いた次のようになります。

問題は、今日では、たとえそれがかなり地味な見た目であっても、CSS がすべての Web サイトで使用されていることです。 RFC シリーズのページ インターネットの仕組みに関する技術的なメモ。 

以前は、Google は CSS をあまり気にせず、ページの HTML マークアップのみを解釈していました。 これはすべて、 モバイルフレンドリーなアップデート 2015 年に遡ります。モバイル検索の人気の高まりに応えて、Google はモバイル デバイス上でシームレスなユーザー エクスペリエンスを提供する Web サイトに報酬を与えることを決定しました。 そして、それを確実にするために、 ページはモバイル対応です, Google はブラウザと同じ方法でレンダリングする必要があり、これは CSS ファイルと JavaScript ファイルを読み込んで解釈することを意味します。 

ページ レイアウト アルゴリズム CSSにも依存します。 これは、ユーザーがページ上のコンテンツを簡単に見つけられるかどうかを判断することを目的としています。CSS は、デスクトップとモバイルの両方でページがどのようにレイアウトされているか、各コンテンツがページ内のどこに正確に存在するかを Google が理解するのに役立ちます。サイドバー、またはスクロールせずに見えるページの下部にあります。 

ここで、CSS と JavaScript がどのように連携して機能するかを理解するために、簡単なたとえを使用してみましょう。 印象的なパーティーを計画していると想像してください。 この場合、CSS はパーティー デコレータの役割を果たします。 CSS を使用すると、すべてを視覚的に魅力的にし、全体的な雰囲気を設定できます。 テーマカラーの選択や家具の配置から、風船やのぼりなどの装飾要素の追加に至るまで、CSS はパーティー会場の見た目や雰囲気を決定します。

ただし、ゲームや写真ブースなどのインタラクティブな要素をパーティーに追加したい場合は、JavaScript を使用する必要があります。 ゲームを企画し、写真ブースを設置し、すべてがスムーズに進むようにするパーティー プランナーのようなものだと考えてください。

HTML と CSS は、JavaScript とともに素晴らしいパーティー体験を作成します。 同様に、Web 開発では、CSS と JavaScript がそれぞれの長所を組み合わせて、Web サイト上のユーザー エクスペリエンスを向上させます。

SEO のための JavaScript のベスト プラクティス

JavaScript の基本のほとんどを説明したので、JavaScript Web サイトを最適化する際に従うべきいくつかのベスト プラクティスに移りましょう。

Google がすべてのコンテンツを確実に検出できるようにする

Google の Web クローラーである Googlebot は現在 JavaScript コンテンツを分析できるため、クロールとレンダリングに必要なリソースへのアクセスをブロックする必要はありません。

それでも、JS コンテンツに効果的にインデックスを作成したい場合は、次のガイドラインに従ってください。

• Web ページ内の重要な情報をページのソース コードで表示できるようにします。 これにより、検索エンジンはコンテンツをロードするためにユーザーの操作 (ボタンのクリックなど) に依存する必要がなくなります。
• Google は推奨していませんが、JavaScript を使用して rel=”canonical” リンクタグ. Google 検索は、ページを読み込むときにリンク タグを認識します。 ページ上にそれが唯一のものであることを確認してください。 そうでない場合は、複数の rel=”canonical” リンク タグを作成したり、既存の rel=”canonical” リンク タグを変更したりすることになり、予期しない結果が生じる可能性があります。
• Angular や Vue などの Javascript フレームワークは、通常、クライアント側のルーティング用にハッシュベースの URL (www.example.com/#/about-us) を生成します。 この種の URL はシームレスなナビゲーションを提供しますが、SEO を妨げ、ユーザーを混乱させる可能性があります。 ユーザーとの強い関係を維持するために、 通常の URL を使用する ユーザーエクスペリエンス、SEO、Webサイト全体の可視性を向上させるため。

ページ上の一般的なベスト プラクティスに従う

Javascript コンテンツに関しては、一般的なオンページ SEO ガイドラインに従うことを優先リストに含める必要があります。 コンテンツ、タイトルタグ、メタディスクリプション、alt属性、メタロボットタグを最適化することが特に重要です。 SEO のための重要な JavaScript ベスト プラクティスには次のものが含まれますが、これらに限定されません。

適切なリンクを使用する

JavaScript を実装するときに覚えておく必要があるのは、Google は、JS によって挿入されたリンクが適切にコーディングされている場合にのみ追跡するということです。 アン HTMLタグ URL と HREF 適切な URL を指す属性は、従う必要がある黄金律です。 タグが存在する限り、リンク コードに JS を追加しても問題ありません。

あなたのアンカーテキスト

一方、タグが欠落しているリンクや、 HREF 属性を指定したり、適切な URL を指定しないとユーザーは機能しますが、Google はユーザーをフォローできません。

アンカー テキストアンカー テキストアンカー テキストリンクなし

確かに、を使用すると、 サイトマップ, Google は、これらのページにつながる内部リンクをたどることができない場合でも、ウェブサイトのページを検出する必要があります。 ただし、検索エンジンは、Web サイトの構造やページ間の関係を理解するのに役立つため、サイトマップへのリンクを優先します。 さらに、内部リンクにより、次のことが可能になります。 スプレッドリンクジュース ウェブサイト全体で。 これをチェックしてください 内部リンクに関する詳細ガイド それがどのように機能するかを知る。

意味のある HTTP ステータス コードを使用する

HTTP ステータス コードが適切で意味のあるものであることを確認することは、Googlebot との良好なコミュニケーションを促進する上で重要な役割を果たす重要な SEO 実践です。 JavaScript を使用すると、このプロセスを簡素化できます。 たとえば、404 コードまたはその他のエラーが発生した場合、ユーザーは自動的に別のページまたは見つからないページに誘導されます。 JavaScript を利用して HTTP ステータス コードを管理することにより、Web サイトはより直観的なユーザー エクスペリエンスを提供し、フラストレーションを軽減し、訪問者が潜在的なエラーを回避できるようにすることができます。

robots.txt ファイルで重要な JavaScript ファイルをブロックしないようにします。

Web サイトの robots.txt ファイルで重要な JavaScript ファイルをブロックしないでください。 そうすると、Google はあなたのコンテンツにアクセスしたり、処理したり、操作したりすることさえできなくなります。 これにより、Web サイトを効果的に理解してランク付けする Google の能力が大幅に妨げられる可能性があります。

動的に読み込まれるテキスト、インタラクティブな要素、重要なメタデータを組み込んで、高品質の JavaScript コンテンツを生成したとします。 ただし、何らかの理由でクロールをブロックしたとします。 このため、コンテンツが注目されなかったり、検索エンジンのインデックスで過小評価されたりする可能性があります。 これにより、オーガニック トラフィック、可視性、全体的な検索パフォーマンスが低下します。

ページネーションを正しく実装する

SEO 専門家が膨大な量の Web サイト コンテンツを扱う場合、ページネーションや無限スクロールなどのページ上の最適化テクニックを使用する傾向があります。 これらの実践はさまざまなメリットをもたらす可能性があるという事実にもかかわらず、不適切に実装されると SEO の取り組みを妨げる可能性もあります。

ページネーションに関する一般的な問題の XNUMX つは、検索エンジンのボットがページネーションされたコンテンツの最初の部分のみを表示する傾向があり、結果としてその後のページを意図せず非表示にしてしまうことです。 これは、あなたが作成した貴重なコンテンツの一部が注目されず、インデックスも付けられない可能性があることを意味します。

この問題を解決するには、ユーザーのアクションに加えて、正しいリンクを使用してページネーションを実装します。 < a href> リンクを使用すると、検索エンジンはページ分割されたすべてのページを簡単に追跡およびクロールできるため、すべてのコンテンツが確実に検索され、インデックスに登録されます。

サーバーサイドまたは静的レンダリングを使用する 

前述したように、Web クローラーは JavaScript の実行が難しい傾向があります。 クローラーがこのタイプのコンテンツを完全に無視する場合があるのはこのためです。 ページ クローラーは、ページのインデックスを作成する前に動的コンテンツが完全にレンダリングされるのを待つことを単に拒否する場合があります。 

検索エンジン ボットによる JavaScript コンテンツのクロールとインデックス作成を支援するには、サーバー側レンダリングを使用することをお勧めします。 このプロセスには、Web ページをユーザーのブラウザに送信する前に、サーバー上で Web ページをレンダリングすることが含まれます。 これにより、検索エンジン クローラーが完全に入力された Web ページを受信できるようになり、その結果、処理時間と労力が大幅に削減されます。

SEO のための JS のテスト

ご想像のとおり、JavaScript のコーディング方法によって、Web サイトの成否が決まります。 たとえば、次のように使用できます などの Google のツール モバイルフレンドリーテスト Google がページをどのようにレンダリングするかを確認します。 

できれば、問題を簡単に修正できる開発の初期段階でテストを行う必要があります。 モバイル フレンドリー テストを使用すると、あらゆるバグを早期に発見できます。特別なツール (例: グローク). 

ここで、SEO 用の Javascript をテストするために使用できる他の方法を検討してみましょう。

Chromeで検査する

検索エンジンが JavaScript をどのように解釈するかを調べるには、Chrome ブラウザの開発者ツールを使用できます。 Chrome で Web サイトを開き、任意の要素を右クリックして、「検査」を選択します。 これにより開発者コンソールが開き、ページの HTML 構造を表示して、必要な JavaScript コンテンツが表示されているかどうかを確認できます。 コンテンツが非表示になっているか、正しく表示されない場合、検索エンジンからアクセスできない可能性があります。

あるいは、Command+Option+J (Mac) または Control+Shift+J (Windows、Linux、Chrome OS) を押してツールを実行することもできます。

ここで ソース タブで、JS ファイルを検索し、挿入されたコードを検査できます。 次に、次のいずれかを使用して、何か問題が発生したと思われる時点で JS の実行を一時停止できます。 イベントリスナーのブレークポイント コード部分をさらに検査します。 バグを検出したと確信したら、コードをライブで編集して、思いついた解決策によって問題が解決されるかどうかをリアルタイムで確認できます。 

Chrome 開発者ツールの優れた点は、すべての変更がユーザーのブラウザに適用され、他のユーザーには影響を与えないことです。 あなたがヒットすると、それらは消えます Refresh ボタン。 このツールは、JavaScript に関連するエラーだけでなく、あらゆるコード エラーをデバッグするために使用できます。 したがって、Web サイトの CSS に問題がある場合にも、このツールは役に立ちます。

Google検索コンソール

Google Search Console は、Google 検索結果におけるウェブサイトの存在を監視し、最適化できる強力なツールです。 これにより、Google がサイトをどのようにクロールしてインデックスに登録するかについて貴重な洞察が得られます。 これを行うには、Search Console の「URL 検査」セクションに移動します。 ここから、個々の URL を送信し、JavaScript コンテンツを含めて Google が URL をどのようにレンダリングするかを確認できます。 これは、Google が JavaScript コンテンツに効率的にアクセスしてインデックスを作成できるかどうかを確認するのに役立ちます。

「URL 検査」をクリックし、「ライブ URL のテスト」機能を使用します。 次に、 をクリックします テスト済みページを表示 > 詳細情報 > Javascript コンソールのメッセージ.

Googleキャッシュ

Google キャッシュをチェックすることも、Google が JavaScript ベースのコンテンツのインデックスを作成しているかどうかを確認する良い方法です。 Google キャッシュは、Google のクローラーによって取得された Web ページのスナップショットです。 SE ランキングなどのツールを使用できます。 Google Cache Checker ページのキャッシュされたバージョンを表示します。 これは、Google が JavaScript コンテンツを正しくレンダリングしてインデックス付けしているかどうかを判断するのに役立ちます。

Google でテキストを検索する

Google が JavaScript コードによって動的に生成されたコンテンツのインデックスを作成しているかどうかを確認するには、JavaScript によって生成された一意のテキスト文字列に対して特定の検索を実行します。 次に、Google が関連する結果を返すかどうかを確認します。 JavaScript で生成されたコンテンツが検索結果に表示されない場合は、Google がそのコンテンツを適切にインデックス付けしていない可能性があります。

サイト監査を実行する

SEO 用の Javascript をテストし、サイト上のすべての JS 関連のエラーを検出する簡単な方法は、 テクニカルSEO監査。 SE ランキング ユーザーの場合は、Web サイト監査の問題レポートのいくつかのセクションを確認する必要があります。 JavaScriptを & HTTPステータスコード.

SE ランキングは、サイトで検出されたすべてのエラーをリストするだけでなく、それらを修正する方法についてのヒントも提供します。

エラーの原因となった正確なファイルを示すので、問題を解決するためにどのファイルを調整すればよいかがわかります。 エラーが発生したページ数の列を XNUMX 回クリックすると、ファイルの URL の完全なリストが開きます。

上の記事を読む ウェブサイト監査を行う方法 包括的な Web サイト監査を開始して、修正に優先順位を付け、ツールを自分でテストします。

すべてのエラーの種類を詳しく調べるつもりなら、読み続けてください。

JavaScript SEO の一般的な問題とその回避方法

さて、このプログラム言語に関連する一般的な SEO の問題が何なのか疑問に思われるかもしれません。 そして、最初に言及する価値があるのは、JavaScript がファイルとして個別に保存され、ページからページにリンクされていることです。 セクション。 

ブラウザと Google は、ページのコンテンツを完全にレンダリングするためにこれらのリソースを取得する必要があります。 Google とブラウザ (または Google のみ) がファイルの読み込みに失敗することがあります。この問題が発生する理由は CSS と JavaScript の両方に共通しています。 

それほど深刻ではないケースでは、Google とブラウザはファイルを取得できますが、読み込みが遅すぎるため、ユーザー エクスペリエンスに悪影響が生じ、Web サイトのインデックス作成も遅くなる可能性があります。 

GoogleはJSファイルをクロールできない

JavaScript ファイルを取得するには、Googlebot にそのための権限が必要です。 以前は、Google がこれらのファイルを使用することはないため、robots.txt ファイルを使用して Google によるこれらのファイルへのアクセスをブロックするのが一般的でした。 現在、検索大手は Web サイトのコンテンツを理解するために JavaScript に依存しています。 ウェブマスターを励ます "へページのレンダリングに重大な影響を与えるすべてのサイト資産をクロールできるようにします。たとえば、ページの理解に影響を与える CSS ファイルや JavaScript ファイルなどです。」 ファイルのブロックを解除しないと、Google はファイルをレンダリングしたり、JavaScript を使用したコンテンツをインデックスに登録したりできなくなります。 

JavaScript ファイルをブロックすること自体は、マイナスのランキング要素ではありません。 ただし、装飾のみに使用する場合、または何らかの理由で JS が挿入されたコンテンツのインデックスを作成したくない場合は、JavaScript ファイルをブロックしたままにすることができます。 それ以外の場合は、Google にファイルをレンダリングさせます。

Google とブラウザは JS ファイルを読み込めません

robots.txt ファイルを読んでクロールが許可されているかどうかを確認した後、Googlebot は JavaScript URL にアクセスするための HTTP リクエストを作成します。 ファイルのレンダリングを続行するには、200 OK 応答コードを取得する必要があります。 ただし、場合によっては、4XX や 5XX などの他のステータス コードが返されることがあります。 さまざまなステータス コードの意味を簡単に要約する必要がある場合は、 このガイド あなたのためです。

4XX ステータスの JavaScript

4XX 応答コードは、要求されたリソースが存在しないことを意味します。 JavaScript ファイルと言えば、Googlebot が次の URL に従ったことを意味します。 ページのセクションにアクセスしましたが、指定された場所にファイルが見つかりませんでした。 ページが 4XX を返した場合、通常はページが削除されたことを意味します。 JavaScriptではファイルへのパスが正しく指定されていないためにエラーが発生することがよくあります。 許可の問題も考えられます。

4XX レスポンス コードの悪い点は、JavaScript ファイルのレンダリングで問題が発生しているのは Google だけではないことです。 ブラウザーもそのようなファイルを実行できなくなり、Web サイトの見栄えが低下し、対話性が失われます。

JS を使用してコンテンツを Web サイトにロードする場合 (例: それぞれの Web サイトへの株価為替レート)、コードが適切に実行されていないと、動的にレンダリングされたコンテンツがすべて失われます。 

エラーを修正するには、開発者はまずその原因を突き止める必要があります。その理由は使用されているテクノロジによって異なります。

5XX ステータスの JavaScript

5XX 応答コードは、Web サーバー側に問題があることを示します。 これは、ブラウザまたは Googlebot が HTTP リクエストを送信し、JavaScript ファイルを見つけても、サーバーがファイルを返せないことを意味します。 

最悪のシナリオでは、エラーが発生します。 ウェブサイト全体がダウンしている。 これは、サーバーがトラフィック量に対応できない場合に発生します。 トラフィックの急激な増加は自然なことかもしれませんが、ほとんどの場合、攻撃的な解析ソフトウェアや、サーバーを停止させるという特定の目的でサーバーに殺到する悪意のあるボット (DDoS) が原因です。 

また、設定された期間内にブラウザが JavaScript ファイルを取得できなかった場合、サーバーはそのファイルの配信に失敗する可能性があります。 504タイムアウトエラー。 これは、ファイル バンドルが大きすぎる場合、またはユーザーのインターネット接続が遅い場合に発生する可能性があります。

これを防ぐには、Web サイト サーバーのイライラを軽減するように Web サイト サーバーを構成します。 ただし、サーバーを長時間待機させることもお勧めできません。

問題は、巨大な JS バンドルをロードするには大量のサーバー リソースが必要となり、ファイルのロードにすべてのサーバー リソースが使用されてしまうと、他のリクエストを満たすことができなくなるということです。 その結果、ファイルが読み込まれるまで Web サイト全体が保留されます。

JavaScript ファイルの読み込み速度が遅い

このセクションでは、JavaScript ファイルの読み込みに長時間、または希望よりもわずかに時間がかかる原因となる問題を詳しく掘り下げてみましょう。 ブラウザと Googlebot の両方が JS ファイルの読み込みとレンダリングに成功しても、それに時間がかかる場合でも、心配する必要があります。

ブラウザーがページ リソースをより速く読み込めるほど、ユーザーのエクスペリエンスは向上します。ファイルの読み込みが遅い場合、ユーザーはブラウザーでページがレンダリングされるまでしばらく待つ必要があります。

3XX ステータスの JavaScript

3xx ステータス コードは、要求されたリソースが再ルーティングされたことを示し、Web サイト コード内の URL を新しい場所にリダイレクトするために不可欠です。 これは、ドメインとパスだけでなく、リソースの取得に使用される HTTP/HTTPS プロトコルにも当てはまります。

以下の例では、JavaScript ファイルは最初に HTTP URL を使用して参照されます。

<script nomodule type="text/javascript" src="http://static.files.bbci.co.uk/orbit/7c43b78b94b8ed38e941a5a5336425e5/js/polyfills.js"></script>

ただし、ファイルの正しい最新の URL では HTTPS を使用する必要があります。

<script nomodule type="text/javascript" src="https://static.files.bbci.co.uk/orbit/7c43b78b94b8ed38e941a5a5336425e5/js/polyfills.js"></script>

サーバーがファイルを適切なアドレスにリダイレクトするため、Googlebot とブラウザは引き続きファイルを取得します。 注意点は、宛先 URL に到達するには追加の HTTP リクエストを作成する必要があるということです。 これはロード時間にとって良くありません。 単一の URL やいくつかのファイルの場合、パフォーマンスへの影響はそれほど大きくないかもしれませんが、大規模な場合には、ページの読み込み時間が大幅に遅くなる可能性があります。

ここでの解決策は明らかです。Web サイトのコード内のすべての古い JavaScript URL を最新のリンク先 URL に置き換えるだけです。

キャッシュが有効になっていません 

サーバーへの HTTP リクエストの数を最小限に抑えるための優れた方法は、応答ヘッダーでのキャッシュを許可することです。 キャッシュについて聞いたことがあるでしょう。Web サイト上の情報が適切に表示されない場合、ブラウザーのキャッシュをクリアするよう提案されることがよくあります。

キャッシュが実際に行うことは、ユーザーがサイトにアクセスしたときに Web サイト リソースのコピーを保存することです。 そうすれば、次回このユーザーが Web サイトにアクセスしたときに、ブラウザーはリソースを取得する必要がなくなり、代わりに保存されたコピーをユーザーに提供します。 キャッシュは遅延とネットワーク負荷を軽減できるため、Web サイトのパフォーマンスにとって不可欠です。 

キャッシュ制御HTTPヘッダー ブラウザが従うべきキャッシュ ルールを指定するために使用されます。これは、特定のリソースをキャッシュできるかどうか、誰がキャッシュできるか、キャッシュされたコピーがどれくらいの期間存続できるかを示します。 ユーザーが Web サイトにアクセスするたびにブラウザーが JS ファイルをアップロードするため、JS ファイルのキャッシュを許可することを強くお勧めします。そのため、JS ファイルをキャッシュに保存すると、ページの読み込み時間が大幅に短縮される可能性があります。 

JS ファイルのキャッシュを XNUMX 日にしてパブリック アクセスに設定する例を次に示します。

ヘッダー セット Cache-Control "max-age=86400, public"

ただし、Web サイトで設定されたディレクティブに従うと、クロールおよびレンダリングのインフラストラクチャに過大な負荷がかかるため、Googlebot は通常、キャッシュ制御 HTTP ヘッダーを無視することに注意してください。

したがって、JS ファイルを更新して Google に認識させたい場合は、ファイルの名前を変更し、別の URL を使用してアップロードすることをお勧めします。 そうすることで、Google はファイルをこれまでに見たことのないまったく新しいリソースとして扱うため、ファイルを再フェッチします。

ファイルの数が重要です

複数の JavaScript ファイルを使用すると、開発者の観点からは便利かもしれませんが、パフォーマンスの点ではあまり良くありません。 ブラウザは各ファイルをロードするために個別の HTTP リクエストを送信しますが、ブラウザが処理できる同時ネットワーク接続の数は制限されています。 したがって、ページのすべての JS リソースが XNUMX つずつ読み込まれることになり、レンダリング速度が低下します。

このため、JavaScript ファイルをバンドルして、ブラウザーがロードする必要があるファイルの数を最小限に抑えることをお勧めします。

Google の観点からすると、JavaScript ファイルが多すぎることは問題ではなく、いずれにしてもそれらをレンダリングすることになります。 ただし、ファイルが増えれば増えるほど、JS ファイルのロードに費やすクロール予算も増えます。 何百万ものページがある大規模な Web サイトの場合、Google が一部のページをタイムリーにインデックス付けしないことになるため、これは重要になる可能性があります。

ファイルサイズも重要です 

JavaScript ファイルをバンドルする場合の問題は、Web サイトが成長するにつれて、新しいコード行がファイルに追加され、最終的にはファイルが大きくなりすぎてしまう可能性があることです。 パフォーマンスの問題.

Web サイトの構造方法によっては、すべての JavaScript ファイルを一緒にバンドルするのではなく、ブログ JavaScript 用に別のファイル、フォーラム JavaScript 用に別のファイルなど、複数の小さなファイルにグループ化することが合理的な場合があります。 

XNUMX つの巨大な JS バンドルを分割するもう XNUMX つの理由は次のとおりです。 キャッシング。 すべてを XNUMX つのファイルにまとめた場合、JS コード内で何かを変更するたびに、ブラウザと Google はバンドル全体を再キャッシュする必要があります。 これはインデックス作成にとってもユーザー エクスペリエンスにとっても良くありません。 

の面では インデキシング 使用されているキャッシュ テクノロジーに応じて XNUMX つの方法が考えられます。Googlebot に JS バンドルを常に再キャッシュさせるか、キャッシュが有効でなくなったことに Google が気づかず、最終的に Google に古いコンテンツが表示されることになります。

といえば ユーザー体験、バンドル内の一部の JS コードを更新すると、ブラウザーはキャッシュされたコピーをどのユーザーにも提供できなくなります。 そのため、ブログの JS コードのみを変更した場合でも、ブログにアクセスしたことがないユーザーを含むすべてのユーザーは、Web サイト上のページにアクセスするためにブラウザーが JS バンドル全体をロードするまで待つ必要があります。

CSS と JavaScript の圧縮と縮小

JavaScript ファイルを軽量に保つには、ファイルを圧縮して縮小する必要があります。 どちらの方法も、ソース コードを編集して Web サイトのリソースのサイズを削減することを目的としていますが、明らかに異なります。

圧縮 ソース コード内の繰り返し文字列を、その文字列の最初のインスタンスへのポインターに置き換えるプロセスです。 どのコードにも繰り返しの部分がたくさんあるので（どれくらいの部分があるかを考えてください） tags your JS contains) and pointers use less space than the initial code, file compression allows to reduce the file size by 70％まで。 ブラウザは圧縮されたコードを読み取ることはできませんが、ブラウザがその圧縮方法をサポートしている限り、レンダリングする前にファイルを解凍できます。

圧縮の優れた点は、開発者が手動で圧縮を行う必要がないことです。 リソースを圧縮するようにサーバーが構成されている場合、面倒な作業はすべてサーバーによって行われます。 たとえば、Apache サーバーの場合、いくつかの コード行が .htaccess ファイルに追加されます 圧縮を有効にします。 

縮小 ソース コードから空白、不要なセミコロン、不要な行、コメントを削除するプロセスです。 その結果、人間が判読できるほどではないものの、有効なコードが得られます。 ブラウザはそのようなコードを完全に適切にレンダリングでき、生のコードよりも高速に解析してロードすることもできます。 Web 開発者は縮小化を自分で行う必要がありますが、専用ツールが豊富にあるので問題はありません。 

ファイル サイズの削減について言えば、縮小しても 70% という驚異的な削減はできません。 サーバーですでに圧縮が有効になっている場合は、リソースをさらに縮小すると、リソースのコーディング方法に応じて、サイズをさらに数〜 16% 削減できます。 このため、一部の Web 開発者は、縮小化は時代遅れであると考えています。 ただし、JS ファイルは小さくなります。 よりいい。 したがって、両方の方法を組み合わせることをお勧めします。 

外部JavaScriptファイルの使用

多くの Web サイトは、サードパーティのドメインでホストされている外部 JavaScript ファイルを使用する傾向があります。 問題を完全に解決するオープンソース コードを再利用するのは素晴らしいアイデアのように思えるかもしれませんが、結局のところ、車輪の再発明には意味がありません。 コピーして Web サイトのサーバーにアップロードする限り、既製のソリューションを使用することに問題はありません。 同時に、外部でホストされているサードパーティの JS ファイルを使用することには、多くのリスクが伴います。 

何よりもまず、私たちが話しているのは、 セキュリティリスク。 使用しているファイルをホストする Web サイトがハッキングされた場合、外部 JS ファイルに挿入された悪意のあるコードが実行される可能性があります。 ハッカーは、パスワードやクレジット カードの詳細を含むユーザーの個人データを盗む可能性があります。

パフォーマンス面での、上で説明したすべてのエラーを考えてください。 JS ファイルがホストされているサーバーにアクセスできない場合、キャッシュ、圧縮を設定したり、5XX エラーをデバッグしたりすることはできません。

ファイルをホストしている Web サイトがある時点でファイルを削除し、それに適時に気付かなかった場合、Web サイトは適切に動作しなくなり、404 JS ファイルを有効なファイルにすぐに置き換えることができなくなります。

最後に、JS ファイルをホストしている Web サイトが (わずかに) 異なるファイルへの 3XX リダイレクトを設定している場合、Web ページの表示や動作が期待どおりにならない可能性があります。 

サードパーティの JS ファイルを使用する場合、私からのアドバイスは、それらのファイルを注意深く監視することです。 それでも、より良い解決策は、外部 JS をまったく使用しないことです。

Svetlana は、SE Ranking のコンテンツ責任者です。 彼女の関心は、デジタル マーケティング、SEO、翻訳に及びます。 彼女は、SE Ranking ブログやさまざまなマーケティング メディアで定期的に専門知識を共有しています。 Svetlana は、複雑な概念は平易な言葉で説明できると信じており、没入型のストーリーを作成するのが大好きです。
Svetlana は、夜の時間のほとんどを新しい言語の学習、思い出に残る旅行の計画、猫とのふれあいに費やしています。

• SEO を活用したコンテンツと PR 配信。 今日増幅されます。
• PlatoData.Network 垂直生成 Ai。 自分自身に力を与えましょう。 こちらからアクセスしてください。
• プラトアイストリーム。 Web3 インテリジェンス。 知識増幅。 こちらからアクセスしてください。
• プラトンESG。 自動車/EV、 カーボン、 クリーンテック、 エネルギー、 環境、 太陽、 廃棄物管理。 こちらからアクセスしてください。
• ブロックオフセット。 環境オフセット所有権の近代化。 こちらからアクセスしてください。
• 情報源： https://seranking.com/blog/css-and-javascript-seo/