在微信中分享链接时显示图片,需根据场景配置不同参数。以下是分场景解决方案:
一、网页链接分享(H5页面)
1. 配置网页Meta标签
在微信内置浏览器中打开网页时,会自动抓取以下标签作为分享信息:
html
<meta property="og:title" content="标题(不超过50字)"> | |
<meta property="og:description" content="描述(不超过100字)"> | |
<meta property="og:image" content="https://example.com/image.jpg"> <!-- 图片需为绝对路径 --> | |
<meta property="og:url" content="https://example.com/page"> |
2. 图片要求
尺寸:建议 300x300px,微信会裁剪为正方形。
大小:不超过300KB,否则可能加载失败。
格式:JPG/PNG,无透明背景时优先用JPG。
3. 强制刷新缓存(可选)
若图片更新后未生效,可引入微信JS-SDK刷新:
javascript
wx.config({ | |
appId: '公众号AppID', | |
timestamp: '...', | |
nonceStr: '...', | |
signature: '...', | |
jsApiList: ['updateAppMessageShareData'] | |
}); | |
wx.ready(() => { | |
wx.updateAppMessageShareData({ | |
title: '新标题', | |
desc: '新描述', | |
link: 'https://example.com/page', | |
imgUrl: 'https://example.com/new-image.jpg' | |
}); | |
}); |
二、小程序分享
1. 页面分享配置
在小程序页面的 .js 文件中定义 onShareAppMessage:
javascript
Page({ | |
onShareAppMessage() { | |
return { | |
title: '分享标题', | |
path: '/pages/index/index', // 页面路径 | |
imageUrl: '/images/share.jpg' // 本地图片路径或网络URL | |
}; | |
} | |
}); |
2. 图片要求
本地图片:需放在小程序项目目录中(如 /images/share.jpg),大小建议小于100KB。
网络图片:需配置域名白名单(在小程序后台的「开发管理」→「开发设置」→「服务器域名」中添加)。
三、公众号文章分享
文章内图片:直接在公众号编辑器中插入图片,用户分享文章时会自动抓取。
外部链接分享:同网页链接配置,依赖目标网页的Meta标签。
四、常见问题
图片不显示
检查图片链接是否为HTTPS,且可公开访问。
确认图片尺寸和大小符合要求。
清除微信缓存或更换测试账号。
动态内容分享
使用服务端渲染或预生成静态页面,确保Meta标签与当前内容匹配。
诱导分享限制
避免使用“分享后解锁”等诱导性文案,否则可能被微信封禁。
总结
网页/H5:通过Meta标签和JS-SDK控制分享内容。
小程序:在 onShareAppMessage 中定义分享参数。
公众号:直接插入图片或配置外部链接Meta标签。
测试时建议使用微信开发者工具或不同账号,确保分享效果符合预期。