Next.js SEO は App Router で metadata API + Server Components が標準

なぜこれを学ぶか

Next.js は React フレームワークの SEO 標準。 App Router の機能を正しく使えば、SPA 的に書きながら完全な SEO 対応が可能。

Next.js を使うすべての担当者で必須。

学ばないと起きること

学ぶメリット

• Next.js での完全 SEO 対応
• 高速 + SEO 両立
• 商談で「App Router SEO」を即答

仕組み

metadata API

// app/page.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'spotyou - SEO/AEO ガイド',
  description: '無料で学べる SEO/AEO 完全ガイド',
  openGraph: {
    title: 'spotyou - SEO/AEO ガイド',
    description: '...',
    images: ['/og.png'],
  },
  twitter: {
    card: 'summary_large_image',
  },
  robots: {
    index: true,
    follow: true,
  },
  alternates: {
    canonical: 'https://spotyou.ai/',
  },
};

generateMetadata（動的）

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      images: [post.image],
    },
  };
}

各記事ごとに動的 metadata 生成。

Server vs Client Components

SEO 重視なら Server Components がデフォルト。

sitemap.xml の自動生成

// app/sitemap.ts
import type { MetadataRoute } from 'next';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getPosts();
  return posts.map(post => ({
    url: `https://spotyou.ai/blog/${post.slug}`,
    lastModified: post.updatedAt,
  }));
}

robots.txt の生成

// app/robots.ts
import type { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: { userAgent: '*', allow: '/' },
    sitemap: 'https://spotyou.ai/sitemap.xml',
  };
}

キー概念

構造化データの実装

// 各ページで
const jsonLd = {
  '@context': 'https://schema.org',
  '@type': 'Article',
  headline: post.title,
  // ...
};

return (
  <article>
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
    />
    {/* コンテンツ */}
  </article>
);

Server Component 内でレンダリング。

Edge Runtime vs Node.js Runtime

// Edge Runtime（高速、制限あり）
export const runtime = 'edge';

// Node.js Runtime（標準）
export const runtime = 'nodejs';

SEO 重要ページは Edge Runtime で TTFB 改善。

ISR / 再検証

export const revalidate = 3600;  // 1 時間

または on-demand:

import { revalidatePath } from 'next/cache';
revalidatePath('/blog');

Image 最適化

import Image from 'next/image';

<Image
  src="/hero.jpg"
  width={1200}
  height={630}
  alt="..."
  priority  // LCP 候補なら priority
/>

AVIF / WebP / srcset を自動生成。

よくある誤解

実務での適用

App Router 標準構成

app/
  layout.tsx        // 共通 metadata
  page.tsx          // トップページ
  sitemap.ts        // sitemap 生成
  robots.ts         // robots.txt 生成
  blog/
    page.tsx        // ブログ一覧
    [slug]/
      page.tsx      // 記事 + generateMetadata

CWV 最適化

1. Server Components デフォルト
2. dynamic import で重い JS 遅延
3. next/image で画像最適化
4. Edge Runtime で TTFB 改善
5. Streaming SSR で LCP 改善

トラブル別の対処

公式ソース

• Next.js Metadata
• Next.js Image
• App Router

自己テスト

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