Your OG Image Is Broken. Here Is How to Test and Fix It in 10 Minutes

You shared your project on LinkedIn. The preview shows a gray box with your cookie consent banner as the description. You try Twitter. Same thing. Slack strips the preview entirely. You look at your launch post and it looks like spam.

This happens to almost every solo builder at some point. The fix takes ten minutes once you know what to check. Here's the order.

Why link previews break

There are four common causes, in rough order of how often I see them:

1. The tags are missing entirely or have placeholder values
2. The image URL is relative, not absolute (e.g. /og.png instead of https://yoursite.com/og.png)
3. The tags are rendered by JavaScript after the page loads, so social crawlers never see them
4. The platform cached an old version and you need to manually clear it

Go through these in order. One of them is almost certainly your problem.

Step 1: Check what's actually in your HTML

Open your site, right-click, View Page Source (not Inspect Element, which shows the post-JavaScript version). Search for og:. You're looking for something like this:

<meta property="og:title" content="Your Project Name" />
<meta property="og:description" content="What it does in one line." />
<meta property="og:image" content="https://yoursite.com/og-image.png" />
<meta property="og:url" content="https://yoursite.com" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yoursite.com/og-image.png" />

If these tags aren't there at all, that's your problem. Go add them. If they're there but the values look wrong, that's also your problem.

Step 2: Check the image URL is absolute

This is the single most common fixable mistake. Your OG tag must point to a full URL starting with https://. Not /og-image.png. Not./public/og.png. The full absolute URL.

Wrong:

<meta property="og:image" content="/og-image.png" />

Right:

<meta property="og:image" content="https://yoursite.com/og-image.png" />

Social crawlers don't resolve relative URLs the way browsers do. They treat/og-image.png as a broken link and fall back to nothing.

Step 3: Check the image itself loads

Open the full image URL directly in a browser. Does it load? If you see a 404 or a permission error, the image isn't actually hosted where your tag says it is.

Common reasons the image doesn't load:

• The file was never deployed (check public/)
• The filename has a typo or different casing (OG-image.png vs og-image.png)
• The hosting provider blocks direct image access
• The file is behind authentication

Step 4: Check the image dimensions

Your OG image should be 1200x630 pixels for best results across all platforms. Some platforms will display smaller images, but 1200x630 is the standard that works everywhere. Anything smaller than 600x315 gets rejected by many social platforms.

File format: PNG or JPG. Not SVG. Not WebP (supported by some platforms but not all).

File size: under 5 MB, ideally under 1 MB.

Step 5: Check if tags are JavaScript-rendered

If you're using a client-side rendered React or Vue app, your OG tags might be injected by React Helmet or a similar library. That works for search engines sometimes but doesn't work for social crawlers at all. Facebook, Twitter, and LinkedIn don't execute JavaScript.

Fix: use server-side rendering (Next.js, Nuxt, Remix), static generation, or a pre-rendering service. If you're on a SPA and can't migrate, you can set up Cloudflare or similar to serve pre-rendered HTML to social crawlers.

Step 6: Clear the cache on each platform

Even after you fix the tags, social platforms will keep showing the broken preview for days or weeks because they cached it. You have to manually clear the cache on each platform. This is the step most people forget.

Tools that let you clear the cache:

• Facebook Sharing Debugger: developers.facebook.com/tools/debug. Paste your URL, click "Scrape Again."
• LinkedIn Post Inspector: linkedin.com/post-inspector. Paste your URL, click Inspect. Re-scrapes automatically.
• Twitter/X Card Validator: retired, but adding a query param like ?v=2 to your URL forces a fresh scrape.
• Slack / Discord / iMessage: these don't have public debuggers. They usually pick up changes within 24 hours. In the meantime, add a query param like ?v=fix to force a fresh fetch.

Step 7: Test with a real share

After clearing the cache, test by actually posting the link in a DM to yourself or a private channel. Don't rely on the debugger preview alone. See what real users will see.

Tools for testing

• opengraph.xyz - visual OG tag preview across multiple platforms at once
• metatags.io - shows how your tags render on Google, Facebook, Twitter, LinkedIn
• Facebook Sharing Debugger - the canonical way to force Facebook and Instagram to re-scrape

A minimum viable OG setup

Copy-paste this into the <head> of your homepage, update the values:

<meta property="og:title" content="Your Project" />
<meta property="og:description" content="One clear sentence." />
<meta property="og:image" content="https://yoursite.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://yoursite.com" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Project" />
<meta name="twitter:description" content="One clear sentence." />
<meta name="twitter:image" content="https://yoursite.com/og-image.png" />

How to never miss this again

Link previews are part of the Brand category in the eight launch categories. If you run a pre-launch audit that checks for OG tags and their values, you catch this before your launch post, not after. CalmLaunch does this automatically as part of its scan.

Common questions

Why does my preview work on one platform but not another?

Each platform scrapes independently and caches independently. If LinkedIn was the first to fetch your URL and you've since fixed your tags, LinkedIn still has the old version in its cache. Run the Post Inspector to force a refresh.

Can I use a different image per page?

Yes, and you should. Each page can override the default og:image tag. Next.js and most modern frameworks make this easy via per-page metadata.

What if I don't have an OG image yet?

Create one. 1200x630, simple design, text large enough to read at thumbnail size. Figma, Canva, or even a screenshot of your homepage with the product name overlaid works. Something is always better than nothing.

Do OG tags help SEO?

Indirectly. They help click-through rates from social media and chat apps, which drives traffic and engagement signals. They don't directly affect Google rankings, but they dramatically affect how many people actually click when your link gets shared.