あなたのサイトの本文は、AIには見えていないかもしれない — JavaScriptレンダリングとAIクローラーの話
「ChatGPTに自社製品のことを聞いたら、古い情報しか出てこなかった」「Perplexityの回答に競合は引用されるのに、自社サイトが出てこない」——もし心当たりがあるなら、原因のひとつとして真っ先に疑うべきものがあります。JavaScriptレンダリング依存です。
人間が見ているページと、AIが見ているページは違う
現代のWebサイトの多くは、JavaScriptでページを組み立てています。ReactやVue.jsで構築されたサイト、タグマネージャで挿入されるコンテンツ、スクロールに応じて読み込まれる商品説明——これらはすべて、ブラウザがJavaScriptを実行して初めて画面に現れる情報です。
一方、AIチャットボットの情報源となるクローラー（GPTBot、ClaudeBot、PerplexityBotなど）の多くは、基本的にサーバーが最初に返すHTML（生HTML）だけを読みます。JavaScriptを実行しない、あるいは実行が限定的です。
つまり、こういうことが起こります。
- 人間のブラウザ: 商品の特長、価格、レビュー、FAQ——すべて見える
- AIクローラー:
<div id="root"></div>とスクリプトタグだけの、ほぼ空のページ
人間には完璧に伝わるページが、AIには「何も書かれていないページ」に見えている。これが、AI検索時代に多くの企業サイトが抱える見えない断絶です。
Googlebotは実行できるのに、なぜ問題なのか
「GoogleはJavaScriptをレンダリングできるようになったはずでは？」——その通りです。Googlebotは長年の投資によりレンダリング機構を持っています。だからこそ、従来のSEO監査ではこの問題が表面化しませんでした。Google検索で上位表示できているサイトほど、「うちは大丈夫」と思い込みやすいのです。
しかしAIクローラーは事情が異なります。LLM各社のクローラーは、Webの膨大なページを取得する際、コストの高いブラウザレンダリングを常時行うとは限りません。生HTMLに本文がなければ、そのページの情報は学習にも検索補助（RAG）にも使われにくくなります。
Google検索でのパフォーマンスと、AIからの可視性は、別の問題です。 前者が良好でも、後者がゼロというケースは珍しくありません。
自社サイトを1分で確認する方法
エンジニアでなくても、次の方法で概況を確認できます。
方法1: ブラウザでJavaScriptを切って見る
ChromeのDevTools（F12）→ 設定 → 「Disable JavaScript」にチェックを入れてページを再読み込み。表示が大きく崩れ、本文が消えるなら、AIクローラーにも同様に見えていない可能性が高いです。
方法2: ページのソースを見る
ページ上で右クリック→「ページのソースを表示」。ここに表示されるのが生HTMLです。Ctrl+Fで、画面に表示されている商品説明の一文を検索してみてください。見つからなければ、その文はAIに届いていません。
方法3: 診断ツールを使う
当サイトのAI Readiness Checkerは、この「生HTMLとブラウザレンダリング後の差分」を自動で比較し、スコア化します。無料・登録不要で利用できます。
改善の方向性：3つの選択肢
JavaScript依存が判明した場合、打ち手は大きく3つあります。
1. サーバーサイドレンダリング（SSR）/ 静的生成（SSG）
本文をサーバー側で生成してHTMLに含めて返す方式。Next.js（React系）やNuxt（Vue系）はSSR/SSGを標準サポートしています。技術的に最も正攻法ですが、既存サイトの改修コストは相応にかかります。
2. 重要コンテンツだけを生HTMLに含める
全面改修が難しい場合、商品名・価格・主要説明文など「AIに最も伝えたい情報」だけを初期HTMLに含める部分対応も有効です。完璧を目指して止まるより、重要情報から段階的に。
3. 構造化データ（JSON-LD）で補完する
JSON-LDはHTMLの<head>内に静的に記述できるため、本文がJavaScript依存でも、製品情報や組織情報を機械可読な形で提供できます。根本解決ではありませんが、即効性のある補完策です。
どれを選ぶべきかはサイトの規模・CMS・体制によって変わります。判断に迷う場合は、まず無料診断で現状のギャップの大きさを数値化することから始めてください。ギャップが小さければ対応は不要ですし、大きければ、どのページから直すべきかの優先順位が見えてきます。
本記事は診断ツールの採点ロジック（採点方法）の設計思想に基づいています。