Twitter/X Card Generator
Build the twitter: meta tags that control how your link renders when
someone posts it on X — and watch the card update as you type, so you find out it looks wrong here rather than after you hit post.
Absolute https URL. 1200×628 for a large card, at least 400×400 for a summary card.
The site's own handle.
The author's handle, for attribution.
Live card preview
ToolStack AI
@toolstackai
Check this out 👇
Your page title appears here
Your description appears here.
example.com
Your page title appears here
Your description appears here.
example.com
An approximation of the timeline card. X crops to the aspect ratio in the tag, so a source image that is not already 1.91:1 will be trimmed from the centre.
Your Twitter Card block
What this tool does
X reads a small set of twitter: meta tags to decide how a shared link
looks. Without them it falls back to your Open Graph tags, and if those are missing too it renders a bare URL with no image —
which in a timeline is close to invisible. This tool writes the tags and mocks up the card beside the form so you can see the
result before you ship it.
Everything is assembled locally in your browser; nothing is uploaded. The limitation worth knowing is caching: X stores a card per URL, so if you fix your tags after the link has already been posted, the old card can keep appearing until you re-validate the URL with X's Card Validator. This tool cannot do that step for you.
How to use it
- Choose summary_large_image for a wide banner — the right call for product shots, charts and blog headers. Choose summary for a small square thumbnail, which suits logos and podcast art.
- Write a title short enough to survive the card. Around 70 characters is where X starts truncating on mobile.
- Paste an absolute
httpsimage URL. Match the aspect ratio to the card type — 1.91:1 for large image, square for summary. - Add your handle as
twitter:siteso the card attributes the link to your account. - Click Generate Card Tags, copy the block into your page head, then validate the live URL with X's Card Validator to clear the cache.
Common use cases
-
Launching a new page
Get the card right before the first person shares it, because the cached version is what sticks.
-
Newsletter and blog promotion
A large-image card roughly doubles the vertical space your link occupies in a timeline, which is the cheapest reach you will get.
-
Podcast and profile links
A summary card with square cover art reads as deliberate where a stretched banner reads as broken.
-
Diagnosing a broken card
Rebuild the block here, then compare it line by line with the live page to spot a missing tag or a relative image path.
Frequently asked questions
What is the difference between summary and summary_large_image?
summary renders a small square thumbnail to the left of the title, which suits a
logo, a headshot or podcast cover art. summary_large_image renders a wide banner
above the title, which suits a product shot, a chart or a blog header. Large-image cards consistently get more taps because
the picture occupies far more of the timeline.
Do I still need Open Graph tags if I have Twitter Card tags?
Yes. X falls back to Open Graph when the twitter: tags are absent, but every other
platform that reads Open Graph — Facebook, LinkedIn, WhatsApp, Slack, Discord — ignores
twitter: tags entirely. Ship both blocks, and keep the two descriptions consistent
so the same link never looks like two different pages depending on where it is shared.
Why does my card show the wrong image or no image at all?
Cards are cached per URL, so an old scrape keeps winning until you force a refresh with X's Card Validator. The other
common causes are a relative image URL, an image over 5MB, and a format X does not accept. Use an absolute
https URL to a JPG, PNG or WebP under 5MB, and re-validate after every change.