Next.js SEO最適化

Next.js App Router アプリケーション向けの包括的な SEO ガイド。

簡易 SEO 監査

任意の Next.js プロジェクトに対してこのチェックリストを実行します:

1. robots.txt を確認: curl https://your-site.com/robots.txt
2. サイトマップを確認: curl https://your-site.com/sitemap.xml
3. メタデータを確認: ページソースを表示して <title> と <meta name="description"> を検索
4. JSON-LD を確認: ページソースを表示して application/ld+json を検索
5. Core Web Vitals を確認: Chrome DevTools で Lighthouse を実行

必須ファイル

app/layout.tsx - ルートメタデータ

import type { Metadata, Viewport } from 'next';

// Viewport は別の export である必要があります。`metadata` オブジェクト内の
// `themeColor`、`colorScheme`、`viewport` はサポートされていません。
export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 5,
  userScalable: true,
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
    { media: '(prefers-color-scheme: dark)', color: '#0a0a0a' },
  ],
};

export const metadata: Metadata = {
  metadataBase: new URL('https://your-site.com'),
  title: {
    default: 'Site Title - Main Keyword',
    template: '%s | Site Name',
  },
  description: 'キーワードを含む魅力的な説明文 (150-160文字; Google は通常この範囲で表示)',
  keywords: ['keyword1', 'keyword2', 'keyword3'],
  openGraph: {
    type: 'website',
    locale: 'en_US',
    url: 'https://your-site.com',
    siteName: 'Site Name',
    title: 'Site Title',
    description: 'ソーシャルシェア用の説明文',
    images: [{ url: '/og-image.png', width: 1200, height: 630, alt: 'Site preview' }],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Site Title',
    description: 'Twitter 用の説明文',
    images: ['/og-image.png'],
  },
  alternates: {
    canonical: '/',
  },
  robots: {
    index: true,
    follow: true,
  },
};

app/sitemap.ts - 動的サイトマップ

import type { MetadataRoute } from 'next';

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = 'https://your-site.com';

  return [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 1,
      images: [`${baseUrl}/og-image.png`], // 画像サイトマップのエントリ
    },
    {
      url: `${baseUrl}/about`,
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8,
    },
  ];
}

app/robots.ts - Robots設定

import type { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  const baseUrl = 'https://your-site.com';

  return {
    rules: [
      {
        userAgent: '*',
        allow: '/',
        disallow: ['/api/', '/admin/'],
        // /_next/ を disallow しないこと — クローラーはレンダリングに必要な CSS/JS が必要です
        // ワイルドカード をオーバーライドする場合を除き、ボット固有のルール (Googlebot, Bingbot) を追加しないこと
      },
    ],
    sitemap: `${baseUrl}/sitemap.xml`,
    host: baseUrl,
  };
}

主要な原則

コンポーネントのキャッシングと SEO

next.config.ts で cacheComponents: true を使用する場合、SEO に重要なサーバーコンポーネントに "use cache" ディレクティブを使用します:

// app/(home)/sections/hero-section.tsx
export async function HeroSection() {
  "use cache";
  cacheLife("minutes");   // 組み込みプロファイル: 約15分
  cacheTag("hero");       // revalidateTag("hero") 経由での対象キャッシュ無効化用

  const data = await fetchData();
  return <div>{/* SEO 表示用コンテンツ */}</div>;
}

重要なルール:

• "use cache" は関数本体の最初のステートメントである必要があります
• キャッシュスコープ内で cookies()/headers() を使用しないこと
• export const revalidate の代わりに cacheLife() + cacheTag() を使用
• サイトマップとメタデータはデフォルトで静的です — 動的データを取得する場合のみ "use cache" を使用

SEO のためのレンダリング戦略

戦略	使用時期	SEO への影響
"use cache"	定期的にデータを取得するサーバーコンポーネント	最高 - キャッシュ HTML、高速 TTFB
SSG (Static)	コンテンツはほとんど変わらない	最高 - プリレンダリング HTML
SSR	リクエストごとの動的コンテンツ	優良 - サーバーレンダリング
CSR	ダッシュボード、認証が必要な領域	劣悪 - SEO ページでは避けるべき

Core Web Vitals ターゲット

メトリクス	ターゲット	影響
LCP (Largest Contentful Paint)	< 2.5秒	読み込み速度
INP (Interaction to Next Paint)	< 200ms	インタラクティブ性
CLS (Cumulative Layout Shift)	< 0.1	視覚的安定性

リファレンス

• Metadata API: references/metadata-api.md を参照
• Sitemap & Robots: references/sitemap-robots.md を参照
• JSON-LD 構造化データ: references/json-ld.md を参照
• SEO監査チェックリスト: references/checklist.md を参照
• トラブルシューティング: references/troubleshooting.md を参照

避けるべき一般的な誤り

1. next-seo と Metadata API を混在させる - App Router では Metadata API のみを使用
2. 正規 URL の欠落 - 常に alternates.canonical を設定
3. SEO ページに CSR を使用 - インデックス可能なコンテンツには SSG/SSR を使用
4. robots.txt で /_next/ をブロック - クローラーはレンダリングに必要な CSS/JS が必要です; /_next/ を disallow しないこと
5. metadataBase の欠落 - メタデータ内の相対 URL に必要です
6. メタデータ内に Viewport - 別の export である必要があります
7. メタデータオブジェクトと generateMetadata を混在させる - どちらか一方を使用し、両方ではありません

クイックフィックス

ページに noindex を追加

export const metadata: Metadata = {
  robots: {
    index: false,
    follow: false,
  },
};

ページごとの動的メタデータ

type Props = { params: Promise<{ id: string }> };

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { id } = await params;            // 現在の Next.js では params は Promise です
  const product = await getProduct(id);
  return {
    title: product.name,
    description: product.description,
  };
}

動的ルートの正規 URL

type Props = { params: Promise<{ slug: string }> };

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  return {
    alternates: {
      canonical: `/products/${slug}`,
    },
  };
}