根本原因是社交平台爬虫只识别open graph的meta标签而非img标签，必须配置og:title、og:description、og:image三个标签，且og:image需为可公开访问的绝对https地址、尺寸合规、无跨域问题。
为什么发到微信/微博的链接不显示预期图片
根本原因是社交平台爬虫不读你网页里的 <img>，只认特定的 <meta> 标签。没配对的 og:image 或尺寸/路径不对，卡片图就 fallback 成默认缩略图或空白。
常见错误现象：og:image 指向相对路径（如 ./thumb.jpg），但爬虫不会执行 JS 或按当前页面 base URL 解析；或者图片返回 404、跨域被拒、尺寸小于 300×300 像素。
- 必须用绝对 URL（
https://example.com/images/card.jpg），不能是相对路径或协议相对路径（//example.com/...） - 图片宽高比建议 1.91:1（如 1200×630），微信支持但更宽容，微博要求最小 300×300，最大 5MB
- 加
og:image:width和og:image:height可减少爬虫重试次数
必须写的三个 Open Graph meta 标签
微信、微博、QQ、Facebook 等主流平台都依赖 Open Graph 协议。只写 og:image 不够，缺了 og:title 和 og:description，卡片可能不渲染图或显示异常。
<meta property="og:title" content="文章标题"><meta property="og:description" content="一句话摘要，别超 200 字"><meta property="og:image" content="https://example.com/images/card.jpg"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630">
注意：og:image 的值必须是可公开访问的静态资源 URL，不能带 session 参数或需登录才能看的地址；如果用了 CDN，确保该域名已配置 CORS（尤其微博爬虫会校验）。
微信内置浏览器的特殊处理
微信自己有一套 twitter:card 兼容逻辑，但优先读 og:image。真正容易踩坑的是：微信安卓版对 HTTPS 图片证书有强校验，HTTP 或自签名证书的图一律不加载。
- 微信调试建议用
https://debugmm.qq.com/?forcex5=true强制启用 X5 内核，并在「网页开发者工具」里看 network 面板是否成功拉取了og:image地址 - 避免使用 WebP 格式——部分旧版微信不支持，fallback 到 JPG/PNG 更稳
- 如果卡片图始终不更新，不是缓存问题，而是微信服务端缓存了
og:imageURL 的响应头（比如Cache-Control: max-age=86400），临时改 URL 后缀（如card.jpg?v=2）才生效
如何快速验证卡片图是否生效
别靠反复发链接测试。直接用平台提供的调试工具抓实时解析结果：
- 微信：用「微信公众平台」→「公众号设置」→「JS 接口安全域名」旁的「网页调试」工具（需登录公众号后台）
- 微博：访问
https://open.weibo.com/tools/debug，粘贴 URL 查看解析出的og:image是否可访问、状态码是否 200 - 通用检查：在浏览器打开网页源码，Ctrl+F 搜
og:image，确认标签存在且content值是完整 HTTPS 地址
最常被忽略的一点：服务器返回的 HTML 必须是 UTF-8 编码且无 BOM，否则某些爬虫解析 <meta> 时会截断或乱码，导致 og:image 被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
