DEV Community

Ajit Kumar
Ajit Kumar

Posted on

Fixing Social Preview Images: Understanding Meta Tags, Correct Paths, and Cache Busting

#webdev #seo #website #socialmedia

If you’ve ever updated your site’s og:image or twitter:image meta tags and wondered why Twitter, LinkedIn, Discord, or Facebook still show your old preview image, you’re not alone. Social sharing cards can feel frustratingly sticky—sometimes taking days to update.

The good news? There are clear reasons for this behavior and proven fixes that save hours of debugging.

This post walks you through:

  • How social preview images actually work
  • Correct image paths (especially if using a /public folder)
  • Why social platforms keep showing deleted images
  • How to effectively force a refresh (cache busting)
  • Debugging tools that help you verify updates instantly

1. How Social Preview Images Work

Social platforms use metadata to generate link previews. The two most common tags are:

<meta property="og:image" content="https://example.com/og-image.png" />
<meta name="twitter:image" content="https://example.com/twitter-card.png" />
Enter fullscreen mode Exit fullscreen mode

When someone shares a link, the social platform fetches these tags once, downloads the image, and then caches it internally.

This means:

  • Even if you replace the image file
  • Or delete the image
  • Or redeploy your site

…the cached version may still appear.

2. Correct Image Paths (Especially for /public folders)

Most frameworks (Next.js, React, Nuxt, SvelteKit, etc.) treat /public as the web root.

Example structure:

/public
    og-image.png
    twitter.png
Enter fullscreen mode Exit fullscreen mode

Accessible at:

https://yourdomain.com/og-image.png
https://yourdomain.com/twitter.png
Enter fullscreen mode Exit fullscreen mode

Do not include /public in your URL. Everything in /public is automatically served from the site root.

3. Why Deleted Images Still Appear

You might think deleting or replacing the image on the server should instantly update things.

Not really.

Reason: Social platforms aggressively cache previews

Each major platform has its own cache rules:

Platform Typical Cache Duration
Facebook Up to 30 days
LinkedIn Days to weeks
Twitter (X) Unknown; often days
Discord 7 days
Slack Days

These caches are server-side, not browser-side. Clearing your browser cache does nothing.

4. The Fix: Manual Cache Refresh (Platform Tools)

Facebook / LinkedIn / Slack

Uses the Open Graph cache.

Tool:
https://developers.facebook.com/tools/debug/

Steps:

  1. Enter URL
  2. Click Scrape Again (do it 2–3 times)

Twitter (X)

Tool:
https://cards-dev.twitter.com/validator

Steps:

  1. Enter URL
  2. Click Preview Card

Twitter will re-fetch metadata automatically.

Discord

No manual tool. The fastest option:

  • Change the filename
  • Or add a version query (cache busting)

5. Cache Busting: The Most Reliable Fix

Even with debugging tools, caches sometimes remain stubborn.

Cache-busting ensures platforms are forced to fetch a new file.

Option A — Change the File Name 

og-image-v2.png
twitter-card-v3.png
Enter fullscreen mode Exit fullscreen mode

Update your meta tags:

<meta property="og:image" content="https://yourdomain.com/og-image-v2.png" />
Enter fullscreen mode Exit fullscreen mode

Option B — Add a Query String (Recommended) 

https://yourdomain.com/og-image.png?v=2
Enter fullscreen mode Exit fullscreen mode

Meta tag:

<meta property="og:image" content="https://yourdomain.com/og-image.png?v=2" />
<meta name="twitter:image" content="https://yourdomain.com/twitter-card.png?v=5" />
Enter fullscreen mode Exit fullscreen mode

Why this works

Social platforms treat any URL with a different query string as a completely new resource, even if the base filename is the same.

This is the fastest, cleanest cache-busting method.

6. Verify Your Tags Are Working

You can confirm whether social platforms are reading the correct values.

1. Inspect Your Page Source

Ensure meta tags are present in the HTML (not gated behind hydration or client-side JS).

2. Use cURL or fetch

To verify server output:

curl -L https://yourdomain.com | grep og:image
Enter fullscreen mode Exit fullscreen mode

3. Use Social Debuggers Again

After modifying, run URLs through the debugger tools to confirm.

7. Best Practices to Save Time in the Future

  • Always use versioned URLs for social images.
  • Keep social images in a dedicated folder like /public/meta/.
  • Use high-contrast, minimal branding so it looks good in preview sizes.
  • Avoid reusing filenames—make updates obvious.
  • Avoid relying on client-side rendering for meta tags; SSR/HTML matters.

Conclusion

If social platforms are still showing old preview images, the issue is almost always caching, not hosting.
By using correct paths, understanding how caching works, and applying cache-busting techniques, you can ensure your updated preview images appear immediately everywhere.

This workflow will save you hours of guessing and give you confidence the next time you publish a page or update your brand assets.

Top comments (0)