Why Your Link Preview Looks Broken on Slack, Discord, or X — SEO & SharingWhy Your Link Preview Looks Broken on Slack, Discord, or X — SEO & Sharing

A broken link preview is usually a delivery problem disguised as a design problem. The card crawler fetched the wrong page, could not retrieve the image, read incomplete metadata, or cached an earlier response. Re-exporting the same graphic will not fix any of those failures.

Start with one public canonical URL and one public 1200×630 image. Make that baseline work everywhere before adding platform-specific variants.

The minimum metadata block

<meta property="og:type" content="website">
<meta property="og:title" content="A specific page title">
<meta property="og:description" content="A useful one-sentence summary.">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/preview.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="A specific page title">
<meta name="twitter:description" content="A useful one-sentence summary.">
<meta name="twitter:image" content="https://example.com/preview.png">

Put these tags in the server-delivered HTML <head>. A crawler may not run the client-side JavaScript that changes metadata after load. Keep og:url, the canonical link, redirects, and the address you intend people to share aligned.

Platform cache and debugger table

PlatformPublished cache lifetimeRefresh mechanismCore tags and image guidanceOfficial inspector
SlackNo fixed metadata-cache lifetime is publicly guaranteed. Slack separately suppresses a repeated unfurl in the same conversation for one hour.Run the URL through Slack’s unfurl debugger; then post a fully qualified URL in a fresh test conversation.Classic unfurls read common Open Graph and X Card metadata. Use a public absolute image URL.Unfurl Debugger
DiscordNo public fixed lifetime for ordinary website embeds.Inspect the URL, then test a versioned image URL or a harmless query parameter if an old embed remains.Open Graph title, description, and image are the dependable baseline. Keep the image near a 1.91:1 social-card ratio.Embed Debugger
XNo current guaranteed refresh interval is published for website cards.Submit the URL to the Card Validator while signed in, then share the canonical URL in a test post.twitter:card=summary_large_image, title, description, and image. A 1200×630 PNG or JPEG fits the large-card shape well.Card Validator
FacebookNo fixed lifetime should be treated as a release schedule.Use “Scrape Again” in the Sharing Debugger after the page and image return the new public response.Open Graph tags; 1200×630 is a strong large-preview default. Declare width and height to help pre-cache the image.Sharing Debugger
LinkedInNo public fixed lifetime for every preview.Inspect the URL with Post Inspector, which fetches the latest metadata for testing.Open Graph title, description, image, and canonical page URL. Use an absolute publicly fetchable image.Post Inspector

“Not publicly guaranteed” is intentional. Cache behavior changes and can differ between the page metadata, the platform’s copied image, and an already-published message. Build a refresh process around the official inspector, not a countdown someone observed once.

Failure 1: the crawler cannot fetch the page

Test the exact shared URL without cookies. It must resolve through a short, intentional redirect chain to a 200 HTML response. Login walls, consent interstitials, geographic blocks, bot challenges, and accidental robots.txt rules can make a page visible to you and empty to the crawler.

Also check the response body. A single-page app may return a generic shell whose head describes the homepage, then replace it in JavaScript. People see the correct route while every crawler sees the same default card. Render per-route metadata on the server or publish static HTML for shareable pages.

Failure 2: the image URL is wrong

og:image and twitter:image should be absolute HTTPS URLs. Open the image in a private window. Expect a 200 response, an image content type such as image/png or image/jpeg, and real image bytes. An HTML error page returned with status 200 is still not an image.

Avoid signed URLs that expire, local development hosts, cookie-protected assets, redirect loops, and hotlink protection that blocks unfamiliar user agents. Keep the file comfortably sized; a 1200×630 compressed PNG or JPEG is usually plenty. If a photograph makes the PNG huge, use a high-quality JPEG. If the card contains type, flat color, and transparency, PNG is often cleaner.

Failure 3: the crop destroys the message

Platforms render cards at different widths and sometimes crop. Keep the logo, headline, and important product image away from the outer edges. Test the image at phone width; fine text that looks elegant on a 1200-pixel canvas may be unreadable when the card is 320 pixels wide.

A standalone transparent logo is rarely a strong social image. It can disappear on an unexpected background or occupy a tiny part of the card. Put the mark on a deliberate plate, add a short page-specific message, and use contrast that survives both light and dark interfaces.

Failure 4: the platform still shows the old card

First confirm that the live HTML and image actually changed. Then submit the page to the platform inspector. If the page metadata is current but the copied image is stale, publish the new image under a versioned filename such as preview-2026-08.png and update the tag. A new asset URL is clearer than fighting an opaque CDN cache.

Adding a random query string to the page is useful for diagnosis because it creates a distinct shared URL, but it is not the ideal permanent fix. It fragments analytics and can create multiple preview identities. Keep the canonical page stable and version the image when the creative changes.

A ten-minute debugging order

  1. Open the shared URL in a private browser and confirm the final status is 200.
  2. View the raw HTML source and find one title, description, canonical, og:url, and image set.
  3. Open the image URL directly and verify status, content type, dimensions, file size, and no authentication.
  4. Confirm the canonical host does not bounce through a loop between www and the apex.
  5. Run the exact page URL through the platform’s official inspector.
  6. If only the image stays stale, publish a versioned image filename and inspect again.
  7. Post in a new test conversation or private draft rather than judging an already-cached message.

Once the baseline works, generate page-specific cards with the same delivery contract. Consistent metadata, public assets, stable canonical URLs, and an explicit cache-busting strategy prevent far more broken previews than another round of graphic tweaks.

Frequently asked questions

Why does a shared link still show the old image?

Social platforms cache page metadata and image URLs. Publish a versioned image URL, confirm the live HTML, and use the platform inspection tool when one is available.

Do social crawlers run JavaScript?

Do not rely on it. Put the title, description, and image tags in the server-delivered head so a crawler can read them without executing client code.

What image size is a reliable Open Graph default?

A 1200 by 630 pixel image is a practical default, but keep essential content away from the edges because preview crops vary.

Do it now

OG Image Generator Website Screenshot OG Generator Logo Maker

Sources

Formats The Complete Favicon Size Cheat Sheet for 2026 5 min · Jan 7, 2026 Formats SVG vs PNG: Which Format Should Your Website Actually Use? 5 min · May 15, 2026