You post a link on X, and it shows up as a bare blue URL with no image, no title, nothing that makes someone want to click. Meanwhile a competitor's link shows a full-width image, a bold headline, and a description — in the same feed. The difference isn't luck. It's a handful of meta tags sitting in the <head> of their page.
Twitter Card tags are what X's crawler reads to build that preview. Get them right and every share of your link becomes a small ad for your page. Skip them, and X falls back to whatever scraps of Open Graph data it can find, or nothing at all.
Twitter Card meta tags are <meta> tags in a page's <head> — starting with twitter:card, twitter:title, twitter:description, and twitter:image — that tell X's crawler how to render a rich preview when the page is shared. The most common type is summary_large_image, which shows a full-width banner above the title and description.
What are Twitter Card meta tags?
They're a small set of <meta name="twitter:..."> tags, separate from standard SEO tags, that exist for one purpose: telling X's link-preview crawler what to show when your URL is pasted or shared. They live alongside your regular <title> and <meta description> tags but are read by a different system entirely.
- twitter:card sets the layout — usually summary or summary_large_image — and is the only tag that's strictly required.
- twitter:title and twitter:description supply the headline and supporting text shown in the preview.
- twitter:image points to the banner or thumbnail, and must be a full, absolute URL rather than a relative path.
- twitter:site (optional) attributes the card to your brand's @handle, which X displays as a small byline on the card.
If a page has Open Graph tags but no twitter: tags, X will usually borrow og:title, og:description, and og:image as a fallback — but that fallback gives you less control over exactly what appears.
Why they matter for click-through
A link's preview is often the deciding factor in whether someone stops scrolling:
- A large image card takes up real feed space. summary_large_image renders a full-width banner, which naturally draws more attention than a plain text link sitting between two posts.
- You control the message, not the crawler's guess. Without explicit tags, X may pull an arbitrary image or a truncated snippet of body text instead of the headline you'd actually choose.
- It signals a maintained, professional site. A clean card with a sharp title and image reads as more credible than a bare URL, especially for first-time visitors deciding whether to click.
- It's a one-time setup per template. Once the tags are in a page template, every future post from that template inherits a working preview automatically.
Step-by-step: adding Twitter Card tags
- Choose your card type. Pick summary_large_image for most content pages, or summary if the page doesn't have a strong hero image worth showing full-width.
- Write a title and description. Keep the title short and specific, and the description to one clear sentence — X truncates long text rather than wrapping it.
- Prepare an image at the right size. Use at least 1200x630 pixels for summary_large_image, hosted at a permanent, publicly accessible URL.
- Add the tags to the page's <head>. Include twitter:card, twitter:title, twitter:description, and twitter:image, plus twitter:site if you want the card attributed to a brand handle.
- Add matching Open Graph tags. Set og:title, og:description, and og:image alongside the twitter: tags so other platforms that don't read Twitter Card tags still get a good preview.
- Publish and validate. Paste the live URL into a card validator to confirm the crawler is reading the tags correctly and rendering the expected layout.
- Repeat per template, not per post. Set the tags dynamically in your CMS template so every new article or product page gets a working card without manual work.
Common mistakes to avoid
1. Using a relative image path
twitter:image needs a complete URL starting with https://. A path like /images/hero.jpg works fine in a browser but the crawler can't resolve it, so the card renders with no image at all.
2. Forgetting twitter:card entirely
Without a twitter:card value, X has no instruction for which layout to use, and the preview often falls back to a minimal text-only link even if title and image tags are present.
3. Using an image below the minimum size
An image smaller than the recommended dimensions gets rejected or rendered oddly cropped, which is why 1200x630 is worth treating as a floor, not a suggestion.
4. Assuming a cached preview will update itself
X caches card previews. If you change the title, description, or image after a URL has already been shared, the old preview can keep showing until it's force-refreshed through a validator tool.
Real-world examples
How different types of pages typically configure their Twitter Card tags:
In every case, the same four core tags do the work — only the card type and the content of the fields change based on what the page is.
Card types compared
A look at the main Twitter Card types and when each one fits best.
| Card type | Image layout | Setup effort | Best for |
|---|---|---|---|
| summary_large_image | Full-width banner | Needs 1200x630 image | Blog posts, articles, product pages |
| summary | Small square thumbnail | Low, small image OK | Homepages, brand pages without a hero image |
| app | App icon | Requires app store IDs | Pages promoting an iOS or Android app |
| Open Graph fallback (no twitter: tags) | Unpredictable | None, but less control | Not recommended once you can add explicit tags |
Generate your Twitter Card tags right now — free
The Rebrixe Twitter Card Generator builds clean, ready-to-paste meta tags for summary_large_image and summary cards. No account, no watermark — just fill in the form and copy the result.