GPTBot と PerplexityBot はあなたの生の HTML を読み、JavaScript を完全にスキップします。Beacon は本物のヘッドレスブラウザでページをレンダリングし、AIエンジンが決して見ないコンテンツ — そしてキーワード — を正確に示します。
GPTBot(OpenAI/ChatGPT)、PerplexityBot、ClaudeBot、Amazonbot のような AIクローラーは、あなたの URL をリクエストし、返ってくる生の HTML — 「ソースを表示」で見えるのと同じバイト — を解析します。彼らはブラウザエンジンを起動したり、スクリプトを実行したりしません。だから、ほぼ空のルート div を送り、実際のコンテンツをすべて JavaScript で注入するシングルページアプリは、人間には完全に見え、ボットには空白に見えます。Google でランクし、訪問者には完璧に見えても、買い手が推薦を求める AIエンジンには見えないままでありうるのです。
レンダリングしないクローラーと同じように静的 HTML を取得し、同じ URL を本物のヘッドレスブラウザで読み込んでレンダリング後の DOM を捕捉し、両者を差分比較します — JavaScript 実行後にのみ存在するコンテンツの割合、静的版に欠けている正確なキーワード、そしてレンダーモード(サーバーレンダリング、ハイブリッド、クライアントレンダリング)を報告するので、どれだけ無防備かが即座に分かります。
修正の原則は常に同じです。重要なコンテンツを、JavaScript が実行される前にサーバーが送る HTML に入れること — サーバーサイドレンダリング、静的生成、ボット向け動的レンダリングによって。最低限、見出し、本文、価格、FAQ の回答が、クライアント JavaScript で取得・注入されるのではなく、静的 HTML に存在することを確認してください。
ほとんど実行しません。GPTBot(ChatGPT/OpenAI)、PerplexityBot、ClaudeBot、Amazonbot やその他大半の AIクローラーは、生の HTML を取得してそのまま解析します。JavaScript を実行するためにブラウザエンジンを起動しないので、読み込み後に JS で注入されたコンテンツは事実上彼らに見えません。
レンダーギャップとは、静的 HTML(AIクローラーがダウンロードするもの)と JavaScript でレンダリングされた DOM(ブラウザ内の人間が見るもの)の差です。Beacon はそれを、JavaScript 実行後にのみ存在する表示コンテンツの割合と、その語の集合として表します。大きなレンダーギャップは、AIエンジンがほぼ空のページを読んでいることを意味します。
レンダリング方法によります。純粋なクライアントサイドの React アプリ(例:Vite SPA や create-react-app)はほぼ空の HTML シェルを送り、すべてを JS で構築します — これは最大のレンダーギャップです。Next.js、Remix、Astro などのフレームワークはページをサーバーレンダリングまたは静的生成でき、ギャップを埋められます — ただし、実際にそう設定したルートに限ります。Beacon は仮定ではなく実際の出力をチェックします。
重要なコンテンツを、サーバーが送る HTML に入れます。主な選択肢は、サーバーサイドレンダリング(SSR)、静的サイト生成(SSG/ビルド時のプリレンダリング)、そしてボットにプリレンダリングした HTML スナップショットを提供する動的レンダリングです。最低限、見出し、本文、価格、FAQ の回答が、クライアント JavaScript で取得・注入されるのではなく、静的 HTML に存在することを確認してください。
おおむね見ます — Googlebot は最新のレンダリングエンジンを実行し、2 回目のパスで JavaScript を実行するので、クライアントレンダリングのコンテンツでもランクしえます(ただしレンダリングは遅く、後回しになることがあります)。決定的な違いは AI検索です。GPTBot、PerplexityBot、そして大半の LLM クローラーは JavaScript を一切レンダリングしません。だから Google の JS-SEO チェックに合格しても、ChatGPT や Perplexity には見えないままでありうるのです。