Basics
What are X (Twitter) Cards?
X Cards are the link previews X builds from a page's meta tags. How they work, what Twitterbot reads, which tags you need and how to see yours.
Short answer
An X Card is the preview X shows under a post that contains a link: an image, a headline and the domain, built from twitter: and Open Graph meta tags that the linked page puts in its HTML head.
Key takeaways
- The card is controlled entirely by the linked page's HTML, not by the person posting.
- Twitterbot fetches the page, reads the twitter: tags and falls back to og: tags for title, description and image.
- There are four documented card types; summary_large_image is the one most pages should use.
- Cards are cached, so a change to your tags can take time to show up on X.
Post a bare link on X and, a moment later, a picture appears under it with a headline and the site's domain. That picture is a card. The person posting did not design it and X did not invent it; the page they linked to described itself in a handful of <meta> tags, and X turned those into a preview.
How does an X Card get made?
When a link is posted, X's crawler, Twitterbot, downloads the page, reads its card meta tags and builds the preview from them.
The sequence goes roughly like this:
- Someone types or pastes a URL into the composer.
- X requests that URL with the user agent
Twitterbot. It follows the site's robots.txt rules, the same way Google's crawler does. - It reads the
<head>:twitter:cardfor the layout, then the title, description and image, takingtwitter:tags first andog:tags when those are missing. - It downloads the image, which must be publicly reachable and under 5 MB.
- It stores the result. X's troubleshooting guide says the crawler re-reads a page's tags roughly every seven days, so later posts of the same URL reuse the stored card for a while.
Because all of this happens on X's side, your page's JavaScript never runs for the crawler. Tags injected by a client-side framework after load do not exist as far as Twitterbot is concerned.
What does a card look like today?
On current X apps a large image card is the image, with the page title laid over its lower-left corner and "From domain.com" underneath. The description is usually not shown.
That layout dates from late 2023. In October 2023 X briefly removed headlines from link previews altogether, leaving only the image and domain; after complaints it announced in November that titles would return as an overlay on the image, and by the start of 2024 that is what users saw. The smaller summary card still puts a square thumbnail next to the title and, space permitting, the description.
This matters for design. Text placed near the bottom-left of your image can end up under X's headline, and a description you polished for X may not be visible there at all, though LinkedIn, Slack, Discord and others still show it.
Which tags do I actually need?
At minimum twitter:card plus an og:title, og:description and og:image, all with absolute URLs. A complete, conventional set looks like this:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourbrand">
<meta property="og:title" content="Ten keyboard shortcuts I use every day">
<meta property="og:description" content="Small habits that save a surprising amount of time.">
<meta property="og:url" content="https://example.com/posts/shortcuts/">
<meta property="og:image" content="https://example.com/og/shortcuts.png">
<meta property="og:image:alt" content="A keyboard with ten highlighted keys">
You can also write twitter:title, twitter:description, twitter:image and twitter:image:alt. X uses them in preference to the og: versions, which is handy when you want slightly different wording on X. If they are absent, X falls back to the Open Graph tags; the twitter: vs og: guide covers the exact rules.
What are the four card types?
summary, summary_large_image, app and player. Each is chosen with the twitter:card value.
| Type | What it shows | Typical use |
|---|---|---|
summary_large_image |
Large image, headline overlay, domain | Articles, landing pages, tools |
summary |
Square thumbnail beside title and description | Profiles, docs, pages with only a logo |
player |
Image with play control, media in an iframe on supported clients | Self-hosted video or audio |
app |
App details from a store listing | Linking straight to an app |
Card types explained goes through each one, including the extra tags player and app cards need.
How do I see my card before people do?
Paste the URL into a new post in the X composer and look at the preview; you do not have to publish. The old Card Validator stopped showing previews in August 2022, so the composer is now the official way to check. Before that, you can check the markup itself with our Card Preview & Meta Inspector and build tags from scratch with the card generator.
If the composer shows no card, or an old one, work through why my X card is not showing. Most failures come down to a handful of causes: a relative image URL, a robots.txt rule that blocks Twitterbot, an image that is too big or in an unsupported format, or a cached card that has not refreshed yet.
Where else do these tags matter?
Almost everywhere a link turns into a preview. Open Graph started at Facebook and is now read by LinkedIn, Slack, Discord, Apple's Messages app, WhatsApp, Telegram and many chat and note-taking tools. Some of them also read twitter: tags; Discord, for example, uses twitter:card set to summary_large_image to choose its large image layout. Writing a clean set of both is a small job that pays off on every platform. See link previews beyond X for the differences.
Questions
Are X Cards the same as Twitter Cards?
Yes. Twitter renamed itself X in 2023, but the markup is still documented as Cards and the tags still begin with twitter:. Nothing about the tag names changed.
Do I need an X account to get a card?
No. Any page with the right tags gets a card when someone posts its link. The twitter:site tag can name an account, but it is optional in practice.
Do cards help SEO?
Card tags are not a search ranking factor. They change how your links look when shared, which affects whether people click, and the same Open Graph tags power previews on most other apps.
Can I have different cards for different pages?
Yes, and you should. Each page's head carries its own tags, so every article can have its own title, description and image.