JavaScript SEOについて知っておくべきこと

公開: 2020-08-07

プログラマーに聞いてみれば、JavaScript についてどう思うか答えてくれるでしょう。

リリース以来、JavaScript (JS) は、世界中の Web 開発者が使用する最も人気のあるプログラミング言語です。 Web 開発者を対象とした Stack Overflow による最近の調査では、JavaScript が 8 年連続で最も好まれるプログラミング言語であることが明らかになりました。

JS を使用すると、Web 開発者は大規模な Web アプリケーションを簡単に構築できます。ページを動的に更新し、よりインタラクティブにする優れた機能を備えています。さらに、AngularJS、ReactJS、Vue、NodeJS などの JavaScript フレームワークは、JS ベースのサイトの開発に必要な時間と労力を大幅に削減します。 JavaScript が世界中の Web サイトの 96% の基盤を形成しているのも不思議ではありません。

しかし、JS ベースのサイトは、Google と愛憎関係にあるようです。 JavaScript は HTML を簡単に制御および変更して、Web ページを動的かつインタラクティブにすることができるため、サイトの UX が向上します。しかし、検索エンジンは JS を扱うのが難しく、ほとんどの JavaScript コンテンツがインデックスに登録されていません。

JavaScript が Google の仕事を難しくしている理由と、JS コンテンツをボットに適したものにするためにできることをもう少し掘り下げてみましょう。

Javascript は SEO にどのように影響しますか?

JavaScript を使用すると、ページをすばやく読み込むことができ、豊富なインターフェイスを提供し、実装が簡単です。ただし、ブラウザーの流動性はユーザーの操作に基づいて変化するため、検索エンジンがページを理解し、コンテンツに値を関連付けるのが難しくなります。

検索エンジンには、JavaScript コンテンツを含む Web ページをレンダリングする際の制限があります。 Google はページの最初のクロールを実行し、見つかったものをインデックスに登録します。リソースが利用可能になると、ボットはそれらのページで JS のレンダリングに戻ります。これは、JavaScript に依存するコンテンツとリンクが検索エンジンに表示されないリスクがあり、サイトの SEO に悪影響を及ぼす可能性があることを意味します。

ソース

しかし、Google は JavaScript が定着することを知っています。その結果、検索エンジンの巨人は、検索の専門家が JS ベースのサイトを最適化できるように、そのリソースの多くを捧げてきました。

JS コンテンツをオンラインで見つけやすくするのに役立つ Google の JavaScript SEO に関するこのビデオシリーズをご覧ください。

SEO の専門家は、JS ベースの Web ページを、Google が認める形式にまとめる必要があります。検索エンジンが JS コンテンツを処理する方法を少し理解すれば、JavaScript と SEO を連携させてサイトのランキングを上げることができます。

検索エンジンは JavaScript をどのように処理しますか?

Google ボットは、非 JS ページとは異なる方法で JS を処理します。ボットは、クロール、インデックス作成、レンダリングの 3 つのフェーズでそれらを処理します。これらのフェーズは、以下の Google Developers の図のおかげで簡単に理解できます。

ソース

クロール

このフェーズは、コンテンツの発見可能性に関するものです。これは、シードセット、クロールのキューイングとスケジューリング、URL の重要性などのサブプロセスを含む複雑なプロセスです。

まず、Google のボットは、クロールとレンダリングのためにページをキューに入れます。ボットは、解析モジュールを使用してページをフェッチし、ページ上のリンクをたどり、ページがインデックスされる時点までレンダリングします。このモジュールは、ページをレンダリングするだけでなく、ソースコードを分析し、<a href=”…”> スニペットの URL を抽出します。

ボットは robots.txt ファイルをチェックして、クロールが許可されているかどうかを確認します。 URL が許可されていないとマークされている場合、ボットはそれをスキップします。したがって、エラーを回避するために robots.txt ファイルを確認することが重要です。

レンダリング

サイトのコンテンツ、テンプレート、およびその他の機能をユーザーに表示するプロセスは、レンダリングと呼ばれます。サーバー側レンダリングとクライアント側レンダリングがあります。

サーバー側レンダリング (SSR)

名前が示すように、このタイプのレンダリングでは、ページがサーバーに取り込まれます。サイトにアクセスするたびに、ページがサーバー上でレンダリングされ、ブラウザーに送信されます。

つまり、ユーザーまたはボットがサイトにアクセスすると、コンテンツが HTML マークアップとして受信されます。これは通常、Google がコンテンツにアクセスするために JS を個別にレンダリングする必要がないため、SEO に役立ちます。 SSR は従来のレンダリング方法であり、帯域幅に関してはコストがかかる場合があります。

クライアント側のレンダリング

クライアント側のレンダリングは、開発者が JavaScript を使用してブラウザーで完全にレンダリングされるサイトを構築できる、かなり最近のタイプのレンダリングです。そのため、ルートごとに個別の HTML ページを用意する代わりに、クライアント側のレンダリングにより、各ルートをブラウザーで直接動的に作成できます。このタイプのレンダリングは、サーバーに対して複数のラウンドを行うため、最初は遅くなりますが、リクエストが完了すると、JS フレームワークを介したエクスペリエンスは高速になります。

ページがクロールされた後の処理に戻ると、生の HTML コードの robots メタタグが Googlebot にページをインデックスに登録しないように指示しない限り、ボットはレンダリングが必要なページを特定し、それらをレンダリングキューに追加します。

ページはレンダリングキューに数秒間留まりますが、使用可能なリソースの量によっては時間がかかる場合があります。

ソース

リソースが許可されると、Google Web Rendering Service (WRS) はページをレンダリング、解析、およびコンパイルし、ページで JavaScript を実行します。ボットはレンダリングされた HTML を再度解析してリンクを探し、見つけた URL をクロール用にキューに入れます。レンダリングされた HTML は、ページのインデックス作成に使用されます。

索引付け

WRS が外部 API とデータベースからデータをフェッチすると、Google の Caffeine インデクサーがコンテンツのインデックスを作成できます。このフェーズには、URL の分析、ページのコンテンツとその関連性の理解、および検出されたページのインデックスへの保存が含まれます。

JavaScript を SEO 用に最適化する方法

JavaScript を正しく実装しないと、SEO が台無しになる可能性があります。これらの Javascript SEO のベストプラクティスに従って、サイトのランキングを向上させてください。

オンページ SEO の取り組みに固執する

ページを最適化して検索エンジンでのランク付けを支援するすべてのオンページ SEO ルールは引き続き適用されます。タイトルタグ、メタディスクリプション、画像の alt 属性、およびメタロボットタグを最適化します。ユニークでわかりやすいタイトルとメタディスクリプションは、ユーザーと検索エンジンがコンテンツを簡単に識別できるようにします。検索の意図と、意味的に関連するキーワードの戦略的な配置に注意してください。

また、SEO に適した URL 構造を持っているのも良いことです。いくつかのケースでは、ウェブサイトが URL に pushState の変更を実装し、正規のものを見つけようとしているときに Google を混乱させます。このような問題については、URL を確認してください。

JavaScript が DOM ツリーに表示されることを確認します

JavaScript レンダリングは、ページの DOM が十分に読み込まれている場合に機能します。 DOM またはドキュメントオブジェクトモデルは、ページコンテンツの構造と、各要素と他の要素との関係を示します。ページコードのブラウザの「要素の検査」で見つけることができます。 DOM は、動的に生成されるページの基盤です。

コンテンツが DOM で表示される場合、コンテンツが Google によって解析されている可能性があります。 DOM を確認すると、ページが検索エンジンボットによってアクセスされているかどうかを判断するのに役立ちます。

メタロボットタグに最初に noindex が含まれている場合、ボットはレンダリングと JS の実行をスキップします。 Googlebot はページでイベントを発生させません。 JS を使用してページにコンテンツを追加する場合は、ページが読み込まれた後に行う必要があります。ボタンをクリックしたとき、ページをスクロールしたときなどにコンテンツが HTML に追加された場合、そのコンテンツはインデックスに登録されません。

最後に、構造化データを使用する場合は、JavaScript を使用して必要な JSON-LD を生成し、ページに挿入します。余談ですが、最初から実装すべきオンページ SEO のトップトリックについて学びましょう。

検索エンジンによる JS コンテンツへのアクセスをブロックしないようにする

Google が JS コンテンツを見つけられないという問題を回避するために、一部のウェブマスターはクローキングと呼ばれるプロセスを使用しています。これは、JS コンテンツをユーザーに提供し、クローラーからは隠します。ただし、この方法は Google のウェブマスター向けガイドラインに違反していると見なされ、罰せられる可能性があります。代わりに、主要な問題を特定し、検索エンジンが JS コンテンツにアクセスできるようにする作業を行ってください。

場合によっては、サイトホストが意図せずブロックされ、Google が JS コンテンツを表示できなくなることがあります。たとえば、サイトに異なる目的を果たすいくつかの子ドメインがある場合、サブドメインは別の Web サイトとして扱われるため、それぞれに別の robots.txt が必要です。このような場合、これらの robots.txt ディレクティブのいずれも、レンダリングに必要なリソースへの検索エンジンのアクセスをブロックしていないことを確認する必要があります。

重複コンテンツを修正

Web サイトで JavaScript を使用している場合、同じコンテンツでも異なる URL が存在する場合があります。これにより、コンテンツの重複の問題が発生します。多くの場合、大文字化、ID、または ID を持つパラメーターが原因です。そのようなページを見つけて、インデックスに登録するオリジナル/優先 URL を選択し、canonical タグを設定して、検索エンジンが混乱しないようにします。

遅延ロードされたコンテンツと画像を修正する

サイトの速度は SEO にとって重要です。遅延読み込みは、重要でないコンテンツや目に見えないコンテンツの読み込みを遅らせる UX のベストプラクティスの 1 つです。これにより、最初のページの読み込み時間が短縮されます。ただし、ページの読み込みを高速化するだけでなく、検索エンジンのクローラーがコンテンツにアクセスできるようにする必要もあります。これらのクローラーは、JavaScript を実行したり、ページをスクロールしてコンテンツを遅延読み込みさせたりせず、SEO に悪影響を及ぼします。

さらに、画像検索は、追加のオーガニックトラフィックのソースでもあります。そのため、遅延ロードされた画像がある場合、検索エンジンはそれらを選択しません。遅延読み込みはユーザーにとっては素晴らしいことですが、ボットが潜在的に重要なコンテンツを見逃さないように注意して行う必要があります。

JS SEO ツールを使用する

JavaScript コードの問題を特定して修正するのに役立つツールが豊富に用意されています。ここにあなたの利点に使用できるいくつかがあります。

URL 検査機能。 このツールは Google Search Console にあります。 Google のクローラーがページをインデックスまたはクロールできたかどうかを示すことができます。
検索エンジンのクローラー。 これらのツールを使用すると、検索エンジンがページをクロールする方法を効果的にテストおよび監視できます。
ページスピードインサイト。 Google の Page Speed Insights は、サイトのパフォーマンスに関する詳細を共有し、改善方法に関する推奨事項を提供します。
サイト: 司令部。 このツールは、Google がコンテンツを適切にインデックスに登録しているかどうかを確認するのに役立ちます。 Google で次のコマンドを入力するだけです - site: [website URL] “text snippet or query”

JavaScript SEO の課題

ここまでで、検索エンジンが JavaScript コンテンツを処理する方法と、Web サイトを SEO の成功への近道に設定するために何ができるかについて、かなりのアイデアが得られました。ただし、SEO の専門家やウェブマスターが直面する課題は他にもいくつかあります。これらのほとんどは、JavaScript ベースの Web サイトを最適化する際に犯した過ちに起因しています。

1. 縮小されていない JavaScript および CSS ファイル

SEO ツールを使用して JS Web サイトを監査している場合、縮小されていない Javascript と CSS の問題に関する警告に遭遇した可能性があります。 JS および CSS ファイルは、不要なコード行、空白、ソースコード内のコメント、および外部サーバーでのホスティングによって一定期間にわたって圧迫され、Web サイトの速度が低下します。ページの読み込み時間を短縮し、エンゲージメント率を向上させ、SEO を向上させるために、不要な行、空白、およびコメントを必ず削除してください。

2. URL でのハッシュの使用

John Mueller が SEO イベントで悪い URL について言ったことを覚えていますか?

「私たちにとって、そこにある種のハッシュが表示された場合、それは残りの部分がおそらく無関係であることを意味します。ほとんどの場合、コンテンツをインデックス化しようとすると、それを削除します…」

しかし、いくつかの JS ベースのサイトでは、ハッシュを使用して URL を生成しています。これは、SEOにとって悲惨なことになる可能性があります。 URL が Google 対応であることを確認してください。次のようになってはいけません。

www.example.com/#/about -us または
www.example.com/about#us

3. 内部リンク構造をチェックしない

Google がサイトの URL を見つけるには、適切な <a href> リンクが必要です。また、ボタンをクリックした後にリンクが DOM に追加されると、ボットはそれらを表示できなくなります。ほとんどの Web マスターはこれらの点を見逃しており、SEO に悪影響を及ぼしています。

従来の「href」リンクを提供して、ボットが到達できるように注意してください。ウェブサイトの監査ツールである SEOprofiler を使用してリンクをチェックし、サイトの内部リンク構造を改善します。

適切なリンク構造に関するガイダンスについては、Google I/O カンファレンスで Tom Greenway が行った次のプレゼンテーションをご覧ください。

結論

間違いなく、JavaScript は Web サイトの機能を拡張します。ただし、JavaScript と検索エンジンは常に連携するとは限りません。 JavaScript は、検索エンジンがサイトをクロールしてインデックスに登録する方法に影響を与えるため、ランキングに影響します。したがって、検索の専門家は、検索エンジンボットが JS コンテンツを処理する方法を理解し、JavaScript が SEO 戦略にうまく適合するようにするために必要な手順を実行する必要があります。

JS ベースの Web サイトを使用していて、Google でコンテンツが見つからない場合は、問題に対処するときが来ました。この投稿で共有されている情報とヒントを使用して、SEO 用に JavaScript を最適化し、収益を増やしてください。