OGP 与 Meta 标签验证器

粘贴 HTML 源代码，即可一次性验证 Open Graph Protocol（OGP）和 Twitter Card 的 meta 标签。检测缺失的标签以及不是绝对路径的 og:image，并以卡片形式预览在社交媒体上分享时的效果。

使用技巧

  • og:image 推荐尺寸为 1200×630px（宽高比 1.91:1）。尺寸过小或比例不对的图片，在社交平台上可能会被意外裁剪。
  • Facebook、LINE、Slack 等平台的爬虫读取的是 og:title/og:description，而 X（Twitter）使用的是独立的 twitter:title/twitter:description。两者都设置好，才能在各平台上都正确显示。
  • 如果没有设置 twitter:card，X 会尝试回退到 og:title/og:description，但图片可能无法正确显示，因此建议明确设置该标签。
  • og:url 应填写页面的规范化绝对路径（https:// 开头）。这也有助于避免带参数的 URL 被误判为重复内容。
  • 刚修改完 meta 标签后立即分享，社交平台可能仍显示旧的缓存预览。可以使用各平台提供的重新抓取工具（例如 Facebook 的分享调试器）来刷新缓存。

常见问题

最常见的原因是图片地址使用了相对路径（如 /img/a.png）。大多数爬虫无法解析相对路径，请务必使用以 https:// 开头的绝对路径。此外，服务器屏蔽了爬虫的 User-Agent，或图片尺寸过小，也可能导致无法显示。

是的，两者作用不同，建议都设置。<title> 用于搜索结果标题和浏览器标签页，og:title 用于社交媒体分享时的卡片标题。若缺少 og:title，多数爬虫会回退使用 <title>，但结果未必符合预期。

对于一般的文章或博客页面，推荐使用能大图展示的 summary_large_image。如果只需要小图缩略图，可使用 summary。app 和 player 分别用于引导下载应用和嵌入视频/音频，通常不适用于普通网页。

各社交平台会缓存抓取结果，因此修改后仍可能显示旧的预览内容。需要使用各平台提供的重新抓取工具（例如 Facebook/LINE 的分享调试器，或 X 的 Card Validator）主动请求刷新缓存。

大多数爬虫会回退使用 <title> 和 meta description 生成预览，但不会显示图片，呈现出朴素的链接加文字效果。由于这会影响点击率，建议至少设置 og:title、og:description、og:image 这三项。
ツールくん

闲话 ― OGP 诞生的原因 ― Facebook 为了让「赞」按钮发挥作用而创造的机制

Open Graph Protocol（OGP）是 Facebook 于 2010 年为推广自家「赞」按钮而制定的规范。当时的网页在 Facebook 上被分享后，往往只显示一个简单的链接和标题，点击率难以提升。Facebook 的思路是：如果页面本身能够声明在社交媒体上应呈现的内容，就能打造更具吸引力的分享体验。于是他们设计了 <meta property="og:xxx"> 这一独立命名空间，追加到普通 HTML 之上。

有趣的是，OGP 实际上建立在 RDFa（一种用于在 HTML 中嵌入结构化数据的 W3C 规范）之上。通过沿用已有标准，Facebook 无需浏览器厂商或其他公司的配合，只需在现有 HTML 中追加几个 meta 标签即可实现新功能。这种「不破坏向后兼容性的扩展」思路取得了成功，OGP 逐渐成为事实标准，被 Slack、LINE、Discord 等 Facebook 以外的平台广泛采用。

X（Twitter）最初并未直接采用 OGP，而是设立了独立的命名空间 Twitter Cards（twitter:xxx）。据说这与其说是技术上的必然，不如说也带有「不想直接采用竞争对手 Facebook 制定的规范」的考量。结果是，如今大多数网站仍需要同时重复书写 og: 系和 twitter: 系标签，这也是本类验证工具至今仍然有用的原因之一。

同类工具