What is the difference between Open Graph and Twitter Cards?

Open Graph is a general standard read by many platforms. Twitter/X Card tags are specific to X and let you choose the card layout. X documents falling back to Open Graph tags when its own tags are missing.

Do I need both Open Graph and Twitter tags?

Often a minimal setup is enough: Open Graph tags for the content plus a twitter:card tag to choose the layout. Add twitter:* title, description or image tags only if you want different values for X.

What does summary_large_image do?

It asks for a card with a large, wide image above the title and description. The summary card shows a small square image beside the text.

Should Twitter tags use name or property?

X documents the name attribute, for example . Many crawlers also accept property, but name is the documented form.

SEO / Web

Published October 6, 20267 min read

Twitter/X Card Tags Explained (and How They Differ From Open Graph)

The twitter:* tags, the four card types, and when Open Graph is enough on its own.

X (formerly Twitter) builds link cards from your page's metadata, just as other platforms do. Its own vocabulary, the twitter:* tags, lets you choose the layout and override individual values. Most of what you need fits in a handful of tags, because X also reads Open Graph. Platform behavior changes, so confirm details against X's current documentation.

The card types

twitter:card value	Layout	Extra requirements
summary	Small square image beside the title and description	None beyond the basics
summary_large_image	Large wide image above the title and description	An image, from twitter:image or og:image
app	A card describing a mobile app	App store identifiers (twitter:app:* tags)
player	An embedded video or audio player	A player URL, dimensions and an HTTPS iframe

Values other than these four are not documented, so X may ignore them. The Open Graph & Social Preview Analyzer flags an unrecognized card type and a card that is missing something it needs, such as a large-image card with no image.

The tags

twitter:card: the layout (see above). This is the one tag worth setting even when you rely on Open Graph for everything else.
twitter:title and twitter:description: the headline and summary. Optional when og:title and og:description exist.
twitter:image and twitter:image:alt: the picture and its description for people who cannot see it. twitter:image falls back to og:image.
twitter:site and twitter:creator: the @username of the website's account and of the author. Optional.
twitter:domain: a legacy tag that is not needed.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@example">
<meta name="twitter:image:alt" content="A diagram of how link previews are built">

How the Open Graph fallback works

X documents that when twitter:title, twitter:description or twitter:image are missing, it uses og:title, og:description and og:image. That is why the short snippet above is often enough: Open Graph supplies the content and twitter:card supplies the layout. Falling back to the plain HTML <title> or meta description is less certain and platform-dependent, so do not count on it.

The analyzer shows this in the Twitter/X table, separating values set explicitly for X from values that would come from Open Graph, and in the preview, where every field lists its source and whether a fallback was used.

Open Graph vs Twitter Card at a glance

	Open Graph	Twitter/X Cards
Who reads it	Many platforms and apps	X
Attribute	property="og:..."	name="twitter:..."
Chooses layout	No (platform decides)	Yes, through twitter:card
Falls back to	HTML title and meta description on some platforms	Open Graph tags

Common mistakes

Setting twitter:card=summary_large_image with no image anywhere.
Writing twitter:site without the @ sign.
Using a relative twitter:image URL.
Adding the tags with JavaScript, where crawlers that do not run scripts never see them.
Two conflicting twitter:title tags from a theme and a plugin.

Check your own result

Run the page through the Open Graph & Social Preview Analyzer to see which tags are explicit, which are fallbacks, and what the X-style preview approximates. It is an approximation: X decides the final rendering.

Frequently asked questions

What is the difference between Open Graph and Twitter Cards?: Open Graph is a general standard read by many platforms. Twitter/X Card tags are specific to X and let you choose the card layout. X documents falling back to Open Graph tags when its own tags are missing.
Do I need both Open Graph and Twitter tags?: Often a minimal setup is enough: Open Graph tags for the content plus a twitter:card tag to choose the layout. Add twitter:* title, description or image tags only if you want different values for X.
What does summary_large_image do?: It asks for a card with a large, wide image above the title and description. The summary card shows a small square image beside the text.
Should Twitter tags use name or property?: X documents the name attribute, for example <meta name="twitter:card" content="summary_large_image">. Many crawlers also accept property, but name is the documented form.