分享链接时,平台并不会只显示网址。它会抓取页面,从 head 中读取几个标签,然后拼出一张卡片:一张图片、一个标题、一行文字。读哪些标签取决于链接发在哪里。X 先找自己的标签,找不到才回退到 Open Graph;而 Facebook 和 LinkedIn 只读 Open Graph。少了某个标签也不会留空,平台会从页面里另取内容,通常是它找到的第一段文字。在下面输入网址读取页面的标签,或者自己填写,卡片会按六个平台各自的方式绘制出来。
各平台读取的标签并不相同
X 先看自己的标签,没有才回退到 Open Graph。Facebook 和 LinkedIn 只读 Open Graph,所以 X 标签在那里毫无作用。Slack 和 Discord 两种都接受。因此同一个页面可能生成六张互不一致的卡片,而你确信设置过的标题可能在其中一半上消失。这里的每个预览都遵循相应平台实际使用的顺序。
Facebook 和 LinkedIn 会记住读到的内容
两者都会保存首次抓取你页面时读到的副本,而且保留很久。你把标签改对了,卡片却没变,这是正确的修改看起来像失败的最常见原因。你必须请平台重新读取页面,而两者都提供了工具:Facebook 的 Sharing Debugger 和 LinkedIn 的 Post Inspector。没有任何工具能替你清掉这些缓存,本工具也不行。这里显示的是标签此刻的内容,而不是 Facebook 仍在展示的内容。
少一个标签不会留下空白
平台会拿别的内容顶上,而不是留一个洞。没有描述标签时,它们从页面里取一行,通常是遇到的第一段文字,而在很多网站上那是一个菜单项或一条 Cookie 提示。没有图片时,卡片会缩成 favicon 旁边的一行文字。这些替代行为在预览里也照样呈现。
尺寸,以及裁剪落在哪里
宽度低于约 600px 时,大多数平台不再显示大图卡片,改用文字旁边的小缩略图,那是弱得多的一张卡片。1200 x 630 是多数人采用的目标尺寸。裁剪从中间取,所以靠近上下边缘或左右边缘的内容都可能消失:照片底部的电话号码,海报顶部的名称。图片在这里由你的浏览器加载并实测,所以你看到的尺寸是真实值,而不是宽度标签声称的数字。
同一组标签,六张卡片,因为各个平台的读法并不相同。
- 按各自的版式
- 按各自使用的标签顺序
- 并排显示
- 在你的浏览器中实测
- 真实像素,而非标签数值
- 按实际裁剪方式裁剪
- 标题和描述
- 各自被截断的位置
- 各自来自哪个标签
- 页面上有什么标签就读什么
- 每一种回退都照做
- 不保留任何内容