Open Graph 图片

Open Graph 图片是有人分享链接时，社交网络、即时通讯应用和协作工具显示的预览图。页面通过 Open Graph 协议中的 og:image meta 标签声明这张图片，该协议由 Facebook 于 2010 年推出。

标签的值是指向图片的绝对 URL。可选标签用于提供宽度、高度、MIME 类型和替代文本，分别是 og:image:width、og:image:height、og:image:type 和 og:image:alt。X（原 Twitter）读取自己的 twitter:image 标签，缺少这些标签时回退到 Open Graph 标签。

各个服务会在链接首次被分享时抓取并缓存图片，因此在缓存刷新之前，修改可能不会生效。

OG 图片为何重要

带有清晰预览图的链接在信息流或聊天中占据的空间比单纯的 URL 更大，读者点击之前就能看出页面的内容。没有 og:image 时，各服务会从页面中自行挑选一张图片，或者完全不显示图片。

OG 图片规格

属性	常见做法
尺寸	1200×630 像素
宽高比	约 1.91:1
格式	PNG 或 JPG
URL	绝对地址，可通过 HTTPS 公开访问
文字	远离边缘，部分服务会裁切边缘

各平台都会发布自己的规范，并且会随时间调整。请查阅对你重要的平台的最新文档。

如何制作有效的 OG 图片

1. 从 1200×630 的画布开始。
2. 加入一个大字号的简短标题，以及清晰的产品截图或视觉元素。
3. 把重要内容放在中央区域。
4. 文字较多的设计导出为 PNG，照片导出为 JPG，并控制文件体积。
5. 在每个平台的预览或调试工具中测试链接。

实际发布流程中的做法

团队通常会用模板为每篇博客文章或文档页面生成 OG 图片。模板中的产品截图可以展示真实的界面。截取时使用比模板位置更大的尺寸，再缩小，文字就会更清晰。

常见错误

• 在 og:image 中使用相对 URL。
• 把文字放在部分平台会裁切的边缘附近。
• 更新图片后忘记刷新缓存。
• 使用很高的截图，结果被裁切成一条无法辨认的窄条。

现在就有图片要处理？

使用 Social Image Composer 从截图制作 1200×630 的预览图，并用 Aspect Ratio Calculator 确认宽高比。

常见问题

OG 图片和网站图标是一回事吗？

不是。网站图标（favicon）是很小的站点图标。OG 图片是分享链接时显示的大尺寸预览图。

og:image 可以使用 SVG 吗？

许多服务不会渲染 SVG 预览。请使用 PNG 或 JPG。

参考资料

• The Open Graph protocol

相关资源

• Favicon：显示在浏览器标签页中的小图标。
• Image Compressor：控制预览图的文件体积。