qq和微信内置浏览器不直接读取og:title、og:image等标准open graph标签，而是优先识别name="wx.share."和name="qq:share."系列meta标签；微信要求wx.share.img为https绝对路径、≥300×300px且允许跨域，qq兼容og标签但同样要求og:image可公开访问、无重定向、响应头含正确content-type。

QQ和微信内置浏览器不直接读取标准 Open Graph 标签（如 og:title、og:image），而是优先识别特定的 <meta> 标签。要准确控制分享卡片的标题、描述和缩略图，需在 HTML 中添加对应平台支持的 meta 字段。

微信分享卡片：用 name="wx.share" 系列 meta

微信 JS-SDK 虽支持自定义分享，但对普通网页（未接入 SDK 的静态页），其内置浏览器会 fallback 到以下 meta 标签：

• <meta name="wx.share.title" content="你想要的分享标题">
• <meta name="wx.share.desc" content="分享时显示的摘要文字">
• <meta name="wx.share.img" content="https://example.com/thumb.jpg">（必须为 HTTPS、尺寸建议 ≥ 300×300px，且服务器允许跨域引用）

注意：这些标签仅在微信 iOS 客户端（新版）及部分安卓版本中生效；Android 微信较旧版本仍可能回退到 og:title 或页面 <title></title>，所以建议同时保留 Open Graph 标签作为兜底。

QQ 分享卡片：依赖 name="qq:share" 和通用 og 标签

QQ 浏览器和 QQ 内置分享主要识别：

• <meta name="qq:share:title" content="QQ分享标题">
• <meta name="qq:share:description" content="QQ分享描述">
• <meta name="qq:share:image" content="https://example.com/qq-thumb.jpg">

同时，QQ 也兼容 Open Graph 协议，因此强烈建议同步写好：

wechat mp push 微信公众号图文生成与推送技能

支持AI生成符合公众号规范的图文，推送至草稿箱；兼容其他技能生成的图文/图片。通过向导扫码授权，支持多账号；无需暴露Secret密钥或配置IP白名单。

下载

• <meta property="og:title" content="标题">
• <meta property="og:description" content="描述">
• <meta property="og:image" content="https://example.com/og.jpg">
• <meta property="og:url" content="https://example.com/page">

确保 og:image 图片可被公开访问、响应头含 Content-Type: image/*，且无重定向或防盗链限制。

缩略图常见失效原因与检查要点

即使写了正确的 meta，缩略图仍不显示，通常卡在这几个环节：

• 图片 URL 是 HTTP 协议 → 微信/QQ 强制要求 HTTPS
• 图片返回 404、500 或重定向（如跳转到登录页）→ 分享时抓取失败
• 图片尺寸过小（微信推荐 ≥ 300×300，QQ 建议 ≥ 200×200）或比例严重失衡（如极细长图）
• 服务器未设置 Cross-Origin Resource Sharing (CORS) 头 → 微信内核可能拒绝加载
• 缓存问题：微信/QQ 会缓存首次抓取的分享信息，更新后可用微信开发者工具「清除缓存」或用新链接测试

验证与调试建议

发布前务必实测：

• 用 iPhone 微信「粘贴链接」到对话中预览，或使用微信开发者工具沙箱模拟
• 在 QQ 浏览器中打开网页 → 点击右上角「…」→「分享给好友」查看卡片效果
• 使用在线检测工具（如 opengraph.xyz）检查基础 og 标签是否被正常解析
• 服务端开启日志，观察分享抓取 UA（如 MQQBrowser/12.0、MicroMessenger）是否有图片请求记录

不复杂但容易忽略细节，把 meta 写全、图片配好、协议和权限设对，分享卡片就能稳定展示。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！