What is an X card?
An X card is the box that appears when someone posts a link. Left alone, a link is just a link. Add a few meta tags and it becomes a picture with a headline, which is the difference between a post people scroll past and one they click.
There are four card types and they are not interchangeable. summary puts a small square thumbnail beside the text. summary_large_image gives you the full width picture most people want. app drives a store install. player embeds audio or video and is the one type X still approves by hand. The type is set by twitter:card, and that single tag is the one thing Open Graph cannot supply for you.
How to Use This Tool
- Pick the card type. The form changes to match, and so does the preview. App and player reveal their own fields.
- Fill in the title, description and image. The counters use X's real limits: 70 characters for the title, 200 for the description, 420 for the image alt text.
- Check the fallback table. It shows which tag X will actually read for each value, so you can see when Open Graph is already covering you.
- Look at the preview. The default shows how X draws a card today, with the headline over the image. Switch to the classic layout if you want to compare.
- Copy the tags into your head. They use
name, not property, which is the mistake most generators make.
With the card type set to summary_large_image, these details will be converted to a complete set of card tags:
Card: summary_large_image
Title: Sourdough Starter Guide
Image: https://example.com/card.png
Alt: A jar of bubbling starter
Site: @theslowloaf
<meta name="twitter:card" content=
"summary_large_image">
<meta name="twitter:site" content=
"@theslowloaf">
<meta name="twitter:title" content=
"Sourdough Starter Guide">
<meta name="twitter:image" content=
"https://example.com/card.png">
<meta name="twitter:image:alt" content=
"A jar of bubbling starter">
Switch the card to summary and the same tags render as a small square thumbnail next to the text instead, with the description visible again.
This is the question that brings most people here, so here is the straight answer. The official validator at cards-dev.twitter.com/validator was deprecated around 2022. It lost its preview first, then went away. X has not shipped a replacement. Any tool or article telling you to open the Card Validator and click Preview Card is out of date.
What works now:
- Paste the link into the post composer and look at what it renders. That is the only first party check left, and it reflects what people will really see.
- Force a refresh with a query string. There is no re-scrape button any more, so add something like
?v=2 to the URL. X treats it as a new address and fetches your tags again.
- Check the markup itself before you post, which is what the findings panel above is for.
| Card type | Ratio | Minimum | Recommended | Max file size |
|---|
| summary | 1:1 | 144 x 144 | 300 x 300 | 5 MB |
| summary_large_image | 2:1 | 300 x 157 | 1200 x 630 | 5 MB |
JPG, PNG, WEBP and GIF are all accepted, only the first frame of a GIF is used, and SVG is not supported at all.
Here is the part that catches people. If your image is smaller than 300 by 157, X does not show an error. It quietly downgrades your large image card to a summary card, and you are left wondering why the big picture never appeared. The findings panel flags a missing image, and now you know what to check when the card comes out small.
One more thing worth knowing since the 2024 layout change: X now prints the headline over the bottom of the picture. Anything important in the bottom fifth of the image will be sitting underneath that text.
You may not need most of these tags
X looks for the twitter tag first, and when it is not there it falls back to the Open Graph equivalent. If your page already has a decent Open Graph block, the only tag you genuinely have to add is twitter:card, because nothing in Open Graph sets the card type.
| Value | X reads first | Falls back to |
|---|
| Card type | twitter:card | nothing, you must set it |
| Title | twitter:title | og:title |
| Description | twitter:description | og:description |
| Image | twitter:image | og:image |
| Handle | twitter:site | nothing, it has no equivalent |
The live version of that table sits inside the tool and updates as you type, so you can see exactly which tag is supplying each value in your own markup.
Common Use Cases
Cards are worth the ten minutes because they change how a link performs. The jobs this comes up in:
- Publishing an article: make sure the headline and picture land properly before the link goes out.
- Fixing a card that renders small: nearly always a missing twitter:card or an image under the minimum size.
- App install campaigns: an app card puts a store button straight in the post on mobile.
- Media embeds: a player card, once your domain is approved.
- Handle changes: set twitter:site:id as well, since the numeric ID survives a rename and the handle does not.
For the wider social block the Open Graph Generator covers the og: tags every other platform reads, and previews the card on Facebook, LinkedIn, Slack, Discord and WhatsApp. The Meta Tag Generator handles the search side with title, description, robots and canonical. Once you have the tags, the HTML Validator confirms the block parses.
Is the Twitter Card Validator still available?
No. The validator at cards-dev.twitter.com was deprecated around 2022 and X never replaced it. To check a card now, paste the link into the post composer and look at the preview it renders, which is the only first party test left.
How do I force X to refresh a cached card?
Add a query string to the URL, something like ?v=2. X caches previews against the exact address and there is no re-scrape button any more, so a slightly different URL is the reliable way to make it fetch your tags again.
Do I need both Twitter Card tags and Open Graph tags?
Rarely. X checks the twitter tag first and falls back to Open Graph, so og:title, og:description and og:image already do the work. The one tag with no fallback is twitter:card, which sets the card type. If your Open Graph block is solid, that single tag is often all you need to add.
What is the difference between summary and summary_large_image?
summary shows a small square thumbnail beside the title and description. summary_large_image shows a full width picture with the headline over it and drops the description. Large image is what most publishers want; summary suits a link where the picture is incidental.
What image size should I use for an X card?
1200 by 630 for a large image card, which sits between the documented 2 to 1 ratio and the 1.91 to 1 that the rest of the web uses. For a summary card use a square, 300 by 300 or larger. Keep either under 5 MB, and remember SVG is not supported.
Why is my card showing a small thumbnail instead of a large image?
Two usual causes. Either twitter:card is missing or set to summary, or the image is smaller than 300 by 157, in which case X silently downgrades the card to a summary rather than telling you anything is wrong.
Does X still show the headline on link previews?
Yes, but not where it used to be. X removed headlines in October 2023, brought them back briefly in January 2024, and settled on printing the title over the bottom of the image rather than underneath it. The description is not shown at all on a large image card.
Do the tags use name or property?
name. Open Graph uses property, X uses name, and mixing them up is the most common error in generated markup. X does tolerate property in practice, but the documented and correct form is name.
Do X cards help SEO?
Not directly. Google does not rank pages on twitter tags. The benefit is engagement, since a link with a proper card gets clicked and reposted far more than a bare URL.
Is my data sent to a server?
No. The tags are built in your browser with JavaScript. The only network request is your browser loading the preview image from the URL you typed.