Guide

Open Graph & Twitter Cards: one block, every platform

The good news: you don't write different tags for each social network. Almost every platform reads the same Open Graph protocol, and Twitter/X adds a thin layer on top. Get one block right and your link renders cleanly on Facebook, LinkedIn, Slack, Discord, WhatsApp and X alike.

The block that covers everything

Paste this into <head>, fill in your values, and you've handled every mainstream platform:

<!-- Open Graph: Facebook, LinkedIn, Slack, Discord, WhatsApp, Pinterest -->
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A short, compelling summary.">
<meta property="og:image" content="https://yoursite.com/preview.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://yoursite.com/page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="YourBrand">

<!-- Twitter / X: adds the large-image card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="A short, compelling summary.">
<meta name="twitter:image" content="https://yoursite.com/preview.jpg">

The two rules people get wrong

  • property vs name. Open Graph tags use property="og:…". Twitter tags use name="twitter:…". Swap them and the tag is ignored with no error. This is the single most common reason a card "won't work".
  • Absolute image URLs only. og:image must be a full https:// URL. A relative path like /preview.jpg can't be resolved by an external crawler, so the image silently disappears.
Twitter falls back to Open Graph. If you omit twitter:title/description/image, X uses the og: equivalents. So the minimum for X is just twitter:card plus your OG tags — the extra Twitter tags only matter when you want different text on X than elsewhere.

Card types

twitter:cardLooks likeUse for
summary_large_imageBig banner image above the titleArticles, products, most pages — the modern default
summarySmall square thumbnail beside the textWhen you only have a logo or a square image

There's no Open Graph equivalent of "card type" — Facebook and LinkedIn decide the layout from the image's aspect ratio. A 1200×630 image gives the large banner; a small or square image gives a compact card.

The image is 90% of the impression

The picture is what stops the scroll. Get it right:

  • 1200×630px (a 1.91:1 ratio) is the safe universal size for the large card.
  • Keep important text in the centre — some platforms crop the edges, and LinkedIn in particular trims differently from Facebook.
  • Use PNG or JPG, never SVG — crawlers won't render SVG previews.
  • Keep the file reasonable (well under a few MB); an image that's slow to fetch may be skipped.

If you want to see how a given image and text will look before you publish, that's exactly what a live preview tool is for — check it across Facebook, X and LinkedIn side by side, then come back here to generate the final tags.

After you change the tags, re-scrape

This trips up almost everyone. Platforms cache your preview aggressively — often for days. Edit your tags, re-share the link, and you'll still see the old card. That's not a bug in your markup; it's the cache. Force a fresh read:

  • Facebook / WhatsApp: paste the URL into the Sharing Debugger and click "Scrape Again". (WhatsApp shares Facebook's cache.)
  • LinkedIn: run it through the Post Inspector.
  • X: the Card Validator is retired — append ?v=2 to the URL to bust its cache, then post.
  • Slack / Discord: caches expire on their own; a query-string tweak forces a new unfurl.
Ship it before your first big share. The very first time a URL is posted, the platform caches whatever it finds. If your tags weren't ready, that blank or wrong card sticks until you manually re-scrape — so validate before the launch tweet, not after.

Quick checklist

  • OG tags use property=, Twitter tags use name=.
  • og:image is an absolute https:// URL, 1200×630, PNG/JPG.
  • twitter:card is set (usually summary_large_image).
  • Tags are in <head>, not <body>.
  • Re-scraped in the Facebook and LinkedIn debuggers after the last edit.

Next: every meta tag that matters · title & description length · generate your tags