Twitter Card 预览

生成 twitter:* 卡片标签：summary 与 summary_large_image 两种卡的必填项检查、图片尺寸与比例提示，并预览 X/Twitter 卡片效果。

浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。

Twitter 卡片标签

只生成标签与预览，不会访问任何 URL，也不会渲染粘贴进来的 HTML。

卡片类型（twitter:card）标题（twitter:title）图片（twitter:image）图片宽度（twitter:image:width）图片高度（twitter:image:height）图片替代文本（twitter:image:alt）站点账号（twitter:site）写成 @username，最多 15 个字符作者账号（twitter:creator）描述（twitter:description）

展示比例 1.91:1 · ≥ 300×157

生成的标签

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="UniKit 工具箱：全部在浏览器本地运行的开发者小工具" />
<meta name="twitter:description" content="JSON 格式化、URL 编解码、哈希计算、二维码生成……两百多个在线工具，输入不离开浏览器。" />
<meta name="twitter:image" content="https://unikit.cc/og-zh.png" />
<meta name="twitter:image:width" content="1200" />
<meta name="twitter:image:height" content="630" />
<meta name="twitter:image:alt" content="UniKit 工具箱首页预览图" />
<meta name="twitter:site" content="@unikit" />
<meta name="twitter:creator" content="@unikit_dev" />

标签清单

必填

twitter:card已提供

twitter:title已提供

twitter:image已提供

卡片预览

https://unikit.cc/og-zh.png · 1200×630

UniKit 工具箱：全部在浏览器本地运行的开发者小工具JSON 格式化、URL 编解码、哈希计算、二维码生成……两百多个在线工具，输入不离开浏览器。summary_large_image · @unikit

检查结果

必填与推荐标签齐全，图片尺寸也符合这张卡的规格。

这个工具能做什么

页面分享到 X/Twitter 时没有大图或标题不显示，先检查 twitter:card 是 summary 还是 summary_large_image，以及对应的必填属性是否齐全。
按卡片类型生成 twitter:* 标签：summary_large_image 需要 twitter:image，summary 只需要标题，选错类型会直接列出来。
核对图片规格：summary 卡最小 144×144、按 1:1 展示，大图卡最小 300×157、按 1.91:1 展示，比例偏差会被提示。

示例

输入

卡片类型=summary_large_image、标题=UniKit 工具箱：全部在浏览器本地运行的开发者小工具、描述=JSON 格式化、URL 编解码……、图片=https://unikit.cc/og-zh.png、宽高=1200×630、站点账号=@unikit、作者账号=@unikit_dev

输出

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="UniKit 工具箱：全部在浏览器本地运行的开发者小工具" />
<meta name="twitter:description" content="..." />
<meta name="twitter:image" content="https://unikit.cc/og-zh.png" />
<meta name="twitter:image:width" content="1200" />
<meta name="twitter:image:height" content="630" />
<meta name="twitter:image:alt" content="UniKit 工具箱首页预览图" />
<meta name="twitter:site" content="@unikit" />
<meta name="twitter:creator" content="@unikit_dev" />

标签用 name="twitter:*" 而不是 property，空字段不会生成标签；示例输入就是工具默认载入的那组数据。

常见问题

summary 和 summary_large_image 该选哪个？

想展示大图就用 summary_large_image，它要求提供 twitter:image（推荐 1200×630）；summary 是小方图卡片，只要求 twitter:card 与 twitter:title，图片按 1:1 展示。

twitter:image:width / height 是官方属性吗？

不是。X 会自行抓取图片尺寸，这两个属性主要是给校验工具和其他平台读的。这里用它们做比例与最小尺寸检查；不写也能通过检查，只是会提示「无法检查尺寸」。

还需要同时写 Open Graph 标签吗？

建议都写。X 在缺少 twitter:* 标签时会回退到 og:*（og:title、og:description、og:image），但回退规则会变，显式声明 twitter:* 更稳。

twitter:site 和 twitter:creator 有什么区别？

twitter:site 是网站/品牌的账号，twitter:creator 是内容作者的个人账号，都要写成 @username（最多 15 个字符）。写成不带 @ 的纯用户名会被提示。

粘贴 HTML 会被执行吗？

不会。工具用正则扫描 <meta> 属性，只取 twitter:* 开头的标签，不注入 DOM、不渲染、不执行脚本，也不会请求标签里写的 URL。

关键词：twitter cardtwitter card previewtwitter:cardsummary_large_imagex card previewsocial previewTwitter 卡片twitter 标签生成X 分享卡片summary 卡大图卡片卡片校验

这个工具能做什么

示例

常见问题

同类工具