Open Graph vs Twitter Card: What's the Difference?

Both control link previews on social media. But they're not the same thing. Here's when to use each — and why you should use both.

Open Graph — The Facebook Standard

Open Graph was introduced by Facebook in 2010. Before OG tags, when someone shared a link on Facebook, the platform would randomly pick an image and text from the page. The result was unpredictable and often unappealing.

Facebook said: "Let's give webmasters a standard way to control their link previews." They created a set of meta tags that any website could add:

<meta property="og:title" content="Your Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />

Other platforms adopted the Open Graph standard. LinkedIn, Discord, Slack, WhatsApp, and Reddit all read og: tags to render link previews.

Twitter Cards — The Twitter Standard

Twitter created its own system called "Twitter Cards" before Open Graph became widely adopted. Twitter Cards use a different attribute naming convention:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://yoursite.com/image.jpg" />

Twitter Cards have two main types:

• summary — Small thumbnail on the right side of the tweet
• summary_large_image — Large image taking up most of the card (recommended)

Platform Compatibility

Here's which platforms use which tags:

Why You Should Set Both

Even though most platforms support both tag types, there are good reasons to set both:

1. X/Twitter prefers twitter:card tags. While X can fall back to OG tags, it may not render them correctly. Setting both ensures X shows the right card type.
2. Future-proofing. If a new platform launches and prefers one standard over the other, having both ensures compatibility.
3. Consistency. Using both ensures your preview looks correct regardless of which platform reads which tags.

The Complete Setup

Here's the recommended setup for any page:

<!-- Open Graph (LinkedIn, Discord, Slack, WhatsApp, Reddit) -->
<meta property="og:title" content="Your Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="website" />

<!-- Twitter/X (X/Twitter) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://yoursite.com/image.jpg" />

Quick Fix Checklist

Frequently Asked Questions