JavaScript SEO：GoogleがJSをどのようにレンダリングするかについての実際の実験

2024年5月4日 00:00|テクニカルSEO|読了目安：9 分

この記事では、完全にクライアントサイドでレンダリングされたJavaScriptで構築されたウェブページを、主要な検索エンジン（特にGoogle、そしてBingも少し）がどのようにクロールし、インデックスするかをテストする簡単な実験について詳しく説明します。これがSEO専門家とフロントエンド開発者にとって何を意味するかを探ります。

JavaScriptは現代のウェブの礎です。Googleのジョン・ミューラーがかつて言ったように、「それはなくならない」。リッチなユーザーインタラクションと動的に読み込まれるコンテンツは、今後も続くでしょう。

しかし、JavaScriptは常にSEOにとって難しいトピックでした。JS開発とレンダリングプロセスの複雑さは、SEO担当者と開発者の間のコミュニケーションギャップと相まって、しばしば不確実性を生み出します。

この投稿は理論を超えています。検索エンジンがJavaScriptを多用するウェブサイトと実際にどのように対話するかを、ライブ実験で見てみましょう。

2段階のインデックス作成

始める前に、Googleの2段階のインデックス作成プロセスを理解することが不可欠です：

  1. 第1段階（クロールと初期インデックス作成）： Googlebotはまず、初期のHTMLソースコードをクロールします。重要なコンテンツ（タイトル、テキスト、リンク）がこの生のHTMLに存在する場合（通常はサーバーサイドレンダリング（SSR）または静的サイト生成（SSG）によって達成されます）、迅速にインデックスされる可能性があります。
  2. 第2段階（レンダリングと完全なインデックス作成）： 初期のクロールの後、ページはウェブレンダリングサービス（WRS）のキューに追加されます。WRSは、ヘッドレスChromeブラウザを使用してJavaScriptを実行し、完全なドキュメントオブジェクトモデル（DOM）をレンダリングします。このレンダリングされたコンテンツが次にインデックスされます。

Googleのクロール、インデックス、レンダリングプロセス

問題は、第2段階での大幅な遅延です。レンダリングキューは数時間から数日、場合によっては数週間かかることがあります。さらに、すべての検索エンジンがGoogleほど堅牢なレンダリング能力を持っているわけではありません。

「コンテンツをできるだけ早くインデックスさせたい場合は、最も重要な要素が初期HTML（サーバーサイドレンダリング）に含まれていることを確認してください。」 — マーティン・スプリット、Google

実験：検索エンジンは純粋なJSをどのように処理するか？

このプロセスを実際に確認するために、「極端な」テストページを作成しました。これはベストプラクティスではありませんが、検索エンジンの動作を明確に観察する方法です。

1. テストページのセットアップ

私のシンプルなウェブページには、次の特徴がありました：

  • 最小限の初期HTML： 生のHTMLは骨組みだけで、<title>タグは空で、本文には簡単な<h4>とフッターのテキストしかありませんでした。
  • コアコンテンツは完全にJSでレンダリング： ページの<title>、<h1>、<meta name="description">、主要な記事本文（GPT-3で生成）、画像はすべて、クライアントサイドでJavaScript関数によって動的に生成され、ページに注入されました。
  • コンテンツはAJAXで取得： さらに複雑さを加えるため、コンテンツはサーバーからリモートAJAX呼び出しによって取得されました。
  • 構造化データもJSで注入： Article Schema.orgオブジェクトもJavaScriptを介して注入されました。
1// 簡略化された例
2$(document).ready(function () {
3  // AJAXで記事データを取得
4  $.ajax({
5    url: '/api/get-article-data',
6    success: function(data) {
7      // 取得したデータを使用してページ要素をレンダリング
8      $('title').text(data.title);
9      $('h1#main-title').text(data.h1);
10      $('meta[name="description"]').attr('content', data.description);
11      $('#article-content').html(data.body);
12      
13      // Schema.org構造化データを動的に注入
14      var script = document.createElement('script');
15      script.type = 'application/ld+json';
16      script.text = JSON.stringify(data.schemaData);
17      document.head.appendChild(script);
18    }
19  });
20});

戦略は、JSでレンダリングされたコンテンツを初期HTMLと大幅に異なるものにすることでした。検索エンジン結果ページ（SERP）のスニペットが変更された場合、JavaScriptが処理されたことが明らかになります。

2. SeoSpeedupでの送信と初期テスト

ページを公開した後、Google Search ConsoleとBing Webmaster Toolsを通じてURLを送信しました。次に、SeoSpeedupのサイトクローラーを使用してセットアップを検証しました。

  • SeoSpeedupのJavaScriptレンダリングテスト： SeoSpeedupのクローラーは、GooglebotをシミュレートしてJavaScriptをレンダリングするように設定できます。テストでは、クローラーがAJAX呼び出しで読み込まれたすべてのコンテンツを含む完全なページを正しくレンダリングしたことが確認されました。これは、サイトが技術的にレンダリング可能であることを確認するための重要な最初のステップです。

SeoSpeedupがJSで注入されたコンテンツを正しくレンダリング

  • Googleのリッチリザルトテスト： この公式ツールも、レンダリングされたDOMを正常に生成し、JavaScriptによって注入されたArticle構造化データを正しく識別しました。これにより、Googleがページをレンダリングすればコンテンツを見ることができることが確認されました。

3. 第1段階のインデックス作成結果

送信から数時間後、ページはGoogleとBingの検索結果に表示されました。

GoogleとBingからの第1段階のSERPスニペット

重要なことに、両方の検索エンジンは、JSでレンダリングされたコンテンツではなく、初期HTMLソースコードの最小限のコンテンツから派生したタイトルと説明を表示しました。これは、インデックス作成の第1段階を完全​​に示しています。

4. 第2段階の結果：遅延を伴う成功

さらに数日後、結果は変わりました：

1) Google:

  • JSを正常にレンダリングし、SERPスニペットを更新しました！ 検索結果には、JavaScriptによって動的に生成されたタイトルと説明が表示されるようになりました。

Googleの更新されたSERPスニペットがJSコンテンツを表示

  • site:検索により、GoogleがJavaScriptによってレンダリングされた本文テキストをインデックスしたことが確認されました。
  • JSによってレンダリングされた主要な画像もインデックスされ、Google画像検索に表示されました。

結論： Googleは、AJAXで取得されたコンテンツを含むクライアントサイドでレンダリングされたJavaScriptを処理できます。ただし、これはインデックス作成の第2段階に依存し、数日の遅延が伴います。

2) Bing:

  • テスト期間中、BingのSERPスニペットは決して変わりませんでした。初期HTMLのコンテンツを表示し続けました。

結論： Bingは（少なくともこのテストでは）クライアントサイドのJavaScriptによってレンダリングされたコアコンテンツを効果的に処理およびインデックスできませんでした。

より広範な互換性のための解決策：動的レンダリング

Bingが苦戦したため、解決策をテストしました：動的レンダリング。これは、ユーザーエージェントを検出するようにサーバーを設定することを含みます。

  • 通常のユーザーのブラウザの場合は、通常のJavaScriptを多用するページを提供します。
  • 検索エンジンボット（Bingbotなど）の場合は、事前にレンダリングされた静的なHTMLバージョンのページを提供します。

動的レンダリングを設定した後、Bingに再インデックスをリクエストしました。変更が観察される前にテスト期間は終了しましたが、このアプローチはボットに完全に形成されたHTMLドキュメントを提供し、JSをレンダリングする必要性をバイパスします。これは、あまり高度でないクローラーとの互換性を確保するための効果的な（ただし複雑な）解決策です。

主なポイントと推奨事項

この実験は明確に示しています：

  1. GoogleはクライアントサイドのJSを処理できますが、遅延があります。 ニュースやイベントなどの時間に敏感なコンテンツについては、純粋にクライアントサイドレンダリング（CSR）に依存するのは危険です。
  2. Bingのような他の検索エンジンは、大幅に遅れています。 これらのエンジンがトラフィックにとって重要である場合、純粋なCSRアプローチは実行可能ではありません。

開発者とSEO担当者への推奨事項：

  • 重要なコンテンツにはSSRまたはSSGを使用する。 ページの<title>、<meta description>、H1、主要なテキスト、およびメインナビゲーションは、常に初期HTMLソースに存在する必要があります。**Next.js（React用）やNuxt.js（Vue用）**のようなモダンなフレームワークは、これを高度に達成可能にし、SEOが重要なウェブサイトのデフォルトの選択肢であるべきです。
  • コアコンテンツに純粋なクライアントサイドレンダリング（CSR）を使用しない。 Googleだけを気にする場合でも、インデックスの遅延を受け入れる必要があります。より広範な検索エンジンの互換性のためには、それは選択肢ではありません。
  • SeoSpeedupを使用してレンダリングを監視する。 変更を展開した後、SeoSpeedupでJavaScriptレンダリングを有効にしてクロールを実行します。レンダリングされたHTMLをチェックして、重要なコンテンツが表示されていることを確認します。GSC統合を使用して「URLを検査」し、Googleのページの表示が期待と一致することを確認します。

「プロジェクトにSSR/SSGを導入する『複雑さ』は価値があるか？答えは簡単です：はい、優れたユーザーエクスペリエンスを提供し、SEOを盤石にしたいのであれば！」

モダンなフロントエンド技術を受け入れつつも、検索エンジンにコンテンツへの明確でアクセスしやすい道筋を残すことを常に忘れないでください。