AIクローラーはJavaScriptを実行しません。実際に何が見えているかを確認しましょう
ページをブラウザでレンダリングしている場合、ChatGPT、Claude、Perplexityには中身のない外枠しか見えていないかもしれません。その確認方法と、Next.jsやReactなどのフレームワーク別の対処法を解説します。
AIクローラーの多くは、サーバーが返すHTMLを読むだけで、それ以上は何もしません。製品ページのコンテンツを、ページの読み込み後にJavaScriptで組み立てている場合、GPTBotやClaudeBotのようなクローラーが受け取るのは、ヘッダーとフッター、読み込み中のスピナーだけのページかもしれません。読めない製品を推薦することはできません。
レンダリングするクローラー、しないクローラー
GooglebotはJavaScriptを実行します。ページをレンダリング待ちのキューに入れ、ブラウザに表示される内容をインデックスします。クライアントサイドでレンダリングするサイトでもGoogleで上位に表示できるのはこのためです。GeminiとGoogle AI OverviewsはGoogleのインデックスを利用するため、この性質を引き継ぎます。
ChatGPT、Claude、Perplexityの裏側で動くクローラーは事情が異なります。VercelとMERJが2024年に行ったクローラートラフィックの分析では、OpenAIとAnthropicのクローラーはJavaScriptファイルをダウンロードしていたものの、実行はしていませんでした。各社が別途ドキュメントで明らかにしない限り、これらのクローラーには生のHTMLしか見えていないと考えるべきです。
この差で、よくある疑問が説明できます。Googleでは上位に表示されるのに、自社のカテゴリについてのChatGPTの回答には一度も登場しないサイトがあるのは、これが原因です。
自社ページの確認方法
製品ページを開き、要素の検証ツールではなく「ページのソースを表示」を使います。検証ツールに表示されるのは、JavaScriptが実行された後のページです。ソースには、レンダリングしないクローラーが受け取る内容が表示されます。
見出しや価格など、ページ上に見えている文をソースの中で検索します。見つかれば、クローラーはそれを読めます。ソースにルートの<div>とscriptタグしかない場合、コンテンツはブラウザでレンダリングされています。
ターミナルからページを取得して確認することもできます。
curl -s https://yourdomain.com/pricing | grep -i "per month"一致する結果がなければ、その料金のテキストはJavaScriptを実行しないクローラーには届いていません。
Promptvaneの無料AI対応度診断は、ホームページとサイトマップから抽出したページについてこの確認を行い、HTMLにほとんどテキストがないページを指摘します。
フレームワーク別の対処法
目指すところはどのフレームワークでも同じです。最初のHTMLレスポンスでコンテンツを送ることです。
Next.jsのApp Routerでは、ページはデフォルトでServer Componentであり、サーバー上でレンダリングされます。問題が起きるのは、ページ全体に'use client'を指定し、useEffectでデータを取得している場合です。データの取得はServer Component（静的ページならgenerateStaticParams）に移し、'use client'はインタラクティブな部分だけに限定しましょう。
Next.jsのPages Routerでは、コンテンツページのデータをクライアント側で取得するのではなく、getStaticPropsまたはgetServerSidePropsを使います。
Viteで構築したReactやVueのシングルページアプリケーションでは、公開ページにプリレンダリングを追加するか、マーケティング用のページをNext.js、Nuxt、Astro、Remixなどサーバーでレンダリングするフレームワークに移します。
WordPress、Webflow、そして多くのホスティング型サイトビルダーは、すでにサーバーでレンダリングしています。ただし、レビューのカルーセルや料金表など、JavaScriptのウィジェット経由でコンテンツを読み込むページビルダーやプラグインは確認が必要です。
ほかの形で隠れてしまうコンテンツ
落とし穴はサーバーレンダリングだけではありません。タブやアコーディオンの中のコンテンツは、HTMLに含まれていれば問題ありませんが、タブをクリックしたときに初めて取得されるコンテンツは読まれません。画像内のテキストは、OCRを実行しないクローラーには見えません。サードパーティの決済スクリプトが差し込む価格は、ソースにまったく現れないことがよくあります。
FAQ
GooglebotがJavaScriptをレンダリングするなら、問題ないのでは？
Google検索については、おおむね問題ありません。ChatGPT、Claude、Perplexityについては、問題があります。これらのクローラーがJavaScriptを実行することは確認されていないため、レンダリング後にしか存在しないコンテンツは見えていない可能性が高いと言えます。
ホームページだけサーバーレンダリングすれば十分ですか？
いいえ。AIアシスタントが引用するのは通常、質問に答えているページです。料金ページ、比較ページ、機能紹介ページなどです。引用されたいすべてのページで、コンテンツがHTMLに含まれている必要があります。
サーバーレンダリングにするとパフォーマンスが落ちますか？
たいていは逆です。サーバーレンダリングや静的生成のページはコンテンツが早く表示されるため、Core Web Vitalsの改善にもつながります。