AIクローラー JavaScript の落とし穴:ChatGPT がページを空っぽに見るとき
結論: AIクローラー JavaScript の関係は単純です。スクリプトを実行しないボットが見るのは、サーバーが返す HTML だけです。テキストをブラウザーの中で組み立てるサイトでは、その HTML が空の外枠にすぎないことがあります。Vercel と MERJ による2024年12月の計測では、主要な AI クローラーはどれも JavaScript を実行せず、Google のクローラーと AppleBot は実行していました。これは2024年時点のスナップショットです。自分のページで確かめ、主要なコンテンツを HTML 自体に入れてください。サーバーでレンダリングするか、事前に生成します。
クローラーはどうやってページを取得するのか
どの取得も、サーバーへのリクエストから始まり、返ってくるのは HTML です。そのあとに起きることで、ページのどれだけが届くかが決まります。ブラウザーは、HTML が指すスクリプトを読み込んで実行し、結果を表示します。クローラーは最初の HTML だけで止まることがあります。あるいはレンダリングします。スクリプトを実行し、待ってから、読み取ります。
サーバーがテキストを送っていれば、どちらでも同じコンテンツに行き着きます。ページがブラウザーの中で組み立てられる場合、最初の HTML にはほとんど何も入っていません。Google のドキュメントはこれを「App Shell」モデルと呼んでいます。JavaScript を使わないボットが受け取るのは、おおよそ次のようなものです。
<body>
<div id="root"></div>
<script src="/app.js"></script>
</body>
見出し、本文、商品リスト、リンクは、/app.js が実行されてからやっと現れます。すべてのクローラーがこれを実行するわけではなく、問題の核心はそこにあります。
Google は JavaScript をどう扱うか
Google は簡単なケースです。JavaScript SEO の基本のドキュメントには、次のように書かれています。
- Google 検索は「evergreen」な(常に最新に保たれる)Chromium で JavaScript を実行する。
- ページは、クロール、レンダリング、インデックス登録の3段階を通る。
- ステータス 200 のページはレンダリング待ちのキューに入り、数秒またはそれ以上かかることがある。404 など 200 以外のステータスのページは、レンダリングが省略されることがある。
- title、メタディスクリプション、canonical は JavaScript で設定してよい。
同じページには、この記事が必要な理由も書かれています。Google は、サーバーサイドレンダリングや事前レンダリングは今でも良い方法だとしています。ユーザーにもクローラーにもページが速くなり、すべてのボットが JavaScript を実行できるわけではないからです。つまり「Google にインデックスされている」ことは、「すべてのボットが読める」ことを意味しません。
AIクローラー JavaScript:確認されていること
最もよく知られた計測は Vercel と MERJ によるもので、2024年12月に The rise of the AI crawler という題で公開されました。結果は、主要な AI クローラーはどれも JavaScript を実行しなかった、というものです。調査は、その中に GPTBot、OAI-SearchBot、ChatGPT-User、ClaudeBot を挙げています。Googlebot(調査では Gemini 向けとして記載)と AppleBot は JavaScript をレンダリングしていました。
この結果には、2つの注意を添える必要があります。1つ目は、これが2024年のスナップショットであり、引用できる新しい計測がないことです。クローラーは変わるので、法則ではなく警告として受け止めてください。2つ目は、これがボットが何を読むかを示すだけで、ページが回答で引用されるかどうかは示さないことです。引用は、JavaScript の有無にかかわらず、誰にも約束できません。
ボットごとに役割は異なります。提供元は次のように説明しています。
| 提供元 | ボット | 提供元による目的 |
|---|---|---|
| OpenAI | GPTBot | 生成 AI の基盤モデルの学習 |
| OpenAI | OAI-SearchBot | ChatGPT での検索 |
| OpenAI | ChatGPT-User | ユーザーの依頼による取得(例:ChatGPT での質問) |
| Anthropic | ClaudeBot | 学習に寄与しうる Web コンテンツの収集 |
| Anthropic | Claude-SearchBot | 検索結果の品質向上 |
| Anthropic | Claude-User | ユーザーが Claude に質問したときの取得 |
| Perplexity | PerplexityBot | Perplexity の検索結果にサイトを表示してリンクする |
出典は OpenAI、Anthropic、Perplexity です。Perplexity には、ユーザーの依頼による取得用の別のボットもあります。AI 検索の回答を支えるボットが HTML しか読まないなら、空の外枠しかないページには引用できるものがありません。どのボットがスクリプトを実行するかは、まさに2024年の調査が測ったことであり、自分のページで確認すべきことでもあります。
影響を受けるのはどんなサイトか
サーバーが送る HTML に、テキストやリンクが存在しなければ、影響を受けます。
- ブラウザーの中で完全に組み立てられるページ。 サーバーは外枠とスクリプトのバンドルを返し、スクリプトが見出し、本文、ナビゲーションを書きます。
- スクリプトがあとから読み込むコンテンツ。 商品リスト、価格、レビュー、タブ、「もっと見る」など、ページの読み込み後に API 呼び出しで届くものです。
- スクリプトの実行後にしか存在しないリンク。 JavaScript を使わないクローラーがたどれるのは、HTML にあるリンクだけです。SEOgrinder 自身のサイトクロールも、ブラウザーの中で初めて生まれるリンクはたどれないと注記します。
- スクリプトが設定する title、description、canonical、Open Graph タグ。 Google は受け入れますが、スクリプトを実行しないボットは見られません。
サーバーがすでにテキストを送っているなら、影響はありません。メニュー、グラフ、計算機のような対話的な部分は、ブラウザーで組み立てて構いません。
1分でできる3つのテスト
調べるのに道具は要りません。3つのテストはどれも同じ問いに答えます。サーバーが送る HTML に、自分のテキストはあるか。
- ページのソースを表示する。 ページを開き、「ページのソースを表示」を選びます(Ctrl+U、Mac では Cmd+Option+U)。「検証」は使わないでください。検証ツールは、スクリプトが実行されたあとのページを表示するためです。ページで読める1文を、ソースの中で検索します。
- curl でページを取得する。 ターミナルで
curl -sL https://example.com/your-page | grep -io "ページ内の短い語句"を実行します。語句は自分のページから取ってください。表示されれば HTML にあります。ただしscript要素の中にだけあるものは数えません。何も出なければ、まず表記と特殊文字を確認します。それでも出なければ HTML にはありません。 - JavaScript を無効にする。 開発者ツールを開き、コマンドメニューを呼び出します(Ctrl+Shift+P、Mac では Cmd+Shift+P)。「JavaScript」と入力して「JavaScript を無効にする」(英語表示では Disable JavaScript)を選び、ページを再読み込みします。主要なコンテンツが消えたなら、JavaScript を使わないボットも同じものを見ています。
結果の読み方です。
| 見えるもの | 意味 |
|---|---|
| 語句がソースにも curl の出力にもある | テキストは配信される HTML に入っている。この部分は問題なし |
| 語句がソースにはないが、ブラウザーでは見える | ページはブラウザーの中で組み立てられている。スクリプトを実行しないボットにテキストは見えない |
限界も2つあります。curl が示すのは、サーバーが curl に送るものであり、特定のボットに送るものではありません。たとえばファイアウォールがボットを別扱いしている場合です。また、Google がレンダリングした結果を見るには、Google Search Console の URL 検査を使います。
直し方:コンテンツを HTML に入れる
目標は、見出し、本文、内部リンクがソースに見える状態にすることです。一般的な方法は2つあります。
- サーバーサイドレンダリング(SSR)。 サーバーがリクエストごとに完成した HTML を作ります。
- 事前レンダリング(静的生成、SSG とも呼ばれる)。 ビルド時などにあらかじめページを生成しておき、サーバーはファイルを返すだけにします。
どちらも、最初のレスポンスにコンテンツが入ります。そのうえで、次の点を心がけます。
- 重要なページから始める。 全面的な作り直しはめったに必要ありません。順位を狙うページや、引用されたいページから始めます。
- 要点を最初の HTML に入れる。 title、メタディスクリプション、canonical、Open Graph タグ、本文、そして本物の
<a href>要素で書いたナビゲーションリンクです。 - クローラーにも訪問者にも同じコンテンツを見せる。 Google は、ボットに事前生成した版を渡す「ダイナミックレンダリング」を、あくまで回避策として挙げています。クローラーに訪問者と違うものを見せるのはクローキングです。
- 結果をソースで確認する。 変更後に3つのテストを繰り返します。
これで順位が保証されるわけではありません。技術的な障害を1つ取り除くだけです。
SEOgrinder がブラウザー内でしか組み立てられないページを見つける方法
SEOgrinder が見るのは、サーバーが返す HTML であって、ブラウザーがそれをどう処理するかではありません。アドレスを入力して分析を開始すると、タスク タブに、効果の大きい順でタスクが並びます。このテーマに関わる検出結果は3つです。
- ページがブラウザー内でしか組み立てられていない。 配信される HTML に語数、見出し、内部リンクがいくつあるかを示し、Google はこの種のページを時間差でレンダリングすること、多くの AI クローラーはほぼ空のページを見ることを記載します。
- 「N ページがブラウザー内でしか組み立てられていません」。 サイトクロールで、何ページがほぼ空の HTML の外枠を返すかを報告します。noindex のページと、ログイン・登録ページは数えません。
- 「ログイン・登録ページ N 件がブラウザで初めて作られます」。 たいていは問題ありません。サーバーサイドレンダリングなしでも、訪問者には動くからです。順位を狙うなら、サーバーでレンダリングしてください。
修正したら 再チェック を押します。レポートは最大24時間キャッシュされ、このボタンは新しい実行を強制します(1時間に数回まで)。AI に渡す は、レポートを Claude Code、Cursor、GitHub Copilot といったコーディングエージェント向けの Markdown の作業指示書にします。検出結果ごとに、確認できる達成条件が1つずつ付きます。
SEOgrinder がやらないこともあります。ChatGPT・Gemini・Perplexity が実際にブランドを挙げるかどうかは測りません。確認するのは技術的な土台、つまりコンテンツがそもそも読めるかどうかです。
よくある間違い
- 「ページのソースを表示」ではなく「検証」でテストする。 検証ツールはスクリプトの実行後の結果を表示しますが、それは JavaScript を使わないボットが受け取れないものです。
- 「Google にインデックスされているから、すべてのボットが読める」と結論づける。 Google 自身のドキュメントが、すべてのボットが JavaScript を実行できるわけではないと述べています。
- title やメタタグをスクリプトでしか設定しない。 Google は許可していますが、スクリプトを実行しないボットは見られません。最初の HTML に入れてください。
- クリックハンドラだけのリンク。 本物の
<a href>リンクを使えば、クローラーはスクリプトなしでたどれます。 - ダイナミックレンダリングを恒久的な計画にする。 Google はこれを回避策と呼んでいます。
- 未知のアドレスすべてに、外枠とステータス 200 を返す。 クライアントサイドレンダリングのアプリでよくある設定で、こうしたページは Soft 404 と扱われることがあります。存在しないアドレスには 404 を返してください。
- robots.txt でボットを許可しながら、ファイアウォールで拒否する。 テキストはあるのに、ボットはエラーを受け取ります。SEOgrinder にはこのケース専用の検出結果があります。「AI クローラーは許可されているのに、サーバーが拒否しています — 要確認」です。AIクローラー robots.txt の設定 もあわせてお読みください。
よくある質問
Google は JavaScript のページを見られますか?
たいていは見られますが、遅れます。Google は evergreen な Chromium で JavaScript を実行し、ステータス 200 のページはレンダリング待ちのキューで待ちます。インデックス登録は常に保証されるわけではありません。Google Search Console の URL 検査で、Googlebot が見ているものを確認できます。
サイトマップがあれば十分ですか?
いいえ。サイトマップは、どのアドレスがあるかをクローラーに伝えるだけです。そのページの HTML にテキストを入れてくれるわけではありません。
ChatGPT や Claude は JavaScript を実行しますか?
Vercel と MERJ の2024年の計測では、そこで挙げられた OpenAI と Anthropic のクローラーは実行していませんでした。引用できる新しい計測はないので、どちらの答えにも頼らず、自分のページでテストしてください。
サイト全体を作り直す必要がありますか?
必ずしもそうではありません。順位を狙うページや引用されたいページから、サーバーサイドレンダリングか事前レンダリングにするのが一般的な最初の一歩です。
次の一歩
重要なページを1つ選び、3つのテストを試してください。ソースにテキストがなければ、SEOgrinder で無料スキャンを実行し、タスク タブを開きます。重要なページから順に、サーバーでレンダリングするか事前に生成して直し、そのあと 再チェック を押しましょう。