什么是Twitter 卡片预览？
Twitter 卡片预览工具可让您查看链接在 Twitter/X 上分享时的呈现效果。输入 URL 或手动填写标题、描述和图片，即可在发布前预览摘要卡片和大图摘要卡片两种类型。
预览按 Twitter/X 网页版的实际比例渲染:Summary with Large Image 用 2:1 大图(博客和新品发布的推荐选择),Summary 用 1:1 小缩略图(更适合分类页和参考链接)。同时生成对应的 meta 标签,可以直接粘贴到网站的 <head> 里,不用手写。
使用方法
- 第一步 — 填写标题、描述和图片 URL，或粘贴页面的 HTML，一次性导入其中现有的 twitter: 和 og: 标签。
- 第二步 — 选择卡片类型：摘要卡片（小缩略图）或大图摘要卡片（横幅式预览）。
- 第三步 — 查看实时预览，确认链接在 Twitter/X 时间线中的实际显示效果，可选择嵌入完整推文中预览，以及在 LinkedIn、Facebook、Slack 和 Discord 上的样子，然后根据需要调整各项内容。
何时使用
- 把博客或文章链接发到 Twitter/X 之前,先看一眼分享卡片长什么样。
- 审计旧落地页的分享卡片,看看是不是图被裁、默认显示 logo 之类的问题。
- 在加 meta 标签之前,先决定一个页面用 Summary 还是 Large Image 卡片。
结果
您即将在 Twitter/X 上分享一篇博客文章。粘贴页面 HTML 载入其标签后，预览显示卡片缺少描述且图片被裁切。修改这两项内容并确认大图卡片展示效果良好后再发布推文。
常见问题
- Summary 和 Summary with Large Image 有什么区别?
- Summary 卡片左边是正方形小缩略图,右边显示标题和描述。Summary with Large Image 是顶上一张宽幅大图,标题在下面。大图卡片在时间线上占的位置更大,点击率几乎总是更高。
- Twitter/X 实际显示的图片尺寸是多少?
- Summary with Large Image 显示区大约是 2:1(比如 1200×600 像素)。Twitter 接受 300×157 到 4096×4096 之间的尺寸,但会裁成 2:1,所以重要的文字或人脸要放在中间的 2:1 区域内。
- 用这些 meta 标签需要 Twitter 开发者审核吗?
- 不需要。Twitter Card 的 meta 标签对任何公开网站都有效,不用审核。以前需要批准的 validator 已经下线了。把标签加到 <head>,公开部署,下次有人分享这个 URL,卡片就会出现。
- Meta 标签明明正确,为什么 Twitter 上还不显示新卡片?
- Twitter 对卡片响应缓存很激进。改完 meta 标签之后,旧卡片可能挂几个小时。在 URL 后面加个跟踪参数(?v=2 或 UTM)能强制重新抓取。另外检查一下 robots.txt 有没有把 Twitterbot 拦了。
- 应该用 Open Graph 还是 Twitter 标签?
- Twitter 在缺少 twitter:* 标签时会回退到 Open Graph(og:title、og:description、og:image),所以光靠 OG 通常也够用。想要完全控制图片和布局,就加上 twitter:card 和 twitter:image。