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
propertyvsname. Open Graph tags useproperty="og:…". Twitter tags usename="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:imagemust be a fullhttps://URL. A relative path like/preview.jpgcan't be resolved by an external crawler, so the image silently disappears.
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:card | Looks like | Use for |
|---|---|---|
summary_large_image | Big banner image above the title | Articles, products, most pages — the modern default |
summary | Small square thumbnail beside the text | When 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=2to the URL to bust its cache, then post. - Slack / Discord: caches expire on their own; a query-string tweak forces a new unfurl.
Quick checklist
- OG tags use
property=, Twitter tags usename=. -
og:imageis an absolutehttps://URL, 1200×630, PNG/JPG. -
twitter:cardis set (usuallysummary_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