实现分享出去的URL链接预览图片、标题和描述

睡醒想钱钱
6,703 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 22 天，点击查看活动详情

分享一条url链接到其他app平台。例如飞书上、Twitter、Facebook等平台上。分享的链接会出现图片，标题，描述等内容。如下所示

要是分享的链接展示的图片是一张引人注目的图片，比如黑丝，这不得吸引多少用户点击进来。相比一条冷冰冰的url，就像下面这样，谁知道分享的是什么东西，丝毫没有点击的欲望好不好。

怎么让链接上有图片，描述，和标题的？

在分享出去的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" />

可这仅仅使得该链接的点击率变高了，用户量变高是从何而来的。因为在分享出去的页面中会有个引导用户点击安装app的按钮。

用户点击该按钮后，会自动判断用户手机里是否已经安装了该app，如果已经安装app，就会打开app，并且自动在app里调起指向的页面。
如果用户没有安装app，那么就会自动引导用户到应用商店里去安装app。当用户安装app之后并且登录之后，就会自动调起指向的页面

怎么实现这个自动判断并跳转的行为的？

「这里用到的是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。

什么是OneLink

那么，到底什么是OneLink™呢？
简单来说OneLink可以通过单一链接，自动识别设备系统（安卓／iOS）完成跳转，将用户导向Google Play，App Store，Windows Phone Store，或任意指定的落地页URL。同时，由于与**「深度链接」（deeplink）和「延迟深度链接」（deferred deeplink）的「深度整合」**，OneLink还可以轻松实现将新老用户导入特定的推广页面，大大提升广告效果。

深度链接和延迟深度链接是什么？

「深度链接的表现」：当用户安装了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：代表想要传递的参数

既然OneLink这么腻害，如何快速配置并生成一条OneLink呢？

重点关注怎么将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的
bingobingo.onelink.me/115925328?p…
点击这条链接的 用户将打开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页面。
bingobingo.onelink.me/115925328?p…

af_ios_url和af_android_url使用场景

以电商为例，假设广告主已经在OneLink模版中选择跳转至对应商店，但在某个新年广告系列推广活动中，广告主希望用户先来到新年促销详情的落地页，以便传递更丰富的信息，再由落地页导向商店。
这个时候，可以通过添加两个简单的参数来覆写，af_ios_url和af_android_url参数。

注意事项

  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上而引起的问题。

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