はじめに

Next.js 14 の App Router では、ページごとの メタデータ（Metadata） を metadata オブジェクトとして簡単に設定できます。

本記事では、基本的なタイトルや説明の設定方法から、動的なメタデータ、OGP（Open Graph Protocol）などの詳細な設定 までを解説します。

1. 基本的な Metadata の設定

App Router では、各ページの metadata を export const metadata = {} の形式で定義できます。

ページのメタデータ設定

JSX
// app/page.js
export const metadata = {
  title: "ホームページ",
  description: "これは Next.js 14 App Router を使ったサンプルサイトです。",
};

export default function HomePage() {
  return <h1>Welcome to Next.js 14</h1>;
}

✅ ポイント

• title: ページのタイトル
• description: メタディスクリプション（SEO や SNS シェア時に表示される）

2. 動的メタデータの設定

generateMetadata を使用すると、ページのパラメータに基づいた 動的なメタデータ を設定できます。

動的メタデータの実装

JSX
// app/products/[id]/page.js
export async function generateMetadata({ params }) {
  const product = await fetch(
    `https://api.example.com/products/${params.id}`
  ).then((res) => res.json());

  return {
    title: `${product.name} - 商品詳細`,
    description: `これは ${product.name} の詳細ページです。`,
  };
}

export default function ProductPage({ params }) {
  return <h1>商品ページ: {params.id}</h1>;
}

✅ ポイント

• generateMetadata は 非同期関数 を使えるので、API からデータを取得して設定可能。
• params.id を使って 動的なタイトルや説明を生成 できる。

3. OGP（Open Graph Protocol）の設定

SNS でのシェア時に適切な情報を表示するために、OGP のメタタグも設定できます。

OGP メタデータの例

JSX
// app/page.js
export const metadata = {
  title: "ホームページ",
  description: "Next.js 14 App Router の OGP 設定サンプル。",
  openGraph: {
    title: "ホームページ - Next.js 14",
    description: "Next.js 14 のメタデータ設定の解説。",
    url: "https://example.com",
    siteName: "Example Site",
    images: [
      {
        url: "https://example.com/og-image.jpg",
        width: 1200,
        height: 630,
      },
    ],
    locale: "ja_JP",
    type: "website",
  },
};

✅ ポイント

• openGraph.title: OGP 用のタイトル
• openGraph.description: OGP 用の説明文
• openGraph.url: ページの URL
• openGraph.images: シェア時に表示する画像の URL・サイズ
• openGraph.locale: 言語設定（日本語なら ja_JP）
• openGraph.type: website, article などの種類

4. まとめ

Next.js 14 の App Router では、metadata を使って ページごとのメタデータを簡単に管理 できます。

✅ 学んだこと

• metadata を使って 静的なタイトルや説明を設定 できる。
• generateMetadata を使えば API から動的なメタデータを取得可能。
• openGraph を活用すると SNS シェア時の OGP 設定が可能。

適切なメタデータを設定することで、SEO を強化し、SNS でのシェア時にも最適な表示を実現 できます。