How to Preview How Your Page Looks When Shared

You’ve shared a link on Facebook, LinkedIn, or X before and watched the preview card come up wrong — a generic placeholder image instead of your actual featured graphic, a title pulled from the wrong part of the page, a description that’s cut off mid-sentence or missing entirely. That preview card is generated from specific meta tags in your page’s HTML (Open Graph tags for most platforms, Twitter Card tags for X), and if those tags are missing, malformed, or pointing to a broken image, the platform falls back to its own guess at what to display — rarely a good one.

The frustrating part is you often don’t find out the preview looks wrong until after you’ve already shared the link somewhere, at which point fixing it and getting the platform to re-fetch a corrected preview isn’t always instant or straightforward.

What controls a shared link’s preview

Open Graph tags (og:title, og:description, og:image, and related properties) are the standard most platforms — Facebook, LinkedIn, and several others — read to build a link preview card. Twitter Card tags (twitter:card, twitter:title, twitter:image, and related properties) serve the same purpose specifically for X, and while there’s overlap with Open Graph, X has its own tag set with its own requirements. Missing tags mean the platform falls back to scraping whatever it can find on the page — often producing an inconsistent or unflattering result. Oversized images, or images at the wrong aspect ratio, can also get cropped or rejected by a platform’s own size requirements.

Checking these tags before sharing, rather than after, means catching a missing or broken image, an unset title, or an overly long description while it’s still easy to fix — before the wrong preview has already been seen (and potentially cached) by whoever you shared the link with.

Why people get stuck here

• Not knowing which tags a given platform actually reads. Open Graph and Twitter Card tags overlap but aren’t identical, and assuming one covers both leaves gaps that produce inconsistent previews across platforms.
• Broken or oversized preview images. An og:image pointing to a broken URL, or an image far outside the platform’s expected dimensions, can result in no image or a poorly cropped one in the preview.
• Discovering the problem only after sharing. Since the preview only renders once shared, the natural feedback loop for catching a bad preview happens after the fact, often after several people have already seen the broken version.
• Cached previews not updating after a fix. Some platforms cache a link’s preview for a period of time, meaning even after fixing the underlying tags, the old broken preview can persist until the cache refreshes or is manually cleared.

What a good social preview checker looks like

Checks both Open Graph and Twitter Card tags

Since the two tag sets aren’t identical, checking both separately catches gaps that only affect one platform or the other.

Flags missing or oversized tags clearly

Pointing out specifically which tag is missing, or which image exceeds expected size, gives you an actionable fix rather than a vague sense that something’s off.

Shows an actual preview render, not just a tag list

Seeing an approximation of how the card will actually look on Facebook, LinkedIn, and X — not just a raw list of tag values — makes it much easier to judge whether the result is actually good.

Common mistakes to avoid

• Assuming Open Graph tags alone cover X’s preview requirements, when Twitter Card tags are a distinct set worth checking separately.
• Using an image that’s far outside a platform’s expected preview dimensions, risking an awkward crop or a rejected image entirely.
• Sharing a link publicly before checking its preview, discovering a broken result only after it’s already been seen by an audience.
• Forgetting that some platforms cache previews, meaning a fix might not visibly take effect immediately even after the underlying tags are corrected.
• Leaving og:description unset and letting the platform scrape an arbitrary snippet from the page body instead of a deliberately written summary.

How to do it with Social Preview Checker

Online Tool Store’s Social Preview Checker checks your page’s HTML entirely in your browser.

1. Open the Social Preview Checker tool.
2. Paste the page’s HTML source.
3. Review the rendered preview approximations for Facebook, LinkedIn, and X.
4. Fix any flagged missing or oversized tags before sharing the link publicly.

Because it works from pasted HTML, you can check a page before it’s even live, catching issues before anyone actually sees a broken preview.

Frequently asked questions

What’s the difference between Open Graph tags and Twitter Card tags?

Open Graph is a broader standard used by Facebook, LinkedIn, and several other platforms for link previews. Twitter Card tags are X’s own specific tag set, and while some Open Graph tags serve as fallbacks, having proper Twitter Card tags set directly gives more reliable control over how a link previews specifically on X.

Why does my preview image look cropped or cut off?

This usually means the image doesn’t match the platform’s expected aspect ratio or minimum dimensions, causing it to be cropped or scaled in a way that cuts off important content — checking the recommended image dimensions for og:image and matching them helps avoid this.

If I fix my page’s tags, will the preview update immediately everywhere it’s already been shared?

Not necessarily — some platforms cache link previews for a period of time, so a link already shared with a broken preview might continue showing the old version until the cache refreshes, which sometimes requires manually requesting a re-scrape through the platform’s own tools.

Final thought

A broken share preview is one of those problems you usually only discover after it’s already been seen — checking Open Graph and Twitter Card tags before sharing catches it while it’s still easy and consequence-free to fix.

Try the free Social Preview Checker tool