发布之前,先检查你的分享卡片

分享卡片是当有人把指向你页面的链接粘贴出去时,社交网络或聊天应用生成的那张小预览——一个标题、一段描述和一张图片。对大多数接触过这个页面的人来说,卡片是他们唯一会看到的版本:他们在滑动中与它相遇,用大约一秒钟评判它,然后决定它背后的页面值不值得点开。不舒服的地方在于,卡片的故障是无声的。你的页面在自己的浏览器里可以看起来完美无缺,而它的卡片却没有图片、显示着上个月的标题,或者描述在一半处被截断,因为卡片不是从你在屏幕上看到的东西构建的——它是从页面头部的一小组 meta 标签构建的,由一个你从来不会去看的抓取器一次性抓取。所以,在发布任何你打算分享的内容之前,把草稿 URL 放进 Open Graph 检查器,按你的读者会看到的方式看你的页面:四张小卡片。

链接就是广告

当一个链接被粘贴到社交信息流或聊天会话里时,没有人类会先访问你的页面。平台派出一个抓取器——一个小而没耐心的爬虫——它抓取页面一次,从头部找到的 meta 标签构建卡片。这条链上的任何人看不到你的布局、字体、精心调整的首屏部分,也看不到你放在折叠线上方的截图。他们看到的恰好是三个字段加一张图片:og:title、og:description 和 og:image。如果这三个不对、缺失或过期,那么在你的受众看来,你的页面就是不对、缺失或过期——卡片后面那个漂亮页面永远没有机会纠正这个印象。

卡片还很顽固。平台会缓存这次抓取,通常是按确切的 URL 缓存,所以抓取器构建的第一个版本往往就是那个被持续转发数周乃至数月的版本,远远晚于你编辑页面的时间。这就是为什么分享卡片值得与广告创意同等的尊重:对于一篇全部目的就是被分享的帖子来说,链接就是广告,meta 标签就是文案。把它们当作事后补笔——或者让建站工具用附近恰好放着的文字自动填进去——等于在运行一场没人审过的创意的推广活动。

每个平台到底读取什么

先说基准。Facebook 和 LinkedIn 读取 Open Graph:由 Open Graph 协议定义的 og:title、og:description、og:image、og:url 和 og:type。只要这五个存在且合理,两个最大的职业分享界面就覆盖到了。X 优先读取它自己的 Twitter Card 标签——twitter:card、twitter:title、twitter:description、twitter:image——在 Twitter 标签缺失时回退到 Open Graph 等价标签。Slack 先读 Open Graph,以 Twitter Card 标签作为它的回退。也就是说,各平台对配料达成一致,只是在先伸手拿哪个货架上略有分歧。

到处都一样,最后的兜底是同一个:普通的 <title> 元素和 meta 描述,在既没有 Open Graph 也没有 Twitter 标签时被拉来顶上。这个回退对你如何阅读任何检查器(包括我们的)都很重要。当一个工具向你展示卡片标题时,诚实的问题是这个值从哪来——是你专门为此写的一个标签,还是从一个为搜索结果页写的、字符预算与你的卡片并不共享的 title 元素里救出来的回退。一台悄悄替换回退值并把它当成标签呈现的检查器,是在以遗漏的方式对你撒谎,这正是为什么 Open Graph 检查器 把每个回退都标注为回退,而不是假装标签存在。

让卡片看起来坏掉的故障

经典款是相对路径的 og:image。标签写着 content="/images/share.png"——一个路径,不是一个 URL——它在你的浏览器里工作,因为浏览器知道自己在哪个网站上。抓取器不会解析它:它要的是一个以 https:// 开头的完整绝对 URL,得不到就直接构建一张没有图片的卡片,读者划过去时永远不会知道自己错过了什么。紧随其后的是图片存在但不合身:远小于平台推荐的 1200×630 像素,或者比例在居中裁剪后变得莫名其妙。请把 1200×630 当作它本来的样子——广泛公布的平台指导,不是任何人批准过的标准——但被无视的指导依然意味着一张标题被裁出画面的卡片。

其余的更安静。缺失 twitter:card 标签意味着 X 回退到一张小摘要卡片——文字旁边一个缩略图——即使你提供了一张又大又漂亮的图片、期待的是全宽的 summary_large_image 待遇。空的标签值比缺失的标签更糟:一个 content="" 的 og:title 不会触发回退,它会以空无一物覆盖回退。而错误的 og:url——指向预发布域名、主页,或者上周的文章,正如复制来的模板经常干的那样——告诉每个平台规范页面在别处,把分享、计数和缓存条目从你真正发布的页面上分流出去。

为什么你修好了标签,旧卡片还在

你改好了标签,重新部署了,又粘贴了一次链接——旧标题还在那里,对着你笑。什么都没坏。每个平台都会把针对你的 URL 构建好的卡片缓存起来,而这个缓存不会监视你的网站有没有变化;从平台的角度看,它已经知道你的页面长什么样了,在每次分享时重新抓取每个 URL 将是为极小收益付出的巨大爬取量。过期卡片不是你的修复失败的证据,而是缓存还没有被告知要再看一眼的证据——在那之前,每个分享这个链接的同事和读者重新端出来的都是旧的那次抓取。

所以去告诉它。每个主要平台都提供强制重新抓取单个 URL 的方式:Facebook 的 Sharing Debugger 和 LinkedIn 的 Post Inspector 都会重新抓取页面并向你显示它们重建的卡片——X 历史上也提供过用于同一目的的卡片验证器。在任何标签修复之后,把你的 URL 放进相应的工具里跑一遍,在宣布帖子之前确认新卡片。在没有重新抓取工具的地方,改 URL 就改了缓存键:附加一个诸如 ?v=2 的查询字符串,会让平台把这个链接当作从未见过的来处理,这对一次性分享来说是个完全体面的技巧。还有,留一点耐心——即使重新抓取之后,缓存也可能需要一段时间才放手,所以先检查、等一等、再检查一次,然后再去编辑那些本来就没错的标签。

两分钟的发布前例行检查

把它变成例行工作,而不是一次调查。第一:把草稿 URL 粘贴进 Open Graph 检查器——预发布或预览 URL 就行,只要它是抓取器将抓取的那个页面。第二:确认全部四张卡片——Facebook、X、LinkedIn 和 Slack——显示的都是你想要的标题、描述和图片,并留意任何标为回退的项,因为你选择的回退没问题,你撞上的回退则是一个等着被写出来的标签。第三:确认图片 URL 是绝对 URL,图片本身至少 1200×630。第四:确认在你想要 X 大图格式的地方 twitter:card 是 summary_large_image,并确认 og:url 指的是你即将发布的规范页面。

第五:发布——然后自己先把链接粘贴到某处一次,在你还盯着的时候强制完成第一次抓取,看看返回的卡片。如果它过期或不对,用平台自己的工具重新抓取,而不是慌乱地改东西。两分钟、五步,而大多数人唯一会看到的你的页面版本,就会是一个你真正批准过的版本。至于更宽的发布前清扫——TLS、安全响应头、重定向,一个页面在上线前值得做的其余例行检查——同时运行 网站健康检查;卡片是前门,但不是整栋房子。

来源与延伸阅读

常见问题

为什么我的链接不显示图片?

几乎总是三个原因之一。og:image 的值是相对路径而不是完整的 https:// URL,抓取器不会解析它。标签完全缺失,于是平台要么从页面正文里猜一张图片,要么什么都不显示。或者图片在你的浏览器里可达,但对抓取器被阻断——在登录之后、被机器人规则或 robots 排除拒绝——或者干脆太小用不了。Open Graph 检查器会显示这几种中哪一种适用于你的 URL,因为它以抓取器的方式读取标签。

我修好了标签——为什么旧标题还出现?

因为平台显示的是它缓存的抓取结果,而不是你当前的页面。每个平台都会按 URL 缓存卡片,不被告知就不会重新抓取。用平台自己的工具强制一次全新抓取——Facebook 的 Sharing Debugger 或 LinkedIn 的 Post Inspector——并在那里确认重建的卡片。对于在别处的一次性分享,附加一个诸如 ?v=2 的查询字符串,就足以让 URL 发生变化,使平台构建一张全新的卡片。

我需要同时写 Open Graph 和 Twitter 两套标签吗?

主要是 Open Graph,再加一个 Twitter 标签。当对应的 Twitter 标签缺失时,X 会回退到 og:title、og:description 和 og:image,所以把每个值都复制一份收获很小。但 twitter:card 没有 Open Graph 等价物——og 集合里没有任何东西告诉 X 应该渲染小摘要还是大图——所以实用的最小集是完整的 Open Graph 集合加上设为 summary_large_image 的 twitter:card。只有当你刻意想让 X 显示与所有其他地方不同的文案时,才添加其余的 Twitter 标签。