Open Graph 图片应该使用多大尺寸？

最常见的建议尺寸是 1200x630 像素，适用于 Facebook、LinkedIn、X（Twitter）和大多数即时通信应用。在部分平台上，小于 600x315 的图像可能显示为小缩略图，而不是大预览卡片。

页面没有 og:image 标签会怎样？

平台会尝试自动从页面中寻找合适的图像，通常选择 HTML 中第一张较大的图片。结果很难预料，而且经常选错，例如显示徽标、广告或无关照片。

Twitter/X 和 Facebook 可以使用不同的图片吗？

可以。X 支持自己的元标签 twitter:image，它会覆盖 og:image。存在 twitter:image 时，X 会使用它；否则回退到 og:image。这样可以针对每个平台的宽高比单独调整图片。

如何测试 Open Graph 图片？

可以使用平台专用的调试工具，例如 Facebook Sharing Debugger、X Card Validator 和 LinkedIn Post Inspector。这些工具会抓取页面，并准确展示包含图片、标题和说明的预览效果。

Open Graph 图片需要替代文本吗？

og:image:alt 标签可为预览图提供替代文本。虽然并非所有平台都支持，但在屏幕阅读器用户遇到分享链接时，它有助于改善无障碍体验。

什么是 Open Graph 图片？ | 术语表

Open Graph 图片是 URL 分享到社交媒体、即时通信应用或搜索结果时显示的预览图，由页面 HTML 中的 og:image 元标签指定。

OG 图片为什么重要

有人在 Facebook、LinkedIn、X、Slack、iMessage 或 WhatsApp 上分享链接时，平台会抓取页面并显示包含标题、说明和图片的丰富预览。图片是其中面积最大、最醒目的元素，会影响用户是否停下滚动并打开链接。

设计得当的 OG 图片通常比缺失图片或使用通用预览的页面获得更高的点击率。缺少 OG 图片时，平台只能自行猜测，往往会抓取无关图片，甚至不显示图片，让分享链接看起来像是失效或没有认真制作。

对于营销团队、产品发布、博客文章和落地页，OG 图片就像一块随 URL 分享而出现的广告牌。保持一致的品牌化 OG 图片，可以让每次分享都延续视觉识别，并吸引用户打开链接。

OG 图片还会出现在搜索结果、书签管理器和链接聚合器中，因此影响不只限于社交平台。

OG 图片规范

Open Graph 协议最初由 Facebook 创建，通过页面 <head> 区域中的一组元标签定义预览信息。与图片有关的主要标签包括：

og:image——图片 URL。必须使用绝对 URL，而不是相对路径，并强烈建议采用 HTTPS；
og:image:width 和 og:image:height——以像素表示的图片尺寸。提供这些值后，平台无需等完整图片下载完就能渲染预览；
og:image:type——MIME 类型，例如 image/png、image/jpeg。这不是必填项，但有助于平台检查格式兼容性；
og:image:alt——说明图片内容的替代文本，有助于改善无障碍体验。

建议图片尺寸为 1200x630 像素，宽高比约为 1.91:1。该尺寸适合 Facebook、LinkedIn 和大多数即时通信应用的大预览卡片。X（Twitter）的宽高比略有不同，summary_large_image 卡片使用 1200x675，但 1200x630 也能在所有主流平台上正常显示。

Facebook 要求文件小于 5 MB，大多数其他平台要求小于 8 MB。JPEG 和 PNG 的支持最广，WebP 的支持情况因平台而异。

如何制作有效的 OG 图片

有效的 OG 图片应该易读、符合品牌风格，并能说明页面内容。可以遵循以下原则：

使用易读文字。 即使没有旁边的标题，图片本身也应能说明页面主题。可用大号、清晰的字体展示标题或关键短语，避免在缩略图尺寸下无法辨认的小字。
保持品牌一致。 使用徽标、品牌颜色和固定的版式模板。同一网站的多个链接同时出现在信息流中时，一致的视觉风格更容易识别。
为裁剪留出空间。 不同平台的裁剪方式不同。把文字和徽标等关键信息放在图片中央 80% 的区域内，避免重要内容被切掉。
自动生成。 为每个页面手动制作 OG 图片很难扩展。基于截图的工具可以动态生成图片：为每个页面渲染带样式的模板，再把它截取为图像。

实际发布流程中的做法

对于类似 Shotomatic 的发布流程，最好把 OG 图片当作可重复生成的输出，而不是一次性的设计任务。词汇表条目、博客文章或工具页面进入评审时，可以把页面标题、副标题和品牌样式变量填入固定 OG 模板，自动生成匹配的预览图。这样既能让每个分享链接保持品牌一致，也不会拖慢发布。

常见错误

使用低分辨率图片。 小于 600x315 像素的图像可能只会显示为行内小缩略图，而不是大预览卡片。为兼顾各平台的显示效果，应至少使用 1200x630。
忘记使用绝对 URL。 /images/og.png 等相对路径无法正常工作。og:image 的值必须是包含协议和域名的完整 URL。
不在多个平台上测试。 在 Facebook 上显示正常的图片，可能在 LinkedIn 或 X 上采用不同的裁剪方式。发布前应使用各平台的预览调试工具测试。
缓存了旧图片。 平台会长时间缓存 OG 图片。更新图片后，应使用平台的调试工具强制重新抓取。只更改元标签，预览可能要几小时甚至几天才会更新。
每个页面都使用同一张通用图片。 全站默认 OG 图片总比没有好，但反映具体页面内容的图片通常更能吸引点击。应为不同页面生成相应的图片。

Open Graph 图片