Open Graph 的实际作用
当你在 Slack、LinkedIn、Twitter 或 iMessage 中粘贴一个 URL，并看到一个包含标题、描述和缩略图的预览卡片时，这个卡片就是由 Open Graph 标签构建的。平台会抓取你的页面，读取 <head> 中的特定 <meta> 标签，并用它们生成预览。
如果没有 Open Graph 标签，平台会退而求其次进行猜测：它们可能抓取找到的第一张图片，使用页面的 <title> 标签，并随意抓取一段看似相关的描述。结果不可预测，常常出错，有时甚至对线上产品造成尴尬。
Open Graph 由 Facebook 于 2010 年创建，现在已被所有主流社交平台和即时通讯应用支持。
必备标签
以下四个标签是任何会被分享的页面的最低要求：
<meta property="og:title" content="如何调试 API 请求" />
<meta property="og:description" content="一种系统性的方法来诊断 4xx 和 5xx 错误、CORS 问题以及格式错误的请求。" />
<meta property="og:image" content="https://example.com/images/debug-api-og.png" />
<meta property="og:url" content="https://example.com/blog/how-to-debug-api-requests" />
og:title — 卡片的标题。可以与页面的 <title> 标签不同。保持在 60 个字符以内，否则在大多数平台上会被截断。
og:description — 描述内容的一两句话。Twitter 大约在 200 个字符后截断；LinkedIn 大约在 300 个字符后。要直接且信息丰富。
og:image — 缩略图。这是视觉上影响最大的标签。务必正确设置（参见下面的图片规格）。
og:url — 页面的规范 URL。如果你的网站有多个 URL 指向同一内容，这个标签告诉平台使用哪一个。
图片规格
og:image 是大多数实现出错的地方。不同平台有不同的要求，但以下设置适用于所有平台：
| 属性 | 推荐值 |
|---|---|
| 尺寸 | 1200 × 630 像素 |
| 最小尺寸 | 600 × 315 像素 |
| 最大文件大小 | 8 MB（尽量控制在 300 KB 以下） |
| 格式 | JPG 或 PNG（WebP 支持不一致） |
| 宽高比 | 1.91:1 |
| 图片中的文字 | 确保在缩略图尺寸下可读 |
如果你不提供 og:image，大多数平台要么不显示图片，要么从页面中随机选取一张。始终提供一个。
使用包含协议和域名的绝对 URL。像 /images/og.png 这样的相对路径将不起作用。
<!-- 错误：相对路径 -->
<meta property="og:image" content="/images/og-image.png" />
<!-- 正确：绝对 URL -->
<meta property="og:image" content="https://mysite.com/images/og-image.png" />
Twitter Card 标签
Twitter 除了 Open Graph 之外还有自己的标签系统。如果两者都存在，Twitter 优先使用自己的标签；如果只有 Open Graph 标签，Twitter 会回退使用它们。为了在 Twitter 上获得最佳效果，请同时添加两者：
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="如何调试 API 请求" />
<meta name="twitter:description" content="一种系统性的方法来诊断 4xx 错误、CORS 问题以及格式错误的请求。" />
<meta name="twitter:image" content="https://example.com/images/debug-api-og.png" />
twitter:card — 控制卡片布局。summary_large_image 在文字上方显示大图，对于文章和产品页面效果更好。summary 在左侧显示小缩略图。对于希望驱动点击的内容，使用 summary_large_image。
Twitter 要求 summary_large_image 的图片至少为 300 × 157 像素。你为 Open Graph 创建的 1200 × 630 图片无需修改即可在此使用。
og:type 标签
og:type 告诉平台页面代表的内容类型。默认值是 website。对于文章和博客帖子，使用 article：
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-05-17T09:00:00Z" />
<meta property="article:author" content="https://example.com/about" />
当 og:type 为 article 时，Facebook 和 LinkedIn 会显示发布日期并使用额外的文章标签。对于产品页面，使用 product。对于视频，使用 video.movie 或 video.other。
区域设置与多语言页面
如果你的网站提供多种语言，请添加区域设置标签和备选区域设置：
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="zh_CN" />
<meta property="og:locale:alternate" content="es_ES" />
格式为语言代码_地区代码：en_US、zh_CN、ja_JP。这有助于平台向正确的受众提供正确的语言。
网站名称标签
og:site_name 为卡片添加上下文——它独立于标题显示品牌名称：
<meta property="og:site_name" content="MyUtl" />
在 Facebook 和 LinkedIn 上，它会以较小的字体显示在标题下方或上方，帮助用户识别来源品牌。
测试你的标签
添加或更新 Open Graph 标签后，平台会缓存之前的版本。你需要使用它们的官方调试工具来清除缓存并预览新卡片：
| 平台 | 调试工具 |
|---|---|
| developers.facebook.com/tools/debug | |
| linkedin.com/post-inspector | |
| cards-dev.twitter.com/validator | |
| Slack | 在任何频道中粘贴 URL 查看实时预览 |
在发布前，务必至少在 Facebook 和 Twitter 上进行测试。即使一个标签出错，也可能导致数千次分享中出现空白卡片或占位图片。
常见错误
缺少 og:url — 没有这个标签，社交分享中的规范 URL 将不可预测。始终将其设置为页面 URL 的干净规范版本。
使用相对图片路径 — 平台从外部独立抓取 og:image。相对路径无法解析。始终使用绝对 URL。
图片太小 — 400 × 200 的图片在高 DPI 屏幕上会显得模糊或被裁剪。始终使用至少 1200 × 630。
未刷新缓存 — 修复标签后，平台仍会显示旧卡片，直到你使用其调试工具强制重新抓取。
每个页面使用相同的 og:image — 一张通用图片可行，但每页使用带有相关视觉元素或文字的图片能显著提高分享内容的点击率。
→ 使用 Meta Tag Generator 构建一整套 Open Graph 和 Twitter Card 标签，无需记忆语法。