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

Source: Dev.to

How Social Preview Images Work

Meta Tags

When someone shares a link, the social platform fetches these tags once, downloads the image, and then caches it internally. This means that even if you replace, delete, or redeploy the image, the cached version may still appear.

Correct Image Paths (Especially for /public folders)

Example Structure

/public
    og-image.png
    twitter.png

These files are served from the site root:

https://yourdomain.com/og-image.png
https://yourdomain.com/twitter.png

Do not include /public in the URL; everything inside /public is automatically available at the site root.

Why Deleted Images Still Appear

Reason: Social platforms aggressively cache previews

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

The Fix: Manual Cache Refresh (Platform Tools)

Facebook / LinkedIn / Slack

Tool:

1. Enter the URL.
2. Click Scrape Again (repeat 2–3 times).

Twitter (X)

Tool:

1. Enter the URL.
2. Click Preview Card – Twitter will re‑fetch the metadata automatically.

Discord

No manual tool is provided. The fastest options are:

• Change the filename, or
• Add a version query string (cache busting).

Cache Busting: The Most Reliable Fix

Option A — Change the File Name

Rename the image (e.g., og-image-v2.png) and update the meta tag accordingly.

Option B — Add a Query String (Recommended)

Or use the URL directly:

https://yourdomain.com/og-image.png?v=2

Why this works: Social platforms treat any URL with a different query string as a completely new resource, forcing them to fetch the fresh image.

Verify Your Tags Are Working

1. Inspect Your Page Source

Make sure the meta tags are present in the raw HTML (not generated later by client‑side JavaScript).

2. Use cURL or fetch

curl -L https://yourdomain.com | grep og:image

3. Use Social Debuggers Again

Run the URLs through the platform‑specific debugger tools to confirm the updated tags are being read.

Best Practices to Save Time in the Future

• Always use versioned URLs for social images.
• Store social images in a dedicated folder like /public/meta/.
• Choose high‑contrast, minimal branding so the image looks good at preview sizes.
• Avoid reusing filenames; make updates obvious.
• Render meta tags on the server (SSR/HTML) rather than relying on client‑side rendering.

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 saves you hours of guessing and gives you confidence the next time you publish a page or update your brand assets.