You've probably seen those nice preview cards when sharing links on Twitter or Facebook. The ones with images, titles, and descriptions. And if you've tried to implement them yourself, you've likely encountered two different protocols: Open Graph and Twitter Cards.

So which one do you actually need? Can you just use one? Let me break it down.

The Short Answer

Here's the thing most guides won't tell you upfront: Twitter already supports Open Graph tags as fallbacks. If you only implement Open Graph, Twitter will still show a preview card. It just checks for twitter: tags first, and if they're missing, it uses your og: tags instead.

So technically, you could get away with just Open Graph. But there's a catch.

What Open Graph Actually Does

Open Graph is Facebook's protocol, introduced back in 2010. It lets you control how your content appears when shared on social platforms. The basic tags look like this:

<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your description here">
<meta property="og:image" content="https://example.com/image.png">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">

These tags work on Facebook, LinkedIn, Pinterest, Discord, Slack, iMessage, and yes—even Twitter. It's basically the universal standard for social previews.

What Twitter Cards Add

Twitter Cards are Twitter's own metadata protocol. They look similar but use name instead of property:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your description here">
<meta name="twitter:image" content="https://example.com/image.png">
<meta name="twitter:site" content="@yourhandle">

The key difference? Twitter Cards give you things Open Graph doesn't:

Card Types: You can specify summary, summary_large_image, app, or player cards. Open Graph has no equivalent.
Twitter Attribution: The twitter:site and twitter:creator tags let you associate content with specific Twitter accounts. Users can follow these accounts directly from the card.
Player Cards: Want to embed playable video or audio directly in the tweet? That's a Twitter-only feature.

The Fallback Chain

Here's how Twitter actually processes your meta tags:

First, it looks for twitter: specific tags
If not found, it falls back to og: tags
No meta tags at all? You get a bare URL with no preview

This means og:title becomes your Twitter title if twitter:title is missing. Same for description and image.

But—and this is important—there's no Open Graph equivalent for twitter:card. If you want anything other than a basic preview, you need to explicitly set the card type.

The Real Differences That Matter

Feature	Open Graph	Twitter Cards
Card type selection	No	Yes (`twitter:card`)
Account attribution	No	Yes (`twitter:site`)
Player embeds	No	Yes (video/audio)
Image aspect ratio control	Limited	More flexible
Fallback support	N/A	Uses OG as fallback

The image sizing also differs slightly:

Open Graph: Recommends 1200x630 pixels (1.91:1 ratio)
Twitter summary_large_image: Works with 1200x600 (2:1 ratio) or 1200x628
Twitter summary: Prefers square images, 144x144 minimum

In practice, a 1200x630 image works well for both.

What You Should Actually Implement

Here's my recommendation: implement both, but be smart about it.

For most pages, you only need these Twitter-specific tags:

<!-- Open Graph (works everywhere) -->
<meta property="og:title" content="Your Title">
<meta property="og:description" content="Your description">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">

<!-- Twitter-specific (add these three) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourhandle">
<meta name="twitter:creator" content="@authorhandle">

Notice I'm not duplicating twitter:title, twitter:description, or twitter:image. Twitter will pull those from the Open Graph tags automatically. The only Twitter-specific tags you need are:

twitter:card — Required if you want large images
twitter:site — Optional but recommended for attribution
twitter:creator — Optional, useful for multi-author sites

Common Mistakes to Avoid

Don't duplicate everything. I see sites with identical og:title and twitter:title values. That's just extra markup for no reason.

Don't forget the card type. Without twitter:card, you might get a tiny thumbnail instead of a large image preview, even if your og:image is perfect.

Don't use relative URLs. Both protocols require absolute URLs for images. https://example.com/image.png works. /image.png doesn't.

Don't skip testing. Twitter caches cards for 7 days. If you mess up, you're stuck with a broken preview for a week unless you use their Card Validator to force a refresh.

Quick Debugging Checklist

When your previews aren't working:

Check if images are absolute URLs
Verify images are publicly accessible (no auth, no redirects)
Confirm image dimensions meet requirements (at least 120x120, ideally 1200x630)
Make sure twitter:card is set for Twitter
Use platform debugger tools to force cache refresh

Speaking of debugging, you can use OG Check to preview how your meta tags look across Facebook, Twitter, LinkedIn, and other platforms without manually testing each one.

The Bottom Line

You need Open Graph tags—they're the foundation. You probably want a few Twitter-specific tags too, mainly twitter:card for controlling the preview format and twitter:site for attribution.

Don't overthink it. Five OG tags plus two Twitter tags will cover 99% of use cases. The fallback system handles the rest.

References

Getting started with Cards - X Developer Platform
The Open Graph Protocol - Official Open Graph Documentation
Cards Markup - X Developer Platform
Open Graph vs. Twitter/X Cards Usage Statistics - W3Techs (2025)

Twitter Cards vs Open Graph - What's the Difference and Do You Need Both?