问 :
在
微信 里向朋友分享网页链接时，总会看到一个可点击的包含链接相关信息的卡片，上面有链接内容的
标题、
描述 和
图片，这三者前端
能否 不借助其他工具自行设置呢？具体 如何在页面里写代码控制该页面在微信里被分享时显示的相关信息呢？
答 :
针对 从微信内部分享出去 的链接（具体操作为：浏览页面时，通过右上角 三个点 的菜单按钮，调出下方菜单，将页面分享出去）：
- 标题
title能
链接信息里，标题会自动获取该链接页面 <head> 标签内的 title 信息：
<title>文章标题/页面标题</title>- 图片
img能
链接信息右侧有一张缩略图，微信的机制是获取页面中第一张 300*300 以上的 可见图片：
- 图片大小在 300px*300px 以上，为了效果好，最好是正方形；
- 图片本身要是 可见 的，但是如果不想在页面中展示这张图片，可以在图片外层包一个 div，将其设置为隐藏。
<div style="display:none;">
<img src="share.png">
</div>- 描述
desc不能
链接信息标题下方是网页描述，这一块内容在微信里默认显示为网页的链接地址：
e.g. https://www.google.com/
并且无法通过前端人员自主在页面中编写 html，js 等修改，只能借助微信提供的 微信JS-SDK 才能实现对描述内容的自定义。具体 实现方法 请继续往下阅读。
PS：如果是在 QQ 里对网页进行分享的话，对于描述内容可以通过 <meta> 标签进行设置：
<meta name="description" content="在 QQ 里分享链接，链接的描述默认选用这个标签的 content 内容">问 :
如何使用微信提供的
JS-SDK 来自定义网页被分享时显示的信息（
标题、
描述 和
图片）？
答 :
官方说明文档：微信JS-SDK说明文档
按照官方的步骤做下来就可以，我整理的需要放在页面里的代码如下：
注意事项：
wx.config那里，需要一些敏感信息，由后端人员来计算输出最好，因此整个项目代码都是放在后端那里的；- 我将下面的代码放在
html中，这样的话后端可以在里面写代码，下面的{$variable}都是后端的变量；- 分享图标或者说分享链接要展示的图片地址，我使用相对地址不行，所以使用了绝对地址；
- 如果
wx.config信息啥的都没问题，但是浏览器 console 里没有 log 信息，可以尝试清空浏览器缓存。
<!-- index.html -->
<!-- 微信 JS-SDK -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '{$appId}', // 必填，公众号的唯一标识
timestamp: {$timestamp}, // 必填，生成签名的时间戳
nonceStr: '{$nonceStr}', // 必填，生成签名的随机串
signature: '{$signature}', // 必填，签名，见附录1
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function() {
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
console.log('weixin 验证成功');
// 分享到朋友圈
wx.onMenuShareTimeline({
title: '标题', // 分享标题
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '{$img_host}/path/to/share/image/share.png', // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
// 分享给朋友
wx.onMenuShareAppMessage({
title: '标题', // 分享标题
desc: '描述', // 分享描述
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '{$img_host}/path/to/share/image/share.png', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function() {
// 用户确认分享后执行的回调函数
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
// 分享到QQ
wx.onMenuShareQQ({
title: '标题', // 分享标题
desc: '描述', // 分享描述
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '{$img_host}/path/to/share/image/share.png', // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
// 分享到腾讯微博
wx.onMenuShareWeibo({
title: '标题', // 分享标题
desc: '描述', // 分享描述
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '{$img_host}/path/to/share/image/share.png', // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
// 分享到QQ空间
wx.onMenuShareQZone({
title: '标题', // 分享标题
desc: '描述', // 分享描述
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '{$img_host}/path/to/share/image/share.png', // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
});
wx.error(function(res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
console.log('weixin 验证失败');
console.log(res);
});
</script>问 :
那 qq 里分享网页呢？
标题、
描述 和
图片 怎么设置？
答 :
<meta itemprop="name" content="这是分享的标题"/>
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png" />
<meta name="description" itemprop="description" content="这是要分享的内容" />其他问题
问：直接在卡片上长按进行转发的话，缩略图信息会失效？
答：参考 微信分享给朋友的链接，再次被好友转发之后，分享链接的图标不见了，怎么解决？求赐教！
