Understanding social meta tags
A title, a description, a 1200×630 image.
The Open Graph and Twitter Card tags every page should have, the image dimensions that work everywhere, and the validator habit that prevents broken previews.
Open Graph, the Facebook-era standard.
Open Graph (Facebook, 2010) defined the meta tags every social sharing surface now consumes. The essential set: og:title, og:description, og:image, og:url, og:type (usually "website" or "article"). Twitter, LinkedIn, Slack, Discord, WhatsApp, iMessage, Microsoft Teams all read these tags to build the link preview. One set of tags works everywhere; that's the Schelling point that made OG the standard.
Twitter Cards, the optional layer.
Twitter (now X) has its own meta-tag prefix: twitter:card, twitter:title, etc. They override OG tags when present, fall back to OG when absent. For most sites the OG tags are enough; Twitter reads them fine. Add Twitter-specific tags only if you want different content on Twitter than on Facebook — usually you don't.
1200×630 is the universally safe size.
The og:image dimensions that work across every platform: 1200×630, aspect ratio 1.91:1. Facebook crops to this; LinkedIn does too; Twitter's summary card uses a 2:1 crop centred. Smaller images get upscaled; larger get compressed. Stay close to 1200×630, keep important content inside the centre 1200×600 to survive every crop, ship as JPEG at 80 % quality (under 300 KB ideally; some platforms reject above 5 MB).
A worked set of tags.
<meta property="og:title" content="Understanding social meta tags" />
<meta property="og:description" content="Why every page needs OG tags and how to test." />
<meta property="og:image" content="https://example.com/og/article.jpg" />
<meta property="og:url" content="https://example.com/articles/og-tags" />
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yoursite" /> Six OG tags plus two Twitter-specific. The full meta header for a sharable article. Pages emit these per-route; site-level defaults cover everything else.
Per-route meta
og:title + og:description + og:image
Title and description change per page; image often dynamically generated.
generateMetadata in Next ; head export in SvelteKit
= Per-page preview cards
Dynamic OG images.
Manually authoring 1200×630 images per article doesn't scale. The modern pattern: generate them at request time from a template that takes title, author, and a background. Vercel's @vercel/og, Cloudinary's dynamic transformations, or a server function rendering with satori + @vercel/og's React-to-PNG pipeline. Set up once; every new article gets a personalised card automatically.
Test before you ship.
OG previews are notoriously cached. Facebook caches aggressively, Twitter re-reads on each share, Slack uses its own cache. Test with Facebook's Sharing Debugger, Twitter's Card Validator, LinkedIn's Post Inspector. If you change tags after they've been cached, you need to scrape them via the same debuggers to invalidate. The single biggest source of "the preview looks wrong on Slack" bug reports: stale cache, not actually-wrong tags.