微信分享带封面 Demo

分享效果预览

微信分享封面 Demo

H5 页面在微信分享时带上封面图的方法

怎么做

在 HTML 的 <head> 中加入以下 4 行 meta 标签即可：

<!-- 分享标题 -->
<meta property="og:title" content="你的标题" />

<!-- 分享描述 -->
<meta property="og:description" content="你的描述" />

<!-- 封面图（最重要） -->
<meta property="og:image" content="https://xxx.com/cover.jpg" />

<!-- 分享类型 -->
<meta property="og:type" content="website" />

微信会自动抓取这些标签生成分享卡片。不需要写任何 JavaScript。

操作步骤

准备一张 正方形 封面图（建议 300×300 以上，不超过 5MB）
把图片上传到公网服务器，获取 HTTPS 链接
把上面的 4 行 meta 标签复制到页面 <head> 中，填上对应的内容
把页面部署到公网（本地 localhost 微信抓不到）
发送链接到微信好友 / 文件传输助手，等 1-2 秒看到卡片效果

不要直接复制链接粘贴到聊天框——要点击"发送"让微信去爬取。微信有缓存，改了 OG 后等 10 分钟再试。

封面图要求

格式：JPG / PNG
尺寸：300×300 以上（正方形）
大小：不超过 5MB
链接：必须 HTTPS（iOS 不支持 HTTP）
必须公网可访问，不能有登录验证

调试工具

标题 (og:title)

描述 (og:description)

封面图链接 (og:image)

常见问题

加了 OG 标签还是不显示封面？

页面部署到公网了吗？
og:image 是完整 HTTPS 链接吗？
图片超过 5MB 了吗？
你是"发送"链接还是"粘贴"链接？（要用发送）
微信有缓存，等 10 分钟或在链接后加 ?t=时间戳

一定要 HTTPS 吗？

是的。iOS 版微信只加载 HTTPS 图片，否则不显示封面。