Open Graph vs Twitter Card tags: do you need both?

In the Twitter Card vs Open Graph question, the short answer is: you need Open Graph tags, plus one Twitter Card tag. X (formerly Twitter) reads og:title, og:description and og:image when its own twitter: versions are missing, so you don't have to repeat them. What X can't take from Open Graph is the card type, so add <meta name="twitter:card" content="summary_large_image"> to get the big image card. Add other twitter: tags only when you want X to show something different.

What each set of tags does

Open Graph is a set of og: meta tags that Facebook introduced. It has become the common standard for link previews, read by Facebook, LinkedIn, WhatsApp, Slack, Discord and many other apps.

Twitter Cards are X's own tags, starting with twitter:. They do the same job on X, and add a few X-only settings such as the card type and your X username.

	Open Graph	Twitter Cards
Tag prefix	og:	twitter:
Attribute	property="og:title"	name="twitter:title"
Read by	Facebook, LinkedIn, WhatsApp, Slack, Discord and most apps	X, and some other apps as a fallback
Card type	no equivalent	twitter:card (summary, summary_large_image, app, player)
Needed on X?	yes, as the fallback for title, description and image	only twitter:card is really needed

How X falls back to Open Graph

X's card documentation describes the order: when X looks for a tag, it first checks for the Twitter-specific one, and if it isn't there, it uses the matching Open Graph tag. In practice:

X looks for	If missing, X uses
twitter:title	og:title
twitter:description	og:description
twitter:image	og:image
twitter:card	nothing; set it yourself
twitter:site (your @username)	nothing; optional

X also says its parser accepts property= on twitter: tags, so a slip there won't break anything. The documented form is name= for twitter: tags and property= for og: tags.

Twitter Card vs Open Graph: the tags you actually need

For most pages, this is a complete and tidy set:

<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/my-post">
<meta property="og:site_name" content="Example">
<meta property="og:title" content="My post title">
<meta property="og:description" content="One or two sentences about the page.">
<meta property="og:image" content="https://example.com/images/my-post-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="What the image shows">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourbrand">

That's nine Open Graph lines and two X lines. twitter:site is optional; leave it out if you don't use X.

Our Meta Tag Generator writes this set from a short form, so you don't have to type it.

When adding more twitter: tags makes sense

Add twitter:title, twitter:description or twitter:image only when you want X to show something different from the other apps:

• A different image. The large card on X is shown at about 2:1, slightly wider than the 1.91:1 used by Facebook and LinkedIn. If your image has text near the top or bottom edge, a separate 2:1 twitter:image avoids the trim. (One 1200 × 630 image with the important part in the centre usually does the job; see the right og:image size.)
• Different wording. Shorter text for X's audience, for example.
• Alt text on X. X documents its own twitter:image:alt tag for describing the image.

If you add them, keep them updated. Old twitter: tags left behind after a redesign are a common reason why X shows a different picture from Facebook.

Choosing summary or summary_large_image

Card type	What it looks like	Image rules (from X's card docs)
summary	small square image beside the title	1:1, at least 144 × 144 px, under 5 MB
summary_large_image	big image above or behind the title	2:1, at least 300 × 157 px, under 5 MB

For blog posts, product pages and landing pages, summary_large_image gets the most attention. summary suits pages where a logo or icon is the only image you have.

Common mistakes

• No twitter:card at all. X may show only a small card, or none. One line fixes it.
• Only twitter: tags, no Open Graph. X will be fine, but Facebook, LinkedIn and WhatsApp won't find an image. Always have og:image.
• og: tags written with name=. The Open Graph standard uses property=, and some apps ignore og: tags written with name=.
• Duplicate tags from two plugins. If your theme and an SEO plugin both output tags, you can end up with two titles or two images. Keep one source.
• Tags added by JavaScript. Social apps read the server's HTML and don't run scripts.

How to check your tags

X no longer shows card previews in its old Card Validator, so it's harder to test before posting. Enter your page address in our Open Graph Preview instead. It shows the X card next to Facebook, WhatsApp, LinkedIn, Slack and Discord, tells you when twitter:card is missing or invalid, notes when X will show only the small card, and flags a twitter:title over about 70 characters or a twitter:description over 200. It also lists every og: and twitter: tag it found and gives you a recommended tag block to copy.

For your other meta tags (title, description, canonical, robots), run the page through our Meta Tag Checker. And if you want rich results in Google rather than nicer social cards, that's a job for structured data: our Schema Generator builds it.

X caches card data, and its documentation says this lasts about a week, so changes may take time to appear on links that were already posted. For Facebook and LinkedIn you can force a refresh; see how to make Facebook refresh an old preview.

Quick checklist

• Full Open Graph set: og:title, og:description, og:image, og:url
• twitter:card set to summary_large_image
• og: tags use property=, twitter: tags use name=
• Extra twitter: tags only when X should differ, and kept up to date
• One source of tags, rendered on the server