修复社交预览图片：了解 Meta Tags、正确路径和 Cache Busting

Source: Dev.to

社交预览图片的工作原理

元标签

当有人分享链接时，社交平台会 一次 获取这些标签，下载图片，然后在内部 缓存。这意味着即使你替换、删除或重新部署了图片，缓存的版本仍可能被显示。

正确的图片路径（尤其是 /public 文件夹）

示例结构

/public
    og-image.png
    twitter.png

这些文件会从站点根目录提供：

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

不要 在 URL 中加入 /public；/public 里的所有内容会自动在站点根目录可访问。

为什么已删除的图片仍会出现

原因：社交平台会积极缓存预览

这些缓存是 服务器端 的，而不是浏览器端的。清除浏览器缓存并不会起作用。

解决方案：手动刷新缓存（平台工具）

Facebook / LinkedIn / Slack

工具：

1. 输入 URL。
2. 点击 Scrape Again（重复 2–3 次）。

Twitter (X)

工具：

1. 输入 URL。
2. 点击 Preview Card —— Twitter 会自动重新获取元数据。

Discord

没有提供手动工具。最快的办法是：

• 更改文件名，或
• 添加版本查询字符串（缓存破坏）。

缓存破坏：最可靠的修复方式

方案 A — 更改文件名

将图片重命名（例如 og-image-v2.png），并相应更新元标签。

方案 B — 添加查询字符串（推荐）

或直接使用如下 URL：

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

原理：社交平台会把带有不同查询字符串的 URL 视为全新的资源，从而强制重新获取最新图片。

验证你的标签是否生效

1. 检查页面源码

确保元标签出现在原始 HTML 中（而不是后期由客户端 JavaScript 生成的）。

2. 使用 cURL 或 fetch

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

3. 再次使用社交调试工具

将 URL 通过平台专用的调试工具运行，确认已读取到更新后的标签。

未来节省时间的最佳实践

• 始终为社交图片使用 带版本号的 URL。
• 将社交图片存放在专用文件夹，如 /public/meta/。
• 选择高对比度、简约的品牌元素，使图片在预览尺寸下也清晰可见。
• 避免重复使用文件名；让更新一目了然。
• 在服务器端渲染（SSR/HTML）元标签，而不是依赖客户端渲染。

结论

如果社交平台仍显示旧的预览图片，几乎可以肯定是 缓存 问题，而不是托管问题。通过使用正确的路径、了解缓存机制并采用缓存破坏技术，你可以确保更新后的预览图片立即在各处生效。此工作流能为你节省大量猜测时间，让你在下次发布页面或更新品牌资源时更加自信。