三脚猫

移动端APP内嵌浏览器分享配置

2019-08-14  本文已影响0人  DADFAD

在使用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 -->

可以对我的个人博客进行分享以查看分享效果(不含微信分享配置)。

参考资料

  1. 手机QQAPI-腾讯移动Web开发平台
  2. 钉钉开发文档
  3. 概述 | 微信开放文档
  4. Must-Have Social Meta Tags for Twitter, Google, Facebook, & More - Moz
  5. 微信和钉钉网页分享流程
上一篇下一篇

猜你喜欢

热点阅读