AISeeWhy
JA
無料トライアル

AIクローラーはJavaScriptで描画されたコンテンツを読める？

公開日

結論

多くの場合、読めません。GooglebotはJavaScriptを後の段階でレンダリングしますが、ほとんどのAIクローラーはそうしているとは明記しておらず、Google自身もすべてのボットがJavaScriptを実行できるわけではないと述べています。テキストがスクリプトの実行後にしか現れないと、AIクローラーは空のページを受け取る可能性があります。主要なコンテンツは、サーバーサイドレンダリングか静的ページで、最初のHTMLに含めてください。

シングルページアプリやクライアントサイドのフレームワークはどこにでもあり、ブラウザでは問題なく見えます。しかし、サーバーが送るHTMLだけを読むクローラーが目にするのは別のものです。<div id="root"></div>といくつかのscriptタグだけで、テキストはほとんどない、またはまったくありません。AIの回答にとって、そのページには引用できるものがありません。

このページの内容
  1. AIクローラーがJavaScriptのコンテンツを見逃すのはなぜか
  2. クローラーが受け取る内容はどう確認する？
  3. 特にリスクが高いページは？
  4. JavaScriptだけのコンテンツはどう直す？
  5. ログイン、同意、ペイウォールの画面もAIクローラーをブロックする？
  6. AISeeWhyはJavaScriptだけのページをどう検出するのか

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

JavaScriptの実行には負荷がかかります。クローラーはスクリプトをダウンロードし、ブラウザエンジンで実行し、データの読み込みを待つ必要があります。Googleは検索のためにこれを行っています。クロールし、ページをレンダリングの待ち行列に入れ、リソースに余裕があるときにヘッドレスChromiumでレンダリングします。それでもGoogleは、ユーザーにもクローラーにも高速であることから、サーバーサイドレンダリングかプリレンダリングを推奨しており、すべてのボットがJavaScriptを実行できるわけではないとも述べています。

OpenAI、Anthropic、Perplexityは、クローラーのドキュメントの中で、自社のエージェントがJavaScriptを実行するとは述べていません。Appleは、Applebotがページをブラウザでレンダリングすることがあると述べています。明確な記述がない以上、AIクローラーは最初のHTMLだけを読むと考えておくのが安全です。

クローラーが受け取る内容はどう確認する？

レンダリング後のページではなく、生のHTMLを見てください。ブラウザの開発者ツールに表示されるのはスクリプト実行後のDOMで、クローラーが受け取るものではありません。ソース表示を使うか、コマンドラインで生のHTMLを保存して検索します。

curl -s -o page.html \
  -A "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko); compatible; GPTBot/1.4; +https://openai.com/gptbot" \
  https://example.com/page

# Is a sentence from your main text in the raw HTML?
grep -c "a sentence from your main content" page.html

結果が0なら、その文はサーバーが送ったHTMLに含まれておらず、スクリプトを実行しないクローラーには見つかりません。ファイルをざっと見れば、残りもわかります。サーバーサイドでレンダリングされた記事には全文がそこにあり、クライアントサイドの枠だけのページには、空のルート要素とスクリプトの一覧があります。

特にリスクが高いページは？

JavaScriptだけのコンテンツはどう直す？

解決策は、重要なコンテンツを最初の応答で送ることです。使っているスタックで可能な、最も軽い方法を選んでください。

アプリ全体を一度に変換する必要はありません。引用されたいページから始めてください。記事、ドキュメント、製品ページ、料金ページです。アカウント画面やダッシュボードは、どのみちログインの向こう側にあるため、クライアントサイドのままで構いません。

ユーザーエージェントによって、クローラーにユーザーと異なるページを出すことは避けてください。全員に同じHTMLをレンダリングするほうが保守しやすく、クローキングの疑いも生じません。

ログイン、同意、ペイウォールの画面もAIクローラーをブロックする？

ブロックします。クローラーはログインせず、Cookieバナーをクリックせず、チャレンジも解きません。AnthropicはCAPTCHAを回避しようとしないと述べています。同意管理ツールがHTML内でページを全画面のオーバーレイに置き換えたり、初めての訪問者を同意ページにリダイレクトしたりすると、クローラーにはあなたのコンテンツではなく、それが渡されます。

公開ページは、同意の状態にかかわらずコンテンツをHTMLにレンダリングし、バナーは置き換えではなくオーバーレイにしてください。引用されたいページはログインの壁の外に置き、クローラーがサインインページにリダイレクトされていないことを確認します。

AISeeWhyはJavaScriptだけのページをどう検出するのか

AISeeWhyは、スクリプトを実行せずに、各クローラーが受け取る最初のHTMLを読みます。ページに見えるテキストがほとんどなく、フレームワークのルート要素とスクリプトがある場合は、コンテンツにJavaScriptが必要だとして、P1の指摘を報告します。また、ブラウザが取得するページとは別の場所にクローラーを送るリダイレクトも指摘します。

よくある質問

GooglebotはJavaScriptをレンダリングする？

します。GoogleはHTMLをクロールし、ページをレンダリングの待ち行列に入れ、リソースに余裕があるときにヘッドレスChromiumでレンダリングします。それでもGoogleは、サーバーサイドレンダリングかプリレンダリングを推奨しています。

ChatGPT、Claude、PerplexityのクローラーはJavaScriptを実行する？

各ベンダーのクローラーのドキュメントには、そうとは書かれていません。ベンダーが別の見解を示すまでは、クローラーは最初のHTMLを読むものと考え、コンテンツがそこに含まれるようにしてください。

ボット向けのダイナミックレンダリングは良い方法？

つなぎとしては機能しますが、保守すべきレンダリング経路が2つ目になります。サーバーサイドレンダリングや静的HTMLは全員に同じコンテンツを出せるため、長期的にはより簡単な解決策です。

JavaScriptで追加したJSON-LDは有効？

Googleはレンダリング後に読めますが、スクリプトを実行しないクローラーには見えません。JSON-LDは最初のHTMLに入れてください。

参考資料

ほかの記事