generateMetadataの使い方：ページごとのtitle・description・OGPを生成する
generateMetadataで記事や商品のデータから検索結果向け情報とOGPを生成します。ページ本文との一致、metadataBase、サーバーでの実行を確認します。
generateMetadataで記事や商品のデータから検索結果向け情報とOGPを生成します。ページ本文との一致、metadataBase、サーバーでの実行を確認します。
対象環境と役割
App Routerで使う機能
この記事のApp Routerの例はNext.js 15以降の非同期リクエストAPIに合わせた書き方です。Next.js 16ではCache Componentsを有効にしない構成を前提とします。Pages Routerの記事とは配置先・実行場所が異なるため、プロジェクトのルーターとバージョンを先に確認してください。
TypeScriptの例は5.2以降と、利用するNext.jsが対応するNode.jsを前提にします。app/layout.tsx を備えたApp Routerプロジェクトで実行してください。
引数・戻り値・受け渡すデータ
params などを受け取り、Metadata 型のオブジェクトを返します。非同期関数なら Promise<Metadata> です。固定情報は metadata、動的情報は generateMetadata と役割を分けます。
コード例を動かす
app/items/[slug]/page.tsx を作成する
以下はこのファイルとして配置する例です。既存ファイルへ追記する場合は、同じ名前のexportやURLが重複しないように統合してください。
import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
const items: Record<string, string> = { notebook: '学習ノート' };
type Props = { params: Promise<{ slug: string }> };
export function generateStaticParams() { return [{ slug: 'notebook' }]; }
export const dynamicParams = false;
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const { slug } = await params;
const title = items[slug];
if (!title) notFound();
return { title, description: `${title}の使い方と特徴を紹介します。` };
}
export default async function Item({ params }: Props) {
const { slug } = await params;
return <main><h1>{items[slug]}</h1></main>;
}実行結果と処理の順序
/items/notebook ではブラウザーのタイトルに「学習ノート」が入り、descriptionが生成されます。親layoutにtitleテンプレートがある場合は、その規約も適用されます。
実務では本文とメタデータが同じ商品を参照するように共通の取得処理へまとめます。OG画像のURLを追加する場合は、絶対URLまたは適切な metadataBase と組み合わせ、実際に画像が公開されているか確認します。
つまずきやすい点と使い分け
Client Componentではexportしない
この機能はサーバー側で使います。操作ボタンのためにページ全体へ use client を付けると衝突するため、操作部分を子コンポーネントへ分けます。
キーワードを詰め込まない
実際の本文にない情報や過大な説明を入れず、ページ固有の内容を短く表します。メタデータの設定だけで検索順位やAI検索への採用が保証されるわけではありません。
静的出力で使えるか
この例はビルド時に値を確定できるため静的出力に組み込めます。CMS更新などで値を変えた場合は再ビルド・再配置が必要です。
確認課題と実務への応用
自分で値を変えて確認する
タイトルを変更し、本文H1とheadのtitle/descriptionを比較します。OGPを加えたら、画像のHTTP応答とSNS側のキャッシュも分けて確認してください。
開発サーバーだけでなく、本番用ビルドと公開先でも確認します。URLを直接開く場合と画面内のリンクから遷移する場合、値がない場合と不正な値の場合を分けて試すと、型だけでは防げない入力の問題が見つかります。
公式資料と関連する記事
Googleの優先するニュース提供元にSEの部屋を追加
Googleで、いつも読みたい情報源を選べます。登録可否はGoogleの画面で確認できます。
候補にSEの部屋が表示されない場合は、まだ追加できません。