JavaScript で本文を描画しているサイトは、Google 検索に載っていても、ChatGPT や Claude のクローラには本文が届いていない場合があります。 Vercel と MERJ の調査は、主要な AI クローラはどれも現時点で JavaScript を描画していないと報告しました。 一方で Google 検索セントラルは、Google 検索が JavaScript を最新バージョンの Chromium で実行すると説明しています。 同じページでも、読みに来るクローラによって受け取る本文が変わります。
主要なAIクローラはJavaScriptを描画しない（Vercelの実測）
Vercel は MERJ と共同で、AI クローラが自社のネットワークにどうアクセスしているかを調べ、2024 年 12 月 17 日に公表しました。 この記事で「描画」と呼ぶのは、ブラウザと同じように JavaScript を実行し、その結果できあがったページを読むことです。
観察の対象はVercelのネットワークとnextjs.org
主なデータは、nextjs.org と Vercel のネットワークを過去数か月にわたって監視したものです。
技術の構成が違うサイトでも同じ傾向かを確かめるため、Next.js で作られた Resume Library と、独自のフレームワークで作られた CV Library という 2 つの求人サイトも分析しています。
Microsoft Copilot は、固有のユーザー エージェントを持たないため調査の対象から外れています。
直近 1 か月の取得件数は、GPTBot が 5 億 6,900 万件、Claude が 3 億 7,000 万件でした。
同じ期間の Googlebot は、Gemini と検索を合わせて 45 億件です。
JavaScriptを描画しないと名指しされたクローラ
調査は、主要な AI クローラのうち JavaScript を描画しているものは無いとまとめ、次のクローラを名指ししています。 描画できる側として挙がったのは、Googlebot の基盤を使う Gemini と、ブラウザ型のクローラを持つ AppleBot です。
| 運営元 | クローラ | JavaScript の描画 |
|---|---|---|
| OpenAI | OAI-SearchBot、ChatGPT-User、GPTBot | 描画しない |
| Anthropic | ClaudeBot | 描画しない |
| Meta | Meta-ExternalAgent | 描画しない |
| ByteDance | Bytespider | 描画しない |
| Perplexity | PerplexityBot | 描画しない |
| Common Crawl | CCBot | 描画しない |
| Google（Gemini） | Googlebot の基盤 | 描画する |
| Apple | AppleBot | 描画する |
ChatGPT と Claude のクローラは、JavaScript のファイルを取得してはいます。 Vercel と MERJ の調査では、取得に占める割合は ChatGPT が 11.50%、Claude が 23.84% ですが、どちらも実行はしていません。 調査は、これらのクローラはクライアント側で描画された内容を読めないと書いています。 ただし、最初の HTML の応答に含まれる JSON データや、遅れて届く React Server Components の中身は、AI のモデルが HTML 以外の内容も解釈できるため、インデックスされる可能性があるとも断っています。
GooglebotはJavaScriptを描画してからインデックスする
Google 検索セントラルの「JavaScript SEO の基本を理解する」によると、Google は JavaScript を使うウェブアプリを、クロール、レンダリング、インデックス登録の 3 つのフェーズで処理します。
robots meta タグなどでインデックス登録が禁止されていなければ、Googlebot は 200 の HTTP ステータス コードを返すページをすべてレンダリングのキューに入れます。
Google のリソースに空きができると、ヘッドレスの Chromium がページをレンダリングして JavaScript を実行します。
Google は、このレンダリングされた HTML を使ってページをインデックスに登録します。
最初のHTMLに本文が無いページはJavaScriptの実行が前提になる
Google は App Shell モデルを使うサイトについて、「最初は HTML に実際のコンテンツが含まれておらず、Google が JavaScript によって生成される実際のページ コンテンツを参照するには JavaScript を実行する必要があります」と説明しています。 Google 自身も同じページで、「bot によっては JavaScript を実行できないものもあるため」、サーバー側でのレンダリング（プリ レンダリング）を検討するよう勧めています。
Googlebotの描画は実測でもほぼ全件
Vercel と MERJ は 2024 年 7 月 31 日に別の調査を公表しており、2024 年 4 月の 1 か月間、nextjs.org などで Googlebot の取得を記録しました。
nextjs.org で分析した 10 万件を超える Googlebot の取得のうち、ステータス コードのエラーとインデックス対象外のページを除いた HTML ページは、100% がページ全体まで描画されていました。
最初のクロールから描画が終わるまでの時間は、中央値で 10 秒でした。
ただし 99 パーセンタイルでは約 18 時間かかっています。
JavaScriptを実行しなくても本文が届くかを確かめる手順
確かめるのは、JavaScript を実行する前の最初の HTML に、読ませたい本文が入っているかどうかです。 Google は、レンダリングされた HTML を確かめる方法として、リッチリザルト テストと URL 検査ツールを挙げています。 この 2 つが見せる「レンダリング後」と、最初の HTML を並べると差が分かります。
- 確かめたいページを決め、その本文から特徴のある一文を選ぶ
- 最初の HTML を取得し、選んだ一文が含まれているかを検索する（下のコマンドは一例）
- 同じ URL を URL 検査ツールかリッチリザルト テストで調べ、レンダリングされた HTML に同じ一文があるかを見る
- 3 にあって 2 に無い部分を、JavaScript を描画しない AI クローラに届いていない候補として書き出す
# 0 が返ったら、選んだ一文は最初の HTML に入っていない
curl -s https://example.com/menu | grep -c "選んだ一文"
最初のHTMLに入れておきたい要素
Vercel と MERJ の調査は、重要な内容をサーバー側で描画するよう勧め、その対象として本文、メタ情報、ナビゲーションの構造を挙げています。 反対に、必須でない動的な要素はクライアント側の描画のままでよいとしています。
| 要素 | 調査が挙げた例 | 置き場所 |
|---|---|---|
| 本文 | 記事、商品の情報、ドキュメント | サーバー側で描画する |
| メタ情報 | タイトル、説明、カテゴリ | サーバー側で描画する |
| ナビゲーション | サイト内を移動するリンクの構造 | サーバー側で描画する |
| 必須でない動的な要素 | 閲覧数のカウンター、操作を補う UI、ライブチャットのウィジェット、SNS のフィード | クライアント側の描画のままでよい |
ナビゲーションについては、Google も「Google がリンクを検出できるのは、href 属性が設定された <a> HTML 要素の場合のみです」と書いています。
構造化データは表に入っていませんが、Google は JSON-LD を JavaScript で生成してページに挿入できるとしています。
この方法で入れた構造化データは、JavaScript を描画しない AI クローラには届かないと考えられます。
SSRに移す前に、移すものと残すものを分ける
最初の HTML に本文を入れる方法としてまず挙がるのが、SSR（サーバーサイド レンダリング）です。
Vercel と MERJ の調査は、SSR、ISR、SSG のどれでも、すべてのクローラが内容を取得できるとしています。
ただし同じ調査は、ChatGPT や Claude に Next.js の最新のドキュメントについて尋ねても、nextjs.org のサーバーのログにすぐには取得が見えないことが多いとも書いています。
調査はこれを、AI のモデルがキャッシュや学習データに頼っている可能性を示すものと読んでいます。
本文を最初の HTML に移しても、AI の回答にすぐ反映されるとは限りません。
ダイナミック レンダリングはGoogleが推奨しない回避策
クローラにだけサーバーで描画した版を返す方法が、ダイナミック レンダリングです。 Google はこの方法を回避策と位置づけ、仕組みがより複雑になり、多くのリソースが必要になるため推奨される解決策ではないとしています。 代わりに勧めているのは、サーバーサイド レンダリング、静的なレンダリング、ハイドレーションのいずれかです。 ユーザーとクローラにまったく異なるコンテンツを出すと、クローキングと見なされる場合があるとも書いています。
Google検索のためだけなら、移す理由は小さい
Vercel と MERJ の Googlebot の調査は、描画の方式にかかわらず、Google はサイトをすばやく見つけてインデックスに登録すると結論づけています。 同じ調査の比較表では、クライアント側の描画（CSR）のページは、描画が失敗するとインデックスされないおそれがあるとされています。 ただし調査は、Google の描画はふだん失敗せず、失敗するときは robots.txt でブロックされたリソースか、特殊なケースが原因であることが多いとも書いています。
robots.txtの許可とは別の層の問題
Vercel と MERJ の AI クローラの調査では、robots.txt は測定したすべてのクローラに効いていました。 ただし、robots.txt で許可していても、最初の HTML に本文が無ければ、JavaScript を描画しない AI クローラに本文は届きません。 robots.txt も合わせて見直すなら、DigitalGOAT編集部の推奨は、触る前後に次の 4 項目を順に確かめることです。
- 現行の robots.txt を保存する
- 既存の
User-agentグループを一覧にし、足す行がどのグループに入るかを確かめる Disallow: /の対象が意図したユーザー エージェントだけかを確かめる- 反映後に Search Console の URL 検査で、検索用のクロールが止まっていないかを確かめる
OpenAI のクローラごとの許可の書き分けは「OpenAIのクローラとrobots.txtの書き分け」で扱っています。
まとめ：最初のHTMLに何が入っているかから始める
Vercel と MERJ の観察では、ChatGPT や Claude などの主要な AI クローラは JavaScript を描画していませんでした。 Googlebot はレンダリングされた HTML を使ってインデックスに登録するので、Google 検索に載っていることは AI クローラに本文が届いている証拠になりません。 確かめるのは最初の HTML で、URL 検査ツールが見せるレンダリング後の HTML と比べると、届いていない部分が分かります。
この記事の手順を終えると、自分のサイトで最初の HTML に無い要素が書き出せている段階にいます。 次は、その中から AI の回答に使われたい本文を選び、サーバー側の描画へ移す対象を絞る段階です。