Twitter card preview
Generate twitter:* card tags: required-property checks for summary and summary_large_image, image size and ratio hints, plus an X/Twitter card preview.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Twitter card tags
Generates tags and a preview only — no URL is requested and pasted HTML is never rendered.
Generated tags
<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" />
Property checklist
twitter:cardpresenttwitter:titlepresenttwitter:imagepresenttwitter:descriptionpresenttwitter:image:altpresenttwitter:sitepresenttwitter:creatorpresentCard preview
All required and recommended properties are present and the image matches this card type.
What this tool does
- When a page shared to X/Twitter shows no large image or loses its title, check whether twitter:card is summary or summary_large_image and whether the matching required properties exist.
- Generate twitter:* tags per card type: summary_large_image requires twitter:image, summary only requires a title — picking the wrong type shows up immediately.
- Verify image specs: the summary card is at least 144×144 displayed 1:1, the large card at least 300×157 displayed 1.91:1, and ratio deviations are flagged.
Example
Input
card=summary_large_image, title=UniKit 工具箱：全部在浏览器本地运行的开发者小工具, description=JSON 格式化、URL 编解码……, image=https://unikit.cc/og-zh.png, size=1200×630, site=@unikit, creator=@unikit_dev
Output
<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" />
Twitter tags use name="twitter:*" instead of property, empty fields produce no tag, and the example input is what the tool loads by default.
Frequently asked questions
Should I use summary or summary_large_image?
Use summary_large_image when you want a wide hero image — it requires twitter:image (1200×630 recommended). summary is the small square card and only requires twitter:card and twitter:title, with the image displayed 1:1.
Are twitter:image:width and height official properties?
No. X detects the image size itself; these two are mainly read by validators and other platforms. Here they power the ratio and minimum-size checks — leaving them out still passes, you just get an “cannot check the size” hint.
Do I still need Open Graph tags?
Yes, ship both. X falls back to og:* (og:title, og:description, og:image) when twitter:* is missing, but the fallback rules change over time, so declaring twitter:* explicitly is safer.
What is the difference between twitter:site and twitter:creator?
twitter:site is the website or brand account, twitter:creator is the author’s personal account. Both must be @username (15 characters max); a bare username without the @ is flagged.
Is pasted HTML executed?
No. The tool scans <meta> attributes with a small parser, keeps only twitter:* tags, injects nothing into the DOM and never requests a URL from the tags.
Keywords：twitter cardtwitter card previewtwitter:cardsummary_large_imagex card previewsocial previewTwitter 卡片twitter 标签生成X 分享卡片summary 卡大图卡片卡片校验