AIクローラーとJavaScript｜描画が後からのサイトは読まれるのか、確認方法と対策

「Googleの検索結果には出るのに、ChatGPTやPerplexityに聞くと、うちのサービスの説明がほとんど出てこない」。

ReactやVueで作ったサイトや、ノーコードツールで作ったサイトを運営していると、こう感じる場面があるかもしれません。

原因の一つとして考えられるのが、本文がJavaScriptで後から描画されていて、AIのクローラーがその本文を受け取れていない状態です。

この記事は、Web担当者の方が自分のサイトで状態を確かめ、必要なら制作会社やエンジニアに具体的な対策を依頼できるように書きました。

扱う内容は、Googleと各AIクローラーの違い、Vercelの調査、4つの確認方法、対策の選び方、主なフレームワークの考え方、チェックリストです。

AI検索の全体的な点検は、別の記事にチェックリストとしてまとめています。

AI検索対策の自己診断チェックリスト46項目

この記事は、その中の「技術面」を一段深く扱います。

公式ページと調査記事は、2026年10月17日に開いて確かめました。対策の優先順位は、筆者の考えとして書き分けます。

先に結論：本文は「最初のHTML」に入れておく

要点を先に表にします。

論点	確認できたこと	実務上の意味
Googlebot	JavaScriptを実行して描画する	Google検索では、後から描画する作りでも本文が認識される仕組みがある
Googleの助言	サーバー側の描画や事前の描画は、依然として良い方法。すべてのボットがJavaScriptを実行できるわけではない	Google以外のボットも想定して作る
ChatGPTやClaudeのクローラー	公式の説明ページに、JavaScriptの実行についての記載は見当たらない	実行する前提で作らない
Vercelの調査（2024年12月公開）	調査時点で、主要なAIクローラーはJavaScriptを描画していなかった	後から描画される本文は、受け取れない可能性がある
確認方法	「ページのソース」とcurlで、最初のHTMLを見られる	今日から、費用をかけずに確かめられる

つまり、本文、会社情報、サービス内容、問い合わせ先、構造化データは、JavaScriptなしで読める最初のHTMLに入れておくのが確実です。

用語は、できるだけその場で説明します。

JavaScriptは、ブラウザの中で動いて、画面を組み立てたり切り替えたりするプログラムのことです。クローラーは、Webページを自動で集めて回るプログラムのことです。

読む順番の目安

技術に詳しくない方は、確認方法の章だけ読めば、状態をつかめます。

制作会社やエンジニアに依頼する立場の方は、対策の章の表とチェックリストを、そのまま依頼文の下書きに使えます。

自分でサイトを作っている方は、フレームワーク別の章まで読み進めてください。

この記事の前提

Vercelの調査は、2024年12月に公開されたものです。2026年10月の各社クローラーの挙動を保証するものではありません。

AIクローラーの仕組みは、短い期間で変わる分野です。数字や名前は、この記事を読む時点で、公式ページの最新の内容と見比べてください。

それでも、この記事の結論は変わりません。「実行しないクローラーがある前提」で作っておけば、実行するクローラーにも問題なく読まれるからです。

この記事で使った情報源

情報源	確かめた内容
The rise of the AI crawler（Vercel）	AIクローラーのリクエスト数、JavaScript描画の有無、推奨事項
JavaScript SEOの基本（Google）	3段階の処理、描画の待ち行列、サーバー側描画の助言
JavaScriptの問題の解決（Google）	確認に使うツール、ソフト404の対処、リンクの書き方
ダイナミックレンダリング（Google）	長期的な解決策ではないという位置づけ
JavaScriptによる構造化データの生成（Google）	タグマネージャーなどでの生成方法
クローラーの説明ページ（OpenAI、Anthropic）	クローラーの役割とrobots.txtでの制御
各フレームワークの公式ドキュメント	Next.js、Nuxt、Astro、Reactの描画方式

「JavaScriptで本文を描画する」とはどういう状態か

最初のHTMLと、描画後の画面は別物

ブラウザは、まずサーバーからHTMLを受け取ります。HTMLは、ページの骨組みになる文書です。

WordPressなどで作った従来型のサイトでは、この最初のHTMLに本文がすでに書かれています。

一方、ReactやVueで作ったSPA（1枚のHTMLの上でJavaScriptが画面を切り替える作り）では、最初のHTMLがほぼ空のことがあります。

<!DOCTYPE html>
<html>
  <head>
    <title>株式会社サンプル</title>
    <script src="/assets/main.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

<div id="root"></div>の中身は、ブラウザがmain.jsを実行して、はじめて埋まります。

人の目には普通のページに見えても、JavaScriptを実行しないプログラムからは、本文のない白紙のページです。

ブラウザの側でJavaScriptを使って画面を組み立てる方式を、CSR（クライアントサイドレンダリング）と呼びます。

上の図は、ページが読まれるまでの流れです。JavaScriptを実行しないクローラーは、2番目の「最初のHTML」までしか受け取れません。

Googlebotは、JavaScriptを実行する

Googleの公式ドキュメントでは、JavaScriptを使ったページを、クロール、レンダリング、インデックス登録の3段階で処理すると説明しています。

HTTPステータスが200のページは、noindexの指定がない限り、レンダリングの待ち行列に入ります。Googleの処理能力に余裕ができると、画面を持たないChromiumがJavaScriptを実行して描画します。

ページが待ち行列にとどまる時間は、数秒のこともあれば、それより長くなることもあると書かれています。

Google検索では、CSRのサイトでも本文が認識される仕組みがあります。

それでもGoogleは、サーバー側の描画を勧めている

同じドキュメントで、Googleは次の趣旨を述べています。サーバー側の描画や事前の描画は、ユーザーとクローラーの両方にとってサイトを速くするので、依然として良い方法です。

その理由として、すべてのボットがJavaScriptを実行できるわけではない、とも書かれています。

Google検索で表示されていることと、他のAIサービスに読まれていることは、分けて考える必要があります。

AIクローラーはJavaScriptを実行するのか

各社の公式ページで確認できること

OpenAIのクローラーの説明ページには、OAI-SearchBot、GPTBot、ChatGPT-Userの役割が書かれています。

OAI-SearchBotは、ChatGPTの検索機能にサイトを表示するためのものです。ChatGPT-Userは、ユーザーの質問に応じて、ページを開く場面で使われます。

AnthropicのヘルプにあるClaudeBot、Claude-User、Claude-SearchBotの説明も、役割とrobots.txtでの制御が中心です。

どちらのページにも、JavaScriptを実行するかどうかの記載は、2026年10月17日時点で見当たりませんでした。

記載がない以上、実行しない可能性を前提に備えるのが安全です。

Vercelの調査「The rise of the AI crawler」

この分野でよく引用される調査が、Next.jsの開発元であるVercelが、MERJ社と共同で2024年12月17日に公開した記事です。

Vercelのネットワーク上の実際のアクセスと、nextjs.orgなどの観測にもとづく分析です。

項目	調査の内容（2024年12月公開時点）
直近1か月のリクエスト数	GPTBotが約5億6,900万件、Claudeが約3億7,000万件、AppleBotが約3億1,400万件、PerplexityBotが約2,440万件
比較対象	Googlebotは約45億件（GeminiとGoogle検索の合計）
JavaScriptを描画していなかったもの	OpenAI（OAI-SearchBot、ChatGPT-User、GPTBot）、Anthropic（ClaudeBot）、Meta（Meta-ExternalAgent）、ByteDance（Bytespider）、Perplexity（PerplexityBot）
描画していたもの	Googleのクローラーの基盤を使うGemini、ブラウザ型のAppleBot
JavaScriptファイルの取得	nextjs.orgでは、ChatGPTのリクエストの11.50%、Claudeの23.84%がJavaScriptファイル。取得はしても、実行はしていなかった

調査では、ChatGPTとClaudeのクローラーは、JavaScriptのファイルを取得しても実行せず、クライアント側で描画される内容を読めない、と結論づけています。

ただし、最初のHTMLの応答にすでに含まれているJSONデータなどは、読まれる可能性があるとも書かれています。

調査は「その時点」の結果である

表の内容は、2024年12月公開の調査時点でそうだった、という結果です。2026年10月の挙動を示すものではありません。

その後、各社が仕組みを変えた可能性はあります。ただ、公式の発表は、今回の調べで見つけられませんでした。

筆者の考えでは、「今も実行しない」と断定する必要はありません。実行しないクローラーがある前提で作っておけば、実行するクローラーにも問題なく読まれます。

Vercelの調査は、サイト運営者への推奨も示しています。本文、タイトルや説明文などのメタ情報、ナビゲーションは、サーバー側で描画することです。

閲覧数のカウンターや、チャット窓口のような補助的な部分は、ブラウザ側の描画でもよいとされています。

本文が読まれないと、何が起きるのか

JavaScriptを実行しないクローラーにとって、CSRのページは「タイトルだけがあって中身のないページ」に見えます。

起こりうる影響を、表にまとめます。

影響	具体的な状態
本文が読まれない	サービス内容、所在地、問い合わせ方法が伝わらず、AIの回答の材料にならない
サイト内リンクをたどれない	メニューがJavaScriptで後から作られると、他のページを見つけにくい
構造化データが届かない	JSON-LDをJavaScriptで後から挿入していると、受け取れない
読み込み中の表示が本文に見える	「Loading…」だけが、ページの内容として受け取られるおそれがある

最後の例は、Next.jsの公式ドキュメントにも関連する記述があります。ブラウザ専用の部品が、初期のHTMLでは代わりの表示（フォールバック）になり、JavaScriptを実行しないクローラーにはそれが見える、という説明です。

自分のサイトを確認する4つの方法

確認は、トップページだけで終わらせないでください。サービス紹介、料金、会社概要、よくある質問、ブログ記事など、AIに読んでほしいページで行います。

方法1：「ページのソースを表示」で探す

1. Chromeでページを開く
2. ページ上で右クリックし、「ページのソースを表示」を選ぶ（Windowsは Ctrl+U、Macは Command+Option+U でも開ける）
3. 開いた画面で検索（Windowsは Ctrl+F、Macは Command+F）を使い、本文の特徴的な一文やサービス名を探す

見つかれば、その文章は最初のHTMLに入っています。見つからなければ、JavaScriptで後から描画されている可能性が高いです。

右クリックの「検証」で見えるHTMLは、JavaScriptを実行した後の状態です。判定には使わないでください。

方法2：JavaScriptを無効にして表示する

1. ページを開き、F12（Macは Command+Option+I）で開発者ツールを開く
2. コマンド入力欄を開く（Windowsは Ctrl+Shift+P、Macは Command+Shift+P）
3. 「Disable JavaScript」と入力して選ぶ
4. ページを再読み込みする

本文が表示されない、または真っ白になる場合は、JavaScriptを実行しないクローラーにも同じように見えていると考えてください。

終わったら「Enable JavaScript」で元に戻します。

方法3：curlで最初のHTMLを取得する

curl（カール）は、Webページの中身をそのまま取得するコマンドです。Macの「ターミナル」と、Windowsの「PowerShell」で使えます。

Windowsでは、curl.exeと入力してください。単にcurlと入力すると、別の機能が呼ばれる場合があります。

最初のHTMLを表示するコマンドは、次のとおりです。

curl -sL https://www.example.com/service/

-sは進行状況の表示を消す指定です。-Lは、転送先までたどる指定です。

本文中の言葉が含まれているかだけを調べるには、grepを組み合わせます。

curl -sL https://www.example.com/service/ | grep -c "サービスの特徴"

結果が0なら、その言葉は最初のHTMLに含まれていません。1以上なら含まれています。

数字は、その言葉を含む行の数です。

WindowsのPowerShellでは、grepの代わりにSelect-Stringを使います。文字化けを避けるため、いったんファイルに保存してから、文字コードを指定して検索します。

curl.exe -sL https://www.example.com/service/ -o page.html
Select-String -Path page.html -Pattern "サービスの特徴" -Encoding UTF8

一致した行が表示されれば、含まれています。何も表示されなければ、含まれていません。

構造化データ（JSON-LD）が最初のHTMLにあるかも、同じ方法で調べられます。

curl -sL https://www.example.com/ | grep -c "application/ld+json"

curlはJavaScriptを実行しません。そのため、JavaScriptを実行しないクローラーが受け取る内容に近いと考えられます。

アクセス元によって返す内容を変えているサイトでは、結果が異なることがあります。

セキュリティの設定でcurlが拒否され、エラー画面のHTMLが返ることもあります。その場合は、方法1か方法2で確認してください。

方法4：Googleの検索結果への反映を、URL検査ツールで比べる

GoogleのSearch Consoleにある URL検査ツールでは、Googleが描画した後のHTMLを確認できます。Googleの公式ドキュメントも、描画後のHTMLに期待した内容がすべてあるかを、URL検査ツールかリッチリザルトテストで確かめるよう案内しています。

URL検査ツールでは本文が見えるのに、ページのソースやcurlでは見えない。この場合は、Googleには読まれていても、JavaScriptを実行しないクローラーには読まれていない状態だと判断できます。

4つの方法の使い分け

方法	手間	分かること
ページのソースを表示	1分	最初のHTMLに本文があるか
JavaScriptを無効にして表示	3分	実行しないクローラーに近い見え方
curl	5分	最初のHTMLの全文。複数ページを順に確かめやすい
URL検査ツール	5分	Googleが描画した後の内容との差

まず方法1で、主要ページを順に確かめます。見つからないページがあれば、方法3と方法4で差を詳しく調べます。

対策：大事な情報を「最初のHTML」に入れる

目的は、JavaScriptを実行しなくても、本文や重要な情報がHTMLに含まれている状態にすることです。

主な方式を、表で比べます。

方式	仕組み	向いているページ	注意点
SSR（サーバー側の描画）	アクセスのたびに、サーバーでHTMLを組み立てて返す	価格や在庫など、頻繁に変わる公開ページ	サーバーの準備と運用が必要
SSG（静的サイト生成）	公開前に、全ページのHTMLを作っておく	会社概要、サービス紹介、ブログなど	更新のたびに、作り直しが必要
プリレンダリング	特定のページだけ、事前にHTMLを作っておく	SPAの中で、公開したいページだけを救いたい場合	対象ページの指定漏れに注意
ダイナミックレンダリング	クローラーにだけ、描画済みのHTMLを返す	既存の仕組みをすぐに変えられない場合	Googleは長期的な解決策ではないとしている

SSR、SSG、プリレンダリングを優先する

Googleの公式ドキュメントでは、ダイナミックレンダリングを回避策と位置づけています。長期的な解決策とは言えず、推奨もされていません。

代わりに勧められているのは、サーバー側の描画、静的な描画、ハイドレーションです。ハイドレーションは、サーバーで作ったHTMLに、ブラウザ側で動きを付け足す仕組みです。

改修するなら、SSRかSSGを基本に考えるとよいでしょう。これは、筆者の実務上の優先順位でもあります。

すべてを、サーバーで描画する必要はない

Vercelの調査も、補助的な部分はブラウザ側の描画でよいとしています。

最初のHTMLに必ず入れたいものは、次のとおりです。

• タイトルと説明文
• 見出しと本文
• 会社名、所在地、問い合わせ方法
• サービス内容、よくある質問と回答
• 主要ページへのリンク
• 構造化データ（JSON-LD）

JavaScriptによる後描画でもよいものは、次のとおりです。

• アニメーションやスライダーの動き
• ログイン後の画面や管理画面
• チャット窓口、地図、絞り込み検索などの操作部分
• 閲覧数のカウンター

リンクは、普通のaタグで書く

画面の切り替えをonclickだけで作ると、クローラーはリンク先を見つけられません。リンクは、行き先がHTMLに書かれた形にします。

<a href="/service/">サービス紹介</a>

また、Googleの公式ドキュメントは、#以降のフラグメントで別々の内容を出し分けることを避けるよう案内しています。History APIを使い、ページごとに通常のURLを持たせます。

Googleは、リンクを発見できるのは、href属性を持つa要素だけだとも説明しています。

noscriptは、本文の置き場にしない

noscriptは、JavaScriptが無効なときだけ表示される内容を書く、HTMLの要素です。ここに本文を書けばよいと考えがちですが、おすすめしません。

実際の画面と中身がずれやすく、管理の手間も増えます。各AIサービスがnoscriptの中身をどう扱うかも、筆者が確かめた範囲では公式の説明がありませんでした。

noscriptには、JavaScriptを有効にしてほしいという案内と、最低限の連絡先を書く程度にとどめます。本文そのものは、SSRやSSGで最初のHTMLに入れるのが本筋です。

構造化データも、最初のHTMLに入れる

Googleの公式ドキュメントでは、JavaScriptで生成した構造化データも、Googleが描画する際にページ内にあれば、処理できるとされています。方法として、Googleタグマネージャーとカスタムのスクリプトが挙げられています。

ただし、Google以外のクローラーまで考えるなら、JSON-LDは、サーバー側か静的なHTMLで出力するのが確実です。タグマネージャーで後から差し込む方法は、JavaScriptを実行しないクローラーには届かないためです。

構造化データの基本は、別の記事にまとめています。

中小企業の構造化データ入門

フレームワーク・制作ツール別の考え方

各ツールの公式ドキュメントで確認できた内容を、表にまとめます。確認は、2026年10月17日です。

ツール	公式ドキュメントで確認できたこと	実務上のポイント
React	新しく作るときは、フレームワークから始めることを勧めている。ルートごとにサーバー側の描画を足せる	素のSPAなら、公開ページだけでも移行やプリレンダリングを検討する
Next.js	App Routerでは、ページとレイアウトは標準でサーバーコンポーネント	本文のデータ取得も、サーバー側で行う
Nuxt	標準でユニバーサルレンダリング。本文がHTMLに含まれ、クローラーが直接読める	管理画面など、インデックス不要な部分だけssr: falseにする
Astro	標準で全ページをビルド時に事前描画し、ブラウザ側のJavaScriptを取り除く	会社サイトやブログのように、読ませる用途と相性がよい
WordPressなど	サーバー側でページを組み立てる	テーマやプラグインが後から読み込む部分を確認する

Next.jsとNuxtの設定例

どちらも公式ドキュメントの書き方に沿った例です。実際の設定は、使っているバージョンの公式ドキュメントで確かめてください。

Next.jsでは、公式ガイドが、構造化データをpage.jsやlayout.jsの中でscriptタグとして出力する方法を、現時点の推奨としています。

// app/service/page.tsx（例）
export default function Page() {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Service',
    name: 'Webサイト制作',
    provider: { '@type': 'Organization', name: '株式会社サンプル' },
  }
  return (
    <main>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c'),
        }}
      />
      <h1>Webサイト制作</h1>
      <p>（本文）</p>
    </main>
  )
}

replace(/</g, '\\u003c')は、公式ガイドが示す、悪意のある文字列の混入を防ぐ処理です。

Next.jsには、ブラウザでしか使えない部品を、事前の描画から外す設定もあります。

公式ドキュメントでは、その場合、初期のHTMLが代わりの表示になり、JavaScriptを実行しないクローラーにはそれが見えると説明しています。読まれてほしい内容は、ブラウザ専用の部分の外に置きます。

Nuxtでは、ルートごとに描画方式を分けられます。公開ページは事前に描画し、管理画面だけをブラウザ側の描画にする例です。

// nuxt.config.ts（例）
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/service/': { prerender: true },
    '/admin/': { ssr: false },
  },
})

Nuxtの公式ドキュメントは、ssr: falseにすると検索エンジンへの反映に時間がかかり、インデックスが要らない用途に向く、と説明しています。

ノーコードツールの場合

ノーコードツールは、出力されるHTMLがサービスごと、使う部品ごとに異なります。この記事では、特定のサービスの可否には触れません。

公開中のページを「ページのソースを表示」かcurlで開き、本文が入っているかを確かめてください。

入っていない部分があれば、公式ヘルプで「SEO」「サーバーサイドレンダリング」「静的書き出し」といった項目を探すか、サポートに問い合わせます。

よくある失敗

失敗	何が起きるか	対処
開発者ツールの「要素」で判断する	JavaScript実行後の状態を見ている	「ページのソースを表示」かcurlで見る
トップページだけ確認して安心する	料金やよくある質問だけが後描画のことがある	主要ページを順に確かめる
タブやアコーディオンの中身を後から取得する	開閉の裏の文章が、最初のHTMLにない	動きはJavaScriptでよいが、文章はHTMLに入れる
存在しないページで200を返す	Googleが「ソフト404」と呼ぶ状態になる	本当の404を返すか、noindexを付ける
robots.txtでJavaScriptやCSSを止めている	Googleがブロックされたファイルの描画をしない	ブロックしていないか確認する

ソフト404については、Googleの公式ドキュメントが、JavaScriptで404を返すページへ転送する方法と、noindexのメタタグを追加する方法を示しています。

実行チェックリスト

制作会社やエンジニアへの依頼にも、そのまま使えます。

確認のチェック

• [ ] 主要ページを「ページのソースを表示」で開き、本文が含まれている
• [ ] curlで取得したHTMLに、本文中の特徴的な一文が含まれている
• [ ] JavaScriptを無効にしても、本文と主要なリンクが表示される
• [ ] titleとmeta descriptionが、最初のHTMLに入っている
• [ ] JSON-LDが、最初のHTMLに入っている
• [ ] URL検査ツールの描画後のHTMLと、最初のHTMLの差が大きくない

作り方のチェック

• [ ] 公開ページは、SSR、SSG、プリレンダリングのいずれかで描画している
• [ ] 本文や重要情報を、ブラウザ専用の部品に入れていない
• [ ] 本文のデータ取得を、ブラウザ側だけで行っていない
• [ ] サイト内リンクは、href付きのaタグで書かれている
• [ ] URLはページごとに分かれており、#で内容を出し分けていない
• [ ] 存在しないページは、404を返す
• [ ] noscriptを、本文の代わりにしていない
• [ ] robots.txtで、JavaScriptやCSSのファイルをブロックしていない

よくある質問

Q1. Google検索に表示されていれば、AIにも読まれていると考えてよいですか？

そうとは言えません。GooglebotはJavaScriptを実行しますが、他のAIクローラーも同じとは、公式には示されていません。

Google検索とは別に、最初のHTMLに本文があるかを確認してください。

Q2. SPAをすべて作り直す必要がありますか？

必ずしも必要ありません。読んでほしいのは、主に会社概要、サービス紹介、料金、よくある質問、ブログなどの公開ページです。

これらだけをプリレンダリングやSSGにする、公開ページだけをNext.jsやNuxtなどに移す、といった段階的な方法もあります。ログイン後の画面は、ブラウザ側の描画のままで構いません。

Q3. AIのクローラーにだけ、描画済みのHTMLを返すのは問題ですか？

ダイナミックレンダリングと呼ばれる方法で、技術的には可能です。ただしGoogleは、これを回避策と位置づけ、推奨していません。

理由として、追加の複雑さと運用の負担が生じることが挙げられています。

すぐに改修できない場合の一時的な手段と考えてください。

Q4. JSON-LDをGoogleタグマネージャーで入れても大丈夫ですか？

Google検索では、描画の際にページ内にあれば処理されます。ただし、JavaScriptを実行しないクローラーには届きません。

AI検索まで考えるなら、サーバー側か静的なHTMLで出力するのが確実です。

Q5. AIクローラーが将来JavaScriptを実行するようになったら、この対策は無駄になりますか？

無駄にはなりません。最初のHTMLに本文がある状態は、どちらのクローラーにも読まれます。

Googleも、サーバー側の描画が、ユーザーとクローラーの両方にとってサイトを速くすると述べています。

まとめ

GooglebotはJavaScriptを実行します。一方、ChatGPTやClaudeなどのクローラーが実行するかは、2026年10月時点で公式のページに記載がありません。

Vercelの調査（2024年12月公開）では、調査時点で、主要なAIクローラーの多くが実行していませんでした。

だからこそ、本文、基本情報、リンク、構造化データは、最初のHTMLに入れておくのが確実です。

確認は、「ページのソースを表示」「JavaScriptの無効化」「curl」で、誰でもできます。まず今日、主要ページのソースを開いて、本文が入っているかを確かめるところから始めてください。

ページを増やしても問い合わせが来ないなら、原因はページの外にあります。その場合は、下の入口からご相談ください。