Open Graph vs Twitter Cards: What's the Difference? (2026 Guide)
You share a link on Slack, and it shows up as a beautiful card with a title, description, and image. You share a link on X, and it shows up... as bare text. Same website, two totally different results. What's going on?
The short answer: those preview cards aren't magic, and they're not one single system. They're powered by two separate sets of meta tags — Open Graph and Twitter Cards — and if you only add one of them, some platforms simply won't know what to show.
By the end of this guide, you'll know exactly what each one does, how they're different, when you actually need both, and how to add them correctly in a Next.js 16 App Router project.
Why This Confuses Almost Everyone
Here's the thing that trips people up: Open Graph and Twitter Cards look almost identical. Both control a title, a description, and an image. Both live in your page's <head>. Both were designed for the exact same job — making a shared link look good.
So why do we need two of them?
Because they were built by two different companies, at two different times, for two different platforms — and neither one fully committed to just using the other's format.
Open Graph vs Twitter Cards: The Real Differences
| Open Graph | Twitter Cards | |
|---|---|---|
| Created by | Twitter (now X) | |
| Attribute used | property | name |
| Prefix | og: | twitter: |
| Used by | Facebook, LinkedIn, Slack, Discord, WhatsApp, and most others | X (Twitter) |
| Controls layout? | Not really — mostly fixed | Yes, via twitter:card |
| Required if you already have OG tags? | — | Technically no, X can fall back to OG — but see below |
Does X Really Fall Back to Open Graph?
Yes, X can fall back to Open Graph tags for several fields, but relying on the fallback means you can't explicitly control twitter:card, so providing Twitter Card tags is still recommended.
⚠️ Common Mistake: Assuming "X reads Open Graph tags anyway, so I don't need Twitter tags." Technically true for basic fields, but you'll usually get a worse-looking card. If X previews matter for your traffic, add both.
What Is Open Graph?
Open Graph (often shortened to "OG") is a protocol created by Facebook in 2010. It defines a set of <meta> tags that tell any platform reading your page: "here's the title, description, image, and type of content this page represents."
<meta property="og:title" content="Stripe Checkout Guide" />
<meta property="og:description" content="Learn how to integrate Stripe Checkout with Next.js 16." />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:url" content="https://example.com/blog/stripe-checkout-guide" />
<meta property="og:type" content="article" />
💡 Tip: Notice the tags use
property, notname, for the attribute. That's an Open Graph convention — it's part of the original protocol spec, not a typo you'll see in other meta tags.
Open Graph became the industry default. Facebook, LinkedIn, Slack, Discord, WhatsApp, and dozens of other platforms all read Open Graph tags to build their link preview cards. If you only add one type of meta tag to your site, this is the one to add — it covers the widest range of platforms.
What Are Twitter Cards?
Twitter Cards (still called that even though the platform is now X) are a separate set of meta tags created by Twitter, also released around 2010–2012, specifically for how links preview inside tweets.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Stripe Checkout Guide" />
<meta name="twitter:description" content="Learn how to integrate Stripe Checkout with Next.js 16." />
<meta name="twitter:image" content="https://example.com/twitter-image.png" />
💡 Tip: Unlike Open Graph, Twitter Card tags use the standard
nameattribute — this is one of the small syntax differences that catches people copy-pasting between the two.
The one genuinely unique piece here is twitter:card, which controls the layout of the preview:
| Value | What it does |
|---|---|
summary | Small square image, text beside it |
summary_large_image | Large image above the title and description (the one you want almost every time) |
player | Embeds video/audio directly in the tweet |
app | Links to a mobile app store listing |
Adding Both in Next.js 16
Next.js's App Router Metadata API handles both tag types through one typed object — no manual <meta> tags needed.
// app/blog/[slug]/page.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Stripe Checkout Guide",
description: "Learn how to integrate Stripe Checkout with Next.js 16.",
openGraph: {
title: "Stripe Checkout Guide",
description: "Learn how to integrate Stripe Checkout with Next.js 16.",
url: "https://example.com/blog/stripe-checkout-guide",
siteName: "DevStacked",
type: "article",
images: [
{
url: "https://example.com/og-image.png",
width: 1200,
height: 630,
alt: "Stripe Checkout Guide",
},
],
},
twitter: {
card: "summary_large_image",
title: "Stripe Checkout Guide",
description: "Learn how to integrate Stripe Checkout with Next.js 16.",
images: ["https://example.com/og-image.png"],
},
};
What's happening here: the openGraph object generates every og:* tag, and the twitter object generates every twitter:* tag — Next.js writes the correct property or name attributes for you under the hood. You're writing one object; Next.js is producing two separate tag sets.
💡 Tip: You can reuse the same image for both. There's no rule requiring separate images — most sites use one 1200×630px image for both
og:imageandtwitter:image.
Can I Skip the Twitter Object Entirely?
If you set openGraph but skip twitter, Next.js does not automatically duplicate your OG tags into Twitter tags — it just omits twitter:* tags from the page entirely, relying on X's own (imperfect) fallback behavior described above.
// This works, but X's preview may not use the large-image layout
export const metadata: Metadata = {
openGraph: {
title: "My Post",
images: ["/og-image.png"],
},
// no twitter object — X falls back to og: tags, but loses twitter:card
};
If you want a guaranteed summary_large_image layout on X, always set the twitter object explicitly.
Image Size: One Size Fits (Almost) Both
Both formats recommend the same dimensions, which is why one image usually works everywhere:
- Recommended size: 1200×630px
- Aspect ratio: roughly 1.91:1
- Format: PNG or JPEG, keep it under ~5MB
⚠️ Common Mistake: Using a square logo as your og/twitter image. It gets stretched or cropped awkwardly on most platforms — build a proper wide banner image instead, even a simple one with your title text on a solid background.
Frequently Asked Questions
If I only have time to add one, which should I pick?
Open Graph. It covers Facebook, LinkedIn, Slack, Discord, WhatsApp, and (partially) X. Twitter Cards only improve the experience on one platform — X — but that improvement (the large image layout) is significant enough to add both if you can.
Does Google use Open Graph or Twitter Cards for search results?
Neither, directly. Google Search mostly relies on your page's <title>, meta description, and structured data (JSON-LD) — not OG or Twitter tags. OG/Twitter tags are purely for social link-preview cards, not search rankings or snippets.
Why isn't my preview updating after I changed the image?
Almost every platform caches link previews aggressively. Facebook has a Sharing Debugger to force a re-scrape, and X's card validator works similarly — always test with these tools instead of just re-sharing the link and hoping.
Do I need og:type set to something other than "website"?
Only if you want to be precise. article is common for blog posts, product for e-commerce pages, video.other for video content. Most platforms treat website as a safe default and won't visibly change your card's appearance.
Can I test my tags without actually posting them?
Yes — use Facebook's Sharing Debugger for Open Graph and Twitter's Card Validator for Twitter Cards. Both let you paste a URL and preview exactly how the card will render before you share it anywhere.
Wrapping Up
Open Graph and Twitter Cards solve the same problem — making your links look good when shared — but they're two separate protocols from two separate companies, with slightly different syntax and slightly different platform support. The safest move is simple: always set both openGraph and twitter in your Next.js metadata, reuse one well-sized image for both, and test with each platform's debugger before you trust it in production.
From here, a natural next step is wiring up JSON-LD structured data for richer search results, or generating dynamic OG images per page with next/og if you haven't already.
If you're new to metadata, first read How to Add Metadata in Next.js 16 (2026 Beginner's Guide).
💡 Save time: use the Meta Tag Generator to generate both Open Graph and Twitter Card tags — plus canonical URLs and JSON-LD — from one set of inputs, in both raw HTML and Next.js Metadata API format.
Reddit
WhatsApp