Next.js 中 OG 图片用 next/og 动态生成

2026/06/08 01:47:26

Next.js 15 的 metadata API 比 Pages Router 的 Head 组件强大太多。用 generateMetadata 可以根据路由参数动态生成 title、description、OG 标签。关键是 metadataBase 要正确设置，否则 OG 图片的 URL 会是相对路径，社交平台无法正确显示。

Canonical URL 解决重复内容问题。多语言站点、分页页面、带查询参数的页面都需要正确设置 canonical。Next.js metadata 中 canonical 要用绝对 URL，通过 buildPageUrl 工具函数确保域名一致。

面包屑导航不仅提升用户体验，还是 SEO 信号。用 BreadcrumbList JSON-LD 结构化数据能让 Google 在搜索结果中显示面包屑路径，提升点击率。Next.js 中可以在 Server Component 渲染面包屑 HTML + JSON-LD。

Next.js

查看历史

7 回复

月下

月下独酌第 2 楼2026/06/08 14:34:21

不同场景下结论可能不同：INP 替代 FID 后更严格了，用 next/dynamic 懒加载非首屏组件效果明显。希望少走弯路。

云中

云中漫步第 3 楼2026/06/11 14:27:04

实操中我发现：结构化数据用 Rich Results Test 工具测试，Search Console 会报错误。感谢楼主的启发。

Liam Anderson第 4 楼2026/06/30 06:03:54

说个反直觉的发现：robots.txt 控制抓取，noindex 控制索引，两个不要搞混。这只是个人经验，不一定通用。

Isabela Cruz第 5 楼2026/07/11 10:59:05

讲个真实案例：OG 图片 1200x630 是标准尺寸，用 next/og 动态生成效果最好。欢迎交流讨论。

冲浪

冲浪的海豹第 6 楼2026/07/14 19:43:08

有个相关问题想请教：hreflang 自引用是必须的，我之前漏了导致多语言版本全没被索引。希望少走弯路。

暮色

暮色苍茫第 7 楼2026/07/20 14:02:15

结合我最近的项目经验：robots.txt 控制抓取，noindex 控制索引，两个不要搞混。共同进步。

Miguel Santos第 8 楼2026/07/30 19:13:03

我调研过这块，metadataBase 不设置的话 OG 图片会是相对路径，社交分享显示不了。

登录后可回复