App Router 内置了用于 SEO 标签(<title>、<meta、Open Graph 等)的 Metadata API — 您从 layout.tsx 或 page.tsx 导出 metadata,Next.js 会渲染正确的 <head> 标签。
App Router 内置了用于 SEO 标签(<title>、<meta、Open Graph 等)的 Metadata API — 您从 layout.tsx 或 page.tsx 导出 metadata,Next.js 会渲染正确的 <head> 标签。
// 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 函数:
// 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 和社交分享至关重要。
// 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 会自动添加网站名称。
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
特殊文件自动生成相应的元数据/路由。
好的元数据驱动 SEO 和社交分享预览。
Metadata API 使其声明式和类型安全 — static metadata 用于固定页面,async generateMetadata 用于数据驱动的页面,以及带有模板的 layout 级默认值 — 用一个干净的、服务器渲染的系统替代了手动 <head> 管理。