web页面分享让浏览器抓取标题/描述摘要/缩略图

[heycqing]

web页面如何做到在浏览器中分享可以浏览器抓取标题/描述摘要/缩略图

实现以下的效果:

使用元信息 标签

1.1

常用的元信息：

    <title>标题名</title>
    <meta name='description' content="描述摘要"> 

标题：浏览器会解析到 <title> 标签会自动获取web页面的标题
描述：描述摘要，很奇怪的是即使你在 <meta name='description' content="......."> 标签上写了这样的格式，浏览器在分享时都不会抓取
缩略图：浏览器在分享时会自动抓取第一张图片。 [这和在旧版本的微信页面中分享是只能抓取第一张大于等于 300 * 300的图片]

测试页面: 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
测试结果：

结论：可以获取到完整的标题，描述摘要，缩略图。

网页在微信中打开并分享，情况如何以及解决方法

理论上网页在微信中打开并分享情况应该是和普通浏览器是一样的，因为微信内置的浏览器就是基于X5内核的QQ浏览器，但是微信团队2017年在微信开发文档中说明了不允许开发者自定义分享链接，要基于微信的JSSDK接口开发。

如图：

很早之前，开发者是可以在页面通过隐藏300*300的图片让微信来获取缩略图，同时也可以获取到描述信息和标题，但是现在已经失效。

在微信客户端打开同样的网页【 wx_share_2.html】，然后分享给朋友，是如下图一样的：

这和在普通浏览器中打开网页并分享给朋友是完全不一样的。

鉴于这种情况，前端想单独赋予网页能在微信端开发并分享的能力是没有的，可以通过配合后端来联调微信的 JSSDK分享接口 来实现。