AI にクロールされないサイトの特徴｜JS・SPA の落とし穴と対策

公開日: 2026年2月1日

作成者: Nonoka Takeda

この記事でわかること

AI クローラが JavaScript を実行しない理由と、その影響
SPA（Single Page Application）が AI 検索で不利になるケース
SSR / SSG / ISR の使い分けと、AI 向け最適化の実装ポイント

AI クローラは JavaScript を実行しない

ChatGPT や Perplexity の裏側で動くクローラは、JavaScript を実行しません。
ページにアクセスしたとき、HTML ソースに書かれている情報だけを取得します。

これは従来の検索エンジン（Google）とは異なる挙動です。
Google は「レンダリング」と呼ばれる処理を行い、JavaScript を実行した後の DOM を解析します。
ただし、この処理には時間がかかるため、すべてのページが完全にレンダリングされるわけではありません。

AI クローラはさらにシンプルです。
GPTBot や PerplexityBot は、HTTP レスポンスとして返された HTML をそのまま読みます。
JavaScript で動的に生成されるコンテンツは、クローラから見ると「存在しない」のと同じです。

つまり、サイトの重要なコンテンツが JavaScript で描画されている場合、AI 検索では引用されません。

SPA が AI 検索で不利になる理由

SPA（Single Page Application）は、ユーザー体験の向上を目的に設計されています。
初回ロード後は、ページ遷移がなめらかになり、アプリのような操作感を実現します。

しかし、SPA には AI 検索において致命的な問題があります。

初期 HTML が空になる

典型的な SPA では、初期 HTML は以下のような構造です。

<!DOCTYPE html>
<html>
<head>
  <title>サイト名</title>
</head>
<body>
  <div id="root"></div>
  <script src="/bundle.js"></script>
</body>
</html>

本文のコンテンツは <div id="root"></div> の中にありません。
JavaScript が実行されて初めて、コンテンツが描画されます。

AI クローラがこのページにアクセスすると、空の <div> しか見えません。
タイトルタグ以外に、引用できる情報がありません。

メタデータが動的に生成される

SPA では、タイトルや description も JavaScript で動的に設定することがあります。
この場合、クローラはデフォルト値（または空）しか取得できません。

// クライアントサイドで設定
document.title = "記事タイトル | サイト名";
document.querySelector('meta[name="description"]').content = "記事の説明...";

このコードは、JavaScript が実行されて初めて動作します。
AI クローラにはこの変更が見えません。

構造化データが埋め込まれない

Article や FAQ などの構造化データ（JSON-LD）も、JavaScript で動的に挿入されるケースがあります。
AI は構造化データを読み取り、コンテンツの信頼性や属性を判断します。
JavaScript 依存の構造化データは、AI に認識されません。

AI にクロールされないサイトの 5 つの特徴

自社サイトが以下の特徴に該当する場合、AI 検索での可視性が低い可能性があります。

1. HTML ソースを表示すると本文がない

ブラウザで「ページのソースを表示」してください。
本文のコンテンツが HTML 内に存在しなければ、AI クローラにも見えません。

確認方法:

ブラウザで対象ページを開く
右クリック → 「ページのソースを表示」（または Ctrl+U / Cmd+Option+U）
本文のテキストを検索する（Ctrl+F / Cmd+F）

本文が見つからない場合、JavaScript レンダリングに依存しています。

2. curl でページを取得すると空になる

ターミナルで以下のコマンドを実行してください。

curl -s https://example.com/your-page | head -100

取得した HTML に本文が含まれていなければ、AI クローラも同じ状態を見ています。

3. robots.txt で AI bot がブロックされている

robots.txt で GPTBot や PerplexityBot が明示的にブロックされているケースがあります。

User-agent: GPTBot Disallow: /

User-agent: PerplexityBot Disallow: /

この設定は意図的な場合もありますが、意図せず設定されていることもあります。
クローラを許可する場合は、Allow を明示するか、Disallow を削除してください。

4. CDN やセキュリティ設定で AI bot がブロックされている

Cloudflare などの CDN や WAF（Web Application Firewall）が、AI クローラを「悪意のある bot」として誤検知し、ブロックしていることがあります。

サーバーログを確認し、GPTBot や PerplexityBot からのリクエストが 403 や 429 で拒否されていないか確認してください。

一部の GEO ツールでは、サーバーログを分析して AI クローラのアクセス状況を可視化する機能があります。

5. ページの読み込みに時間がかかりすぎる

AI クローラには、ページ取得のタイムアウトがあります。
ページが数秒以内に応答しなければ、クロールを諦めます。

特に、API レスポンスを待ってから HTML を生成するサーバーサイドの処理が重い場合、タイムアウトのリスクがあります。

SSR / SSG / ISR の使い分け

SPA の問題を解決する手段として、サーバーサイドレンダリング（SSR）、静的サイト生成（SSG）、Incremental Static Regeneration（ISR）があります。

それぞれの特徴と、AI 検索における適切な使い分けを整理します。

SSR（Server-Side Rendering）

リクエストのたびにサーバーでページを生成し、完成した HTML を返します。

メリット:

常に最新のデータを反映できる
ユーザーごとにパーソナライズされたコンテンツを返せる
HTML ソースに本文が含まれる

デメリット:

サーバー負荷が高い
レスポンス速度がサーバー処理に依存する
キャッシュ戦略が複雑になる

AI 向けの適性: 高い。
クローラはレンダリング済みの HTML を取得できます。
ただし、レスポンスが遅いとタイムアウトのリスクがあります。

SSG（Static Site Generation）

ビルド時にすべてのページを HTML として生成し、CDN から配信します。

メリット:

最速のレスポンス（CDN キャッシュから配信）
サーバー負荷が最小
HTML ソースに本文が含まれる

デメリット:

コンテンツ更新にはビルドが必要
大量ページの場合、ビルド時間が長くなる
リアルタイム性が必要なコンテンツには不向き

AI 向けの適性: 最も高い。
クローラにとって理想的な環境です。
高速で、安定した HTML を返します。

ISR（Incremental Static Regeneration）

SSG と SSR のハイブリッドです。
静的ページを配信しつつ、バックグラウンドで定期的に再生成します。

メリット:

SSG の速度と SSR の鮮度を両立できる
ビルド時間を短縮できる（初回は一部ページのみ生成）
HTML ソースに本文が含まれる

デメリット:

フレームワーク（Next.js など）に依存する
再生成のタイミングによっては古いコンテンツが配信される
設定がやや複雑

AI 向けの適性: 高い。
多くのケースで最適なバランスです。

比較表

特性	SSR	SSG	ISR
レスポンス速度	中	高	高
サーバー負荷	高	低	低〜中
コンテンツ鮮度	リアルタイム	ビルド時点	設定した間隔
AI 向け適性	高	最高	高
実装難易度	中	低	中

HTML に残すべき情報のチェックリスト

AI クローラが適切にコンテンツを取得できるよう、以下の情報を HTML ソースに含めてください。

必須項目

本文テキスト（メインコンテンツ）
ページタイトル（<title> タグ）
メタディスクリプション（<meta name="description">）
見出し構造（<h1> 〜 <h6>）
構造化データ（JSON-LD）

推奨項目

著者情報（Person スキーマ）
公開日・更新日（datePublished、dateModified）
運営組織情報（Organization スキーマ）
FAQ（FAQPage スキーマ）
パンくずリスト（BreadcrumbList スキーマ）

避けるべき実装

本文を JavaScript で動的に挿入する
メタデータをクライアントサイドで設定する
構造化データを JavaScript で埋め込む
画像のみで情報を伝える（alt テキストなし）
iframe 内にコンテンツを配置する

実装パターン別の対策

React / Vue / Angular などの SPA フレームワーク

SPA フレームワークを使用している場合、SSR 対応のメタフレームワークに移行することを検討してください。

React → Next.js（App Router 推奨）
Vue → Nuxt.js
Angular → Angular Universal

既存の SPA を維持する場合は、プリレンダリング（Prerender.io など）を導入する方法もあります。

Next.js を使用している場合

Next.js では、ページごとにレンダリング方式を選択できます。

// SSG（デフォルト）
export default function Page() {
  return <div>静的ページ</div>;
}
// SSR
export const dynamic = 'force-dynamic';
export default function Page() {
  return <div>動的ページ</div>;
}
// ISR
export const revalidate = 3600; // 1時間ごとに再生成
export default function Page() {
  return <div>ISR ページ</div>;
}

AI 検索での可視性を重視するページは、SSG または ISR を選択してください。

WordPress を使用している場合

WordPress は標準で SSR 相当の動作をします。
ただし、以下の点に注意してください。

JavaScript で遅延ロードされるコンテンツは AI に見えない
一部のテーマやプラグインがコンテンツを JavaScript 依存にしている
構造化データプラグイン（Yoast SEO、Rank Math など）を導入する

クローラのアクセス状況を確認する方法

AI クローラが自社サイトにアクセスしているかを確認する方法を紹介します。

サーバーログを分析する

ウェブサーバーのアクセスログで、以下の User-Agent を検索してください。

GPTBot — OpenAI のクローラ
OAI-SearchBot — OpenAI の検索向けクローラ
PerplexityBot — Perplexity のクローラ
ClaudeBot — Anthropic のクローラ
Google-Extended — Google の AI 学習向けクローラ

grep -E "(GPTBot|OAI-SearchBot|PerplexityBot|ClaudeBot)" /var/log/nginx/access.log

クローラからのアクセスがない場合、ブロックされているか、そもそもクロール対象になっていない可能性があります。

GEO ツールを活用する

一部の GEO ツールでは、AI クローラのアクセス状況を可視化する機能があります。
サーバーログを直接分析するのが難しい場合、これらのツールを検討してください。

機能の例:

どのページに AI クローラがアクセスしているか
アクセス頻度とトレンド
エラー（403、404、500 など）の検出
偽装クローラの識別

よくある質問

Google のレンダリングがあれば、SPA でも問題ないのでは？

Google は JavaScript を実行しますが、すべてのページを完全にレンダリングするわけではありません。
また、AI 検索（ChatGPT、Perplexity など）は Google とは別のクローラを使用しており、JavaScript を実行しません。
GEO を考慮するなら、SPA でも HTML に情報を残す必要があります。

プリレンダリングサービス（Prerender.io など）は有効ですか？

有効です。
プリレンダリングサービスは、クローラからのリクエストを検知し、事前にレンダリングした HTML を返します。
ただし、追加コストがかかること、設定の複雑さ、更新タイミングの遅延などを考慮してください。
可能であれば、SSR / SSG / ISR への移行を推奨します。

robots.txt で AI クローラを許可すべきですか？

AI 検索での可視性を重視するなら、許可すべきです。
ただし、コンテンツの学習に利用されることへの懸念がある場合、クローラごとに許可・拒否を使い分けることができます。

例:

# AI 検索を許可 User-agent: OAI-SearchBot Allow: /

# AI 学習を拒否 User-agent: GPTBot Disallow: /

OAI-SearchBot は検索結果の生成に使用され、GPTBot はモデルの学習に使用されます。

CDN のセキュリティ設定を調整する方法は？

Cloudflare の場合、Bot Fight Mode や Super Bot Fight Mode が AI クローラをブロックすることがあります。
AI クローラを許可するルールを追加するか、ファイアウォールルールで特定の User-Agent を例外として設定してください。

まとめ

AI クローラは JavaScript を実行しません。
SPA でコンテンツを動的に描画している場合、AI 検索では見えないのと同じです。

対策のポイント:

HTML ソースに本文を残す — SSR / SSG / ISR を導入し、クローラが読める形でコンテンツを提供する
メタデータと構造化データを静的に埋め込む — JavaScript 依存にしない
robots.txt と CDN 設定を確認する — AI クローラがブロックされていないか
サーバーログで実態を把握する — クローラのアクセス状況を定期的にチェックする

技術的な制約で完全な移行が難しい場合は、プリレンダリングサービスの導入を検討してください。

AI 検索で引用されるには、まずクローラにコンテンツを「見せる」ことが前提です。
情報設計や権威性の施策は、その前提が整った上で効果を発揮します。