Next.jsでSEO対策を強化するための5つのポイント + アンチパターンの回避策

2025年5月8日

Next.jsでSEOを最大限に活用するには、正しい実装の積み重ねが欠かせません。

とくにApp Router導入後のNext.jsでは、従来のSSR/SSGに加え、metadataやrobots.txtなどの設定も柔軟に扱えるようになっています。

この記事では、SEOを意識したNext.jsプロジェクトにおいて「必ず押さえておきたい5つのポイント」を、公式ドキュメントとともに、サンプルコードを交えて丁寧に解説いたします。

1. 各ページごとのメタデータの最適化

SEOにおける第一歩は、適切な<title>や<meta>タグの設定です。

Next.jsでは、App Router以降の環境でmetadataオブジェクトを用いて、ページごとのメタ情報を構造的に設定できます。

App Routerでの設定方法（`app/`ディレクトリ）

tsx// app/page.tsx
export const metadata = {
  title: 'ホームページ - MyApp',
  description: 'これはMyAppのトップページです。最新の機能と使いやすさを紹介します。',
  keywords: ['Next.js', 'SEO', 'MyApp'],
  openGraph: {
    title: 'MyApp公式トップページ',
    description: '魅力的なアプリケーションを体験しよう。',
    url: 'https://example.com',
    siteName: 'MyApp',
    images: [
      {
        url: 'https://example.com/og-image.jpg',
        width: 800,
        height: 600,
      },
    ],
    locale: 'ja_JP',
    type: 'website',
  },
};

公式ガイド：https://nextjs.org/docs/app/api-reference/functions/generate-metadata

Pages Routerの場合（従来の`next/head`）

tsximport Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>ホームページ - MyApp</title>
        <meta name="description" content="これはMyAppのトップページです" />
        <meta name="keywords" content="Next.js, SEO, MyApp" />
        <meta property="og:title" content="MyApp公式トップページ" />
        <meta property="og:image" content="https://example.com/og-image.jpg" />
      </Head>
      <main>...</main>
    </>
  );
}

ポイント：

titleやdescriptionはユニークかつ具体的な内容にする
OGP対応によりSNSシェア時の表示品質を向上
言語・地域設定（locale）も意識

2. SSG（静的生成）とISRの適切な活用

Googleなどの検索エンジンは、クライアント側で生成されたコンテンツを正しく認識できない場合があります。

そのため、SEOの観点では、**サーバー側でHTMLを生成（Pre-rendering）**することが重要です。

静的生成（SSG）の使い方

tsx// app/page.tsx
export const dynamic = 'force-static';

export default function Page() {
  return <div>静的にビルドされたページです</div>;
}

ISR（Incremental Static Regeneration）

特定ページを静的生成しつつ、バックグラウンドで再生成を行うことが可能です。

tsx// app/posts/[slug]/page.tsx
export const revalidate = 60; // 60秒ごとに再生成

export default async function PostPage({ params }) {
  const post = await fetchPost(params.slug);
  return <PostDetail post={post} />;
}

公式ガイド：https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic-rendering

ポイント：

クローラーに優しいHTMLを返すにはSSG/ISRを優先
ISRで動的データを含むページもSEO対応可能
revalidateを適切に設計することが重要

3. robots.txtとsitemap.xmlの整備

検索エンジンに正しくクロールされるようにするには、robots.txtとsitemap.xmlの提供が不可欠です。

Next.jsでは公式に推奨されているパッケージがあります。

パッケージ導入

bashyarn add next-sitemap

`next-sitemap.config.js`の例

js/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: 'https://example.com',
  generateRobotsTxt: true,
  sitemapSize: 7000,
};

スクリプト追加

json// package.json
{
  "scripts": {
    "postbuild": "next-sitemap"
  }
}

ビルド時にsitemap.xmlとrobots.txtが自動生成されます。

出力パス：.next/public/sitemap.xml など

公式ガイド：https://www.npmjs.com/package/next-sitemap

ポイント：

DisallowやAllowでクロール制御を行う
特定ディレクトリを除外する設定も可能
sitemap.xmlは検索エンジンへの送信も重要

4. 構造化データ（JSON-LD）の埋め込み

Google検索のリッチリザルト対応には、構造化データの設置が必要です。

Next.jsでは<script type="application/ld+json">を<Head>内に記述する方法が一般的です。

ブログ記事用のJSON-LD例

tsximport Head from 'next/head';

export default function BlogPost({ post }) {
  const structuredData = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    datePublished: post.publishedAt,
    author: {
      '@type': 'Person',
      name: post.author,
    },
  };

  return (
    <>
      <Head>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(structuredData),
          }}
        />
      </Head>
      <article>
        <h1>{post.title}</h1>
        <p>{post.content}</p>
      </article>
    </>
  );
}

ポイント：

@contextと@typeを必ず定義する
日付・著者情報なども含める
Googleの構造化データテストツールで確認

5. Core Web Vitalsの対応

Googleはページ速度・インタラクティブ性・レイアウト安定性など、UX指標をSEO評価に利用しています。

Next.jsでは自動的に最適化される部分もありますが、手動で対応すべき項目も存在します。

LCP（最大コンテンツの表示速度）改善例

tsximport Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="ヒーロー画像"
      width={1200}
      height={630}
      priority // LCP対象画像には優先読み込みを
    />
  );
}

CLS（レイアウトのズレ）対策

画像サイズやフォント遅延の影響を回避するため、明示的なwidth/height設定を行います。

その他のTips：

next/fontでフォント遅延を最小化
next/scriptで外部スクリプトの遅延読込を設定
loading="lazy"やpriorityでリソース最適化

公式ガイド：https://nextjs.org/docs/advanced-features/measuring-performance

Google連携とSEO監視体制の構築

SEOの取り組みは実装だけで完結せず、「検索結果にどう表示されているか」「正しくクロールされているか」をモニタリングする体制が重要です。

Googleが提供している無料ツール「Google Search Console」は、その中核を担います。

Google Search Consoleへの登録方法

Google Search Console にアクセス
プロパティタイプ「URLプレフィックス」を選択し、サイトのURL（例：https://example.com）を入力
提示された方法でドメイン所有権を確認（HTMLタグやDNSレコードなど）

所有権確認タグの設置（App Router）

Next.jsのApp Routerでは、<head>タグはレイアウトファイルで構成するのが一般的です。

tsx// app/layout.tsx
export const metadata = {
  title: 'MyApp',
  verification: {
    google: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXX', // HTMLタグのcontent値
  },
};

クロール状況のチェック

登録後、以下をチェックします。

機能名	内容
URL検査	任意のページのインデックス状況を確認
クロール統計	ボットによるクロール頻度、エラー情報などを表示
サイトマップ	`sitemap.xml`の送信と処理状況を確認
モバイルユーザビリティ	モバイル環境での表示崩れや操作性エラーの有無を確認

ポイント：

robots.txtにブロックがないかを常に意識
クロール済みでもインデックス登録されていないことがある
定期的なモニタリングで問題の早期発見が可能

よくあるSEOアンチパターンとその回避策

SEOを強化する際、意図せず評価を落とす実装もあります。

以下に代表的なNGパターンを挙げ、それぞれの対処法を示します。

1. コンテンツのクライアント側レンダリング

tsx// NG例：全データがCSRでのみ取得されるケース
export default function Blog() {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    fetch('/api/posts').then(res => res.json()).then(setPosts);
  }, []);
}

上記のように、クローラーが取得できるHTMLに何も表示されていない状態では、インデックス対象にならない可能性が高まります。

対処法：

App RouterのgenerateStaticParamsやfetchでサーバー側で取得
ISRの利用により、リアルタイム性も両立可能

2. canonicalタグの欠落

コンテンツのURLが複数存在する場合、正規ページを明示するためにcanonicalタグの設置が重要です。

tsx<Head>
  <link rel="canonical" href="https://example.com/page" />
</Head>

対処法：

サブパスやクエリパラメータ付きURLの乱立を防ぐ
canonicalを使い、評価が分散しないようにする

3. LCP画像の遅延読み込み

next/imageでpriorityを設定しないと、LCP画像が遅れて表示され、SEOスコアが下がる可能性があります。

tsx<Image
  src="/hero.jpg"
  alt="トップ画像"
  width={1200}
  height={630}
  priority // LCP対象画像には付与
/>

対処法：

ファーストビューに表示する画像には必ずpriorityを設定
layout="fill"を使う場合は、親コンテナに明示的な高さを設定

4. 404ページ未対応

Next.jsでは自動的に404.tsxを設置しないと、Not Found時の挙動が不自然になる可能性があります。

tsx// app/not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h1>ページが見つかりません</h1>
      <p>お探しのページは存在しないか、削除されました。</p>
    </div>
  );
}

対処法：

SEO的にもUX的にも、正しいステータスコード（404）とメッセージを返すことが望ましい

サイト構造全体の見直し

単一ページの対策だけでなく、サイト全体の構造や内部リンクの設計もSEOでは非常に重要です。

内部リンクの最適化

Next.jsでは、<Link>コンポーネントを使うことで、クライアント遷移によるUX改善だけでなく、SEO的にもクローラビリティの向上が期待できます。

tsximport Link from 'next/link';

<Link href="/blog/seo-tips">SEO対策の記事を見る</Link>

パンくずリストの設置

構造化データとしてパンくずリストを用意することで、リッチリザルトの表示対象となる可能性が高まります。

tsx<script type="application/ld+json" dangerouslySetInnerHTML={{
  __html: JSON.stringify({
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "ホーム",
        "item": "https://example.com"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "SEO対策",
        "item": "https://example.com/seo"
      }
    ]
  })
}} />

URL構造の最適化

意味のあるスラッグを使う（例：/blog/nextjs-seo-guide）
_ではなく-で単語を区切る（SEOにおける推奨）
できるだけ深い階層を避ける（/blog/2025/05/08/seo → NG）

ポイント：

情報の階層構造がURLに反映されるように設計
リンクの孤立（オーファンページ）を防ぐ
サイトマップとの整合性も重要

この記事のまとめ

Next.jsでSEOを強化するためには、初期構築時の設定だけでなく、継続的な運用やモニタリングも含めた包括的な対応が求められます。

今回ご紹介した5つのポイントを整理すると、以下のようになります。

ポイント	主な目的	重要な設定・実装箇所
1. メタデータの最適化	各ページの検索結果表示をコントロール	`metadata`オブジェクト（App Router） / `next/head`（Pages Router）
2. SSGとISRの活用	クローラーにHTMLを提供しインデックス促進	`dynamic = 'force-static'`, `revalidate` の指定
3. robots.txtとsitemap.xmlの整備	クロール制御とサイト構造の通知	`next-sitemap`による自動生成
4. 構造化データの埋め込み	リッチリザルト表示の可能性を高める	JSON-LDスニペット（ブログ記事、パンくずなど）
5. Core Web Vitalsへの対応	UXとページ評価を両立	`next/image`, `next/font`, `priority`, `layout` など

さらに、Google Search Consoleとの連携を通じて、クロール状況やインデックス登録状況、UXエラーの発見と改善が可能になります。

また、よくある失敗パターンとして以下を避けることも重要です。

クライアントレンダリングに頼りすぎる設計
canonicalや構造化マークアップの未整備
表示速度や安定性を意識しない画像・フォント実装
404ページ未対応
サイト構造や内部リンク設計の不備

Next.jsは、Reactベースの柔軟なフレームワークでありながら、静的生成・動的再生成・インクリメンタル更新・パフォーマンス最適化など、SEOにおいても非常に強力な機能を提供しています。

それらの機能を正しく活かし、開発時の工夫と運用時の分析をバランスよく行うことが、検索上位表示の近道です。

今後も仕様変更やアルゴリズムの更新に合わせ、公式ドキュメントを随時参照しながら柔軟に対応していきましょう。

公式ドキュメント一覧：

この5つのSEO対策を適切に活用することで、Next.jsアプリケーションの検索パフォーマンスが大きく向上します。

初めての方も、一つひとつ確実に取り組むことで成果につながるはずです。

Next.jsでSEO対策を強化するための5つのポイント + アンチパターンの回避策

1. 各ページごとのメタデータの最適化

App Routerでの設定方法（app/ディレクトリ）

Pages Routerの場合（従来のnext/head）

2. SSG（静的生成）とISRの適切な活用

静的生成（SSG）の使い方

ISR（Incremental Static Regeneration）

3. robots.txtとsitemap.xmlの整備

パッケージ導入

next-sitemap.config.jsの例

スクリプト追加

4. 構造化データ（JSON-LD）の埋め込み

ブログ記事用のJSON-LD例

5. Core Web Vitalsの対応

LCP（最大コンテンツの表示速度）改善例

CLS（レイアウトのズレ）対策

Google連携とSEO監視体制の構築

Google Search Consoleへの登録方法

所有権確認タグの設置（App Router）

クロール状況のチェック

よくあるSEOアンチパターンとその回避策

1. コンテンツのクライアント側レンダリング

2. canonicalタグの欠落

3. LCP画像の遅延読み込み

4. 404ページ未対応

サイト構造全体の見直し

内部リンクの最適化

パンくずリストの設置

URL構造の最適化

この記事のまとめ

Next.jsの記事Nextjs

一瞬で表示！Next.js × Edge Runtimeで始める超低遅延サーバーレス開発