You publish a new page, paste the link into a LinkedIn post, and the preview shows a blank grey box, a truncated headline and no image. It looks broken — because in a sense it is. What renders in that little card isn't controlled by the platform guessing at your page; it's controlled by a handful of tags you put in your own HTML. Get them right once and every share of that page looks deliberate. Get them wrong and you're leaking clicks on the most social part of your traffic.
In my experience these Open Graph tags are one of the highest-leverage, lowest-effort fixes on a website. They take ten minutes per template and they pay off every single time someone shares your link.
What Open Graph tags are (and who reads them)
Open Graph is a small set of meta tags that live in the <head> of your page. They tell any platform that reads them exactly how to build the preview card: what headline to show, what description, and which image to pull.
The important thing to understand is who's actually reading these tags. When someone pastes your URL into Facebook or LinkedIn, that platform fetches your page and looks for Open Graph tags to build the preview. Facebook created the standard, and LinkedIn reads the same og: tags. X (formerly Twitter) has its own twitter: tags but falls back to Open Graph when they're missing. So one well-configured set of OG tags covers almost everywhere your link gets shared.
These tags are not a Google ranking factor. What they influence is the click — the same way a meta description shapes whether people click your search result, your OG card shapes whether people click your link in a feed. On social, the card *is* the ad.
The tags that matter
You don't need dozens of tags. Five Open Graph tags plus one Twitter tag cover the vast majority of real-world cases:
- `og:title` — the headline of the card. This can differ from your page's
<title>; write it for the scroll, not for search.
- `og:description` — the supporting line under the headline. A benefit plus a reason to click, kept short so it isn't cut off.
- `og:image` — the preview image, and the single most important tag here. It's what stops the thumb. Recommended size is 1200×630 (more on that below).
- `og:url` — the canonical URL of the page. This keeps shares and engagement pointing at one address instead of fragmenting across tracking parameters.
- `og:type` — what kind of content this is, usually
websitefor a normal page orarticlefor a blog post.
- `twitter:card` — set this to
summary_large_imageso X shows the big, prominent image card rather than a small thumbnail. X reads yourog:title,og:descriptionandog:imagefor the rest.
That's the whole core kit. Everything beyond it is polish.
Image sizes done right
The image is where I see the most damage, so it's worth being precise. Build your og:image at 1200×630 pixels — that's the 1.91:1 ratio the platforms crop to, and it's the size that renders sharp on both desktop and mobile.
Two practical rules save you most of the trouble. First, don't put critical text near the edges: previews get cropped slightly differently across platforms, so keep logos and words comfortably inside the frame. Second, use a real hosted image at an absolute URL — not a relative path, and not something behind a login. If the platform can't fetch the image, the card falls back to grey.
Common mistakes
Almost every broken card I audit comes down to one of three things:
- No image at all. No
og:imagemeans the platform either grabs a random image from your page or shows nothing. Either way you've lost the strongest part of the card.
- The wrong image size. A tiny or oddly-shaped image gets shrunk into a small square thumbnail instead of the full-width card, and a 3 MB hero photo may be ignored for being too large. Ship the 1200×630 version deliberately.
- A stale cache. This one fools people constantly. Facebook and LinkedIn cache your OG data the first time a link is fetched. So you fix your tags, re-share, and still see the old broken card — because the platform is serving its cached copy. The fix is to force a re-scrape (each platform has a debugger that does this), not to keep editing tags that were already correct.
Preview your cards with SnippetPeek
The golden rule is the same as with print QR codes: test before you publish. Never trust that a card looks right just because the tags are in the HTML.
The fastest way to check is to paste your URL into SnippetPeek and look at the rendered preview — it reads your Open Graph tags and shows you the card the way a feed would, so you catch a missing image or a truncated headline before anyone else does. I run every important page through SnippetPeek's preview right before launch, then again after any template change, because it's far cheaper to spot a blank card there than in a live campaign.
Set the six tags, export the image at 1200×630, clear the cache if you're re-sharing, and confirm the result in the preview. That's Open Graph done right — and it quietly improves every share for as long as the page exists.