言語

JavaScriptフレームワークのSEO

React、Next.js、Vue、Nuxt、Angular、Svelte、AstroなどJavaScriptフレームワークのSEOを解説します。SSR、SSG、CSRのレンダリングモードがGoogleのインデックス登録をどう決めるか、初期状態でどのフレームワークがSEOに最も適しているかを扱います。

初回公開：2026年6月26日 · 最終更新：2026年8月3日 · Advanced
言語
AI執筆者：AI v2

JavaScriptフレームワークのSEOはレンダリングモードで決まります。SSGとSSRはGooglebotに事前生成HTMLを渡しますが、CSRは成功するとは限らないJavaScript実行に依存します。Next.jsとNuxtはSSR、SSG、ISR、メタデータAPIによる組み込みSEOサポートが最も充実し、純粋なReactとVueのCSRモードはリスクが高くなります。AstroはデフォルトのIslandアーキテクチャがSEOに適しており、Angularは安定したインデックス登録に@angular/ssrが必要です。

TL;DR — 技術的には、JSフレームワークのSEOは（1）初期HTMLペイロードのレンダリングアーキテクチャ、 （2）レスポンス送信前の<head>へのメタデータ注入、（3）ハイドレーションとリンク発見の扱い、 （4）ISRキャッシュの古さに関係します。Next.jsには最も完全な組み込みSEOツール（Metadata API、組み込みのapp/sitemap.ts、画像最適化）があります。 Astroはアーキテクチャ上、最もSEO安全です。

フレームワークごとのレンダリングモード、メタデータAPI、ISRサポート

フレームワークの機能とデフォルトはバージョンによって変わるため、各フレームワークの公式ドキュメントで確認してください。 Evidence for this claim Primary standard or official documentation supporting the adjacent article claim. Scope: Protocol semantics and Search behavior are kept separate; no indexing, ranking, or migration-timing guarantee is inferred. Confidence: high · Verified: web.dev: Rendering on the Web レンダリングモードがインデックス登録やランキングを保証することはありません。 Evidence for this claim Primary standard or official documentation supporting the adjacent article claim. Scope: Protocol semantics and Search behavior are kept separate; no indexing, ranking, or migration-timing guarantee is inferred. Confidence: high · Verified: Google: JavaScript SEO basics フレームワークを比較する決定では、候補ごとに同じルート、コンテンツ、デプロイ対象、ツールをテストしてください。これらを入れ替えるベンチマークは、フレームワークではなく設定の違いを測っています。

フレームワークデフォルトのレンダリング組み込みメタデータAPISSR／SSGサポートエコシステムのSEOサポート
AstroSSG（islands）Yes（.astroファイルの<head>、構造化データ用Content Collections）BothStrong
Next.jsSSR／SSG（設定可能）Yes（App RouterのMetadata API）Both + ISRExcellent
NuxtデフォルトSSRYes（useHead、useSeoMeta）Both + ISRExcellent
SvelteKitデフォルトSSRYes（svelte:head）BothGood
React Router（フレームワークモード）デフォルトSSRYes（meta export）SSR + DeferredGood
AngularデフォルトCSRAngularのMeta／Titleサービス経由@angular/ssr経由Moderate
React（bare）CSR手動（react-helmet-async、react-helmetは未保守）Next.js／Gatsby経由ラッパーによる
Vue（bare）CSR手動（@unhead/vue、vue-metaは未保守）Nuxt経由ラッパーによる

Remix v2とReact Router v7は統合されました。Remixのサーバーレンダリングとデータ読み込みモデルはReact Routerの「framework mode」として提供され、 Remix v2アプリの安定したアップグレード経路になっています。Remix 3は別の実験的なReact非依存の書き直し（ベータ）であり、 Remix v2の後継ではありません。ReactコードベースのドロップインSSRオプションとして扱わないでください。

メタデータのタイミング、クロール可能なリンク、ISRキャッシュの古さ

メタデータ注入のタイミング — メタデータ（<title>、<meta>）はJavaScriptがページ読み込み後に追加するのではなく、 サーバーレスポンスに含める必要があります。Next.jsのMetadata API、NuxtのuseSeoMeta、Astroの<head>コンポーネントは正しく処理します。 document.title = '...'やCSRモードのReact Helmetはそうではなく、初期HTMLが配信された後に実行されます。

リンク発見 — GooglebotはHTMLを解析してリンクを発見します。JavaScriptで追加されたリンク（onClick、<a>タグなしの動的ルーティング）は、 発見されない可能性があります。重要なナビゲーションには実際の<a href>要素を使ってください。

ハイドレーションと重複コンテンツ — SSRとCSRが異なるコンテンツをレンダリングすると（ハイドレーションの不一致）、 ユーザーに見えるものと一致しないコンテンツがインデックス登録されることがあります。ブラウザーのコンソールでハイドレーションエラーをテストしてください。

ソフト404 — クライアントサイドルーターは、HTTPステータス200を返しながら「ページが見つかりません」UIを静かにレンダリングできます。 検索エンジンはこれを実在するページとしてインデックス登録します。404ページが実際の404ステータスを返し、サーバー側リダイレクトが301を返すようにします。

ISRキャッシュの無効化 — Next.jsとNuxtのISR構成では、再検証の期間中に古いページがクローラーへ配信される可能性があります。 時間ベースのrevalidate間隔を設定し、CMS保存など自分で制御しない予定更新のコンテンツには、Webhookからルートハンドラーを介してオンデマンド再検証を起動します。 詳しくはNext.js ISR guideの完全なAPIを参照してください。

// app/blog/[id]/page.tsx — time-based revalidation
export const revalidate = 3600 // re-check this page at most once an hour

// app/api/revalidate/route.ts — on-demand revalidation, called by a CMS webhook
import { revalidatePath } from 'next/cache'
import { NextRequest, NextResponse } from 'next/server'

export async function POST(request: NextRequest) {
  const { path, secret } = await request.json()
  if (secret !== process.env.REVALIDATE_SECRET) {
    return NextResponse.json({ message: 'Invalid secret' }, { status: 401 })
  }
  revalidatePath(path) // e.g. '/blog/1' — next request regenerates fresh HTML
  return NextResponse.json({ revalidated: true })
}

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.