最近同事在做公司官网，需要把网页分享给好友。在文章详情页面分享出来还正常，但是不能阻止的是，用户在列表页就直接点击分享按钮了，此时分享出来的内容就不是那么友好了。
首先，描述信息里面的文字，是网页的title 标签和 body里面的文字组成的，如图，很不友好。
其次，列表页分享出来的缩略图片，永远都是第一篇文章里面的图片。
这对于一个列表页分享来说，不能准确地传达出分享出去的意思，受众用户根本不知道是个什么意思。所以决定改一改。
先来改描述文字：
- 既然包含了title里面的内容，能不能直接把title该长一点呢？改成我们需要的固定的描述信息。看起来是可行的，不过实际操作下来，分享出来的标题也会跟着变，标题和描述都去获取title 标签的内容，显示一致也不友好。
- 既然有取body里面的内容，我们能不能利用一个隐藏的标签来放我们需要的描述信息呢，比如：
<div style="display:none">
<span>这是描述信息</span>
</div>
<div style="visibility:hidden;width=1;height=1;">
<span>这是描述信息</span>
</div>
这两种方法都试过了，还是不行，达不到效果。
3. 最后想了想，既然是描述信息，会不会跟meta 标签里面的描述信息有关哦，不妨试试看呢。于是就加上了下面的代码，最后一试，果然可以。
<meta name="description" content="这里是描述信息">
改好了描述信息，再来改那个小图片的问题：
- 同样用刚才的方法，想试试看meta 里面有没有可以加图片的信息，发现好像没有。
- 后来搜索了一下，QQ获取的是body里的第一张满足>300*300的图片，所以可以设置要分享图片放在body里的第一张。 既然是这样，那就按照上面的隐藏的方式来做一个图片吧，默认就用来喂给QQ分享了。
<div style="display:none">
<img src="./new_img.png">
</div>
至此，分享的问题就完美解决了。最后的效果就如下：
