根本原因是Open Graph标签必须置于<head>中且被社交平台爬虫直接解析到有效图片URL；常见问题包括相对路径、404、跨域CORS缺失、尺寸小于300×300、比例失衡、MIME类型错误等。
为什么分享到微信/微博/钉钉时图片不显示或显示错误
根本原因不是 HTML 写错了，而是 Open Graph 标签必须放在 <head> 中、且被社交平台爬虫（如微信的 MicroMessenger UA、Facebook 的 facebookexternalhit）抓取时能直接解析到有效图片 URL。常见问题包括：og:image 指向相对路径、404、跨域未配 CORS、图片尺寸小于 200×200 或比例严重失衡（如 1:3 或 5:1）、MIME 类型非 image/jpeg 或 image/png。
必须写的三个 Open Graph meta 标签
仅设置 og:image 不够，社交平台会降级 fallback 到页面其他图片甚至截屏。务必同时声明类型和 URL 协议：
<meta property="og:type" content="website"> <meta property="og:url" content="https://example.com/page"> <meta property="og:image" content="https://example.com/img/share.jpg">
其中 og:url 必须是绝对 URL，且与当前页面实际可访问地址一致（微信校验时会比对）。若页面支持 HTTPS，og:image 也必须用 HTTPS 地址，否则微信 iOS 端直接拒绝加载。
图片尺寸、格式与 CDN 缓存注意事项
微信要求 og:image 图片最小 300×300 像素，推荐 1200×630（宽高比 1.91:1）；微博接受 1:1 或 3:4，但过窄（如 100×1000）会被裁剪。以下要点容易被忽略：
立即学习“前端免费学习笔记（深入）”；
-
og:imageURL 必须返回Content-Type: image/jpeg（或png/webp），Nginx/Apache 需显式配置 MIME 类型，不能依赖文件扩展名 - CDN 缓存了 404 响应？用
curl -I https://example.com/img/share.jpg检查HTTP/2 200和Content-Type - 使用 WebP 格式时，确保服务端对微信 UA（
MicroMessenger）不返回 WebP —— 微信 Android 8.0.33 之前不支持 WebP 作为og:image - 避免 query 参数动态拼接图片，如
share.jpg?v=123：部分平台爬虫会去重缓存，导致更新后仍显示旧图
如何快速验证 og:image 是否生效
别等发到群里再试。直接用平台提供的调试工具：
- 微信：在「微信开发者工具」中打开「公众号网页调试」，粘贴 URL，查看「JS-SDK 签名」和「OpenGraph 信息」两栏
- Facebook：用 Sharing Debugger，输入 URL 后点「Scrape Again」，重点看
og:image下方的「Provided og:image could not be downloaded or is invalid」提示 - 微博：访问
https://open.weibo.com/tools/debug，注意它只识别weibo:card和weibo:image，但会 fallback 到og:image
如果调试工具里图片正常，但用户分享时仍不显示，大概率是业务域名未在对应平台完成认证（如微信公众号后台需绑定 JS 接口安全域名），或用户本地微信缓存了旧版页面 HTML。
