Social Media

OG Image & Link Preview Tester

See exactly how your link will look when someone shares it. Paste the HTML from your page's <head> — or just the meta tags — and this tool renders the card for Facebook, X, LinkedIn, Slack, and WhatsApp side by side, then audits every Open Graph tag: missing og:image, relative URLs, wrong aspect ratio, missing dimensions, and invalid twitter:card values. Your og:image is loaded and measured for real, so you find out about a 400×400 logo before your audience does.

Paste your markup above to render the link cards.

How to test your link preview

  1. Open your page, right-click, and choose View page source.
  2. Copy the <head> section — or just the lines containing og: and twitter: — and paste it above.
  3. Compare the five cards. Each one applies that platform's real truncation limits, so you can see where a long title gets clipped.
  4. Work through the audit. Anything marked with a cross will visibly break the card; warnings are things that make it worse than it needs to be.

What makes a good og:image

Use an absolute https URL, at least 1200 × 630 pixels, in roughly a 1.91:1 ratio — that is the shape every large card is cropped to, so anything squarer loses its top and bottom. Keep the file under about 1 MB, declare og:image:width and og:image:height so the very first share renders the picture instead of waiting for the crawler, and add og:image:alt for screen readers. Text in the image should sit well inside the centre, since the small thumbnail used by WhatsApp and Slack is a square crop.

Why can't I just paste a URL?

A browser is not allowed to download another website's HTML from a page like this one — the same-origin policy blocks it, which is exactly why every URL-based tester runs a server that fetches the page for you. This tool has no server, so nothing you paste is transmitted anywhere. The trade-off is one extra step: copy your source instead of typing a link. Your og:image is still loaded directly from its own host so its true dimensions can be measured.

When the preview still looks wrong

Platforms cache aggressively. If the tags here look right but the real share still shows the old picture, the card is coming from a cache: Facebook's Sharing Debugger, LinkedIn's Post Inspector, and X's card validator each have a re-scrape button that clears it. Slack and WhatsApp cache too, and generally clear within a day. A cache-busting query string on the image URL forces the issue immediately.

Why do I have to paste HTML instead of a URL?

Browsers block a page from downloading another website's HTML, so a tool with no server cannot fetch your URL. Every tester that accepts a link is running a server that fetches the page on your behalf. Pasting your source keeps everything on your own machine, and it also works for pages that are not published yet, behind a login, or on localhost.

What size should an og:image be?

1200 by 630 pixels is the standard, giving the 1.91:1 shape that large cards are cropped to. The practical minimum is 200 by 200, below which most platforms drop the image entirely, and anything smaller than 1200 wide will look soft on high-density screens. Keep the file under about 1 MB so slow crawlers do not time out.

My tags look right but the shared link still shows the old image. Why?

The platform has cached the old card. Facebook's Sharing Debugger, LinkedIn's Post Inspector, and X's card validator all have a re-scrape option that refreshes it immediately. Slack and WhatsApp clear their caches on their own, usually within a day, and adding a query string to the image URL forces a fresh fetch straight away.

Do I need twitter: tags if I already have Open Graph tags?

Mostly no — X falls back to og:title, og:description, and og:image when the matching twitter: tags are missing. The one worth adding is twitter:card set to summary_large_image, because that is what tells X to render the big edge-to-edge picture instead of a small square thumbnail.

Is my markup uploaded anywhere?

No. The HTML you paste is parsed by your own browser and never sent to a server. The only network request the page makes is for your og:image itself, which is loaded straight from its own host so its real pixel dimensions can be measured.

All Social Media tools →