简体 ▾
Free, Fast & Secure Online Tools
有人把你的链接贴进 Slack、iMessage、LinkedIn、WhatsApp 或 Facebook 时，会跳出一张带图的预览卡。那张图叫 Open Graph 图片，而多数网站都设错了，却没有人会告诉他们——因为页面本身看起来好好的。
1200 × 630 像素。比例是 1.91:1，Facebook、LinkedIn 和多数链接预览系统都是照这个比例设计的。
你还会看到其他数字：
用 1200 × 630。它高过所有下限，是最常见版面的原生比例，缩到别处也干净。
这是造成大部分麻烦的误解。预览图是声明出来的，写在页面 head 的一个标签里：
<meta property="og:image" content="https://example.com/img/card.jpg">
你什么都不声明，每个平台就各自猜。而猜出来的结果很糟：页首的 logo、一个图标、一个追踪像素、一则广告，或者什么都没有。不同平台猜法不同，所以同一条链接在 Slack 和 LinkedIn 上长得不一样。
值得完整声明的一组：
og:image——绝对网址。这是最常见的失败；像 /img/card.jpg 这样的相对路径在你浏览器里没问题，对每一个预览爬虫都失效。og:image:width 和 og:image:height——让平台在还没下载文件前就先留好位置。og:image:alt——描述文字，给屏幕阅读器用。og:title 和 og:description——卡片上的文字。twitter:card 设成 summary_large_image——没有它，就算你的图完美无缺，X 还是显示小方块版面。你设计一张图，每个平台裁得都不一样。
你没办法同时精确满足所有平台。你能做的是把中央当成唯一可靠的区域。把主体和所有文字放在居中约 1000 × 520 的框内，外圈只承载背景。任何必须在方形裁切下存活的东西，得待在中间的 630 × 630 里。
一张 1200 像素宽的图，在桌面信息流上显示约 500 像素，在手机聊天列表里更小。那是大约 40% 的缩减——而且还没算裁切。
所以 OG 图上的文字必须比它在你设计软件里看起来的大得多。一个好检查法：把 1200 × 630 的输出缩到 500 像素宽，然后看。如果你得凑近看，就是太小了。实务上这意味着几个字的大标题配上非常大的字号，而不是一个句子。
而且记得卡片下方已经用真实文字显示了你的 og:title。在图里重复同样的字是浪费空间——用那张图讲标题没讲的事。
平台抓一次你的 OG 图就缓存起来，有时候存很久。后果常常让人措手不及：你修好了图、重新分享链接，出现的还是旧的那张。
两个可靠的应对：
全站共用一张 OG 图是常见的偷懒做法。它比没有好——至少阻止了平台乱猜——但你分享出去的每一条链接长得都一样，读者完全看不出自己要打开的是什么。
每页一张效果好得多，而且不必手工做。一个合理的折衷是做模板：固定的背景和 logo 位置，把该页自己的标题算进去。这样生产成本低，又让每条链接的卡片都说了具体的事。
https://。robots.txt 被禁、藏在登录后面，或由会挡未知 agent 的主机提供，卡片就是空的。twitter:card。图没问题，只是版面变小——很容易看过去而没发现。og:image 用绝对网址——相对路径是第一名的失败原因twitter:card = summary_large_image，否则 X 显示小卡