Next.js App Router 提供了替代旧版 next/head 模式的一流 Metadata API。2026 年，配置完善的 Next.js 应用无需任何额外插件即可达到技术 SEO 满分。本指南涵盖所有可用的元数据设置，配有可直接复制粘贴的代码示例。

Metadata API

每个 page.tsx 和 layout.tsx 都可以导出 metadata 对象或 generateMetadata() 函数。Next.js 合并来自布局和页面的元数据，页面元数据优先。根 layout.tsx 是设置全站默认值的合适位置。

标题模板

在根布局中使用 title.template 自动追加站点名称:

export const metadata = { title: { default: 'Picovert', template: '%s | Picovert' } };

社交预览需要 Open Graph 元标签。OG 图片应恰好为 1200×630 像素。为了在链接预览中获得最佳加载时间，从 /public/og/ 以 WebP 格式提供。

如果你的网站支持多种语言，hreflang 标签告知 Google 每个语言区域显示哪个 URL。在 Next.js 中，使用 alternates 字段。始终包含指向默认语言 URL 的 x-default。

结构化数据在 Google 搜索中启用富媒体结果（星级评分、FAQ、面包屑）。在页面的 <head> 中添加 <script type='application/ld+json'> 标签。使用 Google 的富媒体结果测试验证结构化数据解析正确。

Next.js 从 app 目录中的 sitemap.ts 文件生成 XML Sitemap。部署后在 Google Search Console 中提交 Sitemap URL。

在 app 目录中创建 robots.ts 文件，明确允许爬虫访问的路径和阻止的路径（如 /api/），并包含 Sitemap URL。

始终设置 canonical URL 以防止因分页页面、URL 参数或不应单独索引的语言变体导致的重复内容惩罚。