App Router 之后，next/head 是旧写法，Metadata API 才是正路：类型安全、支持嵌套覆盖、还能做动态 OG 图。
这篇把最常用的 6 块一次讲透，附复制即用的代码。
核心结论
- ✓静态用 metadata 对象，动态用 generateMetadata
- ✓opengraph + twitter 一起写，分享全覆盖
- ✓sitemap/robots 用文件约定，自动化
- ✓viewport/themeColor 单独 export，别塞进 metadata
基础 metadata
export const metadata = {
title: { default: "WebTagr", template: "%s | WebTagr" },
description: "粘贴网址，2 秒拆解 SEO、技术栈与配色。",
openGraph: { title: "WebTagr", images: ["/og.png"] },
twitter: { card: "summary_large_image", images: ["/og.png"] }
};动态页面
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return { title: post.title, description: post.desc };
}sitemap + robots
- ·app/sitemap.ts 返回 URL 数组，构建自动生成
- ·app/robots.ts 声明 allow/disallow + sitemap 地址
- ·两者都支持动态数据，内容站必备
OG 动态图
用 ImageResponse 按标题动态渲染 1200×630，每个分享链接都有专属卡片，点击率肉眼可见地涨。
上线前检查清单
- 01title 是否用了 template
- 02OG/Twitter 是否成对出现
- 03sitemap/robots 是否自动化
- 04动态页是否有 generateMetadata
- 05viewport 是否单独导出
常见问题
老项目 next/head 要迁吗？
新页面用新写法，老页面可暂不动，迁移按页面价值排序。
metadata 支持中文吗？
完全支持，注意长度规则和之前讲的一致。
和 WebTagr 工具页的关系？
本站工具页的标题/OG 就是这套 API 思想的静态版实现。