Open Graph and Twitter Cards: Getting Your Link Previews Right

The first time I shared a client's new page in a group chat and it appeared as a bare blue link with no image and a truncated, random-looking description, I knew exactly what was missing. Every rich link preview you've ever seen — the ones with a big image, a clean title and a tidy summary — is powered by a few meta tags most site owners never set. They're called Open Graph tags, and getting them right is one of the cheapest ways to make your content look professional when people share it.

Here's how link previews work and how to control yours.

What's happening when you share a link

When you paste a URL into a social platform, messaging app or chat, that service fetches the page and looks for specific meta tags in the HTML <head> to decide how to display it. If it finds them, you get the polished card. If it doesn't, the platform guesses — grabbing whatever text and image it can find, often badly.

The standard that governs this is Open Graph, originally from Facebook but now read by nearly every platform that renders link previews. A handful of og: meta tags tell the platform exactly what title, image and description to show.

The core Open Graph tags

Four tags do most of the work:

• og:title — the headline shown on the card. Often your page title, but you can tailor it for sharing.
• og:description — the summary line beneath the title.
• og:image — the big preview image. This is the one that makes a card stand out.
• og:url — the canonical URL of the page.

You'll often add og:type (like website or article) and og:site_name too. These sit in your page's <head> and don't change what visitors see on the page itself — they only control the preview. An Open Graph tag generator builds valid tags for you, which beats hand-typing them and risking a typo that breaks the whole card.

Twitter Cards: the same idea, a bit more control

X (formerly Twitter) will fall back to your Open Graph tags if it finds nothing else, so you're not starting from zero. But adding dedicated Twitter Card tags gives you precise control over how your link looks there.

The key ones are twitter:card (usually summary_large_image for the big-image layout), twitter:title, twitter:description and twitter:image. A Twitter Card generator produces these, and you can keep them consistent with your Open Graph values. In practice I set both: Open Graph for the broad coverage, Twitter Cards for the platform where presentation matters most.

The image is everything

If you optimise one thing, make it og:image. The image is the largest, most eye-catching part of the card, and a missing or wrong-sized one is the difference between a link people click and one they scroll past.

The safe standard is 1200×630 pixels (a 1.91:1 ratio). At that size the image displays cleanly across platforms without awkward cropping. Smaller images may render as a tiny thumbnail or not at all. Put something meaningful in it — a branded graphic, a relevant photo, or the article's hero image — not a stretched logo.

A quick worked example

Take that bare-blue-link page from the start. Add four tags — an og:title with a compelling headline, an og:description of about 150 characters, an og:image at 1200×630, and an og:url — then re-share it. Now the same link appears as a full card: image on top, bold title, clean summary. Nothing about the page changed for visitors; you simply told the platforms how to present it. That's often the difference between a link that gets clicked in a feed and one that doesn't.

Testing before you rely on it

Two gotchas catch people, so always test:

• Platforms cache previews. If you fix your tags but the old (bad) preview still shows, the platform has cached it. Use the platform's own debugger/validator (Facebook's Sharing Debugger, X's Card Validator) to force a refresh and confirm the tags are read correctly.
• Tags must match the real page. Don't promise an image or headline the page doesn't deliver; keep the preview honest, and make sure the og:url points to the canonical version so shares consolidate on one URL.

A general meta tag generator can produce your standard SEO tags alongside these, so your <head> is complete in one pass.

The takeaway

Rich link previews aren't magic — they're four or five meta tags you control. Set your Open Graph tags (title, description, a 1200×630 image, and URL), add Twitter Card tags for precise control on X, and test with each platform's validator so caching doesn't trip you up. It takes minutes and makes every share of your content look deliberate and professional instead of like a broken blue link. For something that costs so little, it's one of the highest-visibility upgrades you can make.