Open Graph & Twitter Cards: make your links look great when shared
A missing og:image can halve your click-through. Here's how Open Graph and Twitter Card tags work, the exact set to add, and how to preview them before you ship.
When your link is shared on X, Facebook, LinkedIn, Slack, Discord or iMessage, those platforms build a preview card from your Open Graph meta tags. Get them right and a bare URL becomes a clickable card with an image, headline and description. Get them wrong and you ship a grey, imageless link that far fewer people click.
The essential tags#
<meta property="og:title" content="Your headline" />
<meta property="og:description" content="One or two sentences." />
<meta property="og:image" content="https://site.com/card.png" />
<meta property="og:url" content="https://site.com/page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Brand" />
<meta name="twitter:card" content="summary_large_image" />- og:image is the single biggest driver of shares — size it 1200×630 (1.91:1), under ~5 MB, and use an absolute HTTPS URL.
- twitter:card = summary_large_image gives you a big image on X instead of a thumbnail. X falls back to og: tags for title/description/image.
- Falls-back chain: platforms use og: first, then Twitter tags, then your
<title>/meta description.
Common gotchas#
- Relative image URLs — many scrapers require absolute URLs. Always use
https://…. - Client-rendered tags — most preview bots don't run JavaScript. Server-render your OG tags.
- Stale caches — platforms cache previews. Use their debuggers (Facebook Sharing Debugger, LinkedIn Post Inspector) to force a re-scrape after changes.
- Missing dimensions — optionally add
og:image:width/heightso the card renders instantly.
Preview before you ship#
See exactly how a URL renders across Google, X, Facebook/LinkedIn and Slack — and get warnings for missing tags — with the Link Preview & OG Checker. Build a complete tag set with the Open Graph Generator.
Frequently asked questions
▸ ▾ What size should og:image be?
1200×630 pixels (a 1.91:1 ratio) is the safe, widely-supported size for a large card. Keep it under about 5 MB and serve it over HTTPS at an absolute URL.
▸ ▾ Why isn't my new preview image showing?
Platforms cache previews aggressively. Use the platform's debugger (e.g. Facebook Sharing Debugger, LinkedIn Post Inspector) to force a re-scrape, and make sure the image URL is absolute and publicly reachable.
▸ ▾ Do I need both Open Graph and Twitter Card tags?
Open Graph covers most platforms including X, which falls back to og: tags. Add twitter:card=summary_large_image to get the big-image layout on X; the other twitter: tags are optional overrides.
Do it with a free tool
Related guides
Published 2026-07-09 · Updated 2026-07-09 · By Crawlsonar.