前端通过url直接获取图片_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相关参数：

1. 1168916328，是每一个 OneLink 都有的自己唯一 OneLink ID
2. pid和is_retargeting 题提供给运营在appsflyer查看相关数据统计报表的参数
3. 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. 注意事项

1. 我们在onelink写的应用内的调起页的链接必须用encodeURIComponent解码一下。

2. <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删掉。

canonical标签是一种告诉搜索引擎您要在搜索结果中显示哪个版本的URL的方法。使用canonical标签可以防止由于相同（或非常相似）或“重复”内容出现在多个URL上而引起的问题。

3. af_dp这个参数里的链接是要带有协议的如：【bigolive（域名）://article?url=/CNT/15664895/news939964.html&newstype=1】

完美。测试通过，成功上线

傍晚6点，收拾东西，准备下班。

产品经理缓缓走过来。

产品经理：阳光啊，你有女朋友吗？

我（啊？心跳加速，难道要给我介绍对象了吗，开心到起飞）：我没有呢！

产品经理：啊，好啊，那好啊，那你今晚加下班吧，我还有另一个需求给你。

我:….

tmd c!

参考文献：

1. 【SEO优化：聊聊页面中rel =“canonical”和og:url标签属性】www.jiangweishan.com/article/seo…

2. 【The Open Graph protocol】ogp.me/

3. 【萨瓦迪卡，OneLink™了解一下？】kknews.cc/zh-my/news/…

4. 【AppLinking快问快答】developer.huawei.com/consumer/cn…

5. 【关于appsflyer的deeplink使用体验】zhuanlan.zhihu.com/p/88466945

6. 【OneLink平台归因、跳转、深度链接】blog.csdn.net/lizhong2008…

7. 【关于appsflyer的deeplink使用体验】zhuanlan.zhihu.com/p/88466945