Drop a link into a group chat or post it to LinkedIn and a card appears — an image, a headline, a short snippet. When that card is right, it earns the click before anyone has read a word. When it is wrong, a blank gray box or a stray footer logo shows up instead, and the link looks broken even though the page behind it is perfectly fine. That card is controlled by a handful of Open Graph tags, and most pages get them only half right.
What Open Graph tags actually do
Open Graph is a small set of meta tags — og:title, og:description, og:image, og:url — that tell a platform exactly what to show when someone shares a page. Without them, the platform is left to guess, and its guess is usually wrong: a tiny logo pulled from the footer, a random in-page image, or nothing at all. With them, every surface that unfurls a link — Facebook, LinkedIn, X, WhatsApp, Slack, Discord, iMessage — shows the title, image, and description the page actually chose.
Why the preview matters more than it looks
The card is the first impression of a link, and a broken-looking one quietly suppresses clicks before anyone reaches the page. That alone is reason enough to get it right, but the stakes have grown. AI search engines now read og:title and og:description when deciding which pages to surface in answers, so the same tags that shape a social card increasingly shape AI visibility too. Open Graph is not a direct Google ranking signal — but the downstream effect is real, since more shares lead to more branded searches and stronger authority for the pages that do rank.
Where the og:image usually goes wrong
The image tag is where most pages fall down, almost always in one of four ways:
- Wrong size. The standard is 1200×630 pixels, a 1.91:1 ratio. Anything much smaller gets upscaled into a blurry mess or refused outright; the wrong ratio gets cropped at awkward points.
- One image for the whole site. Every shareable page needs its own
og:image. When a blog post inherits the homepage banner, every share of that post advertises the wrong thing. - A relative URL or client-side tags. The image has to be referenced by an absolute URL, and the tags need to be present in the page's static HTML — tags injected only by client-side scripts often never get read.
- A weak headline.
og:titlecan differ from the page's<title>. The<title>is written for search engines; theog:titleis for a human scrolling a feed, so a hook reads better than a keyword string, and it should stay under about 60 characters to avoid truncation.
How to check a page's card before sharing it
The catch with all of this is that none of it is visible from the page itself. The card only appears once a link is shared somewhere, and platforms cache their previews — so a fix may not show up until the cache clears, long after the broken version has already gone out.
Sukat Inspector closes that gap. Its Social & SEO Images panel reads a page's Open Graph and Twitter Card tags and renders the preview the way Facebook, LinkedIn, and X each display it — stacked, so the differences are obvious at a glance. It flags the common faults directly: an og:image that is the wrong shape, too small to render cleanly, or missing entirely. The Page Metadata panel sits right beside it, so the title, description, and canonical URL get checked in the same pass. Because the inspection runs locally in the browser, there is no upload and no waiting on a platform's own debugger.
Fixing what it flags
Most of what the panel surfaces points to a quick fix:
- Missing or wrong-size image: create a 1200×630 image for that specific page and point
og:imageat its absolute URL. - Heavy image: compress it so the card loads fast — the Sukat compressor hits an exact file size in the browser.
- Wrong shape: crop it to 1.91:1 before exporting.
- Weak headline: rewrite
og:titleas a hook for a feed, kept under 60 characters.
The image size guide lists the right dimensions when it is time to build the image.
The cheapest first impression you can fix
A link preview is often the first thing a person — or an AI engine — sees of a page, and it is one of the cheapest things to get right: a few meta tags and one correctly sized image. The only hard part is that the card stays invisible until it is shared. Inspector makes it visible beforehand, so a broken preview gets caught before it goes out rather than after. Check the page that gets shared most, fix what comes back flagged, and size the image with Sukat.
Frequently asked questions
What size should an Open Graph image be?
1200×630 pixels, a 1.91:1 ratio. Anything much smaller gets upscaled into a blurry mess or refused outright, and the wrong ratio gets cropped at awkward points.
Does every page need its own og:image?
Yes. Every shareable page needs its own og:image. When a blog post inherits the homepage banner, every share of that post advertises the wrong thing.
Why doesn't my updated link preview show up?
Platforms cache their previews, so a fix may not appear until the cache clears — long after the broken version has gone out. That is why it helps to check the card before sharing rather than after.
Can og:title differ from the page title?
Yes. The page's title tag is written for search engines; og:title is for a human scrolling a feed, so a hook reads better than a keyword string. Keep it under about 60 characters to avoid truncation.
About Sukat
Sukat builds free, privacy-first browser tools for compressing images and verifying published content. Everything runs in your browser — nothing is uploaded.
