The worst time to discover your social card is broken is right after you hit publish, when the link is already bouncing around Slack, X, and LinkedIn looking blank or stretched. By then you are scrambling to re-scrape caches and apologizing in the thread. The fix is to flip the order: preview and validate your Open Graph image before you ship, not after.

This guide walks through that pre-publish workflow. You will check your tags locally with a free tool, then use the live platform debuggers only as a final confirmation once the page is public.

Preview your OG image before it goes live

Most "preview" advice assumes your page is already deployed, because the official debuggers need a live, public URL to scrape. That is a slow loop: deploy, paste, see it is wrong, edit, redeploy, re-scrape. You want to catch mistakes before any of that.

That is exactly what the new og image checker is for. You paste your page head markup, or just the meta tags, and it renders live card previews for every major platform side by side: Open Graph, Facebook, X, and LinkedIn. You see what your link will actually look like in a feed before a single visitor does.

Just as important, it runs a validation report against your tags and flags the problems that silently kill previews:

Relative image URLs instead of absolute https:// links (the single most common reason previews break).
Wrong dimensions or aspect ratio that will get cropped or downgraded to a tiny thumbnail.
Missing tags like og:image, og:title, or twitter:card.

And because FreeOGImage is 100% client-side, the og image checker is too. Nothing you paste is uploaded anywhere. The parsing and the previews all happen in your browser, so you can test unpublished, staging, or internal pages without exposing them to a third-party server. Test your tags first, then deploy with confidence.

What "test og tags" actually means

"Testing your tags" is really three separate questions, and a good checker answers all three at once:

Are the right tags present? A page can have a title tag and a description and still be missing every Open Graph tag. Platforms then guess, badly.
Are the values valid? An og:image that points to a relative path, an expired signed URL, or the wrong dimensions is worse than useless because it looks intentional.
Does the result look good? Even perfectly valid tags can produce an ugly card if the image is low-contrast, text-heavy at thumbnail size, or simply the wrong shape.

The first two are validation; the third is preview. Paste your markup into the og image checker and you get both in one pass, across all four platforms, before you commit anything.

The minimal tags the checker looks for

If you want to know what "good" looks like before you test, this is the smallest set that reliably produces a large card. Drop it into your page head:

<meta property="og:title" content="Your page title" />
<meta property="og:description" content="A short, compelling summary." />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:url" content="https://example.com/your-page" />
<meta property="og:type" content="website" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og-image.png" />

X reuses most of the Open Graph tags, so you mainly need to add twitter:card. For a full breakdown of which tags matter and why, see why your link preview looks broken.

Get the dimensions right before you test

A checker can tell you an image is the wrong size, but it is faster to start from the correct dimensions. Here is the short version; the full reference lives in the OG image size cheat sheet.

| Platform | Recommended size | Aspect ratio | | --- | --- | --- | | Open Graph (default) | 1200x630 | 1.91:1 | | Facebook | 1200x630 | 1.91:1 | | X / Twitter (summary_large_image) | up to 1600x900 (1200x675 also valid) | 16:9 | | LinkedIn | 1200x627 | ~1.91:1 | | Square | 1080x1080 | 1:1 |

Design for the wide 1200x630 frame, keep your important content centered, and a single image covers nearly everywhere your link gets shared. FreeOGImage exports at 2x, so a 1200x630 design comes out at 2400x1260, which stays crisp on high-DPI screens. Keep the file under 5 MB so scrapers do not skip it.

After you publish: the live re-scrape debuggers

Once your page is public, the official debuggers do two jobs the local checker cannot: they fetch the page exactly as the platform sees it, and they force the platform to refresh its cache. This matters because Facebook, LinkedIn, and others store the first version they scraped and will not re-fetch on their own.

Facebook Sharing Debugger covers Facebook and most general Open Graph behavior. Paste your live URL and click "Scrape Again" to bust the cache and re-fetch your tags.
LinkedIn Post Inspector does the same for LinkedIn previews. Run it after any tag change so LinkedIn picks up the new image instead of a stale one.
X / Twitter generally refreshes on its own, but it can lag, so give it a little time after you have re-scraped the others.

These tools also surface fetch-time errors, like an image that is too small, a timeout, or an unreachable URL, which usually points straight at the real problem. They are your post-publish confirmation. The og image checker is your pre-publish insurance, so you rarely need to re-scrape twice.

The pre-publish checklist

Run through this before you deploy, top to bottom:

Image designed at 1200x630 (or the right size for your target platform) with key content centered.
og:image set to an absolute https:// URL, never a relative path.
Image is publicly fetchable with no login, expiring token, or bot block. Verify in an incognito window.
File is reasonable in size (under 5 MB, ideally a few hundred KB) and is PNG or JPG.
Core tags present: og:title, og:description, og:image, og:url, og:type.
twitter:card set to summary_large_image.
Pasted into the og image checker and every platform preview looks right with a clean validation report.

If all seven pass, you can ship knowing the very first person to share your link will see the card you intended, not a blank rectangle. Then, after deploy, run the live debuggers once to confirm and refresh any caches.

Need a better image to test with?

Sometimes the tags are fine and the preview still looks weak, because there is no purpose-built share image behind it. You can fix that in a couple of minutes. Open the editor to build a clean, correctly sized card from the gradient mesh template, or browse templates for a head start. Everything is client-side: no signup, no watermark, nothing uploaded.

The workflow that never embarrasses you is simple: design the image, paste your tags into the og image checker to preview and validate your tags, fix anything it flags, then publish. Test first, ship once.

How to preview and test your Open Graph image before you publish