Open Graph Tags for Better Shares

You paste a link into a chat or a social post and it blossoms into a card — a title, a description, a big image. That card is not magic; it is driven by Open Graph tags in your page's HTML. Get them right and your links look professional everywhere; get them wrong and you share a blank box.

What Open Graph is

Open Graph is a small set of <meta> tags, originally from Facebook, that tell any platform how to represent your page when it is shared. Almost every service that unfurls links — messaging apps, Slack, LinkedIn, Facebook — reads them. They sit in the <head> of your page and are invisible to normal visitors; only the link-preview machinery reads them.

Without them, platforms fall back to guessing from the page content, and the guess is usually ugly or empty.

The tags that matter

Four tags do most of the work:

• og:title — the headline on the card. It can differ from your SEO <title>; make it punchy, since this is what people see in a feed.
• og:description — a sentence or two of context under the title.
• og:image — the preview image. This is the one that makes the card eye-catching, and the one most often missing or wrong.
• og:url — the canonical URL of the page, so shares all point to one address.

Two more are worth adding: og:type (usually website or article) and og:site_name (your brand).

Getting the image right

The image is where most cards fall down. The rules:

• Use 1200 × 630 pixels. This is the standard 1.91:1 ratio that fills the large card format without cropping. Smaller images get shrunk to a tiny thumbnail or ignored.
• Keep text readable. The image is often shown small; a cluttered screenshot turns to mush. A clean graphic with a short, large headline survives scaling.
• Use an absolute URL. og:image must be a full https:// URL, not a relative path — the platform fetching it has no idea what your domain is.
• Mind the file size. A huge image can time out before the platform fetches it, leaving a blank card.

Twitter/X cards

X reads Open Graph tags but also supports its own twitter: tags for finer control. The key one is twitter:card, usually set to summary_large_image to get the big-image layout rather than a small thumbnail. If you set only Open Graph tags, X will generally still produce a reasonable card, but adding the twitter: tags removes the guesswork.

Why your card looks wrong after you fixed it

A common frustration: you fix the tags, re-share the link, and the old broken card still appears. That is because platforms cache the preview aggressively — they fetched your page once and kept the result. The fix is to use the platform's own debugging/sharing tool to force a re-fetch, which clears its cache for that URL. Until then, you are looking at a stale preview, not your new tags.

Test every important page

Open Graph tags fail silently. The page works, visitors see nothing wrong, and only when someone shares the link does the blank card appear — by which point the share is already out there looking broken. So check them before you promote a page.

Generating a complete set of Open Graph and Twitter meta tags from your page details, and inspecting a live URL to see exactly which tags it exposes and how the card will look, both run from your browser. Build the tags, drop them in the <head>, then fetch the live page back to confirm the title, description and 1200 × 630 image all resolve — so every link you share unfurls the way you intended.