Open Graph检测工具:测试OG标签与链接预览

输入一个网址,看看它分享到Facebook、X、LinkedIn和聊天应用时会是什么样子。检测工具会读取每一个og:*和twitter:*标签,测量预览图片,并明确告诉你该修复什么。

Open Graph检测工具能让你看到,有人把你的链接粘贴到帖子或聊天里时,爬虫看到了什么:也就是你页面中og:*和twitter:*元标签所声明的标题、描述和图片。如果预览显示了错误的图片、没有图片,或者显示的是网站名而不是文章标题,原因几乎总是出在那几行HTML里,而本页面会告诉你是哪一行。

如何检查你的Open Graph标签

  1. 输入要分享页面的网址,点击检查标签。工具会跟随重定向,分析的是最终网址。
  2. 查看预览。这些是Facebook、X、LinkedIn和聊天应用展示链接卡片的近似效果,依据的是各平台读取的标签。
  3. 逐项处理检查结果。“错误”会让预览失效;“警告”会让预览在某些平台上变差;“提示”属于良好实践。每一项都会说明该改什么。
  4. 修复后重新检查。建议使用的标签框会给出一段可直接编辑的标签代码,并已填入你当前的值。
  5. 部署修复后,刷新各平台的缓存(见下文),否则之前分享出去的内容仍会显示旧预览。

对于测试站点、需要登录才能访问的页面或任何localhost上的页面,请切换到粘贴HTML:粘贴页面源码,同样的检查会在你的浏览器里运行。

每个页面都需要的Open Graph标签

Open Graph是大多数链接预览背后的协议。它规定了四个对每个页面都必需的属性(ogp.me),而LinkedIn则把标题、图片、描述和网址列为生成分享预览必须存在的标签(LinkedIn帮助)。

标签作用建议
og:title卡片的标题。必需。按信息流的阅读习惯来写,而不是按搜索来写,不必带上品牌名。
og:type对象的类型,例如website或article。必需。文章类页面用article,这样可以使用article:*标签。
og:image预览图片。必需。使用完整的https://网址,同时设置宽度、高度和替代文字。
og:url该对象的规范网址,用作它的永久标识。必需。与<link rel="canonical">保持一致。
og:description标题下面的一两句话。协议中是可选的,但LinkedIn要求必须有。写读者能得到什么,而不是页面是什么。
og:site_name整个网站的名称。很多聊天应用会把它显示在标题上方。
og:image:alt图片的描述。协议规定,指定了og:image的页面也应该指定它。描述图片本身,而不是页面。
og:image:width / og:image:height图片的像素尺寸。Facebook表示应当指定它们,这样链接第一次被分享时图片就能正常加载。
og:locale内容的语言和地区,例如zh_CN。Facebook建议与og:type一起设置。

如果同一个标签出现了两次,以第一个为准:协议规定在值冲突时优先采用从上到下的第一个标签。重复通常是因为主题和SEO插件都写入了标签,检测工具会标出这种情况。

Twitter(X)卡片标签

根据X的卡片标记参考文档(X开发者文档,存档版),X会读取自己的twitter:*标签,其中大多数在缺失时回退到Open Graph:

  • twitter:card:卡片类型,summary(小方图)或summary_large_image(宽图)。如果没有它,但存在og:type、og:title和og:description,可能会渲染成摘要卡片。
  • twitter:title:最多70个字符;缺失时回退到og:title。
  • twitter:description:最多200个字符;缺失时回退到og:description。
  • twitter:image:小于5 MB;支持JPG、PNG、WEBP和GIF(仅第一帧),不支持SVG。缺失时回退到og:image。
  • twitter:image:alt:最多420个字符;缺失时回退到og:image:alt。

实际操作中,有了Open Graph再加上一行<meta name="twitter:card" content="summary_large_image">,就足以覆盖X。

og:image尺寸:各平台的要求

平台文档中的要求
LinkedIn最小1200 × 627像素,推荐比例1.91:1,文件最大5 MB(LinkedIn帮助)
Facebook宽度至少1080像素,以便在高分辨率设备上获得最佳显示效果;需指定og:image:width和og:image:height(Meta分享最佳实践)
X:大图卡片比例2:1,最小300 × 157,最大4096 × 4096像素,小于5 MB(X文档,存档版)
X:摘要卡片比例1:1,最小144 × 144,最大4096 × 4096像素,小于5 MB,会被裁成正方形(X文档,存档版)

一张图可以同时满足所有要求:1200 × 630像素,PNG或JPEG,小于5 MB。它满足LinkedIn的最小尺寸和Facebook的宽度建议,比例约为1.91:1,在X的2:1大图卡片上会被轻微裁剪。请让文字和Logo远离边缘,避免被裁掉。X还要求每个页面使用独立的图片,而不是通用的网站Logo,这条规则放在哪个平台都很合理。

链接预览为什么不对,怎么修复

一直显示旧图片或旧标题

各平台都会缓存预览。Facebook按网址缓存图片,网址不变就不会更新(Meta for Developers),所以请把改过的图片用新文件名上传,再把页面放进分享调试工具(Sharing Debugger),它会触发一次新的抓取。在LinkedIn上,请使用Post Inspector刷新网址。

完全没有图片

请查看上面的预览图片表格。常见原因有:og:image是相对路径;图片对爬虫返回403或404(防盗链、受保护的目录、CDN规则);图片是SVG;或者超过5 MB。LinkedIn指出,即使图片符合要求,只要网站屏蔽了LinkedIn的抓取,仍然可能失败。

浏览器里有标签,这里却检测不到

标签很可能是页面加载后由JavaScript添加的。爬虫读取的是服务器发送的HTML,所以请把标签移到服务器渲染或预先构建好的HTML中。单页应用通常需要服务器端渲染或预渲染,才能支持分享预览。

预览的页面不对

如果网址发生了重定向,爬虫预览的是最终页面。检测工具会显示重定向次数;重定向检查工具则会列出每一跳。另外请确保og:url指向页面本身,而不是你的首页,这是常见的模板错误。

Open Graph标签与SEO元标签

<title>、元描述和canonical链接是给搜索引擎看的;Open Graph和Twitter标签是给分享用的。它们可以不同,分享时的标题可以比搜索标题更抓人,但canonical网址和og:url应当一致,推广某个页面之前,也值得先确认它有没有noindex的robots指令。检测工具会把这些全部报告出来,包括X-Robots-Tag HTTP头。

检测工具如何处理你的网址

我们的服务器只请求页面一次,最多跟随八次重定向,最多读取前600 KB(读到<head>结束就停止),并下载最多两张预览图片的开头部分,以读取其尺寸和格式。它只抓取标准端口上的公开http(s)地址,会拒绝私有、本地和云元数据IP,重定向指向这些地址时也一样。不会存储任何内容。预览卡片中的图片则由你的浏览器直接加载。如果你要分享的是活动链接,请用UTM链接生成器来生成;如果分享的是别人的链接,请先用网址清理工具去掉追踪参数。

常见问题解答

Open Graph检测工具是做什么的?

它会像链接预览爬虫一样抓取页面,读取HTML头部中的Open Graph(og:*)和Twitter卡片(twitter:*)标签,并显示分享出去的链接会是什么样子。本工具还会下载预览图片,检查它的格式、像素尺寸和文件大小,并列出每个缺失或无效的标签及修复办法。

哪些Open Graph标签是必需的?

Open Graph协议规定了四个必需属性:og:title、og:type、og:image和og:url。LinkedIn则表示,要生成预览,必须有og:title、og:image、og:description和og:url,所以实际操作中,这五个都要设置,再加上图片的og:image:alt。

og:image应该多大?

并没有唯一的官方尺寸。LinkedIn要求至少1200 × 627像素、宽高比1.91:1、文件小于5 MB。Facebook建议图片宽度至少1080像素。X的大图卡片采用2:1的比例,最小300 × 157,上限5 MB。一张小于5 MB的1200 × 630像素PNG或JPEG图片,就能同时满足以上所有要求。

为什么Facebook或LinkedIn还在显示旧的预览?

各平台都会缓存链接预览。Facebook按网址缓存图片,网址不变就不会刷新,所以请把更新后的图片换一个新文件名发布,再把页面放进Facebook的分享调试工具(Sharing Debugger)重新抓取。LinkedIn对应的工具是Post Inspector。

已经有Open Graph标签,还需要Twitter卡片标签吗?

X在大多数字段上会回退到Open Graph:twitter:title回退到og:title,twitter:description回退到og:description,twitter:image回退到og:image。没有twitter:card时,X仍可能根据og:type、og:title和og:description渲染出小型摘要卡片。如果想要大图布局,请添加值为summary_large_image的twitter:card。

检测工具会运行JavaScript吗?

不会。它读取的是服务器返回的HTML,大多数链接预览爬虫读取的也是这个。如果你的标签要等客户端JavaScript运行后才出现,这里就会显示缺失,真实分享时多半也一样。请在服务器端或构建时就把标签渲染出来。

可以检查测试环境或localhost页面吗?

不能通过网址检查:出于安全考虑,检测工具只抓取公开地址,并拦截私有、本地和云元数据IP。请改用“粘贴HTML”标签页,粘贴页面源码后,分析完全在你的浏览器中进行,图片尺寸也在本地测量。

这里的预览和各平台实际显示的完全一致吗?

不完全一致,它们只是根据各平台公开文档中的标签规则做出的近似效果。每个平台都有自己的布局、裁剪、截断和缓存机制,并且会随时间调整。预览可以帮你发现缺失的图片和不合适的标题,但重要的发布前,请再用平台自己的调试工具确认一次。

← 免费工具

首页 · Marqly