Twitter Cards: The Complete Guide for 2026

You share a link on X. Half your audience sees a rich card with a full-width image, a headline and a description. The other half sees a compressed line of blue text nobody will tap.

The difference is a set of meta tags called Twitter Cards — and they take about two minutes to set up correctly. This guide covers what they are, the four types, which tags you actually need (hint: fewer than you think), the exact image size X wants in 2026, and how to preview your card before you post.

What are Twitter Cards?

Twitter Cards are a meta tag protocol that X (formerly Twitter) uses to render link previews. When someone shares your URL, X sends a crawler to fetch the page, reads a combination of twitter:* and og:* meta tags from the <head>, and renders them as a visual card in the timeline.

Cards were introduced in 2012 as Twitter’s answer to Facebook’s Open Graph protocol. The core idea has not changed: you describe your page with meta tags, X reads them and makes your link look good. What has changed is the tag hierarchy — X now reads Open Graph tags first for most values, using twitter:* tags only as overrides.

That means if your Open Graph tags are already correct, you are one line of HTML away from a perfect Twitter Card.

The four card types

X supports four card formats, each for a different use case:

Summary Card (summary)

A small card with a square thumbnail on the left, title and description on the right. Compact and unobtrusive — it appears as a compact preview in the timeline.

<meta name="twitter:card" content="summary" />

Best for: pages where the text matters more than the visual — documentation, search results, utility pages.

Summary Card with Large Image (summary_large_image)

A full-width image above the title and description. This is the format most people mean when they say “Twitter Card” — it dominates the timeline and earns the highest engagement.

<meta name="twitter:card" content="summary_large_image" />

Best for: blog posts, landing pages, product launches — anywhere the image sells the click. This is the format you should use by default; every twitter card example in this guide uses it.

App Card (app)

A download button for a mobile app, pulled from the App Store or Google Play. Auto-generated when you link to an app store page, or configurable with twitter:app:* tags.

Best for: mobile app developers sharing download links. Not relevant for web content.

Player Card (player)

An inline video or audio player that plays directly in the timeline. Requires special approval from X and is primarily used by media companies.

Best for: streaming platforms with video content. Requires allowlisting.

The tags you actually need

Here is where most guides overcomplicate things. X reads meta tags in this priority order:

Value	X reads first	Falls back to
Card type	twitter:card	(no fallback — required)
Title	twitter:title	og:title
Description	twitter:description	og:description
Image	twitter:image	og:image

Translation: if your Open Graph tags are already correct, you only need one tag:

<meta name="twitter:card" content="summary_large_image" />

X will pull the title, description and image from your existing og:title, og:description and og:image tags. Done.

If you want to override any value specifically for X (for example, a shorter title than your og:title), add the specific twitter:* version:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="A shorter title just for X" />
<meta name="twitter:image" content="https://yoursite.com/x-optimized.png" />
<!-- twitter:description omitted — falls back to og:description -->

For the complete OG tag set (including og:image:width, og:image:height and og:image:alt which X also reads), see our What Is Open Graph? guide.

The right image size for Twitter Cards in 2026

X’s developer documentation specifies a 2:1 aspect ratio for summary_large_image cards, with dimensions of at least 300×157 and at most 4096×4096 pixels. The file must be under 5 MB, in JPEG, PNG, WebP or GIF format.

The practical sweet spot: 1200×600 pixels — exactly 2:1, comfortably above the minimum, sharp on retina displays. Many third-party guides recommend 1200×675 (16:9), and X does accept that size because it center-crops to 2:1 automatically. But 1200×600 is the native ratio, so nothing gets cropped.

For the summary card (small thumbnail), a 1:1 square image of at least 144×144 works best.

For a complete breakdown of image dimensions across all eight platforms X, Facebook, LinkedIn, WhatsApp and the rest — see our OG Image Size Guide, which includes a cheat sheet for every platform.

How to preview your Twitter Card (before posting)

Here is how to see your card exactly as X will render it:

1. Paste your URL into the OG Image Checker — it fetches your page the way X’s crawler would, reading both twitter:* and og:* tags.
2. Look at the X preview card — it renders as a timeline card with your image, title and description, plus a warning if twitter:card is missing (X defaults to the small summary format).
3. Scan the audit table — every tag gets a pass / warn / fail verdict. Common X-specific warnings include a missing twitter:card tag and images that exceed 5 MB.

The checker also renders previews for Facebook, LinkedIn, WhatsApp, Discord, Slack, Telegram and Reddit side by side — so one check covers every platform your link might be shared on.

For auditing every meta tag on your page (not just OG/Twitter), follow up with the Meta Tag Checker.

How to generate a Twitter Card image (without a designer)

If the audit flagged your image as missing or the wrong size, the OG Image Generator produces a compliant card image in about thirty seconds. It ships with a 1200×600 preset (X’s native 2:1) alongside the standard 1200×630 and other sizes — pick a template, type your title, choose a brand color, and export as PNG, JPG or WebP.

For inspiration on what a good card looks like, browse our examples gallery — 26 real brand cards loaded live from Stripe, GitHub, Vercel and indie blogs, each with the pattern behind it explained.

Common Twitter Card mistakes (and how to fix them)

Missing twitter:card tag. Without it, X defaults to the small summary card — your beautiful 1200×600 image gets shrunk to a thumbnail. Add the tag; it is one line.

Image URL is relative. /og-image.png works in browsers but X’s crawler cannot resolve it. Use the full https://your-site.com/og-image.png.

No image at all (og:image missing). X shows a text-only card. Add og:image — X will use it even without twitter:image.

Image over 5 MB. X refuses to render it. Compress to under 5 MB (and ideally under 1 MB for fast loading).

Testing with a stale cache. X caches card previews aggressively. After fixing your tags, use the OG Image Checker to verify the fresh version, then share a new post on X — not a retweet of the old one. X’s Card Validator (if you have a developer account) can also force a re-scrape.

Using player without approval. Player Cards require X’s explicit allowlisting. If you add twitter:card content="player" without it, X may reject the card entirely. Stick to summary_large_image for web content.

Twitter Cards vs Open Graph: a quick comparison

	Twitter Cards	Open Graph
Controlled by	twitter:* meta tags	og:* meta tags
Used by	X only	Facebook, LinkedIn, WhatsApp, Discord, Slack, Telegram, Reddit
Fallback behavior	Falls back to og:* when twitter:* is absent	No fallback — the base layer
Required tags	twitter:card only (rest falls back to OG)	og:title, og:description, og:image, og:url
Image size	2:1 (1200×600 recommended)	1.91:1 (1200×630 recommended)

The key insight: Open Graph is the foundation, Twitter Cards are the X-specific overlay. Write good OG tags first, add twitter:card on top, and you are covered everywhere.

For a deeper comparison including JSON-LD (the third vocabulary in your <head>), see What Is Open Graph?.

FAQ

What is a Twitter Card?

A rich preview that appears when someone shares your link on X. X reads twitter:* and og:* meta tags from your page and renders an image, title and description instead of a bare URL. The most common format is summary_large_image.

What are the four types of Twitter Cards?

Summary (small thumbnail), Summary with Large Image (full-width image — the default choice), App Card (app download button), and Player Card (inline video player requiring approval). For websites and blogs, use summary_large_image.

Do I need both Twitter Card tags and Open Graph tags?

No. If your og:title, og:description and og:image are correct, you only need <meta name="twitter:card" content="summary_large_image" /> — X falls back to your OG values for everything else. Add specific twitter:* tags only when you want to override an OG value for X specifically.

What is the best image size for a Twitter Card?

1200×600 pixels (a strict 2:1 ratio per X’s official documentation). X accepts 300×157 minimum, 4096×4096 maximum, and 5 MB file limit. Use our OG Image Generator with the 1200×600 preset for a compliant image in seconds.

How do I preview my Twitter Card before posting?

Paste your URL into the OG Image Checker — it renders the X card exactly as it will appear in the timeline, alongside seven other platforms, and audits every tag for errors.