OG 图片检查
检查页面的 Open Graph 与卡片标签、看见真正的预览图,并找出连结分享时为什么没有图片。
- 图片地址
- -
- og:title
- 未设置
- og:description
- 未设置
- og:image
- 未设置
- og:url
- 未设置
- og:type
- 未设置
- og:image:width
- 未设置
- og:image:height
- 未设置
- og:image:alt
- 未设置
- twitter:card
- 未设置
- twitter:image
- 未设置
X 官方的卡片文档目前无法公开读取,因此上面标注的那些限制是外界普遍流传的数字,而非我们能在原始出处查证的内容。请当作参考,而非规格。
必要标签依据 Open Graph 协议;像素与文件大小规则依据 Facebook 公开的说明文档。
这个工具需要服务器。浏览器不被允许读取其他网站的源码,因此由我们的服务器获取页面、只读取其 <head> 并回报结果。图片同样由我们的服务器获取,所以你的浏览器不会连上被检查的网站。你输入的网址会送到我们的服务器;检查内容不会被存储。
这个工具做什么
输入页面地址,这个工具会取得该页、读出它的 Open Graph 与卡片标签、下载标签所指向的图片, 并把图片与每一条规则的判定结果一起呈现。这是在你把连结贴到公开场合之前该做的检查, 而不是在它已经分享得很难看之后。
你在这里看到的图片是由我们的服务器取得后随结果一并返回的,所以观看预览并不会让你的浏览器 连上被检查的网站。
预览需要哪些标签
Open Graph 协定列出四个必要属性:
<meta property="og:title" content="页面的标题">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/the-page">
<meta property="og:image" content="https://example.com/card.png">
<meta property="og:description" content="一到两句话的说明。">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="图片内容的描述">
<meta name="twitter:card" content="summary_large_image">
og:description 不在协定的四个必要项目之内,但少了它,预览卡的标题下方就没有文字。
og:image:width 与 og:image:height 值得设定,因为 Facebook 会用它们在尚未下载图片时
先完成排版 —— 这正是刚分享出去的连结有时会出现一块空白的原因。
图片规则,以及它们的出处
Facebook 公布了明确的数字:
| 规则 | 数值 |
|---|---|
| 最小尺寸 | 200 × 200 像素,低于此不会显示任何预览图 |
| 大卡片门槛 | 600 × 315 像素,低于此只会得到小张缩图 |
| 建议尺寸 | 1200 × 630 像素,适用于高分辨率屏幕 |
| 长宽比 | 尽量接近 1.91:1,否则图片会被裁切 |
| 文件大小上限 | 8 MB |
X 官方的卡片文件目前未登入无法阅读,因此这个工具会照常检查 X 的标签(twitter:card
等等),但把外界普遍引用的尺寸限制(最小 300 × 157、最大 4096 像素、小于 5 MB)标示为
仅供参考。我们宁可说明某个数字无法查证,也不愿呈现一个提不出出处的数字。
为什么连结分享出去没有图片
- 网址是相对路径。
og:image="/card.png"在浏览器里没问题,对抓取器却无效 —— 它们需要完整的https://绝对网址。这是最常见的单一问题。 robots.txt挡住了图片。 抓取器会遵守它,因此无论其他设定多正确,卡片都会是空白的。- 它是 SVG。 语法完全有效,但主要平台都不会把 SVG 当成卡片图片显示。请改用 PNG、JPEG 或 WebP。
- 图片是 404。 常见于从未随上线一并更新的测试环境网址。
- 文件太大。 超过 8 MB,Facebook 根本不会接受。
- 宣告的尺寸不对。
og:image:width写 1200 而实际文件是 600,会让第一次显示时排版错误。 - 平台把它缓存住了。 这些平台的缓存都很积极,所以图片改好之后仍可能沿用旧的。Facebook 的 Sharing Debugger 与 LinkedIn 的 Post Inspector 都有重新抓取的按钮;X 则依自己的排程更新。
最后这一点值得特别强调:这个工具告诉你的是你的页面现在写了什么,它无法告诉你某个平台 上周缓存了什么。
og: 与 twitter: 的取舍
当 twitter: 标签不存在时,X 会退回使用 Open Graph 标签,所以两套通常不必都写。真正重要的
是 twitter:card —— 没有 summary_large_image,无论你的图片多大,得到的都是小张的方形缩图
而不是宽版卡片。
LinkedIn、Slack、Discord、WhatsApp 与 iMessage 读的都是 Open Graph。把 og: 标签写对,
几乎就涵盖了所有情况。
有哪些数据会送到我们的服务器
只有你输入的网址。我们的服务器会取得该页面、只读取它的 <head>,接着取得 robots.txt
与标签所指名的图片。检查内容不会被储存,页面的原始码也不会返回到你的浏览器 —— 返回的只有
指名的标签值与判定结果。
指向私人网络的地址会被拒绝而不会被取得,包括任何由转址所导向的地址。