Glossary

Twitter Cards

X's own preview tags — and why most pages need only one of them.

By Roger Campos · Last updated: September 2026

TL;DR

Twitter Cards are meta tags, named twitter:card, twitter:title, twitter:description and twitter:image, that control how a link is previewed on X (formerly Twitter). twitter:card picks the layout — usually summary or summary_large_image — and X falls back to Open Graph tags for anything the twitter: tags leave out.

Start free See the API

Free plan, no credit card. 1,000 credits a month.

How it works

Card types and tags

twitter:card	Looks like	Image
summary	Small square thumbnail beside the title	1:1, at least 144 × 144 px
summary_large_image	Full-width image above the title	2:1, at least 300 × 157 px
player	Inline video or audio player	Needs approval from X
app	App store install card	From the app listing

The tags use the name attribute. twitter:site and twitter:creator name the site's and the author's accounts.

In practice

The fallback that saves you work

When a twitter: tag is missing, X uses the Open Graph equivalent: og:title, og:description, og:image. So a page with a complete Open Graph set needs one extra line for a large-image card:

Open Graph plus one tag

<meta property="og:title" content="How we cut our build time in half">
<meta property="og:description" content="Three changes, measured over a month of CI runs.">
<meta property="og:image" content="https://example.com/og/build-time.png">
<meta name="twitter:card" content="summary_large_image">

Add separate twitter:title or twitter:image only when you want X to show something different — a shorter title, or an image cropped for 2:1. Like every preview fetcher, X's reads the HTML source, so the tags must be there without JavaScript.

To check a page the way X sees it, fetch the source with curl and look for twitter:card in the <head>: if it only appears in DevTools, JavaScript put it there and X will not see it. A card that looks wrong after you fix the tags is usually a cached one — X re-fetches a URL's card only after a while, so test with a URL it hasn't seen, such as one with a new query string.

URLpipe

With URLpipe

/meta resolves a page's title and image the way a previewer does, reading Open Graph first and Twitter Card tags second: the title is og:title, then twitter:title, then <title>; the image is og:image, then twitter:image. For the raw twitter:card value, read the <head> from /html.

Try it

Twitter Cards, on a page you choose

Check a page's Open Graph tags and metadata

Paste a link and get the page's metadata — title, description, author, publication date, feed and main image — cleaned into one structured object.

Try it free

Related terms

Open Graph og:image JSON-LD

FAQ

Frequently asked questions

Do I need Twitter Card tags if I have Open Graph?

Only twitter:card, to pick the layout. X falls back to og:title, og:description and og:image for the rest.

What is the difference between summary and summary_large_image?

summary shows a small square thumbnail next to the text; summary_large_image shows a wide image above it. The large one takes a 2:1 image.

Why is my Twitter Card not showing?

Check that the tags are in the HTML source rather than added by JavaScript, that the image URL is absolute and publicly downloadable, and that robots.txt doesn't block X's fetcher.

Keep reading

Get a page's metadata and Open Graph tags in Ruby og:image Microlink alternatives Get a page's metadata and Open Graph tags in C#Keep AI processing in the EU, per organization Best link preview APIs All of glossary

See it on your own pages.

Free plan, no card. Confirm your email and your API key is live — you'll be making real requests in minutes.

Start free Email the team