内容提要
本文介绍了如何在 Next.js 和 Cloudflare Workers 上实现 OG Image（开放图像），强调其在社交媒体分享中的重要性。内容分为两部分：搭建静态和动态生成的 OG Image 体系，以及在 Cloudflare Workers 中的最佳实践和常见问题。作者总结了元数据配置、动态生成流程及错误处理，建议使用 PNG 格式和绝对 URL，以确保社交平台的抓取效果。
关键要点
-
OG Image（开放图像）在社交媒体分享中至关重要，能够显著提高点击率。
-
OG Image 体系分为两层：站点级静态图片作为兜底和文章级动态生成的 OG Image。
-
站点级静态图片应放在 public/og-image.png，并在根 layout.tsx 中配置。
-
动态生成的 OG Image 需使用绝对 URL，确保社交平台能够正确抓取。
-
使用 PNG 格式而非 WebP，以避免兼容性问题。
-
Next.js 的 Metadata API 支持深合并，子页面可以继承根布局的元数据。
-
动态生成的 OG Image 通过 next/og 实现，使用 ImageResponse API 返回 PNG 响应。
-
在 Cloudflare Workers 中，避免 fetch 自己的 zone，使用 IMAGES binding 进行图像转码。
-
确保所有可能失败的 fetch 操作都包裹在 try/catch 中，以避免返回非 200 响应。
-
部署后使用工具验证 OG Image 的抓取效果，确保社交平台能够正确显示图像。
延伸问答
OG Image 在社交媒体分享中有什么重要性？
OG Image 能显著提高社交媒体分享的点击率，是文章的视觉钩子。
如何在 Next.js 中配置站点级静态 OG Image？
将静态图片放在 public/og-image.png，并在根 layout.tsx 中配置 metadata.openGraph.images。
动态生成的 OG Image 需要注意哪些事项？
动态生成的 OG Image 必须使用绝对 URL，以确保社交平台能够正确抓取。
在 Cloudflare Workers 中如何处理图像转码？
使用 IMAGES binding 进行图像转码，避免 fetch 自己的 zone。
为什么建议使用 PNG 格式而非 WebP？
因为 WebP 的兼容性问题，社交平台的爬虫对 WebP 的支持不一致。
如何验证 OG Image 的抓取效果？
使用 Twitter Card Validator、Facebook Sharing Debugger 等工具进行验证。
