Open Graph Tags: How to Make Your Link Preview Card Look Right
A practical guide to og:title, og:description, og:image and og:url — the meta tags that control how a shared link renders, plus the 1200x630 image and how to check it before posting.
Open Graph Tags: How to Make Your Link Preview Card Look Right
When you paste a link into X, Slack, Facebook, or a group chat and it expands into a tidy card with a headline, a sentence, and a big image, that card did not appear by magic. It was assembled from four small meta tags sitting in your page's <head>. Get them right and your link looks like something worth clicking. Get them wrong and you ship a bare blue URL, or worse, a stretched logo with a title clipped mid-sentence.
This is a guide to those tags: what each one does, why the image wants to be 1200x630, and how to check the card before you hit post instead of after.
The four tags that build the card
Open Graph is a small protocol Facebook published years ago that every major platform now reads. Four tags do almost all of the work, and they map cleanly onto the parts of the card you actually see:
og:title— the bold headline at the top of the card. Not your<title>tag necessarily; this is the social-facing line.og:description— the gray sentence under the title. One or two lines of context.og:image— the absolute URL of the picture. This is the part people glance at first.og:url— the canonical address the card points to. It also tells the platform which page this card represents, so two URLs that share a card don't fragment your engagement.
Together these four control how a shared link renders. There are a few supporting tags — og:site_name puts your brand under the card, og:type defaults to website, and twitter:card decides whether X shows a small thumbnail or a full-width banner — but the headline, the sentence, the image, and the URL are the load-bearing pieces. If you only ever fill in four tags, fill in these four.
Why the image should be roughly 1200x630
The single most common mistake I see is the image. People drop in whatever hero graphic the page already has, and it gets center-cropped into a square or a sliver, slicing the logo in half.
The fix is a number worth memorizing: 1200x630 pixels, a 1.91:1 ratio. Facebook, LinkedIn, Slack, Discord, and X's large card all crop to that ratio, so an image built at exactly 1200x630 needs no cropping at all — what you export is what people see. It is also large enough that X's minimum size and LinkedIn's recommended floor are both cleared in one shot, so you never trip a "image too small" warning.
Two practical rules follow from this. First, keep your important content — logo, headline text, faces — away from the top and bottom 5%, because a taller source image gets trimmed there. Second, if all you have is a square logo and no banner, don't force it into the wide slot; set twitter:card to summary so X renders the small-thumbnail layout instead of stretching your logo across a banner it was never meant to fill.
A worked example: tags for a blog post
Say you are publishing an article titled "How we cut our build time from 9 minutes to 90 seconds." Here is the meta block that gives it a clean card on every surface:
<meta property="og:type" content="article" />
<meta property="og:title" content="How we cut our build time from 9 minutes to 90 seconds" />
<meta property="og:description" content="A six-step teardown of a slow CI pipeline: caching, parallel jobs, and the one config change that did most of the work." />
<meta property="og:image" content="https://example.com/og/build-time-card.png" />
<meta property="og:url" content="https://example.com/blog/build-time-teardown/" />
<meta property="og:site_name" content="Example Engineering" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="How we cut our build time from 9 minutes to 90 seconds" />
<meta name="twitter:description" content="A six-step teardown of a slow CI pipeline." />
<meta name="twitter:image" content="https://example.com/og/build-time-card.png" />A few things to notice. The og:image is an absolute https:// URL, not /og/build-time-card.png. Crawlers fetch the image from a separate request with no knowledge of your page's domain, so a relative path resolves to nothing and the card shows up imageless. The twitter:card is summary_large_image because we want the big banner. And og:type is article rather than the default website, which is the correct type for a blog post and lets platforms attach article metadata.
Previewing the card before you post
Tags written in a code editor look fine in a code editor. The problem is that every platform truncates differently, so a title that fits on one card clips on another. Google cuts a title near 60 characters, X around 70, Facebook closer to 88, LinkedIn up to 119 — and LinkedIn drops the description from the card entirely. A 75-character headline reads complete on LinkedIn and gets an ellipsis on Google. You cannot eyeball that.
This is exactly the gap the Open Graph & Social Card Preview tool fills. You type your og:title, og:description, og:image URL, and og:url, and six cards render side by side — a Google snippet, an X large card, a Facebook share, a LinkedIn post, a Slack unfurl, and a Discord embed — each using that platform's real truncation length and the 1.91:1 image crop. The per-field counter flags the moment your title crosses the tightest limit, so you write to the number that clips nowhere. When the wording looks right everywhere, one click copies a paste-ready meta block.
I leaned on this last month shipping a launch announcement. My first headline was 78 characters and read perfectly in my editor. The X card clipped it one word before the payoff — the single word that made the whole pitch land. I trimmed to 68, watched the counter go from pink back to muted, and the card showed the full line. That ten-second check saved a launch tweet that would have looked broken to the exact audience it was meant for.
Validate the real page after deploy
Previewing the tags you typed gets the wording and crop right before the page exists. But once it is live, you want one more check against what crawlers actually fetched, because a templating bug or a stale cache can quietly serve different tags than you wrote.
The platforms provide their own debuggers for this: Facebook's Sharing Debugger, X's Card validator, and LinkedIn's Post Inspector each crawl the live URL and show you the parsed result. They also let you force a re-scrape, which matters because the first share of a URL gets cached — fixing your tags after that first post does nothing until you clear the cache. So the workflow is: draft and tune the copy in the preview tool, generate the full tag set (the Meta Tag Generator handles the broader <head> block including description and canonical tags), paste it in, deploy, then run the live URL through the official debuggers once to confirm.
The short version
Four tags carry the card: og:title for the headline, og:description for the sentence, og:image for the picture, og:url for the destination. Build the image at 1200x630 so nothing gets cropped. Preview the card across platforms before you post so a tight title doesn't clip on the one surface that matters, and re-validate the live page once after deploy. Do that and a shared link stops being a gamble and starts looking like you meant it.
Made by Toolora · Updated 2026-06-13