JavaScript SEOの完全対策

JavaScript SEOの完全対策

はじめに

React、Vue、Next.js、Nuxtなどのモダンフレームワークの普及により、JavaScriptで動的にコンテンツを生成するサイトが増えています。GoogleはJavaScriptのレンダリングに対応していますが、SSR（サーバーサイドレンダリング）なしのSPA（シングルページアプリケーション）は「クロールはされるがインデックスされない」「順位が上がらない」といった問題を抱えやすいのが現実です。

このレッスンでは、GoogleがどのようにJavaScriptを処理するか、レンダリング戦略の選び方、インデックスされないときの確認手順、内部リンク・メタタグ・構造化データの実装、Next.jsでの具体例までを解説します。

GoogleのJavaScriptレンダリング

GoogleがJSコンテンツをどのように処理するかを理解しましょう。

• ◆2段階処理: まずHTMLをクロールしてリンクとメタ情報を取得（第1波）、その後レンダリングキューでJSを実行してコンテンツを取得する（第2波）
• ◆レンダリング遅延: 第2波は数時間〜数日の遅延が生じることがある。新規ページや更新の反映が遅い原因になる
• ◆WRS: Web Rendering Service。GoogleがChromiumベースでJSを実行するサービス。常に最新のChromiumに近いため、モダンJSの大半はサポートされる
• ◆レンダリングの制約: ユーザー操作（クリック・スクロール）は行わない。クリック後に表示されるタブ内容や「もっと見る」以降の無限スクロールは取得されない
• ◆タイムアウトとリソース: 外部APIが遅い・robots.txtでJSやAPIをブロックしている場合、コンテンツが空のまま評価される
• ◆Bing・AI検索の扱い: BingのJSレンダリングは限定的で、ChatGPTやPerplexityなどのクローラーはJSを実行しない。AI検索からの流入を狙うなら、HTMLの初期応答に本文が含まれることが必須

レンダリング戦略の選択

サイトの特性に応じた最適なレンダリング戦略を選択します。

• ◆SSR: すべてのリクエストでサーバーがHTMLを生成。SEOに最も安全だがサーバー負荷が高い。ログイン状態やパーソナライズが絡むページに向く
• ◆SSG: ビルド時に静的HTMLを事前生成。パフォーマンス最高だが、更新頻度が高い動的コンテンツに不向き。ブログ・LP・ドキュメントに最適
• ◆ISR: SSGの発展形。一定期間ごと（例: 60秒）にバックグラウンドで再生成する。Next.jsの推奨パターンで、記事・商品ページに向く
• ◆CSR: クライアント側でJSレンダリング。SEOリスクが最も高い。管理画面・ダッシュボードなど非SEOページ向き
• ◆ダイナミックレンダリング: Googlebotにはプリレンダリング版、ユーザーにはCSR版を提供する。Googleは現在「回避策」と位置づけており、新規採用は推奨されない
• ◆判断基準: 「検索流入が必要なページはSSR/SSG/ISR、ログイン後のページはCSR」。ページ単位で使い分けるのがモダンフレームワークの正しい使い方

インデックスされないときの確認手順

「JSサイトなのにインデックスされない」場合、原因を切り分ける順番です。

1. ◆Search ConsoleのURL検査 → 「クロール済みのページを表示」で、Googleがレンダリングした後のHTMLに本文が含まれるか確認する
2. ◆同じ画面の「ライブテスト」で現在の状態を確認し、「その他の情報」でブロックされたリソース（JS・API・CSS）がないか見る
3. ◆ブラウザでJavaScriptを無効にして表示し、本文・リンク・見出しが残るか確認する。残らなければCSR依存
4. ◆curlやブラウザの「ページのソースを表示」で初期HTMLを確認する。ここに本文がなければ第2波待ちになる
5. ◆robots.txtで /_next/、/api/、/static/ などをDisallowしていないか確認する
6. ◆ブラウザのコンソールでJSエラーを確認する。エラーで描画が止まると、Googleにも空のページが見える
7. ◆カバレッジの「クロール済み‐インデックス未登録」に該当URLがあれば、レンダリング後の内容が薄いか重複と判断されている

内部リンクとルーティング

JSフレームワーク特有の内部リンクの問題を対策します。

• ◆<a href>の使用: React Routerの<Link>やNext.jsの<Link>は内部的に<a>タグを生成する。onClickで遷移するボタンやdivは、クローラーが辿れない
• ◆History API: pushStateで変更されるURLがGooglebotにも正しく認識されることを確認する
• ◆ハッシュルーティングを避ける: /#/path 形式のURLはGooglebotが別ページとして認識しない
• ◆サイトマップ: JSルーティングのURLをすべてサイトマップに含める。Next.jsなら sitemap.ts でDBから動的生成する
• ◆無限スクロール: ページネーションのURL（?page=2）を用意し、スクロールで読み込む部分にも通常のリンクを置く
• ◆クライアント側だけのリンク挿入: 初期HTMLに存在せずJSで後から追加されるナビゲーションは、第1波では発見されない。主要リンクは初期HTMLに含める

メタタグと構造化データの動的管理

ページごとのtitle、description、canonical、構造化データを正しく設定する方法です。

• ◆Next.js（App Router）: metadataオブジェクトまたはgenerateMetadata関数でページ単位に設定する。alternates.canonicalで正規URLを明示する
• ◆Nuxt: useHead()やuseSeoMeta()でリアクティブなメタタグ管理
• ◆React SPA: react-helmet-asyncでhead要素を動的に管理する。ただしCSRの場合は初期HTMLに反映されないため、SNSのOGPは正しく表示されない
• ◆構造化データ: JSON-LDを<script type="application/ld+json">として初期HTMLに含める。JSで後から挿入しても第2波で読まれるが、遅延する
• ◆noindexの罠: 初期HTMLにnoindexがあると、第2波のレンダリングが行われずJSで上書きしても無効になる。逆にJSでnoindexを追加した場合はレンダリング後に適用される
• ◆canonicalの一貫性: JSで書き換えると初期HTMLと不一致になり、Googleが独自に正規URLを選ぶ原因になる

パフォーマンスとCore Web Vitals

JSサイトは表示速度の指標が悪化しやすく、順位にも影響します。

• ◆LCP: 巨大なJSバンドルが主因。コード分割（dynamic import）、画像の最適化（next/image）、重要リソースのpreloadで改善する
• ◆INP: 操作への応答遅延。長いタスクの分割、不要なイベントリスナーの削除、ハイドレーションの軽量化で改善する
• ◆CLS: JSで後から挿入される要素（広告、バナー、フォント切替）による崩れ。サイズを予約する
• ◆ハイドレーション: SSRしても、JSが読み込まれるまで操作できない時間が長いとINPが悪化する。サーバーコンポーネントや部分ハイドレーションで送るJS量を減らす

🏋️実践ワーク

以下の課題に取り組みましょう。

• ◆自社サイトの主要ページをSearch ConsoleのURL検査で確認し、レンダリング後のHTMLに本文が含まれているか確認しましょう
• ◆JavaScriptを無効にしてサイトを閲覧し、コンテンツ・リンク・見出しが表示されるか確認しましょう
• ◆現在のレンダリング戦略（CSR/SSR/SSG/ISR）をページ種別ごとに整理し、SEO上の改善点を洗い出しましょう

よくある質問

GoogleはJavaScriptを完全に実行できるのだから、SSRは不要ではありませんか？

不要ではありません。レンダリングは第2波として遅延し、外部APIの遅延やJSエラーで空のまま評価されるリスクがあります。また、BingやAI検索のクローラーはJSを実行しないものが多く、初期HTMLに本文がないと流入元を失います。検索流入が必要なページはSSR・SSG・ISRのいずれかにするのが安全です。

ReactのSPAをインデックスさせる最も簡単な方法は？

Next.jsやRemixなどSSR対応フレームワークへの移行が根本解決です。移行が難しい場合は、SEOが必要なページだけをプリレンダリング（ビルド時に静的HTMLを生成）し、それ以外はCSRのままにする部分対応から始めます。ダイナミックレンダリングは過渡的な回避策で、新規採用は推奨されません。

JSでtitleやcanonicalを書き換えても反映されますか？

レンダリング後に反映されますが、初期HTMLと不一致があるとGoogleが独自に判断する原因になります。特にnoindexは初期HTMLに存在するとJSでの解除が無効になります。title・canonical・noindex・構造化データはサーバー側で初期HTMLに含めてください。

まとめ

JavaScript SEOは、適切なレンダリング戦略の選択が最も重要です。検索流入が必要なページにはSSR/SSG/ISRを採用し、初期HTMLに本文・リンク・メタタグ・構造化データを含め、Search ConsoleのURL検査でGoogleが見ている状態を確認する習慣をつけましょう。AI検索のクローラーがJSを実行しない点も、今後ますます重要になります。次の章では、国際SEO（多言語・多地域対応）を学びます。