Open Graph检测工具:测试OG标签与链接预览
输入一个网址,看看它分享到Facebook、X、LinkedIn和聊天应用时会是什么样子。检测工具会读取每一个og:*和twitter:*标签,测量预览图片,并明确告诉你该修复什么。
链接预览 (近似效果,各平台有自己的布局、裁剪和缓存)
检查项
预览图片
找到的标签
| 字段 | 值 |
|---|
建议使用的标签
这里是你当前的值,缺失的地方用占位文字补上。粘贴到页面的<head>中,再修改标有TODO的行即可。
Open Graph检测工具能让你看到,有人把你的链接粘贴到帖子或聊天里时,爬虫看到了什么:也就是你页面中og:*和twitter:*元标签所声明的标题、描述和图片。如果预览显示了错误的图片、没有图片,或者显示的是网站名而不是文章标题,原因几乎总是出在那几行HTML里,而本页面会告诉你是哪一行。
如何检查你的Open Graph标签
- 输入要分享页面的网址,点击检查标签。工具会跟随重定向,分析的是最终网址。
- 查看预览。这些是Facebook、X、LinkedIn和聊天应用展示链接卡片的近似效果,依据的是各平台读取的标签。
- 逐项处理检查结果。“错误”会让预览失效;“警告”会让预览在某些平台上变差;“提示”属于良好实践。每一项都会说明该改什么。
- 修复后重新检查。建议使用的标签框会给出一段可直接编辑的标签代码,并已填入你当前的值。
- 部署修复后,刷新各平台的缓存(见下文),否则之前分享出去的内容仍会显示旧预览。
对于测试站点、需要登录才能访问的页面或任何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尺寸:各平台的要求
| 平台 | 文档中的要求 |
|---|---|
| 最小1200 × 627像素,推荐比例1.91:1,文件最大5 MB(LinkedIn帮助) | |
宽度至少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”标签页,粘贴页面源码后,分析完全在你的浏览器中进行,图片尺寸也在本地测量。
这里的预览和各平台实际显示的完全一致吗?
不完全一致,它们只是根据各平台公开文档中的标签规则做出的近似效果。每个平台都有自己的布局、裁剪、截断和缓存机制,并且会随时间调整。预览可以帮你发现缺失的图片和不合适的标题,但重要的发布前,请再用平台自己的调试工具确认一次。





