web页面分享让浏览器抓取标题/描述摘要/缩略图
### web页面如何做到在浏览器中分享可以浏览器抓取标题/描述摘要/缩略图
实现以下的效果:
### 使用元信息 标签
#### 1.1
常用的元信息：
```
标题名
```
**标题**：浏览器会解析到 `` 标签会自动获取web页面的标题
**描述**：描述摘要，很奇怪的是即使你在 ` <meta name='description' content="......."> ` 标签上写了这样的格式，浏览器在分享时都不会抓取
**缩略图**：浏览器在分享时会自动抓取第一张图片。 [这和在旧版本的微信页面中分享是只能抓取第一张大于等于 300 * 300的图片]
测试页面: [wx_share.html](https://wusiqing.com/wx_share/wx_share.html)
测试结果:
结论：只能获取到标题和缩略图，但是不能获取到描述摘要。
#### 1.2
专属社交账号分享的元信息:
```
<meta property="og:type" content="website" />
<meta property="og:title" content="页面标题">
<meta property="og:description" content="描述信息">
<meta property="og:image" content="完整的图片链接路径">
<meta property="og:url" content="URL路径">
```
添加了以上的元信息之后，web页面在分享出去的时候，浏览器就可以完整抓取到标题，描述摘要，缩略图；
测试页面： [wx_share_2.html](https://wusiqing.com/wx_share/wx_share_2.html)
测试结果：
结论：可以获取到完整的标题，描述摘要，缩略图。
### 网页在微信中打开并分享，情况如何以及解决方法
理论上网页在微信中打开并分享情况应该是和普通浏览器是一样的，因为微信内置的浏览器就是基于X5内核的QQ浏览器，但是微信团队2017年在微信开发文档中说明了不允许开发者自定义分享链接，要基于微信的JSSDK接口开发。
如图：
很早之前，开发者是可以在页面通过隐藏300*300的图片让微信来获取缩略图，同时也可以获取到描述信息和标题，但是现在已经失效。
在微信客户端打开同样的网页【 [wx_share_2.html](https://wusiqing.com/wx_share/wx_share_2.html)】，然后分享给朋友，是如下图一样的：
这和在普通浏览器中打开网页并分享给朋友是完全不一样的。
鉴于这种情况，前端想单独赋予网页能在微信端开发并分享的能力是没有的，可以通过配合后端来联调微信的 `JSSDK分享接口` 来实现。
---
原始 Issue：[heycqing/blog#3](https://github.com/heycqing/blog/issues/3)</div>
</article>
</main>
<footer class="site-footer">
<span>© Cqing</span>
<a href="https://github.com/heycqing" target="_blank" rel="noopener">GitHub ↗</a>
<a href="/blog/rss.xml">RSS</a>
</footer>
<script>
(function(){
var btns=document.querySelectorAll('.dropdown-btn');
btns.forEach(function(btn){
btn.addEventListener('click',function(e){
e.stopPropagation();
var dd=btn.closest('.nav-dropdown');
var wasOpen=dd.classList.contains('open');
document.querySelectorAll('.nav-dropdown').forEach(function(d){d.classList.remove('open');});
if(!wasOpen)dd.classList.add('open');
});
});
document.addEventListener('click',function(){
document.querySelectorAll('.nav-dropdown').forEach(function(d){d.classList.remove('open');});
});
})();
</script>
</body>
</html>