toolfree

OG 图片检查

检查页面的 Open Graph 与卡片标签、看见真正的预览图,并找出连结分享时为什么没有图片。

必要标签依据 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:widthog: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:twitter: 的取舍

twitter: 标签不存在时,X 会退回使用 Open Graph 标签,所以两套通常不必都写。真正重要的 是 twitter:card —— 没有 summary_large_image,无论你的图片多大,得到的都是小张的方形缩图 而不是宽版卡片。

LinkedIn、Slack、Discord、WhatsApp 与 iMessage 读的都是 Open Graph。把 og: 标签写对, 几乎就涵盖了所有情况。

有哪些数据会送到我们的服务器

只有你输入的网址。我们的服务器会取得该页面、只读取它的 <head>,接着取得 robots.txt 与标签所指名的图片。检查内容不会被储存,页面的原始码也不会返回到你的浏览器 —— 返回的只有 指名的标签值与判定结果。

指向私人网络的地址会被拒绝而不会被取得,包括任何由转址所导向的地址。