如何检查 Open Graph 标签并预览你的链接(分步指南)

每当有人把你的链接粘贴进 Facebook、X、LinkedIn、WhatsApp 或 Slack,平台都会读取一小组隐藏的 meta 标签,把它们变成一张社交卡片:一张图片、一个标题、一段描述和一个域名。如果这些标签缺失或格式错误,平台就会即兴发挥——而即兴生成的卡片几乎总是比你亲自选定的更糟。这就是为什么发布前运行一次 Open Graph 预览检查,是技术 SEO 中性价比最高的五分钟任务之一。在本指南中,你将学会如何正确地检查 OG 标签、如何解读真实平台会渲染出的两张预览卡片,以及如何修复检查中发现的每一个常见问题。

什么是 Open Graph 标签?

Open Graph 是 Facebook 于 2010 年率先推出的元数据标准,如今几乎所有社交平台、聊天应用乃至 AI 回答引擎都已采纳。这些标签位于 HTML 的 <head> 区域,描述页面在被别处分享时应如何呈现。核心集合如下:

<head>
  <meta property="og:title" content="Best Running Shoes 2026 — Lab-Tested">
  <meta property="og:description" content="We tested 42 pairs over 600 miles. Here are the 9 best models.">
  <meta property="og:image" content="https://example.com/images/running-shoes.png">
  <meta property="og:url" content="https://example.com/best-running-shoes/">
  <meta property="og:type" content="article">
  <meta property="og:site_name" content="Acme Sports">
</head>

除此之外,大多数站点还会添加 Twitter Card 标签(twitter:card、twitter:title、twitter:description、twitter:image)。X 可以自动回退到你的 Open Graph 标签,但 twitter:card 标签决定了 X 渲染大图卡片还是紧凑摘要卡片,因此值得显式设置。如果你想了解手写所有这些标签的完整背景——包括与它们并列的 SEO title、meta description 和 canonical URL——请阅读我们关于如何给网站添加 meta 标签的指南。

你的 Open Graph 预览为什么重要

社交卡片实际上就是你页面的广告,而且通常是滚动信息流的人决定是否点击之前唯一看到的东西。拥有合适的大图、清晰可读的标题和一句话承诺的页面,始终比渲染出裸 URL、甚至一张从版面里随机裁剪图片的页面获得更多点击。发布前检查 OG 标签,能同时保护三件事:来自社交和聊天分享的点击率、跨平台的品牌一致性,以及复用同一份元数据的服务对你的可抓取性。

最常见的失败也最无声。缺失 og:image 会产生一张纯文本卡片,放在竞争对手旁边显得像是坏掉了。像 /images/hero.png 这样的相对图片 URL 在浏览器里没问题,在社交平台上却会失败,因为平台需要完整的绝对 URL。95 个字符的 og:title 会在句子中间被截断。指向 staging 域名的 canonical 会让每一次分享都指向错误的主机。这些错误在 CMS 里都不会抛出任何警告——唯一可靠的捕捉方式,就是对线上 URL 运行一次 Open Graph 预览,看看实际渲染出了什么。

如何检查 OG 标签:分步指南

第 1 步:打开 Open Graph 预览工具

前往免费的 Open Graph 预览与检查器。它以社交爬虫完全一致的方式抓取页面——从公共服务器发起,无法访问你的登录会话——因此它看到的就是 Facebook 和 X 将看到的。无需注册或安装。

第 2 步:粘贴 URL 并运行检查

把完整的页面地址(包括 https://)粘贴进输入框,按下 Check & preview。工具在服务端请求页面、解析 HTML,并提取 og:title、og:description、og:image、og:url、og:type、og:site_name、四个 Twitter Card 标签、普通的 <title> 标签以及 canonical 链接。如果你在审计多个页面,请对每个重要的落地页重复这一步——OG 标签是按页面设置的,不是按站点。

第 3 步:解读两张预览卡片

工具并排渲染两张预览。Facebook 卡片显示大图、小号灰色大写字母的域名、标题和描述——与链接在信息流中的呈现如出一辙。X 卡片遵循你的 twitter:card 值:summary_large_image 渲染 16:9 的大图英雄卡片,summary 渲染带小方形缩略图的紧凑卡片。如果页面完全没有 Twitter 标签,工具会给卡片打上 OG fallback 徽标并改用 Open Graph 的值——这正是 X 本身的行为,因此预览保持真实。

第 4 步:修好每一条红色和黄色项

预览下方是检查清单,每个标签一行。绿色表示存在且在长度限制内。黄色表示存在但有风险——例如超过 60 个字符的 og:title 或超过 110 个字符的 og:description(二者在社交卡片中都会被视觉截断),或缺失 twitter:card。红色表示缺失,而缺失 og:image 会被视为高风险,因为没有图片的卡片会失去大部分点击吸引力。弄清缺什么之后,你可以用我们的 Meta 标签生成器在一分钟内产出修正后的标签代码块,粘贴进 <head>,再运行一次 Open Graph 预览确认一切正常渲染。

Open Graph 最佳实践

使用推荐的图片尺寸。og:image 公认的标准是 1200×630 像素(1.91:1 宽高比),格式为 JPG、PNG 或 WebP,大小控制在约 8 MB 以内,并使用绝对 https:// URL。X 的大图卡片约用 1200×675(16:9),因此 1200×630 的图片在两个平台上都依然表现良好。重要内容要远离图片边缘,因为各平台的裁剪方式略有不同。

遵守展示长度限制。og:title 控制在约 60 个字符以内,og:description 控制在约 110 个字符以内,确保任何内容都不会在半句话处被截断。这些是展示指导值而非硬性规格限制,但与主流卡片实际显示的内容一致。

始终使用绝对的 canonical URL。og:image 和 og:url 都必须是生产域名上完全限定的 URL,最好与 canonical 标签一致,这样平台才不会附加跟踪参数或收录 staging 主机。

给每个重要页面单独的标签。文章、产品页和关键落地页都应有各自唯一的标题、描述和图片。全站共用一张回退图片对工具类页面尚可接受,但独特的配图才是让分享赢得点击的关键。

发布后复查,而不只是发布前。平台的缓存非常激进。如果你修复了一个已被分享过的页面上的标签,请使用平台自己的调试工具(Facebook Sharing Debugger 或 X 的卡片工具)强制重新抓取,然后运行最后一次预览,确认线上卡片已更新。

关于检查 OG 标签的常见问题

如何检查页面上的 OG 标签?

最快的方式是把页面 URL 粘贴进免费的 Open Graph 预览工具,例如我们的 Open Graph 预览与检查器。它在服务端抓取线上页面,提取每一个 Open Graph 和 Twitter Card 标签,并排渲染 Facebook 和 X 卡片,并把每个标签标为绿、黄或红,让你清楚该修什么。另一种办法是查看页面源代码并手动搜索”og:”——可行,但看不到渲染出的卡片和长度问题。

为什么我的 open graph 图片不显示?

四种原因几乎覆盖所有情况:og:image 标签完全缺失;图片 URL 是相对路径而非绝对 https URL;图片文件太小(平台通常要求至少 200×200 像素)或格式不受支持;或者平台正在提供缓存的旧版本页面,此时应用 Facebook Sharing Debugger 强制重新抓取。Open Graph 预览工具能立刻显示图片 URL 是否可以正常解析。

og:title 和 og:description 应该多长?

og:title 以不超过约 60 个字符为目标,og:description 以约 110 个字符为目标。超过这个长度,Facebook 和 X 卡片通常就会视觉截断文本。超出并不会报错——Open Graph 协议本身允许更长——但超限的内容用户根本看不到,所以要把重要的词放在前面。

已有 OG 标签,还需要 Twitter Card 标签吗?

没有它们也能正常运转,因为 X 会自动回退到你的 Open Graph 标签。然而,没有显式的 twitter:card 标签,你就无法在大图卡片和紧凑摘要卡片之间做选择,边缘情况的渲染也不太可预测。用生成器添加四个基本 Twitter 标签只需一分钟,从此不必靠猜。

我应该多久复查一次 OG 标签?

每个新页面上线前检查一次;凡是触碰模板的变更之后——主题更新、插件升级、无头 CMS 迁移或域名更换——都复查关键落地页。许多损坏的社交卡片都源自一次悄悄丢掉 meta 代码块的改版。每季度审计你分享量最高的十个页面,是合理的例行安排。

发布前先预览

Open Graph 标签小而不可见,却拥有不成比例的威力:它们决定了你的页面在受众真正分享链接的地方给人的第一印象。养成一套自律的习惯——对每个重要页面运行 Open Graph 预览、修好红色项、收短黄色项、统一使用 1200×630 图片——就能在不改动站点其他任何东西的前提下提升社交点击率。今天就从你的首页和最好的文章开始——立即检查你的 OG 标签,然后用 Meta 标签生成器填补发现的任何缺口。