OG 预览 — X、Facebook、LinkedIn、Slack、Discord
通过网址获取 Open Graph 标签，或粘贴 HTML。按五个平台的真实宽度预览分享卡片。
1200 × 630 (1.91:1) — one image serves every platform
概述
分享卡片是大多数人接触一个页面时看到的第一样东西，而它会被五个不同的平台、按五套 不同的布局分别渲染出来。这个工具从同一组标签出发，把它们全部按各平台信息流的真实 宽度画出来，于是「标题在 LinkedIn 上会不会被切掉？」变成一件你直接看一眼就知道的 事，而不是靠猜的事。
生成的那段标签块就是可以直接粘进你 <head> 的原始标记，其中 content 的值已经做过
HTML 转义。
使用方法
- 把页面 URL 填进顶部的输入框，按 fetch meta —— 我们的服务器读取它的标签并填好各字段。或者按 paste HTML 直接粘贴源码，那条路径完全留在你的标签页内。
- 手工调整标题、描述、站点名和图片 URL，试试别的写法。
- 在 ALL 与单个平台之间切换以便对比，或者只盯着你在意的那一个。
- 盯住计数器；当某个值长到会被截断时，它们会变成琥珀色。
- 按 copy tags，把结果粘进页面的
<head>。
真正起作用的那些标签
五个平台，共用一组标签。下面列出它们各自会读哪些标签，以及读取它们的先后顺序：
| 标签 | 作用 | 说明 |
|---|---|---|
og:title | 卡片标题 | 回退到 <title>。在较窄的卡片上大约 60 个字符后被截断 |
og:description | 正文文字 | 回退到 <meta name="description">。大约 155 个字符 |
og:image | 图片 | 必须是绝对 URL。 相对路径不会被任何爬虫解析 |
og:url | 分享所用的规范 URL | 平台按它去重，所以填错会把两个页面的互动数据合并到一起 |
og:type | website 或 article | 很少改变渲染结果；article 会在部分平台上启用额外字段 |
og:site_name | 标题上方或下方的小号标签 | X 会忽略它 |
twitter:card | summary 或 summary_large_image | 决定 X 显示缩略图还是整幅宽图 |
twitter:image | X 所用的图片 | 可选——X 会回退到 og:image |
单独最常见的一个错误，是把 og:image 写成相对路径。它在所有会把这个路径按页面 URL
去解析的本地预览工具里都显示得完全正常，而在其他任何地方都只会产出一张没有图片的
卡片，因为爬虫根本不会去做这一步解析。
第二常见的，是 og:url 指向了错误的那个变体——上面带着跟踪参数，或者站点明明用
https:// 提供服务而它写成了 http://。各平台的缓存键就是这个值，所以这个错误在
产生错卡片之外，还顺带让卡片变得很难修。
缓存，以及你的修改为什么没生效
每个平台都会把某个 URL 首次被分享时它所构建的那张卡片缓存下来，而它们重新抓取的 时机没有一个是按你能控制的节奏走的。也就是说，改动标签这件事本身并不会更新一张 已经分享出去的卡片。
各平台强制刷新的方式各不相同：
- Facebook 和 Instagram —— Sharing Debugger，「Scrape Again」
- LinkedIn —— Post Inspector
- X —— 已经没有公开的调试器了；改 URL 是可靠路线
- Slack —— 缓存约 30 分钟，之后重新抓取
- Discord —— 缓存很激进；换一个 URL 是实际可行的办法
这就是「在首次分享之前、而不是分享之后再去检查卡片」这条做法的全部理由。一张已经 扩散开去的错误卡片，跟一张你在预览里当场抓到的错误卡片，是完全不同量级的麻烦。
实践中的图片要求
1200 × 630、比例 1.91:1，在这五个平台上都能用，也是唯一值得专门去生产的尺寸。真正 会把卡片弄坏的是下面这些细节：
- 小于 200 × 200 会被好几个平台直接拒绝。
- 大于约 5 MB 会被部分爬虫丢弃，而不是缩放。
- 透明 PNG 会跟平台自己用的背景做合成，而那个背景在浅色和深色模式下并不相同。 请用不透明的图片。
- 贴近边缘的文字 会被裁掉，因为每个平台裁切同一张图的方式都略有不同。把重要内容 都放在中间 80% 的范围里。
- 需要登录才能访问的图片 会产出一张空卡片。爬虫是没有登录状态的，它们也不会带上 你的 cookie。
示例
- 审查一个线上页面：粘贴它的 URL，按 fetch meta —— 各字段会用页面自己的标签填好，你就能看到社交平台会构建出什么。
- 撰写一个新页面：图片留空，先对着占位图工作，等真实的 1200 × 630 URL 存在了再填进去。
- 长标题：粘贴一个 90 个字符的标题，看它在 X 上活了下来，而在 Facebook 上折成两行。
说明
这些预览是按各平台实际使用的宽度，对它们的卡片做的忠实重建，不是从那些平台上截下来 的屏幕图。平台会随时间调整自己的布局，其中一些还带有自己的缓存——一张你已经分享过的 卡片，可能会一直沿用旧图片，直到你在那个平台的调试器里把它清掉为止。
标签提取的顺序是：先读 og:*，然后回退到 twitter:*，再回退到 <title> 和
<meta name="description">，这大致也就是爬虫自己采用的顺序。无论标签来自
fetch meta 还是来自粘贴进来的 HTML，这个顺序都完全一致。
服务端抓取最多跟随五次重定向，最多读取页面的前 512 kB，并且会拒绝任何不是 HTML 的 内容。返回的只有一份固定的 meta 键名清单；页面上的其他任何东西都不会被传回来。