GUIDESocial previews·2 min read·Updated Jun 29, 2026

Twitter Cards vs Open Graph

Do you need Twitter Card tags if you already have Open Graph? What X falls back to, when twitter:card wins, and the minimum set of tags to ship.

What each one is

Open Graph is a protocol created by Facebook in 2010. You add og:* meta tags to your page's <head>, and platforms use them to build link cards. It is the de facto standard: Facebook, LinkedIn, Slack, Discord, WhatsApp, and iMessage all read og:* tags.

Twitter Cards are X's own metadata system, using twitter:* meta tags. They give you fine-grained control over how links appear specifically on X — including the card layout and whether a large image is shown.

Both live in the same <head> block. They do not conflict.

Check your Twitter card

Run the free Twitter Card Validator to see how X renders your card and what it falls back to.

Twitter Card Validator

What X falls back to

X reads twitter:* tags first. If they are absent, it falls back to the equivalent og:* tags. Specifically:

  • If twitter:title is missing, X reads og:title
  • If twitter:description is missing, X reads og:description
  • If twitter:image is missing, X reads og:image

This means that if your Open Graph tags are correct and complete, X will produce a reasonable preview without any twitter:* tags at all. The fallback is reliable.

When you need twitter:card

The one twitter:* tag that has no direct Open Graph equivalent is twitter:card. It controls the card layout.

The two layouts you will use:

  • summary — a small square thumbnail on the left, title and description on the right (the default if twitter:card is absent)
  • summary_large_image — a full-width image above the title and description

If you want the large image layout, you must set twitter:card to summary_large_image. Open Graph has no equivalent for this. X will not show the large layout based on og:image alone.

For summary_large_image, the image must be at least 300×157 pixels at approximately a 2:1 ratio. Below that threshold, X will not render the large card. In practice, a 1200×630 Open Graph image already satisfies this requirement.

The minimum set to ship

For most pages, this is everything you need:

HTML
<head>
  <!-- Open Graph (read by LinkedIn, Slack, Discord, WhatsApp, and X fallback) -->
  <meta property="og:title" content="Your Page Title" />
  <meta property="og:description" content="A clear description of what this page is about." />
  <meta property="og:image" content="https://yourdomain.com/og-image.png" />
  <meta property="og:url" content="https://yourdomain.com/your-page" />

  <!-- Twitter / X (the one tag with no OG equivalent) -->
  <meta name="twitter:card" content="summary_large_image" />
</head>

Add twitter:site (your @handle) if you want it attributed to your account in analytics. Add twitter:title, twitter:description, and twitter:image only if you want X's card to differ from the Open Graph version — for example, shorter copy or a differently cropped image.

How to check

The Twitter Card Validator shows you exactly what X reads for any URL — including whether it falls back to Open Graph and which card layout it would use.

If your image renders as a small thumbnail when you expected a large card, the most likely causes are: twitter:card is missing or set to summary, or the image is too small (under 300×157).

Want to maintain this across every route?

Linkraft is coming soon. Use the free tools today, and join the waitlist for route-level fixes, monitoring, and reports.

By joining the waitlist, you agree to receive launch updates from Linkraft. You can unsubscribe at any time.

No spam. Just launch updates and useful resources about metadata, schema, and link previews.