阅读约 4 分钟
为什么你的链接预览看起来是坏的（以及如何修好它们）
当你把链接粘进 Slack、iMessage 或 X 时出现空白或错误的预览，几乎总是归结于寥寥几个 Open Graph 标签。这是排查清单。
你上线了一个页面，把链接粘进 Slack，结果只得到一个光秃秃的网址、没有图片——或者更糟，显示的是上个月的标题。链接预览由 Open Graph 和 Twitter meta 标签驱动，一旦它们缺失或出错，各个平台都会退化成很难看的样子。
驱动预览的那些标签
<meta property="og:title" content="Your page title" />
<meta property="og:description" content="One clear sentence." />
<meta property="og:image" content="https://yoursite.com/og.png" />
<meta name="twitter:card" content="summary_large_image" />常见的罪魁祸首
- og:image 用了相对路径——它必须是一个绝对 URL。
- 图片太小；目标尺寸为 1200×630。
- 标签是在客户端注入的，所以爬虫永远看不到它们。
- 缓存在提供旧的预览——重新抓取以刷新它。
「OG 图片」工具会为每个页面渲染一张品牌化的卡片，并在你上线前预览它在 Slack、iMessage、X 和 LinkedIn 上的展开效果——然后技能会把这些标签接进你的仓库，让它们在服务端渲染。