移动端APP内嵌浏览器分享配置
在使用APP内嵌浏览器进行网页分享时,为了分享美观,大部分APP会自行进行卡片化处理。但各个APP生成卡片的逻辑稍有不同,在此稍作整理。
钉钉中的卡片链接由于微信分享条件严苛,本文不涉及微信分享的配置,如有需要,参阅微信开放文档。
这篇文章也有较为详细的步骤介绍。
手机QQ
手机QQ的分享配置有SDK、meta两种,但由于 QQ 不是业务的主要使用场景,使用 qq-js-sdk 显得代价过于高昂,使用meta
标签也能够起到同样的作用:
<meta itemprop="name" content="这是分享的标题" />
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png" />
<meta name="description" itemprop="description" content="这是要分享的内容" />
存在的问题是,meta方式无法对分享链接进行自定义,只能分享当前链接。
阿里系APP
钉钉、支付宝等阿里系APP支持基于Open Graph Data协议的分享配置策略,同样支持的APP还有Twitter、Facebook、Google+、Pinerest等,看起来是性价比非常高的配置,是非常值得写上的。
摘自钉钉开放平台文档:
钉钉会尝试抓取和分析聊天输入框中的链接的网页内容,并根据Open Graph Data协议提取其中的标签作为分享标签的内容。
Open Graph Data协议是一套Metatags的规格(以下简称OGP),用来标注你的页面,告诉我们你的网页快照。帮助社交app高效、准确的获取网页中核心的链接、标题、主图、正文摘要信息,使得该网页在社交分享中有更好的展现体验。
如果网页不支持OGP,那么基于算法和规则来提取网页中标题、主图、正文摘要,准确性无法做到100%,体验也不能充分保证。尤其是有部分页面html采用前端js渲染,而不是服务端渲染,会导致无法提取主图、正文摘要,链接卡片体验比较糟糕。
注意事项:Metatags必须在服务端渲染,不能由前端js渲染。原因是出于性能和体验考虑,链接转卡片服务不支持执行HTML中的js。
<!-- open graph data start -->
<meta property="og:title" content="Neal's Pandora's Box" />
<meta property="og:url" content="https://winzipsdo.github.io" />
<meta property="og:image" content="https://winzipsdo.github.io/share-img.jpg" />
<meta property="og:description" content="welcome to my page" />
<!-- open graph data end -->
可以对我的个人博客进行分享以查看分享效果(不含微信分享配置)。