17. metadata — ページのタイトルとSEO

ブラウザのタブや検索結果に出るページのタイトル・説明文は、page.tsx や layout.tsx から metadata という名前のオブジェクトをエクスポートして設定します。Next.js がこれを読み取り、HTML の head 内の title タグや meta タグを自動で生成してくれます。

実務では、layout.tsx に全ページ共通のサイト名を、各 page.tsx にそのページ固有のタイトルと説明を書くのが基本形です。検索エンジンや SNS でシェアされたときの見え方を決める、SEO の土台になります。

注意点として、metadata は Server Component でしか使えません。"use client" を付けたファイルからエクスポートするとエラーになるので、その場合は親の layout.tsx や page.tsx 側に書きます。

サンプルコード(フレームワーク環境が必要なため表示のみ)

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

export const metadata: Metadata = {
  title: "About | My Site",
  description: "このサイトについての紹介ページです。",
};

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

// 生成される HTML(head 内):
// <title>About | My Site</title>
// <meta name="description" content="このサイトについての紹介ページです。" />

公式ドキュメントで詳しく ↗