Twitter 卡片验证器

X 已移除了自有的验证工具，因此您可以在这里检查您的卡片。粘贴您网页的 HTML 即可测试每个 twitter: 标签，预览 X 显示的卡片效果，并复制修复后的标签。

15 lines
Open view-source: on your page and copy the <head>.
Card preview3/4 checks passed
Framer: Free website builder and AI design agent
From framer.com
twitter:cardValidsummary_large_image
twitter:titleFoundFramer: Free website builder and AI design agent
twitter:descriptionFoundThe free website builder with a design agent that takes you from idea to launch. Changes stay editable, with hosting, CMS, analytics, SEO,…
twitter:imageLoading image…https://framerusercontent.com/images/vt65Mbfi3w8ymfTyRfbmgM4Tyo.png
twitter:image:altMissing, add it for screen readers
twitter:siteOptional
Recommended X card tagsPaste inside <head>, next to your Open Graph tags
1<!-- X (Twitter) card -->
2<meta name="twitter:card" content="summary_large_image" />
3<meta name="twitter:title" content="Framer: Free website builder and AI design agent" />
4<meta name="twitter:description" content="The free website builder with a design agent that takes you from idea to launch. Changes stay editable, with hosting, CMS, analytics, SEO, and AEO built in." />
5<meta name="twitter:image" content="https://framerusercontent.com/images/vt65Mbfi3w8ymfTyRfbmgM4Tyo.png" />
6<meta name="twitter:image:alt" content="Describe what the image shows" />
7<meta name="twitter:site" content="@yourbrand" />

如何修复您的 X 卡

X 会优先读取 twitter: 标签，如果未找到则会回退使用 Open Graph 标签。卡片显示异常大多归咎于这四个原因之一。

将 twitter:card 设置为 summary_large_image

如果不设置，X 可能会回退为带有方形缩略图的小摘要卡片。而 summary_large_image 则会展示全宽的 2:1 大图，这在信息流中能吸引多得多的关注。

使用绝对 HTTPS 图片 URL

twitter:image（或 og:image）必须是以 https:// 开头的完整网址，且可公开访问，文件大小需在 5 MB 以内。不支持相对路径，也无法加载需要登录才能查看的图片。

添加 twitter:image:alt

替代文本（Alt text）用于为使用屏幕阅读器的用户描述图片，最多包含 420 个字符。它是可选的，但 X 会读取它，并且会占用一行空间。

获得 X 以显示新卡片

X 会将卡片缓存约一周时间，并且没有刷新按钮。在链接中添加类似于 ?v=2 的查询字符串以获取最新的卡片，然后使用元标签检查器检查其他平台。有关 LinkedIn、Facebook、Slack 等其他平台的信息，请参阅刷新指南。

Twitter 卡片验证器常见问题解答

关于 X 卡片、twitter: 标签及旧版验证工具的快速解答。

Twitter Card 验证器怎么了？

X 在 2022 年移除了其 Card Validator 的预览功能，现在该页面会直接跳转到登录界面。本工具可以完美替代它：它能读取与 X 相同的标签，并展示它们生成的卡片效果。

X 卡片需要哪些标签？

必须提供 twitter:card。随后 X 会读取 twitter:title、twitter:description 和 twitter:image，若缺少这些属性，则会使用 og:title、og:description 和 og:image。twitter:site 和 twitter:image:alt 为可选项。

为什么我的 X 卡片不显示图片？

通常是因为图片 URL 是相对路径、被 robots.txt 屏蔽、需要登录才能访问或文件过大；也可能是卡片类型被设置为了 summary 而不是 summary_large_image。此外，X 平台会缓存卡片信息，因此测试时可以在链接后添加 ?v=2。

为什么要粘贴 HTML 而不是网址？

粘贴 HTML 代码可以让验证器精准读取写入的每一个 twitter: 标签。而通过 URL 进行检查，则会显示 X 根据页面的 Open Graph 标签生成的卡片，这也是 X 的后备方案。

这个 Twitter 卡片验证工具是免费的吗？

是的。它完全在您的浏览器中运行，无需登录，并且您粘贴的 HTML 内容绝不会离开您的设备。