Next.js の Metadata API で title / description / OGP を設定する

対応バージョン

nextjs 15

前提環境

Next.js App Router のページ・layout 構成を理解していること

概要

Next.js App Router では metadata オブジェクトを export するだけで <title> / <meta> タグが自動生成される。動的ルート（/posts/[slug] 等）ではパラメータに応じたメタデータを generateMetadata で生成する。

インストール

# 追加インストールは不要

静的ページの metadata

// src/app/about/page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "About | TOOLS BOX",
  description: "このサイトについての説明ページです。",
  openGraph: {
    title: "About | TOOLS BOX",
    description: "このサイトについての説明ページです。",
    url: "https://example.com/about",
    siteName: "TOOLS BOX",
    images: [{ url: "https://example.com/og-image.png", width: 1200, height: 630 }],
    type: "website",
  },
};

export default function AboutPage() {
  return <main><h1>About</h1></main>;
}

layout.tsx で共通メタデータを定義する

// src/app/layout.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: {
    default: "TOOLS BOX",
    template: "%s | TOOLS BOX", // page.tsx の title が "%s" に入る
  },
  description: "Next.js / React / TypeScript のコードサンプル集。",
};

動的ルートの generateMetadata

// src/app/posts/[slug]/page.tsx
import type { Metadata } from "next";

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

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  // 実際の実装では DB や CMS からデータを取得する
  const post = await fetchPost(slug);

  return {
    title: post.title, // layout.tsx の template で "%s | TOOLS BOX" になる
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      images: [{ url: post.ogImage }],
    },
  };
}

async function fetchPost(slug: string) {
  return { title: `Post: ${slug}`, description: "記事の説明", ogImage: "/og.png" };
}

export default async function PostPage({ params }: Props) {
  const { slug } = await params;
  return <main><h1>{slug}</h1></main>;
}

ポイント

layout.tsx に title.template を設定すると、配下の page.tsx が文字列で title を返すだけで "ページ名 | サイト名" の形式になる
generateMetadata はサーバーサイドで実行されるため、DB や API からのデータ取得が可能
openGraph.images には絶対 URL を指定する（相対パス不可）
page.tsx の metadata は同階層の layout.tsx の値を上書きする

注意点

静的なページは metadata オブジェクトをエクスポートするだけでよい。動的なページ（slug ベース等）は generateMetadata を使う。layout.tsx に共通メタデータを置き、page.tsx で上書きするパターンが推奨。