Twitter cards and how they relate to Open Graph

You need exactly one Twitter-specific tag in practice:

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

Everything else falls back to your Open Graph tags. Duplicating title, description and image into twitter: equivalents is a common habit that adds markup and two more places for values to drift out of sync.

Why the card type is the one that matters

twitter:card chooses the layout, and the two realistic options look very different:

summary — a small square thumbnail beside the text. Compact, and the image is decorative at that size.

summary_large_image — a full-width image above the text. Much more prominent, and what most people mean when they picture a link card.

Without the tag, you get the smaller treatment or whatever the platform decides. So the tag isn’t about supplying data — the Open Graph tags already did that — it’s about picking the layout.

Two other types exist, app and player, for app install prompts and inline media. Ignore them unless you specifically need them.

name, not property

The detail that catches everyone:

<!-- Open Graph: property -->
<meta property="og:title" content="…">

<!-- Twitter: name -->
<meta name="twitter:card" content="summary_large_image">

Open Graph uses property because it’s built on RDFa conventions. Twitter’s tags are ordinary meta tags and use name. Mixing them up is the most frequent markup error in this area, and the symptom is a card that works on one platform and not the other — which sends people hunting for a platform-specific cause.

Some parsers accept either. Enough don’t that it’s worth getting right.

The fallback chain

The reason a duplicate set is unnecessary: when a Twitter-specific tag is absent, the Open Graph equivalent is used.

• twitter:title missing → og:title
• twitter:description missing → og:description
• twitter:image missing → og:image

So this is a complete, correct setup:

<meta property="og:title" content="Twitter cards and how they relate to Open Graph">
<meta property="og:description" content="You need one twitter tag, not a duplicate set.">
<meta property="og:image" content="https://example.com/og/twitter-cards.png">
<meta property="og:url" content="https://example.com/twitter-cards-explained/">
<meta name="twitter:card" content="summary_large_image">

Five tags, and it renders properly on X and on everything else that reads Open Graph.

When a separate value is worth it

Occasionally you genuinely want different copy or a different image per platform:

A different aspect ratio. The large-image card is closer to 2:1 than Open Graph’s 1.91:1. Close enough that one 1200 × 630 image works fine on both — the difference is a few pixels of crop. Only worth separate images if your design puts something critical right at an edge, which rule three of image design says it shouldn’t.

Different copy per audience. Legitimate if you actually maintain both. Usually they diverge once and then one goes stale.

Attribution tags — twitter:site and twitter:creator, naming an account. These have no Open Graph equivalent, so add them if you want the attribution. Purely optional.

Default to one set of values. Add a platform-specific override when you have a specific reason, not pre-emptively.

The image:alt pair

Both families support alternative text for the preview image: og:image:alt and twitter:image:alt. Worth adding — screen reader users encounter these cards, and a card with an unlabelled image is a card with a hole in it.

One line, and if you’re only adding one, og:image:alt gets you the wider coverage.

What changed and what didn’t

X has been through renaming, API changes, and shifts in how link cards are displayed and how much reach they get. Two things have stayed stable through all of it: the markup still reads twitter:, and it still falls back to Open Graph.

Which is a useful reminder about where to invest. Open Graph is read by every platform that renders link cards — chat apps, messaging apps, forums, and networks that didn’t exist when it was defined. Getting your Open Graph tags right serves all of them. Platform-specific tags serve one platform, and platforms change.

So: correct Open Graph tags, plus twitter:card to pick the layout. That’s the whole reasonable scope.