Live social card audit and preview lab
I’ve shipped pages that looked fine everywhere except the one spot that counted: the link someone dropped into Slack. So paste a public URL here. I’ll pull its Open Graph and Twitter/X tags, show which field is actually feeding the share card, and measure the image when the browser lets me. Then it draws the result three ways (a wide card, a compact one, a draft you can poke at). All before you hit post and learn the hard way.
Every platform crops and caches and grabs its metadata a little differently. I built this to drag those choices into the open, so you can spot the weak signal and patch it before anyone ever sees the card.
What an Open Graph preview is really checking
Think of the share preview as the little shopfront your URL drags into someone’s feed or DMs. A title. A line of description. A link and an image. Four things, and it stays that simple right up until you notice the page is juggling a title tag, an og:title, a Twitter title, a canonical URL, a fistful of images, plus a platform cache still proudly serving yesterday’s version.
That mess is the thing I wanted to untangle. So it lays the Open Graph fields, the Twitter/X fallbacks, and the plain SEO fields side by side, then builds the card under a few different source priorities. That’s how you find out whether your real social tags are pulling their weight. Or whether the card only looks okay because the page title and meta description quietly bailed it out.
Strong social metadata is specific
The cards that actually earn a click don’t parrot some fuzzy site tagline. They name the page and hand you a real reason to open it, leaning on an image that still reads after the crop has chewed on it. For a tool, honestly, I’d write a plain title about the job, one line promising what you get, and a preview image with decent contrast and no microscopic text. A guide’s the same deal. The topic and the payoff should land before anyone’s finger even moves.
- Open Graph title: describe the page you’re sharing, not just the brand on the door.
- Open Graph description: write it like a person would, not a pile of keywords praying for a click.
- Open Graph image: pick one that survives a wide crop and a thumbnail-sized preview both.
- Open Graph type: a small hint, sure, but it tells platforms what kind of thing they’re showing.
- Twitter card fields: these clear up the guesswork wherever Twitter/X reads its own tags directly.
Image checks need context
Dimensions are the easy thing to check. They’re not the whole story, though. I’ve watched a perfectly huge image still flop because the key text was hugging a crop edge, or the subject was a blur, or someone shipped the generic site banner instead of anything tied to the actual page. So it measures the chosen image whenever the browser will load it, and it keeps the image URL and the fallback source right there on screen. When a preview goes missing or gets blocked, you want to know why in seconds, not after twenty minutes of squinting at view-source.
A practical sharing workflow
- Preview the canonical public URL first. The exact one you’re about to drop into a campaign or a community thread.
- Confirm the Open Graph fields actually exist, instead of quietly riding on a page-title fallback.
- Look at the image in the wide layout and the compact one, because they crop differently and one of them will betray you.
- Hold the social title and description up against the search snippet, so the promise you’re making matches the page you’re sending people to.
- Once you’ve fixed something, give it time. A few platforms will keep serving the old card for a while no matter what you do.
Common questions
Is Open Graph only for Facebook?
Nope. Facebook kicked it off, but these days all kinds of things read Open Graph: chat apps, link unfurlers, the little preview your team’s project tool stitches together. They don’t all behave the same way, though. That’s the whole reason you want sane fallbacks sitting in place.
Can a page share without an Open Graph image?
It can, but the card usually ends up looking thin, and what you get shifts from one platform to the next. Pick a deliberate image and the card reads better at a glance. Plus, when something does break, you’ve got one fewer variable to chase down.
Should the social title match the SEO title exactly?
They don’t have to be identical. Both should tell the truth about the same page. I’ll often let the social title relax a little and sound more like a person, while the title tag stays tight and to the point for the search results. Honestly that’s a taste call, and you might disagree.
Which Open Graph tags are essential?
Four, really: og:title, og:description, og:image and og:url. Skip og:image and the platform just grabs some random picture off the page (or nothing at all), and there goes any reason for anyone to click.
What is the recommended Open Graph image size?
I default to 1200 by 630 pixels. That 1.91:1 ratio plays nicely on Facebook, LinkedIn, and pretty much everywhere else. Keep the file under about 5 MB, and make the URL absolute, never relative. The relative-path slip is the one I watch trip people up most.
Why is my link preview not updating after I changed the tags?
Because the platforms cache this stuff hard. You changed the tags; their copy never got the memo. Run the page through the platform’s own sharing debugger to force a fresh scrape. Otherwise the stale card can hang around for days, and yeah, it’s maddening.
