Open Graph Tags: Control How Your Links Look When Shared

Paste a link into WhatsApp, Facebook, LinkedIn, or Slack and a little preview card appears: image, title, description. That card is not magic and not random — it is built from Open Graph tags in the page's HTML. If your links show broken images, wrong titles, or no preview at all, your Open Graph tags are missing or wrong. And since the preview card is what people actually see before deciding to click, it matters more than most site owners realize.

The four tags that build the card

<meta property="og:title" content="Your Headline Here" />
<meta property="og:description" content="One or two enticing sentences." />
<meta property="og:image" content="https://example.com/preview.jpg" />
<meta property="og:url" content="https://example.com/page" />

That is the whole core system. og:title is the card's headline (it can differ from your SEO title — feel free to make it punchier). og:description is the supporting line. og:image is the picture, and it dominates the card. og:url is the page's canonical address.

The Open Graph Generator produces this block from a simple form — fill in the fields, copy the HTML into your page's head, done.

The image makes or breaks it

Cards are mostly picture. Rules of thumb that keep images sharp everywhere:

• Size: 1200 × 630 pixels. This 1.91:1 shape is the standard across Facebook, LinkedIn, and X. Smaller images get fuzzy; wrong shapes get cropped.
• Use an absolute URL. og:image must be the full https://... address, not a relative path — relative paths are the number one cause of missing images.
• Keep text in the middle. Platforms crop edges differently; center the important content.
• Make it legible as a thumbnail. Chat apps show tiny previews. Big shapes and few words survive; dense screenshots do not.

Twitter's cousin tags

X (Twitter) reads Open Graph but has its own additions. The one worth setting:

<meta name="twitter:card" content="summary_large_image" />

Without it, X may show a small square card instead of the full-width image version. One line, big visual difference.

Why your changes don't show up (caching!)

Here is the frustration everyone hits: you fix your tags, share the link again, and the old preview still appears. Platforms cache preview cards aggressively — sometimes for weeks.

The fix is forcing a refresh with each platform's debugger tool: Facebook's Sharing Debugger, LinkedIn's Post Inspector, and X's Card Validator each let you paste a URL and re-scrape it. After any Open Graph change, run your URL through the debugger of whichever platform matters to you. This one habit prevents almost all "but I fixed it!" confusion.

Quick wins for common cases

A blog? Every post should carry its own og:title, description, and ideally its own image. Posts with real preview cards get dramatically more engagement from the exact same share.

An online store? Product pages with the product photo as og:image turn every customer share into a mini advertisement.

A tools or SaaS site? A branded template image with the page name on it (generated automatically, as we do here) gives every page a professional card with zero per-page effort.

While you are in the head of your pages, the Meta Tag Generator covers the SEO tags that live alongside Open Graph, and the SERP Preview shows how the same page looks in Google — the search-results sibling of the share card.

The takeaway

Every shared link is a tiny billboard, and Open Graph tags are how you design it instead of leaving it to chance. Four meta tags, one good 1200 × 630 image, one pass through a debugger to bust the cache — and every share of your site starts pulling its weight.