JavaScript製サイトがAIに読まれない理由と直し方
ブラウザで見ると、あなたのサイトは完璧。でも ChatGPT・Claude・Perplexity が訪れると、ほとんど何も見えていないことがあります。原因はたいてい同じです——本文をJavaScriptで描画していて、AIクローラーはそのJavaScriptを実行しないからです。
AIクローラーとブラウザの違い
ブラウザはHTMLを取得したあと、JavaScriptを実行して最終的なページを組み立てます。AIクローラーやそのインデックス用ボットは、たいていその最初の段階で止まります——サーバーが返す 生のHTML を読んで、そのまま次へ進むのです。ふつうJavaScriptの実行を待たず、クリックもスクロールもしません。
ですからAI可視性を決める問いはシンプルです。本文はすでにHTMLの中にありますか？ それともJavaScriptが組み立てないと現れませんか？
JavaScriptだけのページはAIにどう見えるか
多くのSPA（クライアント側だけで描画するフレームワーク構成）は、次のようなほぼ空の“殻”を返します。
<body>
<div id="root"></div>
<script src="/app.js"></script>
</body>ブラウザは app.js を実行して #root に本文を流し込みます。AIクローラーが見るのは、上の空の <div> だけ。記事も商品情報も価格も、JavaScriptが動いたあとにしか存在しない——つまりAIにとっては「存在しない」のと同じです。
自分のサイトを確かめる方法
- ソースを表示する。 ページを右クリックして「ページのソースを表示」（「検証」ではなく）を選びます。ソース表示はサーバーが返した生HTMLです。そこに本文が無ければ、AIにも見えていません。
- JavaScriptを切って再読み込み。ページが真っ白になるなら、それがAIに見えている状態に近いです。
- このツールで診断する。「AIにはこう見えている」欄に、クローラーが読める実際の本文が表示されます。
直し方
直し方は、本文をブラウザで組み立てるのではなく、HTMLに入れて送ることです。
- サーバーサイドレンダリング（SSR）。 Next.js・Nuxt・SvelteKit・Astro などは、サーバー側でページを描画し、完成したHTMLを返せます。
- 静的生成（SSG）。 デプロイ時にページを静的HTMLとして作っておきます——ブログ・ドキュメント・LPに最適。
- プリレンダリング。 どうしてもクライアント側アプリを使うなら、重要ページだけ静的HTMLに先行生成します。
- プログレッシブ・エンハンスメント。 まずHTMLに本文を置き、JavaScriptはそれを“補強”するために使う——“作る”ためではなく。
JavaScriptをやめる必要はありません。大事な言葉が、スクリプトの動く前のHTMLにあればよいのです。
まとめ
JavaScript描画は、サイトがAIに見えなくなる最も多い原因であり、GEOの全体像でも最初で最大の要素です。まず生HTMLを確認し、本文がそこに無ければサーバー側へ移しましょう。そもそもAIがあなたの言葉を読めなければ、ほかのどんな工夫も効果は小さいのです。