社交平台不读取<img>标签而依赖<meta>标签，因Open Graph协议要求og:image为HTTPS绝对URL、尺寸≥1200×630、格式JPG/PNG、支持CORS，且需用官方工具强制刷新缓存。
为什么分享链接没显示缩略图
社交平台（微信、微博、Facebook、Twitter）抓取页面缩略图时，不读取 <img> 标签，而是依赖特定的 <meta> 标签。没加或写错标签，就只能显示默认图标或空白。
必须用 og:image 且路径要绝对
Open Graph 协议是主流平台通用的标准，og:image 是唯一被广泛识别的缩略图字段：
-
content值必须是完整 URL（含https://），相对路径（如/images/thumb.jpg）会被忽略 - 推荐尺寸至少
1200×630像素，宽高比 1.91:1；小图可能被压缩模糊或裁剪 - 图片格式优先用
.jpg或.png，避免.webp（部分平台不支持） - 服务器需允许跨域访问：图片响应头必须包含
Access-Control-Allow-Origin: *，否则 Facebook 等会拒用
示例写法：
<meta property="og:image" content="https://example.com/images/share-thumb.jpg">
微信公众号和微博额外需要 twitter:image 吗
不需要。微信（包括朋友圈）和微博主要依赖 og:image，但有两点容易漏：
立即学习“前端免费学习笔记（深入）”；
- 微信内置浏览器缓存极强——改了
og:image后，需用「微信开发者工具」或「[微信调试工具](https://developers.weixin.qq.com/cgi-bin/redirectforward?target=https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index)」强制刷新缓存 - 微博对图片大小敏感：超过
5MB会被静默忽略，建议压缩到200KB以内 -
twitter:image仅影响 Twitter/X，若不运营该平台可不加；加的话必须配twitter:card（如summary_large_image）才生效
如何验证缩略图是否生效
别靠手动发链接测试，平台缓存会导致结果滞后：
- Facebook：用 Sharing Debugger 输入 URL，点「Scrape Again」
- Twitter：用 Card Validator，注意它只认
twitter:标签 - 微信：必须用官方调试工具，普通手机预览不可靠
- 所有平台都要求图片 URL 可直接在浏览器中打开并显示正常，404 或重定向都会失败
最常被忽略的是图片 HTTP 状态码和 CORS 头——哪怕 URL 能打开，返回 302 重定向或缺 Access-Control-Allow-Origin，缩略图照样不出现。
