Ctrl K
约 6 分钟读完 · 更新于 2026-10-21 · 文中每条都能在下面的配套工具里动手验证
卡片不是平台猜的，是你声明的
贴一个链接到 X、LinkedIn 或 Slack 时出现的卡片，来自抓取器读取你 HTML <head> 里的 OG 标签。标签缺失或写错，平台不是报错而是「静默降级」——只显示纯链接，这就是「没有卡片图」的原因。最小集合只有四行：
OG 最小标签集
<meta property="og:title" content="页面标题" /> <meta property="og:description" content="一句话描述" /> <meta property="og:image" content="https://example.com/og.png" /> <meta property="og:url" content="https://example.com/page" /> <!-- X 补充（可选）： --> <meta name="twitter:card" content="summary_large_image" />
最常见的死因：相对路径
<meta property="og:image" content="/assets/og.png" /> <!-- 死 --> <meta property="og:image" content="https://pxbo.com/assets/og.png" /> <!-- 对 --> <!-- 抓取器没有「当前站点」上下文，相对路径一律丢弃 -->
尺寸与体积的硬约束
1200×630（比例 1.91:1）是 X、LinkedIn、Facebook 共同的安全尺寸。尺寸对了还不够——平台对体积和格式同样挑剔，超限的处理方式是不显示图而非报错：
| 平台 | 推荐尺寸 | 体积上限 | 格式 |
|---|---|---|---|
| X / Twitter | 1200×628（2:1 内） | 5MB | PNG / JPEG / WebP |
| Facebook / LinkedIn | 1200×630 | 8MB / 5MB | PNG / JPEG |
| 微信（网页） | 300×300 缩略 + 描述 | 32KB 内缩略图 | PNG / JPEG |
| Slack / Discord | 1200×628 | 各 5MB / 8MB | PNG / JPEG / GIF |
改了不生效？刷缓存清单
抓取器把 OG 数据缓存得很凶。改完标签「看不到变化」九成是缓存问题，按顺序来：
- X：用 Card Validator 重新提交 URL；LinkedIn：Post Inspector；Facebook：Sharing Debugger 里点「再抓取」
- 确认图片 URL 返回 200 且 Content-Type 是 image/*——用 curl -I 直接验，别靠浏览器缓存
- 图片文件本身也换名（og-v2.png）：CDN 对图片的缓存比页面凶得多
- 检查 robots.txt 没有拦抓取器 UA，页面没有被 noindex
- 都对了还不行：等 24–48 小时，部分平台旧缓存没有手动刷新入口
常见问题
og:image 会被压缩吗？
会。平台都会按自己的编码重新压缩，所以导出时用 PNG 保住文字边缘，别直接给高压缩 JPEG——二次压缩后小字会糊。文字在图里占比大时，保证正文字号不小于 44px（1200 宽度下）。
SPA 路由页面怎么出卡片？
抓取器不执行 JavaScript。任何路由都要在服务端返回完整 head——静态站给每条路由输出独立 HTML，或上预渲染服务。客户端 JS 动态设置 og 标签对抓取器无效。
一张图通吃所有平台可行吗？
1200×630 基本可行，但微信只取 300×300 缩略、X 2:1 以上会裁边。核心区分平台单独导出一版（改标题安全区），其余共用即可。