Use when applies to any page intended to be shared on X (Twitter). Use when auditing social sharing previews or adding social meta tags to a new site.
复制下面这句话，粘贴给 Claude Code、Codex、Cursor 等 AI 编程工具，它会读取安装说明并在你确认后完成安装。
请阅读 https://ai.atlankj.com/install/asset/gh-twitter-cards-2ec1bd56f985 ，按照其中的说明把「twitter-cards」安装到你（当前 AI 工具）中。执行前先告诉我将运行的命令和写入的位置，等我确认。
查看 AI 将读取的安装说明正在读取 GitHub 原文…
内容来自 GitHub 原始文件，由原作者维护。在 GitHub 查看
Pages shared on X without Twitter Cards show only a bare link; Cards add an image and description that significantly increase click-through rates from social traffic.
<meta name="twitter:card" content="summary_large_image"> to enable rich previews when shared on X (Twitter)twitter:card, twitter:title, twitter:descriptionog:title, og:image) if Twitter-specific tags are absentsummary_large_image: 1200×630 px, max 5 MB, JPG/PNG/WebPInspect <head> for <meta name="twitter:card">, <meta name="twitter:title">, <meta name="twitter:description">, and <meta name="twitter:image">. Verify the card type is valid (summary or summary_large_image). Test the URL in the X Card Validator.
Add the required Twitter Card meta tags to the <head>. For article/blog pages use summary_large_image. Ensure twitter:image points to an absolute URL of an image at least 300×157 px (ideally 1200×630 px) under 5 MB.
Explain how Twitter Cards enhance shared links, the difference between summary and summary_large_image card types, and how X falls back to Open Graph tags.
Review metadata generation, rendered HTML, structured data, and response headers related to Add Twitter Card meta tags. Flag exact routes or templates where search-facing output violates the rule, and describe how to verify the final page output.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/seo/twitter-cards