8月1日、Vercel Newsで「Google がインデックス作成プロセスで JavaScript を処理する方法 – Vercel」と題した記事が公開された。この記事では、Googleがインデックス作成プロセスでJavaScriptをどのように処理しているかについて詳しく紹介されている。

以下に、その内容を簡潔にまとめて紹介する。

まず、Googleがインデックス作成プロセスでJavaScriptをどのように扱うかについて、以下の主要な誤解があることが指摘されている。

1. 「GoogleはクライアントサイドのJavaScriptをレンダリングできない」
2. 「GoogleはJavaScriptページを異なる扱いをする」
3. 「レンダリングキューとタイミングがSEOに大きく影響する」
4. 「JavaScriptを多用するサイトはページ発見が遅くなる」

これらの誤解を解消するため、VercelはSEOおよびデータエンジニアリングのコンサルタント会社MERJと提携し、新たな実験を行った。この実験では、様々なサイトで100,000回以上のGooglebotのフェッチを分析し、GoogleのSEO能力を検証した。

Googleのレンダリング能力の進化

Googleのウェブコンテンツクロールおよびインデックス作成能力は、年々大きく変化している。その進化を理解することが、現代のウェブアプリケーションのSEOにおいて重要である。

2009年以前: JavaScriptサポートの制限

初期の検索エンジンでは、Googleは主に静的HTMLコンテンツをインデックスしていた。JavaScript生成コンテンツは検索エンジンにほとんど見えず、SEOの目的で静的HTMLが広く使用された。

2009年–2015年: AJAXクロールスキーム

GoogleはAJAXクロールスキームを導入し、動的に生成されたコンテンツのHTMLスナップショットを提供することを可能にした。これは、開発者がクロール可能なバージョンのページを別途作成する必要がある暫定的な解決策であった。

2015年–2018年: 初期のJavaScriptレンダリング

GoogleはヘッドレスChromeブラウザを使用してページをレンダリングし始め、大きな進歩を遂げた。しかし、この古いブラウザバージョンは、最新のJS機能の処理にはまだ限界があった。

2018年以降: 最新のレンダリング能力

今日、Googleは最新のChromeバージョンを使用してレンダリングし、最新のウェブ技術に対応している。現在のシステムの主要な側面には以下が含まれる：

1. ユニバーサルレンダリング: GoogleはすべてのHTMLページのレンダリングを試みる。
2. 最新のブラウザ: Googlebotは最新の安定版Chrome/Chromiumを使用し、最新のJS機能をサポートする。
3. ステートレスレンダリング: 各ページのレンダリングは、新しいブラウザセッションで行われ、以前のレンダリングの状態やクッキーを保持しない。
4. クロークの禁止: Googleは、ランキングを操作するためにユーザーと検索エンジンに異なるコンテンツを表示することを禁止している。
5. アセットキャッシング: Googleはアセットをキャッシュし、ページレンダリングを高速化する。

誤解1: 「GoogleはJavaScriptコンテンツをレンダリングできない」

この誤解は、多くの開発者がJSフレームワークを避けるか、SEOのために複雑な回避策を取る原因となっている。

テスト

GoogleのJavaScriptコンテンツレンダリング能力をテストするため、以下の3つの主要な側面に焦点を当てた。

1. JSフレームワークの互換性: Next.jsとGooglebotの相互作用を分析し、動的に読み込まれるコンテンツがインデックスされるかどうかを検証。
2. 動的コンテンツのインデックス作成: APIコールを介して非同期に読み込まれるコンテンツがインデックスされるかどうかを調査。
3. ストリーミングコンテンツ: React Server Components（RSC）を使用したコンテンツがGooglebotによって正しく処理されるかどうかを確認。

結果

1. 100%のHTMLページが複雑なJS相互作用を含むものも含めて完全にレンダリングされた。
2. 非同期に読み込まれるすべてのコンテンツが正常にインデックスされた。
3. Next.jsフレームワークがGooglebotによって完全にレンダリングされた。
4. ストリーミングコンテンツも完全にレンダリングされ、SEOに悪影響を及ぼさないことが確認された。

誤解2: 「GoogleはJavaScriptページを異なる扱いをする」

JavaScriptを多用するページに対してGoogleが異なるプロセスや基準を持っているという誤解が一般的である。

テスト

GoogleがJSページを異なる扱いをするかどうかをテストするために、以下のアプローチを取った。

1. CSS @import テスト: JavaScriptを使用せずに、CSSファイルが@importする2番目のCSSファイルのレンダリングを確認し、JS有無での差異を比較。
2. ステータスコードとメタタグ処理: 異なるHTTPステータスコードとnoindexメタタグを持つページをテストし、JS有無での処理の違いを確認。
3. JavaScriptの複雑性分析: nextjs.orgのページでのJSの複雑性に応じたレンダリングの成功率と時間差を比較。

結果

1. CSS @import テストは、GoogleがJS有無にかかわらずページを正しくレンダリングすることを確認した。
2. Googleは、JSコンテンツの有無にかかわらず200ステータスのHTMLページをすべてレンダリングし、他のステータスコードのページはレンダリングしない。
3. noindex メタタグが初期HTMLに含まれているページはレンダリングされず、JSによるタグの削除は効果がない。
4. JSの複雑性によるレンダリング成功率に有意な違いは見られなかった。

誤解3: 「レンダリングキューとタイミングがSEOに大きく影響する」

JavaScriptを多用するページがレンダリングキューの影響でインデックス作成が遅れるという誤解がある。

テスト

レンダリングキューとタイミングがSEOに与える影響を調査するために、以下のアプローチを取った。

1. レンダリング遅延: 初期クロールからレンダリング完了までの時間差を分析。
2. URLタイプ: クエリ文字列の有無やnextjs.orgの異なるセクションでのレンダリング時間を比較。
3. 頻度パターン: Googleがページを再レンダリングする頻度とパターンを分析。

結果

レンダリング遅延の分布は以下の通りであった。

• 50パーセンタイル（中央値）：10秒
• 75パーセンタイル：26秒
• 90パーセンタイル：約3時間
• 95パーセンタイル：約6時間
• 99パーセンタイル：約18時間

これにより、長い「キュー」の存在は確認されず、ほとんどのページは数分以内にレンダリングされた。

誤解4: 「JavaScriptを多用するサイトはページ発見が遅くなる」

クライアントサイドレンダリング（CSR）を使用するサイトがGoogleによって発見されるのが遅くなるという誤解がある。

テスト

JavaScriptがページ発見に与える影響を調査するために、以下のアプローチを取った。

1. リンク発見のレンダリングシナリオ比較: サーバーサイドレンダリング、静的生成、クライアントサイドレンダリングのページでのリンク発見速度を比較。
2. 非レンダリングJavaScriptペイロードのテスト: JSONオブジェクトを使用して新しいリンクを含むページでのリンク発見速度をテスト。
3. 発見時間の比較: HTMLリンク、クライアントサイドレンダリングコンテンツ、非レンダリングJavaScriptペイロードのリンク発見速度を監視。

結果

1. Googleは完全にレンダリングされたページでのリンクを正しく発見・クロールする。
2. 非レンダリングJavaScriptペイロード内のリンクも正しく発見される。
3. リンクのソースやフォーマットは、Googleがクロールを優先する際に影響を与えない。

これにより、JavaScriptを多用するサイトでもページ発見が遅くならないことが確認された。

全体的な影響と推奨事項

この記事の研究により、GoogleのJavaScriptを多用するウェブサイトの処理に関するいくつかの一般的な誤解が解消された。以下は、主な知見と実行可能な推奨事項である。

影響

1. JavaScript互換性: Googleは、複雑なSPAや動的に読み込まれるコンテンツを含むJavaScriptコンテンツを効果的にレンダリングおよびインデックスできる。
2. レンダリングの均等性: Googleは、JavaScriptを多用するページと静的HTMLページを基本的に同じように処理する。すべてのページがレンダリングされる。
3. レンダリングキューの現実: レンダリングキューは存在するが、その影響は以前考えられていたほど大きくない。ほとんどのページは数分以内にレンダリングされる。
4. ページ発見: JavaScriptを多用するサイト（SPAを含む）は、Googleによってページ発見が遅くならない。
5. コンテンツのタイミング: noindexタグなどの要素がページに追加されるタイミングが重要であり、Googleはクライアントサイドの変更を処理しないことがある。
6. リンク価値の評価: Googleは、リンクの発見と価値評価を区別する。後者はページ全体のレンダリング後に行われる。
7. レンダリングの優先順位: Googleのレンダリングプロセスは、厳密に先入れ先出しではない。コンテンツの新鮮さや更新頻度がJavaScriptの複雑性よりも優先されることが多い。
8. レンダリングパフォーマンスとクロール予算: GoogleはJSを多用するページを効果的にレンダリングできるが、静的HTMLに比べてリソースを多く消費するため、大規模サイト（10,000ページ以上）ではクロール予算に影響を与える可能性がある。

推奨事項

1. JavaScriptの活用: ユーザーと開発者のエクスペリエンス向上のためにJSフレームワークを自由に活用し、パフォーマンスを優先し、Googleの遅延読み込みのベストプラクティスに従う。
2. エラーハンドリング: Reactアプリケーションでエラーバウンダリーを実装し、個々のコンポーネントのエラーによる全体のレンダリング失敗を防ぐ。
3. 重要なSEO要素: 重要なSEOタグやコンテンツをサーバーサイドレンダリングまたは静的生成で提供し、初期HTMLレスポンスに含める。
4. リソース管理: レンダリングに必要なリソース（API、JSファイル、CSSファイル）がrobots.txtでブロックされていないことを確認する。
5. コンテンツの更新: 迅速に再インデックスされる必要があるコンテンツは、クライアントサイドのJSだけでなく、サーバーサイドレンダリングされたHTMLにも反映する。インクリメンタル静的再生成（ISR）などの戦略を検討する。
6. 内部リンクとURL構造: 明確で論理的な内部リンク構造を作成し、重要なナビゲーションリンクをJavaScriptベースではなく、実際のHTMLアンカータグで実装する。
7. サイトマップ: サイトマップを定期的に更新し、大規模なサイトや頻繁に更新されるサイトでは、XMLサイトマップの<lastmod>タグを使用してGoogleのクロールとインデックス作成プロセスをガイドする。
8. モニタリング: Google Search ConsoleのURL検査ツールやリッチリザルトツールを使用して、Googlebotがページをどのように見るかを確認し、クロール統計を監視して選択したレンダリング戦略が予期しない問題を引き起こしていないか確認する。

これらの推奨事項に従うことで、JavaScriptを多用するサイトでもGoogleによる効果的なクロールとインデックス作成が可能となる。

詳細はHow Google handles JavaScript throughout the indexing process – Vercelを参照していただきたい。