Twitter Card Meta Tags: How to Make an X Card That Actually Previews

I shipped a blog post last spring, tweeted the link, and watched it land as a bare blue URL. No image, no headline, nothing tappable. It got three clicks. I added the right meta tags, re-shared the same post a week later, and the link unfurled into a full-width banner with the headline and my byline. That second tweet pulled forty-something clicks from a smaller audience. The only thing that changed was a block of twitter: tags in the page head.

If you publish anything you expect people to share on X, those tags are the difference between a card that earns clicks and a link people scroll past. Here is exactly which tags you need, how the two main card types differ, what image size to use, and how to confirm the card works before you hit send.

The four tags that control the card

A Twitter card is the rich preview that renders under a shared link instead of plain text. It is driven entirely by <meta> tags in your <head>. Four of them do the real work:

twitter:card — the one required tag. It tells X which layout to render. Leave it out and every other tag is ignored; X falls back to a bare link.
twitter:title — the headline shown on the card. Keep it under 70 characters or X truncates it.
twitter:description — a one-line hook beneath the title. Under 200 characters is the safe ceiling.
twitter:image — the absolute https URL of the picture the card displays.

Two more are worth adding every time: twitter:site (your brand's @handle) and twitter:creator (the author's @handle) so the card attributes correctly, plus twitter:image:alt to describe the image for screen readers and earn a small accessibility and ranking nudge.

The mistake I see most often is filling in title, description, and image but forgetting twitter:card itself. Without it, the rest is dead weight.

summary vs summary_large_image

twitter:card takes a few values, but two cover almost every real case:

summary renders a small square thumbnail on the left with text beside it. The recommended image is 1:1, at least 144×144. This suits a logo or an avatar, and it is the quiet choice.
summary_large_image renders a full-width banner above the text, using a 2:1 image. This is the layout that dominates the timeline and the one you almost always want for articles, product pages, and landing pages.

If you are not sure, pick summary_large_image. A banner pulls the eye far harder than a postage-stamp thumbnail, and most marketers default to it for exactly that reason.

Image size and the 5 MB rule

For summary_large_image, use a 1200×628 image at a 2:1 ratio. That resolution stays crisp on retina screens and crops cleanly in the timeline. For summary, supply at least 144×144 at 1:1.

A few hard constraints trip people up:

The image must sit at a public https URL the X crawler can fetch. A localhost link, a relative path like /img/og.png, or anything behind a login or staging password silently fails and the card shows no image.
The file must be under 5 MB.
X accepts JPG, PNG, WEBP, and GIF — but animation is dropped, so only the first frame shows.

A relative or http image path is the second most common reason a card renders without a picture. Always paste the full absolute https address.

Keep your Open Graph tags too

Here is the part people get wrong when they discover Twitter cards: they delete their Open Graph tags. Don't.

X reads og: tags as a fallback whenever the matching twitter: tag is missing, and Facebook, LinkedIn, Slack, Discord, and iMessage read og: only — they ignore twitter: entirely. So the practical rule is to always ship og:title, og:description, and og:image, then add twitter:card plus any twitter: tag you want to override for X specifically, such as a punchier title or a different creator handle. If you want to see how the og: half renders across those other platforms before you ship, the Open Graph preview tool shows the Facebook, Slack, and LinkedIn layouts side by side.

Ship Twitter tags alone and your link breaks everywhere except X. Ship both and it previews cleanly across every surface.

A worked example for a blog post

Say you are publishing an article titled "How We Cut Build Time in Half" at https://example.com/blog/faster-builds. Here is the full block you would drop in the <head>:

<!-- Open Graph (read by everyone, including X as fallback) -->
<meta property="og:title" content="How We Cut Build Time in Half" />
<meta property="og:description" content="The three changes that took our CI from 11 minutes to under 5." />
<meta property="og:image" content="https://example.com/img/faster-builds-card.png" />
<meta property="og:url" content="https://example.com/blog/faster-builds" />

<!-- Twitter / X card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="How We Cut Build Time in Half" />
<meta name="twitter:description" content="The three changes that took our CI from 11 minutes to under 5." />
<meta name="twitter:image" content="https://example.com/img/faster-builds-card.png" />
<meta name="twitter:image:alt" content="A line chart dropping from 11 minutes to 4 minutes 50 seconds" />
<meta name="twitter:site" content="@example" />
<meta name="twitter:creator" content="@lilei" />

Note the twitter:card value is summary_large_image, the image is a 1200×628 PNG at an absolute https URL, the title sits comfortably under 70 characters, and the description under 200. The og: and twitter: blocks share the same image and copy, which is exactly what you want unless you are deliberately overriding the X version. You can build this whole block — and tweak any field with a live card preview — in the Twitter Card Generator without hand-typing a single <meta> line.

Validate before you tweet

Never trust a card you have not seen rendered. Two quick checks:

Validate the deployed page. Paste the live URL into the X Cards section of your developer tools, or direct-message the link to yourself and watch how it unfurls. Either way you see what the crawler actually produces, not what you hoped it would.
Bust the cache if you edit. X caches card data aggressively. If you change tags and the old card still shows, re-fetch the URL through the validator to force a refresh — otherwise you will swear the new tags are broken when they are fine.

When a card refuses to appear at all, the usual culprits are: the page is not publicly reachable (auth wall, staging password, or a noindex robots rule blocking the crawler), the image is a relative or non-https path, the image exceeds 5 MB, or twitter:card is missing. Confirm every tag lives inside <head>, every value is properly quoted, and the URL returns a 200 to a plain GET.

The short version

Set twitter:card to summary_large_image, fill twitter:title, twitter:description, and twitter:image with a 1200×628 picture at a public https URL, add your handles and an image:alt line, keep your og: tags alongside, and validate the deployed page once before you share. Do that and a shared link stops being a forgettable string of characters and starts working as a banner that earns the click.

Made by Toolora · Updated 2026-06-13