"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { blockquote: "blockquote", code: "code", h2: "h2", li: "li", p: "p", pre: "pre", strong: "strong", table: "table", tbody: "tbody", td: "td", th: "th", thead: "thead", tr: "tr", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: [_jsx(_components.code, { children: "generateMetadata" }), " は、Next.js App Router においてページごとのSEO情報やOGPを生成する関数です。実装パターンは大きく「動的ルート用」と「静的ルート用」の2種類があり、ページの性質によって使い分ける必要があります。"] }), "\n", _jsxs(_components.p, { children: ["この記事では、", _jsx(_components.strong, { children: "ブログ記事ページ（動的）" }), " と ", _jsx(_components.strong, { children: "Aboutページ（静的）" }), " の2つの実装パターンを比較しながら、それぞれの使い方とベストプラクティスを解説します。"] }), "\n", _jsx(_components.h2, { children: "generateMetadata の基本" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "generateMetadata" }), " は ", _jsx(_components.code, { children: "page.tsx" }), " または ", _jsx(_components.code, { children: "layout.tsx" }), " と同じファイルに ", _jsx(_components.code, { children: "export" }), " する非同期関数です。", _jsx(_components.code, { children: "Metadata" }), " 型のオブジェクトを返すことで、そのページの ", _jsx(_components.code, { children: "" }), " タグが自動生成されます。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import type { Metadata } from 'next';\n\nexport async function generateMetadata(): Promise {\n return {\n title: 'ページタイトル',\n description: 'ページの説明',\n };\n}\n" }) }), "\n", _jsx(_components.h2, { children: "パターン① 動的ルート用（ブログ記事ページ）" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "/blog/[slug]" }), " のような動的ルートでは、", _jsx(_components.code, { children: "params" }), " からスラッグを取得し、記事データをDBやCMSから取得してメタデータを生成します。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// app/blog/[slug]/page.tsx\nimport type { Metadata } from 'next';\nimport { getPostBySlug } from '@/lib/posts';\nimport { getOgImageUrl } from '@/lib/og';\n\ntype Props = {\n params: Promise<{ slug: string }>;\n};\n\nexport async function generateMetadata({ params }: Props): Promise {\n const { slug } = await params;\n const post = await getPostBySlug(slug);\n\n // 記事が見つからない場合のフォールバック\n if (!post) {\n return { title: '記事が見つかりません' };\n }\n\n return {\n title: post.title,\n description: post.description,\n openGraph: {\n title: post.title,\n description: post.description,\n type: 'article',\n publishedTime: post.publishedAt,\n modifiedTime: post.updatedAt,\n url: `https://example.com/blog/${slug}`,\n images: [\n {\n url: getOgImageUrl(post.title),\n width: 1200,\n height: 630,\n alt: post.title,\n },\n ],\n },\n twitter: {\n card: 'summary_large_image',\n title: post.title,\n description: post.description,\n },\n };\n}\n\nexport default async function BlogPostPage({ params }: Props) {\n const { slug } = await params;\n const post = await getPostBySlug(slug);\n // ...\n}\n" }) }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "ポイント:" }), " ", _jsx(_components.code, { children: "getPostBySlug" }), " と ", _jsx(_components.code, { children: "generateMetadata" }), " の両方で同じデータを取得しますが、Next.jsはfetchのリクエストをキャッシュするため、実際には1度しかDBアクセスが発生しません。"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "パターン② 静的ルート用（AboutページなどのFixedページ）" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "/about" }), " や ", _jsx(_components.code, { children: "/contact" }), " のような内容が変わらないページでは、", _jsx(_components.code, { children: "params" }), " は不要です。タイトルと説明をその場で定義し、軽量かつ保守しやすい構成にします。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// app/about/page.tsx\nimport type { Metadata } from 'next';\nimport { getOgImageUrl } from '@/lib/og';\n\nconst TITLE = 'About | example.com';\nconst DESCRIPTION = 'このサイトの運営者についてご紹介します。';\nconst PAGE_URL = 'https://example.com/about';\n\nexport async function generateMetadata(): Promise {\n return {\n title: TITLE,\n description: DESCRIPTION,\n openGraph: {\n title: TITLE,\n description: DESCRIPTION,\n type: 'website',\n url: PAGE_URL,\n images: [\n {\n url: getOgImageUrl(TITLE),\n width: 1200,\n height: 630,\n alt: TITLE,\n },\n ],\n },\n twitter: {\n card: 'summary_large_image',\n title: TITLE,\n description: DESCRIPTION,\n },\n };\n}\n\nexport default function AboutPage() {\n // ...\n}\n" }) }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "ポイント:" }), " 静的ページではさらに ", _jsx(_components.code, { children: "export const metadata: Metadata = { ... }" }), " という静的定義の書き方もあります。", _jsx(_components.code, { children: "generateMetadata" }), " 関数は非同期処理が不要な場合でも使えますが、完全に静的な内容なら ", _jsx(_components.code, { children: "metadata" }), " 定数の方がシンプルです。"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "2パターンの比較" }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "項目" }), _jsx(_components.th, { children: "動的ページ（ブログ記事）" }), _jsx(_components.th, { children: "静的ページ（Aboutなど）" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "引数" }), _jsxs(_components.td, { children: [_jsx(_components.code, { children: "params" }), "（slugなど）を受け取る"] }), _jsx(_components.td, { children: "引数なし" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "ルーティング" }), _jsxs(_components.td, { children: [_jsx(_components.code, { children: "/blog/[slug]" }), " などの動的ルート"] }), _jsxs(_components.td, { children: [_jsx(_components.code, { children: "/about" }), "、", _jsx(_components.code, { children: "/contact" }), " などの固定ルート"] })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "データ取得" }), _jsx(_components.td, { children: "DBやCMSから記事情報を取得" }), _jsx(_components.td, { children: "その場で定数定義" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "OGP画像" }), _jsx(_components.td, { children: "記事タイトルを動的にパラメータ化" }), _jsx(_components.td, { children: "固定タイトルをパラメータに使用" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "柔軟性" }), _jsx(_components.td, { children: "記事ごとに異なるメタデータに対応" }), _jsx(_components.td, { children: "固定のため軽量かつ保守が簡単" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "代替手段" }), _jsxs(_components.td, { children: [_jsx(_components.code, { children: "generateMetadata" }), " 一択"] }), _jsxs(_components.td, { children: [_jsx(_components.code, { children: "export const metadata" }), " でも可"] })] })] })] }), "\n", _jsx(_components.h2, { children: "どちらを使うべきか" }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "シーン" }), _jsx(_components.th, { children: "パターン" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsxs(_components.td, { children: [_jsx(_components.code, { children: "/blog/[slug]" }), "、", _jsx(_components.code, { children: "/products/[id]" }), " などのコンテンツページ"] }), _jsxs(_components.td, { children: [_jsx(_components.code, { children: "params" }), " 付き ", _jsx(_components.code, { children: "generateMetadata" })] })] }), _jsxs(_components.tr, { children: [_jsxs(_components.td, { children: [_jsx(_components.code, { children: "/about" }), "、", _jsx(_components.code, { children: "/contact" }), "、", _jsx(_components.code, { children: "/privacy" }), " などのFixedページ"] }), _jsxs(_components.td, { children: [_jsx(_components.code, { children: "export const metadata" }), " または引数なし ", _jsx(_components.code, { children: "generateMetadata" })] })] }), _jsxs(_components.tr, { children: [_jsxs(_components.td, { children: ["レイアウト（", _jsx(_components.code, { children: "layout.tsx" }), "）で共通メタデータを設定"] }), _jsxs(_components.td, { children: [_jsx(_components.code, { children: "export const metadata" }), "（静的）か ", _jsx(_components.code, { children: "generateMetadata" }), "（動的）"] })] })] })] }), "\n", _jsx(_components.h2, { children: "実装時の注意点" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "フォールバックを必ず設定する" }) }), "\n", _jsxs(_components.p, { children: ["動的ルートでは記事が見つからないケース（削除済み・誤URL）を考慮し、", _jsx(_components.code, { children: "notFound()" }), " の呼び出しとセットでフォールバックメタデータを返しましょう。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { notFound } from 'next/navigation';\n\nexport async function generateMetadata({ params }: Props): Promise {\n const { slug } = await params;\n const post = await getPostBySlug(slug);\n\n if (!post) return { title: '記事が見つかりません' };\n\n return { title: post.title, description: post.description };\n}\n\nexport default async function BlogPostPage({ params }: Props) {\n const { slug } = await params;\n const post = await getPostBySlug(slug);\n\n if (!post) notFound(); // 404ページを表示\n\n return

{/* ... */}

;\n}\n" }) }), "\n", _jsx(_components.p, { children: _jsxs(_components.strong, { children: [_jsx(_components.code, { children: "Promise" }), " の型を明示する"] }) }), "\n", _jsxs(_components.p, { children: ["戻り値の型を明示することで、", _jsx(_components.code, { children: "openGraph" }), " や ", _jsx(_components.code, { children: "twitter" }), " のフィールド名のtypoをビルド時に検出できます。"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "静的化できるものはビルド時に確定させる" }) }), "\n", _jsxs(_components.p, { children: ["動的ルートでも、", _jsx(_components.code, { children: "generateStaticParams" }), " と組み合わせることでビルド時に静的生成（SSG）できます。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "export async function generateStaticParams() {\n const posts = await getAllPosts();\n return posts.map((post) => ({ slug: post.slug }));\n}\n" }) }), "\n", _jsx(_components.h2, { children: "まとめ" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "動的ルート" }), " には ", _jsx(_components.code, { children: "params" }), " を受け取る ", _jsx(_components.code, { children: "generateMetadata" }), " を使い、DBやCMSからデータを取得してメタデータを組み立てる"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "静的ルート" }), " には引数なしの ", _jsx(_components.code, { children: "generateMetadata" }), " または ", _jsx(_components.code, { children: "export const metadata" }), " を使い、シンプルに定数で定義する"] }), "\n", _jsxs(_components.li, { children: ["どちらのパターンでも ", _jsx(_components.code, { children: "Promise" }), " の型注釈・フォールバック・OGP画像の設定を忘れずに行う"] }), "\n"] }), "\n", _jsx(_components.p, { children: "適切なパターンを使い分けることで、SEOとOGP対応を効率よく実装できます。" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

Next.js App Router における generateMetadata の2つの実装パターン解説