Why your link preview looks wrong, and how Open Graph tags fix it

Paste a link into Slack or LinkedIn and a card appears with a title, a blurb and an image — but that card isn't a live snapshot of your page. The platform's crawler fetched your HTML once, read a handful of <meta property="og:..."> tags in the <head>, and built the card from those values alone. If the tags are missing, it falls back to guessing from your page's regular <title> and a random image, which is why previews so often look wrong.

The method

1. Add og:type — usually website or article — so the platform knows what kind of content it's showing.
2. Add og:title and og:description. These are independent of your <title> tag and meta description, so you can write them specifically for a social card — shorter, punchier — without changing what shows in search results.
3. Add og:url, the canonical URL for the page, so shares of a tracking link or a trailing-slash variant all consolidate to one card.
4. Add og:image, a full absolute URL (not a relative path) to the preview image. This is the tag that most determines whether a shared link gets clicked.
5. Put all four inside <head>, not <body> — crawlers that build preview cards generally only read the head.

The image size, worked out

The widely-recommended Open Graph image size is 1200×630 pixels. Do the division: 1200 ÷ 630 = 1.905…, and in lowest terms (dividing both by their greatest common divisor, 30) that's 40:21. It is not a clean 2:1 or 16:9 — 16:9 is 1.778, noticeably squarer. If you crop an existing 16:9 thumbnail down to 1200×630, check the math first: a 16:9 image at 1200px wide is 1200 ÷ 16 × 9 = 675px tall, which is 675 − 630 = 45px taller than the Open Graph target. Cropping to 630 trims that 45px off the top and bottom — worth checking the result doesn't cut off a face or a headline.

A worked example

A page with the title "GG Network — 200 Free Tools" wants a card that reads differently from its search-result listing. The tags:

<meta property="og:type" content="website">
<meta property="og:title" content="GG Network — 200 free tools, zero sign-up">
<meta property="og:description" content="Every calculator, converter and generator runs in your browser. No account, no ads, no data leaves your device.">
<meta property="og:url" content="https://theggnetwork.com/">
<meta property="og:image" content="https://theggnetwork.com/og.png">

Checking the description length against the rough 200-character comfort limit platforms use before truncating: counting the characters in "Every calculator, converter and generator runs in your browser. No account, no ads, no data leaves your device." gives 111 characters — comfortably under, so it won't get cut off mid-sentence on any major platform.

One thing this doesn't fix

Twitter/X reads its own twitter:* tags first and only falls back to Open Graph if they're absent — so a page that wants predictable cards everywhere needs both sets, not just one. The Open Graph tag generator builds the four tags above from a title, description, URL and image; pair it with the Twitter Card tool if X previews matter too.