JavaScript SEO はクロール → レンダリング → インデックスの 3 段階で動く

なぜこれを学ぶか

JavaScript SEO は SPA / 大規模 React アプリで「インデックスされない」事故が最も多い領域。 Googlebot は JS を実行するが、レンダリング段階で待たされたり失敗したりすると、せっかくのコンテンツが SEO 評価対象にならない。

Next.js / Remix / Nuxt / SvelteKit など現代フレームワークの SEO 設計では必須知識。

学ばないと起きること

学ぶメリット

• React / Next.js / Vue などの SPA / SSR 設計で SEO 観点を組み込める
• インデックスされない問題を「クロール / レンダリング / インデックス」のどこで止まっているか切り分けられる
• 商談で「JS SEO の 3 段階」を即答できる
• URL 検査ツールで Googlebot レンダリング結果を確認できる

仕組み

Google の JavaScript 処理 3 段階

Google が JS ページを処理するパイプライン:

公式: 「すべての 200 OK ページがレンダリングキューに入る」（noindex を除く）

レンダリング待ちは数秒〜数日

Google のレンダリングリソースには制約があり、ページがキューに入ってから処理されるまで 数秒〜数日かかることがある（公式表現）。 完全 CSR で初期 HTML に主要コンテンツがないと、この遅延の影響を直接受ける。

Googlebot は最新 Chromium

公式: Googlebot は evergreen 版の Chromiumを使用。 最新の Web 技術はほぼ動作するが、実行できない / してくれない API もある。

不可:

• 自動的に許可を求めるブラウザ API（位置情報 / カメラ / 通知）
• 永続化（localStorage / sessionStorage はリクエストごとに初期化）
• WebSocket / WebRTC / Service Worker（リクエスト間で状態保持しない）

可能だが注意:

• 大量の JS 実行でレンダリングが遅延
• 巨大なバンドルサイズはレンダリングキューで待たされる

クロール / リンク発見

公式: 「JavaScript で動的にリンクを挿入しても OK、ただし <a href> 形式であること」

<!-- Googlebot が認識する -->
<a href="/products/dress">商品ページ</a>

<!-- Googlebot が認識しない -->
<a routerLink="/products/dress">商品ページ</a>
<span onclick="goto('/products/dress')">商品ページ</span>
<button onclick="navigate('/products/dress')">商品ページ</button>

JS で挿入するリンクも、最終的に <a href> の形式であれば認識される。

キー概念

canonical を JS で設定する時の注意

公式: HTML で canonical を書くのが最も確実。JS で書く場合の注意:

1. JS で canonical を変える場合、元 HTML と同じ URL を指定する
2. 元 HTML の canonical を JS で別 URL に書き換えるのは避ける
3. HTML に canonical を書けないなら、JS のみで設定する（HTML には書かない）

矛盾を避けるのが原則。

title / meta description も同様

JS で動的設定は可能だが、初期 HTML に書くのが安全。 SPA で URL ごとに違う title を設定する場合、SSR または事前レンダリングが推奨。

lazy-loading の正しい使い方

OK パターン:

<!-- スクロール連動 lazy-load: Googlebot が処理する -->
<img src="article.jpg" loading="lazy" alt="...">

NG パターン:

<!-- ユーザー操作（クリック）を要求: Googlebot は操作しないので無視 -->
<button onclick="loadContent()">続きを読む</button>

ユーザーアクションを必要とする lazy-load の主要コンテンツは SEO 評価対象外。 intersection observer を使ったスクロール連動 lazy-load なら OK。

Web Components（Shadow DOM）

カスタム要素を使う場合:

• ライト DOM の中身は通常通りインデックスされる
• Shadow DOM の中身も Google は基本的に認識する
• スロット（<slot>）使用時は内容が正しく結合されるかテスト

URL 検査ツールでレンダリング結果を確認するのが確実。

互換性のあるコードを書く

Google は polyfill を要求しない。差分配信（differential serving）と機能検出を組み合わせるのが推奨。

if ('IntersectionObserver' in window) {
  // モダン実装
} else {
  // フォールバック
}

ポリフィルできない API もあるので、ドキュメントを確認する。

よくある誤解

実務での適用

Next.js / Remix / Nuxt の SEO 設計

公式推奨は SSR（サーバーサイドレンダリング）または静的生成（SSG）。

canonical の正しい設定例（Next.js）

// HTML（Server Component）で書く
export const generateMetadata = ({ params }): Metadata => ({
  alternates: {
    canonical: `https://example.com/products/${params.slug}`,
  },
});

JS で動的に書き換えるのは避ける。

内部リンクは必ず <a href> で

// OK（Next.js Link コンポーネント）
import Link from "next/link";
<Link href="/products/dress">商品ページ</Link>

// 内部実装が <a href> なので Google が認識する

// NG（onClick だけのナビゲーション）
<button onClick={() => router.push("/products/dress")}>商品ページ</button>

URL 検査ツールでレンダリング確認

Search Console の URL 検査で:

1. URL を入力 → ライブテスト
2. 「レンダリング済みの HTML」を確認
3. 主要コンテンツが入っているか確認
4. 内部リンクが <a href> で出力されているか確認

これで Googlebot が見ている内容を確認できる。

トラブル別の対処

公式ソース

• JavaScript SEO の基本
• Search の JavaScript 問題のトラブルシューティング
• 動的レンダリング
• lazy-loading コンテンツのベスト プラクティス
• リンクのベスト プラクティス

自己テスト

これらの内容を採点付きで挑戦したい場合は、本ドメインのプロ試験で 5 問形式で確認できる。