React/Next.jsサイトのSEO対策｜SSR/SSGとメタタグ設定

2026年7月16日2026年7月17日

アイキャッチ — Next.jsのロゴと検索エンジンの虫眼鏡アイコンを組み合わせたSEOイメージのイラスト

「Next.jsで作ったサイトって、SEOは大丈夫なの？」

これは、Next.jsでのサイト制作をご提案する際に、お客様から必ずいただく質問です。

この記事の結論

Next.jsはSEOに非常に強いフレームワークです。正しく設定すればWordPressサイト以上のSEOパフォーマンスを発揮できます。ただし、設定を誤ると検索エンジンにまったくインデックス（登録）されないリスクもあります。

この記事では、Next.jsのSEO対策を基本から実践方法まで解説します。

なぜReact単体ではSEOに弱いのか

クライアントサイドレンダリング（CSR）の限界

まず前提として、React単体で作ったサイトはSEOに弱いという事実があります。

Reactの標準的な動作は「クライアントサイドレンダリング（CSR）」です。これは、以下のような流れでページを表示します。

ブラウザがサーバーからほぼ空のHTMLを受け取る
JavaScriptファイルをダウンロードする
JavaScriptが実行され、ブラウザ上でページの内容が描画される

概念図 — CSRの流れ。サーバーから空のHTMLが届き、JavaScriptがブラウザ上でコンテンツを生成する図

問題は、検索エンジンのクローラー（サイトを巡回するロボット）がJavaScriptの実行を完全にはサポートしていない場合があることです。

Googleのクローラーは近年JavaScriptの実行能力が向上していますが、それでも処理に時間がかかったり、一部のコンテンツを読み取れなかったりすることがあります。Google以外の検索エンジン（BingやYahoo!が使うBingのクローラーなど）は、JavaScript対応がさらに限定的です。

Next.jsがこの問題を解決する

Next.jsは、React単体のSEOの弱点をSSR（サーバーサイドレンダリング）とSSG（静的サイト生成）で解決しています。

どちらの方式でも、検索エンジンに完成したHTMLを渡せるため、クローラーがコンテンツを確実に読み取れます。

SSR・SSG・ISRの違い ── SEO観点で理解する

SSR（サーバーサイドレンダリング）

SSR（Server Side Rendering）は、ユーザーがアクセスするたびに、サーバー側でHTMLを生成して返す方式です。

仕組み: リクエスト → サーバーがHTML生成 → ユーザーに返す
SEOへの影響: クローラーに完成したHTMLを提供できるため、SEOに強い
向いているページ: ユーザーごとに内容が変わるページ、リアルタイム性が必要なページ

SSG（静的サイト生成）

SSG（Static Site Generation）は、ビルド時（サイト公開の準備段階）にHTMLを事前生成する方式です。

仕組み: ビルド時にHTML生成 → CDNに配置 → ユーザーに配信
SEOへの影響: 完成したHTMLをCDNから高速配信するため、SEOに最も有利
向いているページ: 会社概要、サービス紹介、ブログ記事など、更新頻度が低いページ

ISR（増分静的再生成）

ISR（Incremental Static Regeneration）は、SSGの進化版です。静的ページを一定時間ごとに自動で再生成する仕組みです。

仕組み: ビルド時にHTML生成 → 設定した間隔で裏側で再生成 → 最新のHTMLに差し替え
SEOへの影響: SSGの速度メリットを維持しつつ、情報の鮮度も保てる
向いているページ: ブログ記事、商品情報、お知らせなど、定期的に更新があるページ

概念図 — SSR・SSG・ISRの3方式を横並びで比較。リクエスト処理のタイミング（アクセス時 / ビルド時 / 定期的）の違いを時系列で表示

SEO対策としてのおすすめ使い分け

ページの種類	おすすめの方式	理由
トップページ	SSG or ISR	高速表示が重要。ISRなら最新情報も反映可能
会社概要・サービス紹介	SSG	更新頻度が低く、速度最優先
ブログ記事	SSG + ISR	ビルド時に生成し、更新時はISRで差し替え
お知らせ一覧	ISR	新しい記事が追加されるたびに再生成
検索結果ページ	SSR	ユーザーの入力に応じて動的に生成
マイページ	CSR	SEO不要。ユーザー認証後の動的コンテンツ

迷ったらSSGを基本に

中小企業のコーポレートサイトなら、コンテンツページはSSGを基本にし、更新頻度の高い箇所だけISRを組み合わせるのが、速度・SEO・運用のバランスが最も良い構成です。

メタタグとOGPの設定 ── Next.jsでの実装

titleタグとdescriptionの設定

検索結果に表示されるタイトルと説明文は、SEOの最も基本的な要素です。

Next.jsでは、App Router（アップルーター）の場合、metadataオブジェクトを使って簡潔に設定できます。

// app/page.tsx
export const metadata = {
  title: "会社名 | サービス内容を端的に表すタイトル",
  description: "120文字以内でページの内容を要約。検索ユーザーがクリックしたくなる説明文を書く",
};

Pages Router（ページズルーター）の場合は、next/headを使います。

import Head from "next/head";

export default function Page() {
  return (
    <>
      <Head>
        <title>会社名 | タイトル</title>
        <meta name="description" content="ページの説明文" />
      </Head>
      {/* ページの内容 */}
    </>
  );
}

各ページに固有のメタタグを設定する

SEO対策で重要なのは、全ページに同じタイトル・説明文を使わないことです。

各ページの内容に合わせて固有のメタタグを設定しましょう。ブログ記事であれば、CMSから取得した記事タイトルや概要を動的に設定できます。

Next.jsでのサイト構築やSEO対策について、ご相談はありませんか？

Web制作・システム開発は
First CHにお任せください

「こんなWebサイトが欲しい」「このシステムは実現できる？」——
現役エンジニアが直接お話を伺い、最適な進め方をご提案します。

お問い合わせはこちら → LINEで気軽に相談する

「まだ構想段階」「費用感だけ知りたい」というご相談も歓迎です。

OGP（SNSシェア設定）── SNSからの流入を最大化する

OGPとは

OGP（Open Graph Protocol）は、サイトのURLがSNSでシェアされた際に表示される画像・タイトル・説明文を制御する仕組みです。

Facebook、X（旧Twitter）、LINEなどでURLをシェアすると、カード型のプレビューが表示されます。このプレビューの内容をコントロールするのがOGPです。

設定後の表示確認には、当社の無料OGP確認ツール（First CH Tools）が使えます。URLを入れるだけでシェア時のカード表示をプレビューできます。

Next.jsでのOGP設定

App Routerの場合、metadataオブジェクトでOGPも一緒に設定できます。

export const metadata = {
  title: "ページタイトル",
  description: "ページの説明文",
  openGraph: {
    title: "SNSシェア時のタイトル",
    description: "SNSシェア時の説明文",
    images: ["/og-image.jpg"],
    type: "website",
    url: "https://example.com/page",
  },
  twitter: {
    card: "summary_large_image",
    title: "X（旧Twitter）用タイトル",
    description: "X（旧Twitter）用説明文",
    images: ["/og-image.jpg"],
  },
};

OGP画像のポイント

OGP画像は、SNSでの見え方を大きく左右します。以下のポイントを押さえてください。

推奨サイズ: 1200 x 630px
ファイル形式: JPEG or PNG
ファイルサイズ: 1MB以下
画像内にテキストを入れる場合は、中央寄せ（SNSによってトリミングされるため）

クローラーへの最適化 ── サイトマップ・robots.txt・構造化データ

サイトマップの自動生成

サイトマップ（sitemap.xml）は、サイト内のページ一覧を検索エンジンに伝えるためのファイルです。

Next.js（App Router）では、app/sitemap.tsファイルを作成することで、サイトマップを自動生成できます。

// app/sitemap.ts
export default function sitemap() {
  return [
    { url: "https://example.com", lastModified: new Date() },
    { url: "https://example.com/about", lastModified: new Date() },
    { url: "https://example.com/blog", lastModified: new Date() },
    // CMSから記事一覧を取得して動的に生成することも可能
  ];
}

サイトマップは自動では作られない

WordPressではプラグインで自動生成できるため意識しなくても済みますが、Next.jsでは自分で設定する必要があります。公開前チェックリストに必ず入れてください。

robots.txtの設定

robots.txtは、検索エンジンのクローラーに「このページはクロールしてOK」「このページはクロールしないで」と指示するファイルです。

// app/robots.ts
export default function robots() {
  return {
    rules: { userAgent: "*", allow: "/", disallow: "/admin/" },
    sitemap: "https://example.com/sitemap.xml",
  };
}

構造化データ ── 検索結果での見え方を強化する

構造化データとは

構造化データ（Structured Data）は、ページの内容を検索エンジンに「意味」として伝える仕組みです。

たとえば、「これは会社の情報です」「これはブログ記事です」「これはFAQです」といった情報をJSON-LD形式で記述します。

正しく設定すると、Google検索結果にリッチスニペット（通常より目立つ表示）が表示される可能性があります。

Next.jsでの構造化データの実装

Next.jsでは、<script>タグを使ってJSON-LDを埋め込みます。

export default function BlogPost({ post }) {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: post.title,
    datePublished: post.publishedAt,
    author: { "@type": "Organization", name: "First CH合同会社" },
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      {/* 記事の内容 */}
    </>
  );
}

中小企業のサイトで設定すべき構造化データ

すべての構造化データを設定する必要はありません。コーポレートサイトで優先度が高いものは以下です。

種類	用途	優先度
Organization	会社情報（名称、ロゴ、連絡先）	高
LocalBusiness	店舗・事業所の住所、営業時間	高（実店舗あり）
BreadcrumbList	パンくずリスト	高
Article	ブログ記事	中
FAQ	よくある質問	中
WebSite	サイト全体の情報	低（基本設定として）

Organization・LocalBusiness・FAQなどのJSON-LDは、当社の無料JSON-LD生成ツール（First CH Tools）でフォーム入力から生成できます。手書きでの記法ミスを防げるのでおすすめです。

画像最適化 ── Next.jsの標準機能を活用する

next/imageコンポーネントの活用

Next.jsには、画像を自動最適化するnext/imageコンポーネントが標準で搭載されています。

主な機能は以下の通りです。

自動リサイズ: 表示サイズに合わせて画像を最適化
WebP/AVIF変換: モダンな画像フォーマットに自動変換
遅延読み込み（Lazy Loading）: 画面に表示されるタイミングで画像を読み込む
CLS（レイアウトシフト）防止: 画像の表示領域を事前に確保

これらはSEOのランキング要素であるCore Web Vitalsの改善に直結します。

alt属性の設定を忘れない

画像のalt属性（代替テキスト）は、検索エンジンが画像の内容を理解するための重要な情報です。

<Image src="/office.jpg" alt="First CH合同会社のオフィス外観" width={800} height={600} />

単に「画像」ではなく、画像の内容を具体的に説明するテキストを設定しましょう。

まとめ ── よくある失敗パターンとSEO対策チェックリスト

よくある失敗パターンと対策

失敗① すべてのページをCSRにしてしまう

Reactの知識だけでNext.jsを使うと、すべてのページがCSR（クライアントサイドレンダリング）になってしまうことがあります。

対策: コンテンツページはSSGまたはSSR、管理画面やマイページなどユーザー固有のページのみCSRにする。

失敗② サイトマップを設定し忘れる

WordPressではプラグインが自動生成してくれるため意識しませんが、Next.jsではサイトマップの設定を自分で行う必要があります。

対策: 公開前のチェックリストにサイトマップとrobots.txtの確認を入れる。

失敗③ 動的なメタタグが生成されていない

ブログ記事のタイトルや説明文が、すべて同じデフォルト値になっているケースがあります。

対策: CMSからデータを取得する際に、各記事のタイトル・説明文をmetadataに反映する処理を実装する。

SEO対策チェックリスト

対策項目	重要度	内容
SSG/SSRの適切な選択	最重要	コンテンツページはSSGまたはSSRで配信
titleとdescriptionの設定	最重要	全ページに固有のメタタグを設定
OGP設定	高	SNSシェア時の表示を最適化
サイトマップ生成	高	sitemap.xmlを自動生成
robots.txt設定	高	クローラーへの適切な指示
構造化データ	中	リッチスニペット表示を狙う
画像最適化	中	next/imageでCore Web Vitals改善
alt属性	中	画像の代替テキストを設定