You shipped a page, pasted the link into Slack or X, and the preview is blank, stretched, or shows the wrong image. It happens to everyone. The good news: link previews fail for a small set of predictable reasons, and almost all of them are quick to fix once you know what to look for.

Here's how to diagnose the problem and get a clean preview every time.

The top reasons link previews break

1. There's no og:image at all

Many frameworks render a <title> and <meta name="description"> but never set Open Graph tags. Without og:image, platforms either show nothing or fall back to whatever image they can scrape from the page, which is usually a logo or the first random asset they find. View source on your page (not the rendered DOM, the raw HTML) and search for og:image. If it isn't there, that's your answer.

2. The image URL is relative, not absolute

This is the single most common subtle bug. Open Graph scrapers do not run in the context of your page, so a relative path means nothing to them:

<!-- Broken: scrapers can't resolve this -->
<meta property="og:image" content="/images/preview.png" />

<!-- Correct: a full, absolute URL -->
<meta property="og:image" content="https://example.com/images/preview.png" />

Always use the full https:// URL including the domain. The same rule applies to og:url.

3. The image is too big (or too slow)

Some platforms skip images that are too large or take too long to download. Keep your og:image under 5 MB, and realistically much smaller. A 1200x630 PNG or JPG should be a few hundred KB at most. If you're exporting a huge uncompressed PNG, switch to JPG or compress it. Also make sure the image actually loads fast and isn't behind a slow redirect chain.

4. The platform cached an old version

You fixed the tags, but the preview still shows the old image. That's caching. Facebook, LinkedIn, and others store the first version they scraped and won't re-fetch on their own. You have to force a re-scrape (more on that below). This is why a "broken" preview often isn't broken anymore, you're just looking at a stale cache.

5. Wrong dimensions or aspect ratio

If your image is the wrong shape, platforms crop it, letterbox it, or fall back to a small square thumbnail instead of the large card. Use the right size for the look you want:

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

The 1200x630 Open Graph default covers most cases. For X's large summary card, make sure twitter:card is set to summary_large_image, otherwise you get a tiny thumbnail no matter how good your image is.

6. The image is auth-gated or blocked

If your og:image lives behind a login, a signed URL that expires, a private CDN bucket, or a robots.txt / bot-blocking rule, the scraper gets a 403 or 404 and shows nothing. The image must be publicly fetchable by an anonymous request. Test it: open the image URL in a private/incognito window with no cookies. If you can't see it there, neither can the scraper.

The minimal meta tags that work

Put these in your page <head>. This is the smallest set that reliably produces a large card across platforms:

<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 the Open Graph tags for most fields, so you usually only need to add twitter:card. The twitter:image line is optional but harmless if you want to be explicit.

The fix checklist

Run through this in order, top to bottom:

og:image exists in the raw HTML source.
The URL is absolute (https://yourdomain.com/...), not relative.
The image is publicly accessible with no login, expiring token, or bot block. Verify in incognito.
The file is reasonable in size (under 5 MB, ideally a few hundred KB) and is PNG or JPG.
The dimensions are right (1200x630 is the safe default; 16:9 for X large cards).
twitter:card is set to summary_large_image.
You re-scraped so the platform fetches the new version.

Preview your tags before you publish

You don't have to publish first and debug later. Paste your page's <head> (or just your title, description, and image URL) into the free OG image preview and checker and you'll see exactly how your card renders across Open Graph, X, Facebook, and LinkedIn — plus a validation report that flags the exact problems above, like a relative og:image URL or an image that's too small. It runs entirely in your browser, and nothing is uploaded.

Re-scrape with the platform debuggers

When you change tags, the platform won't notice until you tell it to look again. Use the official debuggers, they show you exactly what the scraper sees and let you force a refresh:

Facebook Sharing Debugger for Facebook and most Open Graph behavior. Paste your URL and click "Scrape Again."
LinkedIn Post Inspector for LinkedIn previews.
X / Twitter picks up changes on its own, but it can lag, so give it a little time after re-scraping the others.

These tools also surface errors like "image too small," timeouts, or unreachable URLs, which usually points straight at the real problem. Slack and Discord cache too, but they typically refresh within a few minutes or when a new unique URL is shared.

Don't have a good image to begin with?

Sometimes the preview isn't technically broken, it just looks bad because there's no purpose-built share image. You can generate a clean, correctly sized Open Graph image in your browser, no signup and nothing uploaded, then drop the absolute URL into your og:image tag.

Open the editor to create a 1200x630 image in a couple of minutes, browse ready-made templates for a head start, or read more guides on the blog.

Fix the tags, re-scrape, and your next paste will look exactly the way you want.