DEV Community

eatyou eatyou
eatyou eatyou

Posted on

Twitter Cards vs Open Graph: What's the Difference and Which Should You Use?

#webdev #seo #html #programming

If you have ever pasted a link into Twitter, Slack, or iMessage and seen a rich card appear, you have witnessed two competing standards doing their job: Open Graph (from Facebook) and Twitter Cards (from Twitter/X).

They often get used interchangeably, but they have real differences. Here is what you need to know.

The Short Answer

  • Open Graph is the universal standard — LinkedIn, Discord, Slack, iMessage, WhatsApp, and most other platforms read it.
  • Twitter Cards are Twitter's own extension — they add features Open Graph lacks, like player cards and app cards.
  • In practice: implement Open Graph first, then add Twitter-specific tags for the extras.

Open Graph Protocol

Created by Facebook in 2010, Open Graph (og:) is now the de facto standard for link metadata across the web.

<head>
  <meta property="og:title" content="Your Page Title" />
  <meta property="og:description" content="A one or two sentence description." />
  <meta property="og:image" content="https://yoursite.com/og-image.png" />
  <meta property="og:url" content="https://yoursite.com/page" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Your Site" />
</head>
Enter fullscreen mode Exit fullscreen mode

Image Requirements for Open Graph

Platform Recommended Size Min Size Aspect Ratio
Facebook 1200×630px 600×315px 1.91:1
LinkedIn 1200×627px 200×200px ~1.91:1
Discord Any reasonable 64×64px Flexible
iMessage 1200×630px — 1.91:1

The safest bet: 1200×630px, JPEG or PNG, under 8MB.

Twitter Cards

Twitter supports Open Graph tags but also has its own twitter: namespace with additional card types.

Summary Card (default)

Shows a small thumbnail on the left:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@yourhandle" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description." />
<meta name="twitter:image" content="https://yoursite.com/image.png" />
Enter fullscreen mode Exit fullscreen mode

Summary Card with Large Image

Full-width image above the text — the most visually impactful:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourhandle" />
<meta name="twitter:creator" content="@authorhandle" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description." />
<meta name="twitter:image" content="https://yoursite.com/large-image.png" />
<meta name="twitter:image:alt" content="Description of the image" />
Enter fullscreen mode Exit fullscreen mode

Twitter recommends 1200×675px for large image cards — slightly different from the OG 1200×630 standard.

App Card

For mobile app landing pages:

<meta name="twitter:card" content="app" />
<meta name="twitter:app:id:iphone" content="123456789" />
<meta name="twitter:app:id:googleplay" content="com.yourapp" />
Enter fullscreen mode Exit fullscreen mode

Player Card

Embeds video or audio directly in the timeline — requires Twitter approval:

<meta name="twitter:card" content="player" />
<meta name="twitter:player" content="https://yoursite.com/embed/video123" />
<meta name="twitter:player:width" content="1280" />
<meta name="twitter:player:height" content="720" />
Enter fullscreen mode Exit fullscreen mode

How Twitter Falls Back to Open Graph

Here is the important part: Twitter reads Open Graph tags if Twitter Cards are missing.

The fallback order:

  1. twitter:title → fallback to og:title
  2. twitter:description → fallback to og:description
  3. twitter:image → fallback to og:image

So if your Open Graph tags are already set up correctly and you just want a summary_large_image card on Twitter, you only need to add two tags:

<!-- Your existing OG tags cover the rest -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourhandle" />
Enter fullscreen mode Exit fullscreen mode

The Complete Template

Here is a full, production-ready head section combining both:

<head>
  <!-- Primary meta -->
  <title>Your Page Title</title>
  <meta name="description" content="Your page description." />

  <!-- Open Graph (used by Facebook, LinkedIn, Discord, Slack, iMessage, WhatsApp, etc.) -->
  <meta property="og:title" content="Your Page Title" />
  <meta property="og:description" content="Your page description." />
  <meta property="og:image" content="https://yoursite.com/og-image.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Description of the image" />
  <meta property="og:url" content="https://yoursite.com/this-page" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Your Site Name" />
  <meta property="og:locale" content="en_US" />

  <!-- Twitter Cards (only need these extras beyond OG) -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@yourhandle" />
  <meta name="twitter:creator" content="@authorhandle" />

  <!-- Canonical URL -->
  <link rel="canonical" href="https://yoursite.com/this-page" />
</head>
Enter fullscreen mode Exit fullscreen mode

Common Mistakes

1. Using a relative URL for og:image.

Wrong:

<meta property="og:image" content="/images/og.png" />
Enter fullscreen mode Exit fullscreen mode

Right:

<meta property="og:image" content="https://yoursite.com/images/og.png" />
Enter fullscreen mode Exit fullscreen mode

Most crawlers do not follow relative URLs. Always use absolute URLs.

2. Image too small. Facebook ignores images smaller than 200×200px. Always use at least 600×315px.

3. Different titles in OG and Twitter. If you set both, make sure they match. Inconsistency looks like a bug.

4. Missing og:url. Without it, Facebook uses the current page URL, which can cause issues with shared URLs that have tracking parameters.

5. HTTP image on an HTTPS page. Mixed content will cause the image not to load on many platforms. All your OG images should be served over HTTPS.

Platform Debugging Tools

Platform Tool
Facebook Sharing Debugger
Twitter/X Card Validator
LinkedIn Post Inspector
Generic OpenGraph.xyz

One important note: all these platforms cache previews. After you update your tags, you need to use the debugger tool to force a re-scrape, or the old version will still appear for hours or days.

Dynamic OG Images

Static OG images are easy but miss an opportunity. For blogs, documentation sites, and SaaS apps, dynamically generated OG images that include the page title convert much better.

Popular approaches:

  • Vercel OG (@vercel/og) — React components rendered to image at the edge
  • Puppeteer/Playwright — screenshot a styled HTML template
  • Canvas API on a server — programmatic image generation
  • A metadata API — let someone else handle the fetching; focus on your own image assets

Tools like LinkPeek extract the existing metadata and image from any URL, so you can render your own preview card without writing a scraper.

Summary

Feature Open Graph Twitter Cards
Universal support ✅ ❌ (Twitter only)
Large image card Via og:image summary_large_image
Video/audio embed ❌ ✅ player card
App store links ❌ ✅ app card
Fallback chain Base standard Falls back to OG

The rule of thumb: implement Open Graph completely, add twitter:card and twitter:site, and you cover 95% of platforms with minimal effort.

Top comments (0)