微信分享带封面 Demo

只需加几个 meta 标签,分享链接就能显示标题+描述+封面

分享效果预览
封面
微信分享封面 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。

操作步骤
  1. 准备一张 正方形 封面图(建议 300×300 以上,不超过 5MB)
  2. 把图片上传到公网服务器,获取 HTTPS 链接
  3. 把上面的 4 行 meta 标签复制到页面 <head> 中,填上对应的内容
  4. 把页面部署到公网(本地 localhost 微信抓不到)
  5. 发送链接到微信好友 / 文件传输助手,等 1-2 秒看到卡片效果
不要 直接复制链接粘贴到聊天框——要点击"发送"让微信去爬取。微信有缓存,改了 OG 后等 10 分钟再试。
封面图要求
调试工具
常见问题

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

一定要 HTTPS 吗?

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