Twitter / X Card Preview
Paste your tags or type the values, and see both card types rendered, with the fallback chain, the image rules and the truncation points spelled out.
summary_large_image
summary
Both layouts are drawn here so you can compare them. The summary card is the real geometry — a square thumbnail beside the text, cropped the way X crops it, which is why an image with something important at the edges loses it here. The large-image layout is the looser of the two: X has changed how it draws those more than once, so confirm the crop on a live post before you rely on it.
Nothing you type here is uploaded, stored or sent anywhere. It all runs in your browser.
The fallback chain, which is the whole trick
X does not need a full set of twitter: tags. For each field it takes the twitter: version if it is there, falls back to the og: version if it is not, and shows nothing when neither exists. So a page with solid Open Graph tags already unfurls on X, and adding a duplicate set of twitter: tags saying exactly the same thing buys you nothing except two places to forget to update.
twitter:cardis the exception. It has no Open Graph equivalent, so nothing falls back to it. Leave it out and X picks a layout for you, which is usually not the one you wanted for a page with a good image.- Title falls back to
og:title, then to<title>. Which is why a card sometimes shows your title with the brand suffix on the end that you had carefully kept out ofog:title. - Image falls back to
og:image. Settwitter:imageonly when you genuinely want a different crop or a different image on X. - Nothing at all means no card. The post shows a bare URL. On a platform where posts compete on visual weight, that is the difference between a link that travels and one that does not.
Image rules, and the ones that actually bite
A large-image card wants roughly 2:1 — 1200 × 628 is the safe default — with a minimum of 300 × 157. A summary card wants a square, minimum 144 × 144. Get the ratio wrong and nothing errors: X crops to fit, usually through the middle of whatever text you put on the image. Under the minimum and the card silently downgrades to the smaller layout or drops the image.
Two more that cost people an afternoon each: the image URL has to be absolute and publicly reachable — a staging URL behind basic auth fetches as nothing — and it must not be blocked to Twitterbot in robots.txt, which is easy to do accidentally by disallowing an /assets/ directory.
Caching
X caches a card for about a week after first scrape. Fixing the tag does not fix a link already in circulation, and re-posting the same URL will often serve the old card. The practical workaround is to make the tags right before the first share, not after — which is what this page is for.
Where this stops and the other tools start
The Open Graph preview reads a full head block and shows the Facebook and LinkedIn versions. The meta tag generator writes the whole head including these tags. This page is the one that stays on X: both layouts side by side, the fallback chain resolved, and the image maths checked against the values you give it.
Questions people ask
Do I still need twitter tags now that X reads Open Graph?
Only twitter:card, in most cases. Everything else falls back to the Open Graph equivalent. Add twitter:title, twitter:description or twitter:image when you want X to show something different from every other platform, and leave them out when you do not.
Why is my card showing no image?
In order of how often it is the cause: the image URL is relative rather than absolute; the image is smaller than the minimum for the card type; the file is behind authentication or on a staging host; the path is disallowed to Twitterbot in robots.txt; or the card was scraped and cached before you added the tag.
What is the difference between twitter:site and twitter:creator?
twitter:site is the account that owns the site — the publisher. twitter:creator is the person who wrote the piece. Neither changes how the card looks; they attach attribution to it, and twitter:site is the one to set if you only set one.
How long can the title and description be?
The documented card limits are 70 characters for the title and 200 for the description, with alt text capped at 420. Those are the points at which the text is cut, not targets to fill — in a feed the visible space is smaller than the limit, so the first half-dozen words carry the click.
Does this page fetch my URL?
No. It reads the tags you paste or the values you type and nothing else — no request leaves your browser. That is also why it asks you for the image dimensions rather than measuring them.
Related tools
A card gets the click. A link gets the ranking.
Share cards decide what happens to a link once someone posts it. Whether anyone posts it in the first place is the harder problem.