·7 min read·Rediate Team

How to Fix Broken Link Previews

You drop a link into Slack and get... nothing. A gray box. Or worse: an old image from three months ago that has nothing to do with the current page. Broken link previews are one of the most frustrating problems in web development because the cause can hide in a dozen different places.

This guide walks you through a systematic diagnostic process to find and fix the problem, no matter what platform is showing the broken preview.

Step 1: Check If OG Tags Exist

The very first thing to verify is whether your page actually has Open Graph meta tags in the HTML source. Open your page in a browser, right-click, and select View Page Source (not Inspect Element: that shows the DOM after JavaScript runs, which is not what crawlers see).

Search for og:title in the source. You should find something like:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short description." />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:url" content="https://example.com/page" />

If these tags are missing from the raw HTML source, that is your problem. Your framework is either not rendering them server-side, or they were never added.

Step 2: Verify the Image URL

Copy the URL from your og:image tag and paste it directly into a browser tab. Does the image load?

  • 404 error: The image path is wrong or the file does not exist at that URL. Fix the path.
  • 403 error: The image exists but is behind authentication or CORS restrictions. Crawlers cannot access it. Make the image publicly accessible.
  • Relative URL: If your og:image looks like /images/og.png instead of https://example.com/images/og.png, crawlers will not resolve it. Use an absolute URL.
  • HTTP (not HTTPS): Some platforms reject images served over plain HTTP. Always use HTTPS.

Step 3: Check Image Dimensions

Download your OG image and check its actual pixel dimensions. If it is smaller than 200 × 200 px, Facebook will ignore it entirely. If it is smaller than 300 × 157 px, X will not show a large card. The safe target is 1200 × 630 px. See our OG image size guide for exact specs per platform.

Step 4: Look for Client-Side Rendering Issues

This is the most common cause of broken previews in modern web apps. If you are using React, Vue, or Angular with client-side rendering (CSR), your OG tags may exist in your JavaScript code but are only injected into the DOM after the browser executes JavaScript.

Social media crawlers do not execute JavaScript. They see only the initial HTML response. This means:

  • React SPAs with react-helmet in CSR mode: tags are invisible to crawlers.
  • Next.js pages using useEffect to set meta tags: invisible to crawlers.
  • Any approach that depends on JS execution for meta tags: broken previews.

The fix: use server-side rendering (SSR), static site generation (SSG), or the metadata export in Next.js App Router. For full setup guidance, see our complete guide to Open Graph tags.

Step 5: Check for Caching

Social platforms cache link previews aggressively. Even after you fix your tags, the old (broken) preview may persist for hours or days. Here is how to force a refresh:

  • Facebook: Use the Sharing Debugger or our Facebook OG checker. Paste your URL and click "Scrape Again."
  • X (Twitter): The Twitter Card Validator has been deprecated. Use Rediate to check your Twitter cards. Posting the link in a new tweet will also trigger a fresh crawl.
  • LinkedIn: Use the Post Inspector or our LinkedIn OG checker. Paste your URL and click "Inspect."
  • Slack: Slack caches unfurls aggressively. You can sometimes force a re-fetch by appending a query parameter (e.g., ?v=2) to the URL.
  • Discord: Edit the message or re-post the link. Discord re-fetches on edit.

Step 6: Check for Redirects

If your URL redirects (e.g., http:// to https://, or example.com to www.example.com), some crawlers may not follow all redirects: or they may cache the intermediate response. Make sure your canonical URL (the one in og:url) resolves directly without redirects.

Step 7: Check robots.txt and Meta Robots

If your robots.txt blocks the crawler's user agent, or if your page has a <meta name="robots" content="noindex"> tag, some platforms will refuse to generate a preview. LinkedIn's crawler, in particular, respects robots.txt strictly.

Step 8: Validate Server Response Headers

Crawlers expect a 200 OK response with Content-Type: text/html. If your server returns a 301, 302, 403, 404, or 500 for the page URL, the preview will break. Check your server logs or use curl -I https://yoururl.com to verify.

Step 9: Check for Conflicting Tags

Some CMS platforms, plugins, or frameworks inject their own OG tags. If your page has two og:image tags, crawlers may pick the wrong one: or ignore both. Search your page source for duplicates and remove the extras.

Step 10: Use an Automated Audit Tool

Instead of manually checking all of the above, paste your URL into Rediate's free OG audit tool. It runs through every check listed here: missing tags, image issues, server response, crawlability: and gives you a score plus a prioritized list of fixes. It takes five seconds and catches issues you might miss manually.

Quick Reference: Common Symptoms and Fixes

Symptom Likely Cause Fix
No preview at all Missing OG tags or CSR-only rendering Add OG tags server-side
Wrong image Cached old preview or duplicate tags Purge cache; remove duplicate tags
Tiny thumbnail instead of large card Image too small or missing twitter:card Use 1200×630 image; add twitter:card
Image cropped badly Wrong aspect ratio (e.g., square) Redesign for 1.91:1 ratio
Old/stale preview Platform cache Use platform debug tools to force re-scrape
Preview works on Facebook, broken on X Missing twitter:card tag Add twitter:card = summary_large_image

Check your OG tags now

Free audit with score, social previews, and a prioritized fix list.