Open Graph Protocol（开放图谱协议），简称 OG 协议。它是 Facebook公布的一种网页元信息（Meta Information）标记协议，属于 Meta Tag （Meta 标签）的范畴，是一种为社交分享而生的 Meta 标签，用于标准化网页中元数据的使用，使得社交媒体得以以丰富的“图形”对象来表示共享的页面内容。
Vue.prototype.$goToOpenApp = function (event) {
var weburl = window.location.href
var target = `bigolive://web?url=${encodeURIComponent(weburl)}`;
var url = `https://bigo.onelink.me/11455****28?pid=ActivityTemplate&is_retargeting=true&af_dp=${encodeURIComponent(target)}`;
window.open(url, '_blank');
}
Vue.prototype.$goToOpenApp = function (event) {
var weburl = window.location.href
var target = `bigolive://web?url=${encodeURIComponent(weburl)}`;
var url = `https://bigo.onelink.me/1168916328?pid=ActivityTemplate&is_retargeting=true&af_dp=${encodeURIComponent(target)}`;
window.open(url, '_blank');
}
1. 怎么让链接上有图片，描述，和标题的？
在分享出去的html页面上加上这一段代码，content的值写上你想要展示的内容
2. 为什么加上这段代码就可以实现分享链接的预览了呢？
像飞书、企业微信、WhatsApp、Twitter、Facebook 等社交软件，都会根据链接去抓取你给定 URL 的内容，以确定要包含哪些属性来进行共享展示。
而抓取的数据就是我们写的
og:tags来显式定义的属性。3. og是什么东东？
Open Graph Protocol（开放图谱协议），简称 OG 协议。它是 Facebook公布的一种网页元信息（Meta Information）标记协议，属于 Meta Tag （Meta 标签）的范畴，是一种为社交分享而生的 Meta 标签，用于标准化网页中元数据的使用，使得社交媒体得以以丰富的“图形”对象来表示共享的页面内容。后面其他社交app也纷纷效仿！所以其他app也可以实现这种功能。
当然，twitter也在基础之上做了拓展，所以我们需要添加下twitter拓展的meta头，让链接预览展示地更加好看
4. 怎么引导用户进入App、下载app的呢？
在分享出去的页面中我们设计了一个按钮。
用户点击该按钮后，会自动判断用户手机里是否已经安装了该app，如果已经安装app，就会打开app，并且自动在app里调起我们指向的页面。
如果用户没有安装app，那么就会自动引导用户到应用商店里去安装app。当用户安装app之后并且登录之后，就会自动调起我们指向的页面
5. 怎么实现这个自动判断并跳转的行为的？
这里用到的是appsflyer提供的onelink
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的协议样式如下：
8. 既然OneLink这么腻害，如何快速配置并生成一条OneLink呢？
关于配置相关，可以参考这篇文章
我们重点关注怎么将onelink引入代码中使用。使用如下所示：
这个就是我们配置好的onelink的
点击这条链接的 用户将打开app或者去到app商店，然后打开我们写好的target页面,实际上，这里我们写的target就是一个deeplink。
解释一下onelink相关参数：
除了这几个，其实还有其他参数：
其中af_ios_url和af_android_url可能会常用到，它们是用于当用户没安装app，并且不希望跳转去应用商店时使用的参数， 就可以跳转到af_ios_url或af_android_url指定的页面。例如：下面这条onelink，当用户没安装app时，并不会跳到应用商店，而是跳转到www.baidu.com页面。
9. af_ios_url和af_android_url使用场景
以电商为例，假设广告主已经在OneLink模版中选择跳转至对应商店，但在某个新年广告系列推广活动中，广告主希望用户先来到新年促销详情的落地页，以便传递更丰富的信息，再由落地页导向商店。
这个时候，可以通过添加两个简单的参数来覆写，af_ios_url和af_android_url参数。
10. 注意事项
我们在onelink写的应用内的调起页的链接必须用encodeURIComponent解码一下。
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />这条meta，实际上是一个canonical URL。canonical URL会导致facebook在抓取我们分享的链接的预览图、标题、描述的时候，会到这条meta声明的url里查找对应的预览图、标题、描述等。所以当我们分享的链接跟这条meta声明的url不一致时，就会出现显示数据不对的问题。
这条meta的作用其实就是利于seo，所以不考虑seo的话，考虑将这条meta删掉。
参考文献：
【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