Twitter Card 标签怎么写:让推特卡片把链接变成大图预览

我第一次把博客链接发到 X 上时,底下只有一行灰扑扑的链接文字,没有图,没有标题。同一条链接发到团队 Slack 也是个空灰框。后来我才知道,这不是平台抽风,是页面缺了一组 meta 标签。补上之后,同样的链接展开成了带封面、带标题、可以直接点的卡片,点击率肉眼可见地上来了。这篇就把推特卡片这套标签讲透:每个标签干什么、卡片类型怎么选、和 Open Graph 是什么关系。

推特卡片到底是哪几个标签

推特卡片的全部魔法,就藏在页面 <head> 里的几个 twitter: meta 标签。核心是这几行:

twitter:card:卡片类型,唯一必填项,告诉 X 用哪种排版。
twitter:title:卡片标题,建议控制在 70 字符以内。
twitter:description:一句钩子,建议 200 字符以内。
twitter:image:封面图,必须是公开的绝对 https 地址。
twitter:site 和 twitter:creator:站点账号和作者账号,填 @handle。
twitter:image:alt:图片的替代文本,既照顾读屏用户,也算一点排名信号。

留空的字段直接省掉就行,不要写个空标签留在那。一组真实的标签长这样:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="推特卡片标签怎么写:一篇讲透">
<meta name="twitter:description" content="从 twitter:card 到 og 兜底,把分享卡片一次配好。">
<meta name="twitter:image" content="https://toolora.info/cover/twitter-card.png">
<meta name="twitter:site" content="@toolora">
<meta name="twitter:creator" content="@toolora">
<meta name="twitter:image:alt" content="一张展示推特卡片标签结构的封面图">

把这段粘进 <head>,X 抓到页面后就会按 summary_large_image 的样子铺一张通栏大图。

summary 还是 summary_large_image:卡片类型怎么选

twitter:card 这一个字段决定卡片长什么样,常用的就两种:

summary 在左侧放一张小方图,建议尺寸 144×144 起,比例 1:1,文字排在右边。它适合放 logo 或头像,卡片整体偏紧凑。

summary_large_image 用一张 2:1 的图,建议 1200×628,在标题文字上方铺一张通栏大图。它在时间线里很抢眼,文章、产品页、落地页基本都该用它。多数做内容和营销的人,想要的其实都是这一种。

除此之外还有 app(推应用下载)和 player(嵌音视频播放器)两种,用的人少很多,常规分享场景用不上。选错类型不会报错,但卡片会按你没料到的样子渲染,所以发出去前最好先看一眼预览。

推特卡片和 Open Graph 是什么关系

很多人以为有了 twitter: 标签就可以删掉 og: 标签,这是个会把卡片搞坏的误会。

真相是:X 在缺少对应 twitter: 标签时,会回退去读 og:。而 Facebook、LinkedIn、Slack、Discord、iMessage 这些平台,压根不认 twitter:,它们只读 og:。所以务实的做法是两套都写:

始终写上 og:title、og:description、og:image 这三行兜底,保证链接在所有平台都有像样的预览。然后再加 twitter:card,以及你想专门为 X 覆盖的 twitter: 字段,比如换一个更带劲的标题、换成代理商的作者账号。这样 X 读你的覆盖值,其他平台读 og 默认值,互不打架。

想把两套标签放一起对照看,可以用 /zh/t/open-graph-preview/ 预览 og 标签在各平台的展开效果,确认大图和摘要都对得上。

卡片不显示,先查这几条

我自己踩过的坑,基本逃不出下面这几类:

第一,漏了 twitter:card 本身。标题、描述、图片标签离了它一概不生效,X 直接退回成光链接。

第二,图片用了相对路径或 http 地址。像 /img/og.png 这种相对路径,或者非 https 的链接,X 爬虫抓不到,卡片就没图。务必填完整的 https 绝对地址,而且图片要小于 5 MB。

第三,页面本身爬虫够不着。登录墙、预发布密码、noindex 的 robots 规则,都会把爬虫挡在外面。确认 URL 对普通 GET 请求返回 200。

第四,X 缓存太顽固。你改了标签,旧卡片还在,这时候要用验证器重新抓一次 URL 把缓存清掉。

一次配好,到处预览都对

把这套流程跑顺其实不难:选好卡片类型,填齐标题、描述、图片和账号,补一行 image:alt,再打开 og 兜底,一次粘贴就能让链接在 X、Slack、LinkedIn 上都显示正常。手动拼这些标签容易漏字段、忘转义,直接用 /zh/t/twitter-card-generator/ 边填边看实时预览,标题超 70、描述超 200 时它会在爬虫之前先提醒你,所有取值还会自动做 HTML 转义,引号和尖括号不会撑破标签。配好复制粘进页面 head,部署后再用验证器跑一遍确认就行。

Made by Toolora · Updated 2026-06-13