Craft

Link previews show what you chose to highlight

By Jasper

I used to paste links into Slack or Twitter and wince when the preview loaded. Sometimes it grabbed a weird sentence fragment. Sometimes it showed no image at all. Sometimes it pulled a boilerplate tagline that made the page sound generic.

The preview wasn't broken. I just hadn't told it what to show.

Open Graph tags control social previews

When you share a link on most platforms, the site reads Open Graph meta tags from your page's <head>. If those tags exist, the platform builds a preview card. If they don't, it guesses — and the guess is usually wrong.

You need at least three tags:

  • og:title — Usually your page title, but you can trim or rephrase it
  • og:description — A sentence or two that explains what the page contains
  • og:image — A URL pointing to an image (absolute path, not relative)

Twitter has its own set (twitter:title, twitter:description, twitter:image), but it falls back to Open Graph if those aren't present. Start with Open Graph. Add Twitter-specific tags only if you need different text or image dimensions.

Write descriptions that work out of context

Your meta description might work fine in search results, but link previews appear in feeds, messages, and timelines where no one searched for anything. The person seeing your preview doesn't know what your site is or why someone shared it.

Don't write: "Learn more about our approach to helping teams."

Write: "A guide to running content audits on small sites without spreadsheet bloat."

The second version tells someone what they'll read if they click. It doesn't assume they already know your site or care about your brand. If you've already written a meta description people actually click, you might reuse it — but check that it makes sense without the search context.

Preview images need different dimensions than body images

Most platforms crop Open Graph images to 1.91:1 (roughly 1200×630 pixels). If you point og:image at a tall screenshot or a square logo, the platform will crop it, and you won't like the result.

Create a separate image for previews, or design your featured images with that ratio in mind. Text should sit in the center third, and important details shouldn't touch the edges.

This isn't the same image you'd use in the page body. Image dimensions belong in your content model, and preview images are a distinct content type with their own constraints.

Test your previews before you publish

Most platforms cache link previews aggressively. If you fix a bad og:image after you've already shared the link once, the old image might stick around for days.

Use a validator before you share:

  • Facebook's Sharing Debugger lets you see what it will pull and clear the cache
  • Twitter's Card Validator shows how your card will render
  • LinkedIn's Post Inspector does the same for LinkedIn shares

Paste your URL, check the preview, adjust your tags, and re-validate. Do this while the page is still in draft if your CMS allows preview URLs.

Don't let the platform decide what your page is about

Link previews aren't automatic decoration. They're the first impression someone gets when your content shows up in their feed, and they're entirely under your control. If you're already writing page titles and descriptions, adding three meta tags takes two minutes.

You decided what the page says. Decide what the preview says too.

← All posts