Next.js (App Router) で実現する最新SEO戦略：Metadata APIとサーバーコンポーネントの活用

はじめに

Next.jsのApp Router（src/app）の導入により、SEO対策の実装方法は劇的に進化しました。従来の _document.tsx や _app.tsx での複雑な管理は不要になり、Metadata API を通じて、より安全かつ強力に検索エンジンへアピールすることが可能になっています。

1. Metadata APIによる動的SEO

App Routerの最大の特徴は、各フォルダの page.tsx や layout.tsx から metadata オブジェクトをエクスポートするだけでSEO設定が完了する点です。

• 静的メタデータ: layout.tsx でサイト共通のタイトルやディスクリプションを定義。
• 動的メタデータ: generateMetadata 関数を使い、microCMSから取得した記事タイトルや画像をリアルタイムでメタデータに反映させます。

2. サーバーコンポーネントと表示速度

App RouterはデフォルトでReact Server Components (RSC)です。

• ゼロ・クライアントサイドJS: SEOに必要なメタデータや初期表示のHTMLはすべてサーバー側で生成され、ブラウザには最小限のJavaScriptしか送られません。
• ストリーミング: loading.tsx を活用することで、コンテンツの準備ができた部分から順次表示。ユーザーを待たせず、Googleの「LCP（最大視覚コンテンツの表示時間）」スコアを劇的に改善します。

3. 特殊なファイルによる自動最適化

App Routerでは、特定のファイル名を使うだけでSEOに関連するリソースを自動生成できます。

• sitemap.ts: microCMSの全記事URLをループ処理して、sitemap.xml を動的に生成。
• robots.ts: クローラーの制御設定をコードベースで管理。
• opengraph-image.tsx: 記事タイトルを画像に合成した「動的OGP画像」をNext.js内で生成可能。

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

App Routerでは、コンポーネント内で直接 <script> タグを記述するだけで構造化データを埋め込めます。

TypeScript

// page.tsx 内で直接記述
const jsonLd = {
  '@context': 'https://schema.org',
  '@type': 'TechArticle',
  headline: post.title,
  // ...
};

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

まとめ

App RouterにおけるSEOは、Next.jsの標準機能をフル活用することで、かつてないほどシンプルかつ強力になりました。サーバーサイドでのデータ取得とMetadata APIを組み合わせ、検索エンジンとユーザーの両方に最高の体験を提供しましょう。