产品经理:实现一下分享出去的URL链接预览图片、标题和描述
点击上方 前端阳光,关注公众号
回复加群,加入技术交流群交流群
产品经理:阳光啊,给项目添加个端外分享的功能吧!
我:分享一条url链接到其他app平台吗?
产品经理:我看竞品也有这个功能,它们添加了端外分享之后,平台的用户量暴增,是怎么回事呢?研究发现因为分享的url链接到其他平台之后会出现预览图和标题等,我觉得挺好的,我们把它给抄过来吧!
即分享一条url链接到其他app平台。例如飞书上、Twitter、Facebook等平台上。我分享的链接会出现图片,标题,描述等内容。如下所示
你想啊,要是分享的链接展示的图片是一张引人注目的图片,比如黑丝,这不得吸引多少用户点击进来啊。相比一条冷冰冰的url,就像下面这样,谁知道分享的是什么东西,丝毫没有点击的欲望好不好。
sigoyi~~
于是开始一天的捣鼓~~
怎么让链接上有图片,描述,和标题的?
在分享出去的html页面上加上这一段代码,content的值写上你想要展示的内容
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
为什么加上这段代码就可以实现分享链接的预览了呢?
像飞书、企业微信、WhatsApp、Twitter、Facebook 等社交软件,都会根据链接去抓取你给定 URL 的内容,以确定要包含哪些属性来进行共享展示。
而抓取的数据就是我们写的og:tags
来显式定义的属性。
og是什么东东?
Open Graph Protocol
(开放图谱协议),简称 OG 协议。它是 Facebook公布的一种网页元信息(Meta Information)标记协议,属于 Meta Tag (Meta 标签)的范畴,「是一种为社交分享而生的 Meta 标签」,「用于标准化网页中元数据的使用,使得社交媒体得以以丰富的“图形”对象来表示共享的页面内容」。
后面其他社交app也纷纷效仿!所以其他app也可以实现这种功能。
当然,推特也在基础之上做了拓展,所以我们需要添加下推特拓展的meta头,让链接预览展示地更加好看
<meta property="twitter:title" content="The Rock" />
<meta property="twitter:type" content="video.movie" />
<meta property="twitter:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="twitter:image" content="https://ia.media-imdb.com/images/rock.jpg" />
soga,可这仅仅使得该链接的点击率变高了,用户量变高是从何而来的。
因为在分享出去的页面中会有个引导用户点击安装app的按钮。
用户点击该按钮后,会自动判断用户手机里是否已经安装了该app,如果已经安装app,就会打开app,并且自动在app里调起我们指向的页面。
如果用户没有安装app,那么就会自动引导用户到应用商店里去安装app。当用户安装app之后并且登录之后,就会自动调起我们指向的页面
5. 怎么实现这个自动判断并跳转的行为的?
「这里用到的是appsflyer提供的onelink」
Vue.prototype.$goToOpenApp = function (event) {
var weburl = window.location.href
var target = `bigolive://web?url=${encodeURIComponent(weburl)}`;
var url = `https://bingobingo.onelink.me/115925328?pid=ActivityTemplate&is_retargeting=true&af_dp=${encodeURIComponent(target)}`;
window.open(url, '_blank');
}
appsflyer是一家源于以色列,提供「数据归因统计」的服务商,因为与多家平台(包括facebook)有合作关系,所以做境外投放尤其是facebook投放时需要监控下载活跃时会用到他家的服务。这里说的onelink就是经过他们加封装后的deeplink。
6. 什么是OneLink
那么,到底什么是OneLink™呢?
简单来说OneLink可以通过单一链接,自动识别设备系统(安卓/iOS)完成跳转,将用户导向Google Play,App Store,Windows Phone Store,或任意指定的落地页URL。同时,由于与「深度链接」(deeplink)和「延迟深度链接」(deferred deeplink)的「深度整合」,OneLink还可以轻松实现将新老用户导入特定的推广页面,大大提升广告效果。
7. 深度链接和延迟深度链接是什么?
「深度链接的表现」:当用户安装了app时,点击分享页的「打开app按钮」,这时会直接打开app,并跳转到对应的调起页面
「延迟深度链接的表现」 :当用户未安装app时,点击分享页的「打开app按钮」,OneLink会迅速识别用户设备类型,并将用户带到正确的应用商店。接下来「延迟深度链接」发挥作用,当新用户下载应用后,AppsFlyer会向设备实时传递包括相关的归因信息,以便App首次打开时自动显示与Campaign信息对应的页面。
顾名思义,「延迟深度链接」 就是延迟到用户安装完app之后再发挥「深度链接」的作用。
URL Scheme
是实现深度链接Deeplink兼容性最高、也最简单的一项方法,「原生App可以先向操作系统注册一个URL,其中Scheme的作用是从不同平台唤醒相应App」。
URL Scheme的协议样式如下:
Scheme://host:port/path?query
● Scheme:代表Scheme协议名称,可自定义
● host:代表Scheme作用的地址域
● port:代表该路径的端口号
● path:代表的是想要跳转的指定页面(路径)
● query:代表想要传递的参数
8. 既然OneLink这么腻害,如何快速配置并生成一条OneLink呢?
关于配置相关,可以参考这篇文章
https://blog.csdn.net/lizhong2008/article/details/117705767
我们重点关注怎么将onelink引入代码中使用。(一般来说,onelink的配置不是开发来配的)。使用如下所示:
Vue.prototype.$goToOpenApp = function (event) {
var weburl = window.location.href
var target = `bigolive://web?url=${encodeURIComponent(weburl)}`;
var url = `https://bingobingo.onelink.me/115925328?pid=ActivityTemplate&is_retargeting=true&af_dp=${encodeURIComponent(target)}`;
window.open(url, '_blank');
}
这个就是我们配置好的onelink的
https://bingobingo.onelink.me/115925328?pid=ActivityTemplate&is_retargeting=true&af_dp=${encodeURIComponent(target)}
点击这条链接的 用户将打开app或者去到app商店,然后打开我们写好的target页面,实际上,这里我们写的target就是一个deeplink。
解释一下onelink相关参数:
「1168916328」,是每一个 OneLink 都有的自己唯一 OneLink ID pid和is_retargeting 题提供给运营在appsflyer查看相关数据统计报表的参数 af_dp:把用户深度链接到某应用内活动的路径。
除了这几个,其实还有其他参数:
其中af_ios_url和af_android_url可能会常用到,它们是用于当用户没安装app,并且不希望跳转去应用商店时使用的参数, 就可以跳转到af_ios_url或af_android_url指定的页面。例如:下面这条onelink,当用户没安装app时,并不会跳到应用商店,而是跳转到www.baidu.com页面。
https://bingobingo.onelink.me/115925328?pid=ActivityTemplate&is_retargeting=true&af_dp=${encodeURIComponent(target)}&af_ios_url=${encodeURIComponent(https.www.baidu.com)}&af_android_url=${encodeURIComponent(https.www.baidu.com)}
9. af_ios_url和af_android_url使用场景
以电商为例,假设广告主已经在OneLink模版中选择跳转至对应商店,但在某个新年广告系列推广活动中,广告主希望用户先来到新年促销详情的落地页,以便传递更丰富的信息,再由落地页导向商店。
这个时候,可以通过添加两个简单的参数来覆写,af_ios_url和af_android_url参数。
10. 注意事项
我们在onelink写的应用内的调起页的链接必须用encodeURIComponent解码一下。
这条meta,实际上是一个
canonical URL
。
canonical URL会导致facebook在抓取我们分享的链接的预览图、标题、描述的时候,会到这条meta声明的url里查找对应的预览图、标题、描述等。所以当我们分享的链接跟这条meta声明的url不一致时,就会出现显示数据不对的问题。
这条meta的作用其实就是利于seo,所以不考虑seo的话,考虑将这条meta删掉。
❝「canonical」标签是一种告诉搜索引擎您要在搜索结果中显示哪个版本的URL的方法。使用canonical标签可以防止由于相同(或非常相似)或“重复”内容出现在多个URL上而引起的问题。
❞
af_dp这个参数里的链接是要带有协议的如:【bigolive(域名)://article?url=/CNT/15664895/news939964.html&newstype=1】
完美。测试通过,成功上线
傍晚6点,收拾东西,准备下班。
产品经理缓缓走过来。
产品经理:阳光啊,你有女朋友吗?
我(啊?心跳加速,难道要给我介绍对象了吗,开心到起飞):我没有呢!
产品经理:啊,好啊,那好啊,那你今晚加下班吧,我还有另一个需求给你。
我:....
tmd c!
参考文献:
【SEO优化:聊聊页面中rel =“canonical”和og:url标签属性】https://www.jiangweishan.com/article/seo20211118a3.html
【The Open Graph protocol】https://ogp.me/
【萨瓦迪卡,OneLink™了解一下?】https://kknews.cc/zh-my/news/3nybylg.html
【AppLinking快问快答】https://developer.huawei.com/consumer/cn/forum/topic/0201405011252010239?fid=0101271690375130218
【关于appsflyer的deeplink使用体验】https://zhuanlan.zhihu.com/p/88466945
【OneLink平台归因、跳转、深度链接】https://blog.csdn.net/lizhong2008/article/details/117705767
【关于appsflyer的deeplink使用体验】https://zhuanlan.zhihu.com/p/88466945
我组建了技术交流群,里面有很多 大佬,欢迎进来交流、学习、共建。回复 加群 即可。后台回复「电子书」即可免费获取 27本 精选的前端电子书!
“分享、点赞、在看” 支持一波👍