How do Twitter / X cards work?
X reads twitter: meta tags first and falls back to your Open Graph tags for anything missing, so the only tag you strictly need is twitter:card. Set it to summary_large_image for a full-width picture, or summary for a small square thumbnail.
The minimum that works
If you already have solid Open Graph tags, one line is enough. X will take the title, description and image from Open Graph.
html
<meta name="twitter:card" content="summary_large_image" />Twitter tags use name=, while Open Graph tags use property=. This catches people out constantly.
Card types
| Value | Looks like |
|---|---|
| summary | Small square thumbnail on the left, title and description beside it. Image is cropped to 1:1. |
| summary_large_image | Full-width image above the title. Cropped to roughly 2:1 — the default for most sites. |
| player | Embedded video or audio player. Requires approval from X. |
| app | A link to a mobile app listing. |
When to override Open Graph
Use the twitter: versions when you want the card on X to differ from everywhere else — a shorter headline, or an image cropped for the 2:1 frame rather than 1.91:1.
html
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Shorter headline for X" />
<meta name="twitter:description" content="Cut to fit the tighter frame." />
<meta name="twitter:image" content="https://example.com/x-card.png" />
<meta name="twitter:image:alt" content="A phone scanning a shelf label." />
<meta name="twitter:site" content="@yourhandle" />
<meta name="twitter:creator" content="@authorhandle" />Things that trip people up
- The classic Card Validator was retired. Post the link in a draft to see the real card, or scan it here.
- X will not render a card from a page it cannot reach anonymously — check that you are not blocking its crawler in robots.txt.
- Images behind authentication, or served over plain http, are dropped silently.
- A 1:1 crop of a 1.91:1 image cuts both sides, so keep your headline near the centre.
Sources
Keep going
Now check it on your own site.