AI クローラーから見ると、あなたのページは空の殻かもしれない
AI クローラーは初期 HTML だけを取得し、JavaScript を実行しません。本文がクライアント側で描画されていると、引用できる中身が何も見えていません。
Google がインデックスできているからといって、AI が読めているとは限りません。
Googlebot は JavaScript をレンダリングします。一方 GPTBot、ClaudeBot、PerplexityBot は初期 HTML を取得した時点で終わりです。本文が useEffect の後に現れる作りなら、クローラーが見るのは <div id="root"></div> だけで、他には何もありません。
なぜ差が出るのか
JavaScript のレンダリングは高コストです。ページごとにブラウザエンジンが要ります。検索エンジンはそれを払えます——ウェブ全体を対象にする必要があり、レンダリング待ちの列を持てるからです。AI クローラーはユーザーが質問したその瞬間に取得します。最初のレスポンスで返ってきたものをそのまま使い、フロントエンドの実行を待つ時間はありません。
この差はブラウザの中では見えません。自分で見ても問題なく、Google Search Console でも問題なく見えます。露呈するのは生の HTML だけです。
自分で確認する
クローラーと同じ取り方をします。JavaScript なしで、レスポンスだけを見ます。
curl -sL https://your-site.com/your-page | grep -c "<p>"
本文が十段落あると分かっているページでこの数が 0 か 1 なら、それが診断結果です。あわせて二点見てください。
- 本文がそもそも含まれているか（そのページにしかない一文で検索する）
- マウントポイントの中身（
<div id="app">、<div id="root">、<div id="__next">）
マウントポイントが空で本文も見つからないなら、それが原因です。
直し方
方向は「最初のレスポンスに中身を載せる」ことです。フォールバックを足すことではありません。手間の軽い順に：
- 静的生成。ビルド時に描画します。最も望ましく、多くのマーケティングページやブログに当てはまります。
- サーバーサイドレンダリング。リクエストごとにサーバーで描画します。内容がリクエストに依存する場合は必須で、クローラーから見ても同じように読めます。
- プリレンダリング。サービスが SPA を HTML に変換してクローラーに返します。アプリを作り変えられないときの暫定策ですが、本番と乖離しうるシステムが一つ増えます。
<noscript> は解決策ではありません。多少は助かりますが、クローラーが必要としている文章はページ本文にあるべきで、すでに JavaScript を切っているブラウザ向けの案内に置くものではありません。
自分のページがクローラーにどう見えているかは JS なし表示ツール で確認できます。本文がどれだけ残るか、マウントポイントが空かどうかが出ます。
一つではなく全体を見たい場合は、完全な診断 を実行してください。レンダリングを含む全 32 ルールを実行し、影響順の修正リストを返します。