JavaScript SEO：SPAとReactサイトのインデックス登録

GoogleによるJavaScriptのレンダリング：仕組み

通常のHTMLページなら、Googleの処理は1段階です。HTMLをダウンロードすれば、すぐにコンテンツを確認できます。JavaScriptのページでは3段階になります。HTMLをダウンロードし、JSバンドルを読み込み、ヘッドレスChromiumで実行して最終的なDOMを得ます。

GoogleはChromiumベースの独自ブラウザエンジンを使い、定期的に更新しています。そのため、ES2020以降の機能、dynamic import、WebAssemblyといった最新のJavaScript機能をGooglebotは理解できます。問題は構文への対応ではなく、レンダリングの遅延とクロール時のリソース制約です。

zoom_in

数字で見るレンダリング

2段階のインデックス登録：JSコンテンツの登録が遅れる理由

Googleはクロールを2つの段階に分けています。1段階目はクロールです。GooglebotがHTMLと、見つけたすべてのリンクをダウンロードします。2段階目はレンダリングです。ボットがページをレンダリングのキューに入れ、JSを実行し、最終的なDOMをインデックスに登録します。

2つの段階の間には、数時間から数週間かかることがあります。サイトの権威性、クロールバジェット、Googleのレンダリングキューの混み具合によって変わります。重要なテキスト、H1、メタタグ、リンクがJSだけで生成されている場合、インデックスへの反映は遅れます。

CSRはSEO最大の落とし穴

クライアントサイドレンダリング（CSR）では、サーバーは空の<div id="root"></div>だけを返し、HTMLはすべてJSバンドルの読み込み後にブラウザ上で組み立てます。React、Vue、AngularをSPAモードで使うと、デフォルトでこの動作になります。

SEOの観点では、CSRには複数の問題があります。1)レンダリングが2段階目でしか行われない。2)クローラーにブロックされたリソース（サードパーティのスクリプトや、robots.txtでブロックされたCDN）が読み込まれず、ページが不完全な状態でレンダリングされる。3) JSエラーが1つあるだけで、インデックスに登録されるページが空白になる。

<!-- CSR: what Google sees in the first wave -->
<html>
  <head>
    <title></title> <!-- empty -->
  </head>
  <body>
    <div id="root"></div> <!-- no content -->
    <script src="/bundle.js"></script>
  </body>
</html>

SSR・SSG・ISRの選び方（SEOの観点から）

CSRの問題は、HTMLをサーバー側で生成すれば解決できます。主な方法は3つあり、それぞれ向いている場面が異なります。

zoom_in

レンダリング方式の比較

SSR（サーバーサイドレンダリング）は、リクエストのたびにサーバーでHTMLを生成します。データは常に最新ですが、サーバーの負荷は高くなります。Next.jsのApp Routerでは、generateMetadataとasyncコンポーネントが、デフォルトでSSRになります。

SSG（静的サイト生成）は、ビルド時にHTMLを1回だけ生成し、静的ファイルとして配信します。TTFBが最も速く、SEOに最適です。弱点は、データを変更するたびに再ビルドが必要なことです。

ISR（インクリメンタル静的再生成）は、両者を組み合わせた方式です。ページは静的にビルドし、再検証期間（revalidate: 3600）が過ぎたあとの最初のリクエストで、サーバーがバックグラウンドで再生成します。Next.jsでは、ほとんどのページで標準的に使われる方法です。

// Next.js App Router — SSG + ISR
export const revalidate = 3600; // revalidate every hour

export async function generateMetadata(): Promise<Metadata> {
  return {
    title: 'Product Catalogue',
    description: 'Full range with up-to-date prices',
  };
}

// All critical content is server-rendered:
export default async function CatalogPage() {
  const products = await fetchProducts(); // server fetch
  return (
    <main>
      <h1>Product Catalogue</h1>
      {products.map(p => <ProductCard key={p.id} {...p} />)}
    </main>
  );
}

動的リンクとナビゲーション

Googlebotがリンクとして認識するのは、<a href="/url">形式のものだけです。onClick、button、data-href、window.locationで実装したリンクは、クローラーには見えません。こうしたナビゲーションからしかたどり着けないページは、インデックスに登録されない可能性があります。

• すべてのナビゲーションリンクに<a href>を使います。 router.push()を呼ぶbutton onClickは使いません
• ページネーションはURLパラメーター（?page=2）で実装します。 HTMLに現れていれば、GooglebotはそうしたURLをクロールします
• SPAのルーター： Next.jsの<Link>もReact Routerの<Link>も、サーバー側で正しい<a>タグを生成します
• ハッシュナビゲーション（#anchor）はインデックス上で別のURLになりません。単独で上位表示したいコンテンツには使わないでください
• 動的メニュー：メニュー項目がページ読み込み後にAPIから描画される場合、Googleはレンダリングされるまで見つけられないことがあります

遅延読み込みと無限スクロール

loading="lazy"を指定した画像は、Googlebotも読み込みます。最近のクローラーは遅延読み込みに対応しています。ただし条件があります。SSRの時点で、画像が正しいsrc属性を持ってDOMに存在していることです。srcをブラウザ上でJavaScriptが設定する場合、クローラーには空のタグに見えます。

無限スクロールでは、意味のあるすべての項目にクローラーがたどれる経路が必要です。連続したURLと、ユーザーがボタンをクリックしなくても機能する通常のリンクを用意します。そのうえで、URL検査やクロールを使い、レンダリング後のHTMLに目的のコンテンツが含まれているか確認します。

診断：JavaScriptのレンダリングを確認する方法

診断の核心は「Googlebotは自分のページで何を見ているのか」という問いです。これに答えるツールがいくつかあります。

診断ツール

• Google Search Console → URL検査： Googlebotがレンダリングしたあとのページのスクリーンショット、リソースの一覧、見つかったリンクを表示します。最も直接的な確認方法です。
• GSCの「Googlebotとして表示」：実際のクローラーを動かし、レンダリング後のHTMLを返します。ソースのHTMLと比較します。
• curlまたはwget： JSを実行しない生のHTMLを取得します。重要なメタタグやコンテンツがcurlの出力に含まれていれば、1段階目のインデックス登録に入ります。
• Chrome DevToolsでJavaScriptを無効にする（F12 → Ctrl+Shift+P → 「Disable JavaScript」）：レンダリングなしのクローラーと同じ状態でページを見る簡単な方法です。
• レンダリングを有効にしたScreaming Frog：「Spider > Configuration > Rendering > Googlebot」を設定すると、JSをレンダリングしながらサイトをクロールできます。レンダリング後に見つかるリンクも確認できます。

# Check what Google sees without JS rendering:
curl -A "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)" \
  https://example.com/page

# Find all title / meta description / h1 in HTML response:
curl -s https://example.com/page | grep -E '<title>|<meta name="description"|<h1'

JavaScript SEOチェックリスト

主なチェック項目

• titleとメタディスクリプションが、JSで生成されず、サーバーが返すHTML（SSR/SSG）に含まれている
• H1、H2と本文が、JavaScriptなしで読める
• ナビゲーションのリンクに<a href>を使い、onClickやbuttonを使っていない
• 構造化データ（JSON-LD）が、HTMLレスポンスの<head>内にある
• 画像のsrcがHTMLに静的に書かれている。loading="lazy"はLCP対象ではない画像にだけ使う
• robots.txtが、レンダリングに必要なJS/CSSファイルをブロックしていない
• レンダリングを妨げるJSエラーがない（ページのChrome DevToolsコンソールで確認する）
• Core Web Vitals： LCP、INP、CLSがGoogleの基準値を満たしている
• ページネーションがJSの状態だけでなく、URLパラメーターで実装されている
• 正規URL（<link rel="[canonical](/glossary/canonical)">）が、JSで設定されず、HTMLに記述されている

FAQ