首页 / 免费工具 / Social Share Preview

看看链接被分享时你的页面是什么样子

看看别人分享你的页面链接时,六个平台会生成什么样的卡片。

分享链接时,平台并不会只显示网址。它会抓取页面,从 head 中读取几个标签,然后拼出一张卡片:一张图片、一个标题、一行文字。读哪些标签取决于链接发在哪里。X 先找自己的标签,找不到才回退到 Open Graph;而 Facebook 和 LinkedIn 只读 Open Graph。少了某个标签也不会留空,平台会从页面里另取内容,通常是它找到的第一段文字。在下面输入网址读取页面的标签,或者自己填写,卡片会按六个平台各自的方式绘制出来。

这里不保存任何内容。输入的地址会发送到 sona.to,由它读取该页面的标签并返回。页面本身不会被保留。
X 优先 X 标签
Facebook 仅 Open Graph
LinkedIn 不显示描述
Slack 两种标签都读
Discord 两种标签都读
WhatsApp

各平台读取的标签并不相同

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 是多数人采用的目标尺寸。裁剪从中间取,所以靠近上下边缘或左右边缘的内容都可能消失:照片底部的电话号码,海报顶部的名称。图片在这里由你的浏览器加载并实测,所以你看到的尺寸是真实值,而不是宽度标签声称的数字。

它显示什么

同一组标签,六张卡片,因为各个平台的读法并不相同。

六个平台
  • 按各自的版式
  • 按各自使用的标签顺序
  • 并排显示
图片
  • 在你的浏览器中实测
  • 真实像素,而非标签数值
  • 按实际裁剪方式裁剪
文字
  • 标题和描述
  • 各自被截断的位置
  • 各自来自哪个标签
从线上页面读取
  • 页面上有什么标签就读什么
  • 每一种回退都照做
  • 不保留任何内容
如何使用
1
输入网址
输入或粘贴页面网址。它的标题、描述、canonical、favicon 以及每一个 Open Graph 和 X 标签都会被读取并填入下方。
2
或者自己填写标签
把网址留空,直接填写标题、描述和图片地址。适合在把一组标签放上页面之前先试一试。
3
看这六张卡片
看看标题和描述在哪里被截断,以及你没有填的内容各平台用什么顶替了。
4
改完标签,再请平台重新读取
标签放在页面的 head 里。在 Facebook 和 LinkedIn 上,旧卡片会一直留着,直到你请它们重新查看。
这些词的含义
Open Graph
页面 head 中的一组 meta 标签,名称都以 og 开头,用来告诉平台该用哪张图片、哪个标题和哪段描述。它由 Facebook 提出,如今大多数平台都会读取。
卡片
平台用来代替裸链接的东西:一张图片、一个标题、一行文字和域名。形状以及能保留多少文字,各平台并不相同。
缓存
平台保存的、从你页面读到的那份副本。Facebook 和 LinkedIn 都会保存一份,所以它们展示的卡片可能比页面上现有的标签更旧。
部分:问题