Googleで検索1位を獲得していても、ChatGPTからは見えない可能性がある

GoogleのクローラーはJavaScriptを実行し、レンダリングされたHTMLをインデックスに取り込むため、クライアントサイドでレンダリングされたサイトであっても検索結果の1ページ目に表示させることができます。しかし、同じページであっても、ChatGPTやBingのAI検索を通じてクエリを投げると、そのサービスを動かしているボットがJavaScriptを実行しないため、ページは消えてしまいます。その結果、検索順位は高いものの、どのAIアシスタントからも見つけ出せないサイトが生まれてしまうのです。

なぜAIクローラーはコンテンツを見逃すのか

最も広く利用されている2つのAIクローラー、OpenAIのGPTBotとAnthropicのClaudeBotは、JavaScriptを全くレンダリングしません。VercelとMERJによる2024年12月の調査によると、両方のボットは生のHTMLとリンクされたJavaScriptファイルをダウンロードするだけで、そこで停止します。スクリプトは実行されないため、ボットには空のシェル（中身のない枠組み）しか見えません。

対照的に、Googlebotはページをキューに入れ、スクリプトを実行し、その結果得られるDOMをインデックス化します。この根本的な違いにより、純粋なクライアントサイド・フレームワーク（React、Vueなど）で構築されたサイトは、Googleには完全に表示される一方で、AI駆動の検索においては空白の状態のままになってしまう可能性があります。

Google vs. AI：レンダリングのギャップ

Googleは長年にわたり、ヘッドレス・レンダリングに投資してきました。Googleのボットは、複雑なシングルページアプリケーション（SPA）を処理し、ハイドレーションを行い、初期ロード後に表示される構造化データを抽出できます。しかし、AIクローラーは依然として「ダウンロードのみ」のモードにあります。react-helmetなどのツールを介して注入されたJSON-LDを解析する場合もありますが、それはそのマークアップが生のHTML内に存在する場合に限られます。

開発者ツールは誤解を招くことがあります。ChromeのElementsパネルはJavaScriptが実行された後のページを表示するため、マークアップがソースの一部であるという誤った印象を与えます。「ページのソースを表示」（またはブラウザを使わないcurl）を使用すると、ボットが実際に受け取っている内容が明らかになります。もしそこにコンテンツや構造化データが欠けていれば、AIクローラーがそれを見つけることは決してありません。

この問題がどのように現れるか

クライアントサイド・レンダリングに依存する典型的なReactサイトは、「best coffee maker（最高のコーヒーメーカー）」や「how to fix a leaky faucet（蛇口の水漏れの直し方）」といったキーワードでGoogleで上位にランクインします。しかし、ChatGPTに「最高のコーヒーメーカーは何ですか？」と尋ねるユーザーに対しては、そのサイトを完全に無視した回答が返されます。同じギャップは、ChatGPTのエージェント・クエリの約92%を担うBingのAIにも存在します。BingのJavaScriptレンダリング機能は限られているため、クライアントサイドのみのサイトは、主要な2つのAI検索プロバイダーの両方から見えなくなってしまう可能性があります。

この問題は、静かに進行します。Googleの順位を追跡するSEOダッシュボードは良好なポジションを報告しますが、AIアシスタントからのサイトトラフィックはゼロのままです。この乖離は、特に多くのユーザーが迅速な回答を得るために会話型インターフェースに頼るようになる中で、ビジネスにとって発見トラフィック（discovery traffic）のシェアを失うことにつながります。

開発者が陥っている間違い

多くのチームは、「Googleがページを読めるなら、どんなクローラーでも読めるはずだ」と思い込んでいます。彼らはしばしば、以下のような行動をとります：

  • ページ読み込み後にJSON-LDを注入するためにreact-helmetや同様のライブラリに頼り、マークアップが「そこにある」と信じ込んでいる。
  • ブラウザのElementsビューでのみテストし、生のソースコードを確認していない。
  • 単純なcurlチェックを怠り、見出しや重要なフレーズが初期のHTMLレスポンスに含まれていないという事実を見逃している。

これらの慣行は、SEOが健全であるという錯覚を与えながら、AI検索に対してサイトを盲目な状態にさせてしまいます。

解決策

解決策は、最初のHTTPレスポンスで実際のコンテンツを配信することです。実証済みの3つのアプローチがあります：

  • サーバーサイド・レンダリング (SSR) – サーバーがJavaScriptを実行して完全なHTMLをレンダリングし、クライアントに送信します。ページはすでにコンテンツが充填された状態で届きます。
  • 静的生成 (Static Generation) – ビルド時に、フレームワークがすべてのコンテンツを含む静的なHTMLファイルを作成します。実行時のレンダリングは不要です。
  • プリレンダリング (Prerendering) – ミドルウェア・サービスがページを一度レンダリングして結果をキャッシュし、クローラーに静的なスナップショットを提供します。

Next.js (React) や Nuxt (Vue) などのフレームワークは、これらの手法を標準でサポートしています。純粋なクライアントサイド・バンドルから上記の手法のいずれかに切り替えることで、GooglebotとAIクローラーの両方が同じコンテンツを見ることを保証できます。

簡単な動作確認テスト：

curl -s https://yourpage.com | grep "your headline text"

もしコマンドの結果が何も返ってこない場合、見出しは生のHTMLに含まれておらず、AIボットは見逃してしまいます。

今後の展望

現状は明らかなミスマッチです。Googleのレンダリングエンジンは高度ですが、AIクローラーはそうではありません。このギャップを明らかにした調査はわずか数ヶ月前のものであり、OpenAIとAnthropicの両社とも、インデックス作成パイプラインの改善に関心を示しています。しかし、完全なJavaScript実行がすぐに導入されることを保証する公開ロードマップはまだありません。

その間に、この問題を放置することによる代償は変化しています。10年前、そのペナルティはGoogleのインデックス登録の遅れでしたが、今日では、最も急速に成長している発見チャネルであるAI駆動型検索からの除外となっています。オーガニックトラフィックに依存している企業は、ソースコードを確認できるツールでページを監査し、可能な場合はSSRや静的生成を採用し、AI特有のインデックス作成レポートが利用可能になり次第、それを監視すべきです。

要点: Googleのランキングでは完璧に見えるサイトでも、クライアントサイドレンダリングのみに依存している場合、ChatGPTやBing AIからは見えない可能性があります。SSR、静的生成、またはプリレンダリングを通じて、初期HTMLでコンテンツを配信することで、そのギャップを埋め、従来の検索とAI検索の両方における発見性を確保できます。