Twitter（X）Card 生成器

为 X（Twitter）链接预览生成 twitter:card meta 标签：summary 或 summary_large_image、站点和作者账号、标题、描述、图片及 alt。

twitter:card

twitter:title

twitter:site (网站账号)

twitter:creator (作者账号)

twitter:image

至少 300×157 像素，比例 2:1（如 1200×600）。

twitter:image:alt

twitter:description

放入 <head> 的 HTML

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@example">
<meta name="twitter:title" content="My Awesome Article">
<meta name="twitter:description" content="A short summary shown in the card.">
<meta name="twitter:image" content="https://example.com/card.png">
<meta name="twitter:image:alt" content="Article cover">

缺少 twitter:* 标签时，X（Twitter）会回退使用 og:title、og:description 和 og:image，因此只需添加 twitter:card 以及需要与 OG 不同的标签。

什么是 Twitter Card 生成器？

这个生成器会写出 X（原 Twitter）用于渲染链接卡片的 twitter: meta 标签：卡片类型（summary 或 summary_large_image）、@site 和 @creator 账号、标题、描述、图片以及图片 alt 文本。

如何使用 Twitter Card 生成器

选择卡片类型：summary（小方图）或 summary_large_image（宽图）。
输入站点和作者账号；如果漏写 @，会自动补上。
填写标题、描述、图片 URL 和 alt 文本。
把标签复制到页面的 <head> 中。

示例

输入

summary, @example, title Hello

输出

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@example">
<meta name="twitter:title" content="Hello">
<meta name="twitter:description" content="A short summary shown in the card.">
<meta name="twitter:image" content="https://example.com/card.png">
<meta name="twitter:image:alt" content="Article cover">

何时使用 Twitter Card 生成器

适合想让 X 显示大图卡片或标注作者账号时使用。如果页面已经有 Open Graph 标签，你只需要 twitter:card，以及在 X 上需要不同的那些值。

Twitter Card 生成器的工作原理

工具总是输出 twitter:card，其余标签只有在填写后才会添加，并经过 HTML 转义。账号会被规范化为以 @ 开头。image:alt 只会在有图片时添加。对于未设置的内容，X 会回退到 Open Graph 标签（og:title、og:description、og:image），所以 twitter: 这一组可以保持精简。