JS依存という盲点：AIクローラーにあなたのサイトは見えているか

AIはあなたのWebサイトを読めていない ── JavaScript依存という盲点

検索の前提が変わった

ChatGPTやGemini、Perplexityに何かを尋ねると、AIはWebをクロールしてWebサイトを読み込み、回答を生成する。ユーザーは10個の青いリンクではなく、1つの統合された回答を受け取る。この変化が意味するのは、これまで「検索結果に表示されること」を競っていたゲームが、「AIの回答に引用されること」を競うゲームに置き換わりつつあるということだ。

この新しい最適化はGEO(Generative Engine Optimization)と呼ばれる。SEOのAI版にあたる概念だが、SEOのノウハウがそのまま使えるわけではない。そして見落とされがちなのが、コンテンツの良し悪し以前に、技術的な理由でAIに中身が読まれていないサイトが大量に存在するという事実だ。

本記事では、その中でも最もインパクトが大きい「JavaScript依存」の問題を、実測データとともに掘り下げる。

AIクローラーはJavaScriptを実行しない(ことが多い)

モダンなフロントエンド開発では、React、Vue、Next.js、NuxtといったフレームワークでSPA(Single Page Application)やクライアントサイドレンダリングを採用するのが一般的になった。これらはユーザー体験の面では優れているが、クローラーから見ると厄介な性質を持つ。

初期HTMLにはほとんど中身がなく、JavaScriptが実行されて初めてDOMにコンテンツが描画される。Googlebotは二段階レンダリング(まずHTMLを取得し、後でJavaScriptを実行してレンダリング)を行うことで対応しているが、AIクローラーの多くはこのJavaScript実行を行わないか、行っても不完全だ。

つまり、JavaScript依存度が高いサイトは、AIクローラーから見ると「本文がほぼ空のページ」に見えている可能性がある。どれだけ質の高い記事を書いても、AIがそれを読めなければ引用のしようがない。

実測してみる

この問題は定量化できる。考え方はシンプルだ。

  1. 静的にHTMLを取得したときのテキスト量を測る(JavaScript実行前)
  2. ヘッドレスブラウザでレンダリングした後のテキスト量を測る(JavaScript実行後)
  3. その差分が「JavaScriptに依存して表示されているコンテンツ」の割合
JS依存率 = (レンダリング後のテキスト量 − 静的取得時のテキスト量) / レンダリング後のテキスト量

この値が高いほど、AIクローラーから見えていないコンテンツが多いことを意味する。

実装上は、静的取得にhttpx、レンダリングにPlaywright(ヘッドレスChromium)を使えば測定できる。両者のテキストノード総量を比較するだけだ。

zenn.devで測ってみた結果

技術者にとって馴染み深いzenn.devを実際に測定してみた。結果は以下の通り。

静的HTML取得時のテキスト量:   387文字
JavaScript実行後のテキスト量: 3,706文字
JS依存率: 約90%

zennはNext.js製で、コンテンツの大部分がJavaScript実行後に描画される。約90%のテキストが、JavaScriptを実行しないクローラーからは見えていないことになる。

念のため補足すると、これはzennが技術的に劣っているという話ではまったくない。ユーザー体験としては高速で快適だし、Googleには適切にインデックスされている。問題はあくまで「JavaScriptを実行しないAIクローラーから見たとき」という特定の文脈に限られる。だが、その文脈がこれから重要になっていく。

ではどうするか

対策の方向性は明確だ。JavaScriptを実行しなくても本文が読める状態にすること。具体的には以下のいずれかになる。

  • SSR(サーバーサイドレンダリング): サーバー側でHTMLを生成してから配信する。Next.jsならgetServerSidePropsやApp RouterのServer Components、Nuxtならuniversal modeなど
  • SSG(静的サイト生成): ビルド時にHTMLを生成しておく。ブログやドキュメントのように内容が頻繁に変わらないコンテンツに向く
  • 動的レンダリング: クローラーを判定して、ボットにはレンダリング済みHTMLを返す。過渡的な手段だが、既存SPAに後付けしやすい

重要なのは、これは「やるかやらないか」ではなく「どこまでやるか」の問題だということ。完全にSSR化しなくても、本文の主要部分だけでも静的HTMLに含めれば、AIクローラーが読める情報量は大きく改善する。

まとめ

  • AIクローラーの多くはJavaScriptを実行しない、または不完全にしか実行しない
  • SPAやクライアントサイドレンダリングに依存したサイトは、AIから本文が見えていない可能性がある
  • JS依存率は静的HTMLとレンダリング後のテキスト量の差分で定量化できる
  • zenn.devの実測では約90%がJS依存だった
  • 対策はSSR/SSG/動的レンダリングのいずれか。完全でなくても本文の主要部分を静的化するだけで改善する

GEOというと記事の書き方やキーワードの話になりがちだが、その手前にある技術的な土台がまず重要だ。次回は、もう一つの見落とされがちな問題「AIクローラーが意図せずブロックされている」ケースを扱う。

本記事のJS依存度測定は、筆者が開発しているAI可読性診断ツールを用いて行った。診断ロジックの詳細は別記事で解説する。