When someone shares your URL on social media, in Slack, or in a messenger, the rich preview — image, title, description — isn't magic. It's controlled by a handful of meta tags. Miss them and your link shows up as a bare, unclickable URL. Nail them and every share becomes a small ad.
Why previews matter
A link with a large image and a compelling title gets dramatically more clicks than a plain URL. These tags don't affect Google rankings, but they directly affect how much traffic your shares actually convert.
The Open Graph tags
Open Graph (originally from Facebook, now used almost everywhere) uses <meta property="og:*"> tags:
<meta property="og:title" content="Your page title" />
<meta property="og:description" content="A short, punchy summary." />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />The four that matter most are title, description, image and url. If og:image is missing, most platforms show a plain, image-less card — the single most common reason a share "looks broken".
Twitter Cards
X/Twitter uses its own name="twitter:*" tags, but it falls back to Open Graph for title, description and image. So in practice you only need to add one Twitter-specific tag:
<meta name="twitter:card" content="summary_large_image" />summary_large_image gives you the big edge-to-edge image card; summary gives a small thumbnail. Everything else can inherit from your OG tags.
The image
Use a 1200×630 image (a 1.91:1 ratio) with the file hosted at an absolute HTTPS URL. Put any text in the image large and centred — it gets cropped differently across platforms. Keep it under ~1MB so it loads instantly in the preview.
How to test
Platforms cache previews aggressively, so "it looks right to me" isn't enough. Use the official debuggers (Facebook Sharing Debugger, X Card Validator) to force a re-scrape, and check the tags themselves before you ship. SEO Inspector renders a live card mock of your Open Graph and Twitter tags exactly as networks will show them — and warns you when the preview image or a required tag is missing.
