如何在 Next.js 中设置页面元数据（title、description）？

Question

Accepted Answer

App Router 内置了用于 SEO 标签（``、`<meta`、Open Graph 等）的 **Metadata API** — 您从 `layout.tsx` 或 `page.tsx` 导出 metadata，Next.js 会渲染正确的 `<head>` 标签。 ## 为什么这很重要 ```tsx // app/about/page.tsx import type { Metadata } from "next"; export const metadata: Metadata = { title: "About Us", description: "Learn about our company and team.", openGraph: { title: "About Us", images: ["/og-about.png"], }, }; export default function About() { return <h1>About</h1>; } ``` Next.js 读取导出的 `metadata` 对象并生成 `<title>`、`<meta name="description"`、OG 标签等 — 无需手动编辑 `<head>`。 ## 动态元数据（取决于数据）对于标题取决于获取内容（博客文章、产品）的页面，导出异步 `generateMetadata` 函数： ```tsx // app/blog/[slug]/page.tsx export async function generateMetadata({ params }): Promise<Metadata> { const post = await getPost(params.slug); // fetch the post return { title: post.title, description: post.excerpt, openGraph: { images: [post.coverImage] }, }; } ``` 这在服务器上运行，让每个动态页面都拥有准确的、特定于内容的元数据 — 对于动态内容的 SEO 和社交分享至关重要。 ## 元数据在树中向下合并 ```tsx // app/layout.tsx — defaults + a title template export const metadata: Metadata = { title: { default: "My Site", template: "%s | My Site" }, // child titles become "About | My Site" }; ``` 在 layout 中定义的元数据与子页面**合并**（并可被子页面覆盖）— 因此您可以一次性设置网站范围的默认值，并在需要的地方设置每页的值。`template` 会自动添加网站名称。 ## 基于文件的元数据 ```text app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts ``` 特殊文件自动生成相应的元数据/路由。 ## 为什么这很重要好的元数据驱动 SEO 和社交分享预览。 Metadata API 使其声明式和类型安全 — static `metadata` 用于固定页面，async `generateMetadata` 用于数据驱动的页面，以及带有模板的 layout 级默认值 — 用一个干净的、服务器渲染的系统替代了手动 `<head>` 管理。