JavaScript SEO 2026：レンダリング、インデックス、AI クローラー

React、Vue、Angular、Svelte などのモダンなフレームワークは、ブラウザ上でページを組み立てます。インタラクティブ性には優れていますが、検索での露出にはリスクがあります。JavaScript SEO は、JS サイトを検索エンジンと AI が読める状態に保つための実践の集まりです。このガイドでは、Google が JavaScript をどう処理するか、レンダリングの選択肢、よくある失敗、ページのテスト方法を解説します。

Google は JavaScript ページをどう処理するのか？

クロール、レンダリング、インデックスの 3 段階で処理します。Google 検索セントラルでは、この流れを次のように説明しています。

1. クロール：Googlebot が URL を取得し、生の HTML を読みます。ここで見つかったリンクはすぐにキューに入ります。
2. レンダリング：ページはレンダリングキューで待機し、その後ヘッドレス Chromium が JavaScript を実行して最終的なページを組み立てます。
3. インデックス：Google はレンダリング後のコンテンツを分析し、インデックスするかどうか、どのようにするかを決めます。

つまり、生の HTML にないものはすべてレンダリングの成否に左右されます。スクリプトがエラーになったり、タイムアウトしたり、robots.txt でブロックされていたりすると、Google はそれ以前に見えた内容をインデックスします。それは中身のない枠だけかもしれません。

CSR、SSR、静的レンダリングの違いは？

違いは HTML をどこで作るかです。ブラウザか、リクエストごとのサーバーか、ビルド時に一度だけか。

Next.js、Nuxt、SvelteKit、Astro などのフレームワークでは、コンテンツページに SSR や静的生成を使うのが標準になっています。ブログ、ドキュメント、商品ページで、コンテンツをブラウザだけでレンダリングする理由はほとんどありません。

JavaScript SEO でよくある失敗は？

問題の多くは、操作した後にしか存在しないコンテンツやリンクから生じます。

• href のないリンク："div" や "span" 要素にクリック処理を付けたナビゲーションはたどられません。本物の "a href" リンクを使いましょう。
• 操作の裏にあるコンテンツ：クリック、タブの切り替え、無限スクロールの後にしか読み込まれないテキストは、Googlebot に一度もレンダリングされない可能性があります。
• ブロックされたリソース：robots.txt で JavaScript や API のファイルを禁止すると、レンダリングができません。
• 遅れて設定されるメタデータ：JavaScript で変更したタイトル、canonical、noindex タグは、生の HTML と矛盾することがあります。
• ハッシュ付き URL："/#/product" のようなフラグメントは別ページとして扱われません。History API とクリーンなパスを使いましょう。
• ソフト 404：「見つかりません」と表示しながらステータスコード 200 を返すシングルページアプリは、インデックスを混乱させます。
• 重いバンドル：大きなスクリプトはレンダリングを遅らせ、Core Web Vitals を悪化させ、タイムアウトの危険を高めます。

AI での露出に JavaScript が重要なのはなぜか？

多くの AI クローラーは生の HTML しか読まないからです。Vercel が 2024 年に公開した AI クローラーのトラフィック調査などのログ分析では、OpenAI と Anthropic のボットは JavaScript ファイルを取得しても実行しないことがわかりました。JavaScript の実行後にしかテキストが表示されないページは、Google が正しくインデックスしていても、ChatGPT、Claude、Perplexity を支えるシステムからは空に見えることがあります。

AI に引用されることが重要なら、主要な回答、見出し、表、リンクはサーバーの HTML に含め、robots.txt が希望する AI クローラーを許可しているか確認しましょう。AI クローラー向け robots.txt のガイドでは主要なボットを紹介しており、AI クローラビリティ診断では、それらがページで何を読めるかを確認できます。

JavaScript SEO はどうテストするのか？

生の HTML と、Google がレンダリングした結果を比較します。

1. ページのソースを表示します（検証ツールではなく）。主要なコンテンツがなければ、JavaScript に依存しています。
2. Google Search Console の URL 検査ツールで、レンダリング後の HTML とスクリーンショットを確認します。
3. リッチリザルト テストを実行します。公開されている任意の URL のレンダリング後 HTML も表示されます。
4. ブラウザで JavaScript を無効にし、レンダリングしないクローラーが受け取る内容をおおまかに確認します。
5. クローラーで JavaScript モードあり・なしの両方でサイトをクロールし、見つかったリンクと文字数を比べます。
6. インデックス可否チェッカーで重要な URL のインデックス状況を確認します。

JavaScript SEO のチェックリストは？

次の 6 つのルールでほとんどのケースに対応できます。

• 主要コンテンツ、タイトル、メタディスクリプション、canonical が最初の HTML にある。
• 内部リンクはクロール可能な URL を持つ "a href" 要素になっている。
• robots.txt で JavaScript、CSS、API のファイルをブロックしていない。
• 存在しないページやリダイレクトに正しい HTTP ステータスコードを返している。
• 遅延読み込みはスクロール後に見えるメディアだけで、本文には使っていない。
• フロントエンドの大きなリリースのたびに Search Console でレンダリングを確認している。

まとめ

コンテンツが存在するために JavaScript を必要としなければ、JavaScript と SEO は両立します。コンテンツページはサーバーかビルド時にレンダリングし、本物のリンクを使い、Google と AI が実際に何を見ているかをテストしましょう。Sorank は記事をクリーンな HTML として CMS に直接公開し、内部リンクと構造化データも autopilot で整えます。料金プランと 3 日間の無料トライアルをご覧ください。