搜索

产品经理：实现一下分享出去的URL链接预览图片、标题和描述

前端阳光

共 4825字，需浏览 10分钟

 · 2022-04-07


点击上方 前端阳光，关注公众号

回复加群，加入技术交流群交流群

产品经理：阳光啊，给项目添加个端外分享的功能吧！

我：分享一条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，实际上是一个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】

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

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

产品经理缓缓走过来。

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

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

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

我:....

tmd c!

参考文献：

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

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

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

  4. 【AppLinking快问快答】https://developer.huawei.com/consumer/cn/forum/topic/0201405011252010239?fid=0101271690375130218

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

  6. 【OneLink平台归因、跳转、深度链接】https://blog.csdn.net/lizhong2008/article/details/117705767

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


技术交流群


我组建了技术交流群，里面有很多 大佬，欢迎进来交流、学习、共建。回复 加群 即可。后台回复「电子书」即可免费获取 27本 精选的前端电子书！



   “分享、点赞、在看” 支持一波👍


浏览 757
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
了解加密货币到加密货币的互换
1、什么是加密货币互换？加密货币到加密货币的互换是指以现行市场汇率将一种加密货币直接兑换为另一种加密货币。与需要法定货币存款和较长流程的传统交易所不同，加密货币到加密货币的互换可以无缝地促进交换。掉期在提高加密货币的流动性和效率方面发挥着重要作用。该功能使用户能够将他们的加密货币与钱包中的其他代币进
区块链头条
0
李彦宏：开源大模型不如闭源，后者会持续领先；周鸿祎：“开源不如闭源” 的言论是胡说八道
架构师大咖 架构师大咖，打造有价值的架构师交流平台。分享架构师干货、教程、课程、资讯。架构师大咖，每日推送。 公众号该公众号已被封禁0、李彦宏：开源大模型不如闭源，后者会持续领先当今
源码共读
0
用 Shader 实现旗帜飘扬动画效果
我觉得对于刚入门 3D 编程的朋友来说，如果能够完成代码创建模型数据->创建材质->编写Shader动画这一系列，想必会有满满的成就感。今天就用 Cocos Creator 的 utils.MeshUtils.createMesh 接口，带大家感受一下这个流程。这个流程不仅可以用于新手学
COCOS
2
【第129期】程序员的新宠：三款终端工具，让你告别Xshell！
概述 WindTerm：跨平台的SSH利器 首先介绍的是WindTerm，这是一款使用C语言开发的跨平台SSH客户端。它不仅完全免费，而且没有商业使用的限制。WindTerm支持SSH v2、Telnet、Raw Tcp等协议，而且性能出色，甚至超过了FinalShell和Electerm。功能
前端微服务
0
字节员工：35岁以后被裁员的，后来都走了哪条路？现在2-2，要不要利用最后一年拼命上个岸。
架构师大咖 架构师大咖，打造有价值的架构师交流平台。分享架构师干货、教程、课程、资讯。架构师大咖，每日推送。 公众号该公众号已被封禁在当今竞争激烈的职场环境中，年龄并不总是一个决定性
源码共读
0
互联网晚报 | ​大麦网已退款凤凰传奇演唱会“柱子票”；钟薛高再成被执行人；iPhone 16或取消实体音量键和电源键
大麦网回应凤凰传奇演唱会买到“柱子票”：已退票退款据报道，凤凰传奇2024巡回演唱会常州站演出结束的第二天，有网友称自己在大麦网买到“柱子票”，因为观看效果不佳，要求退款被拒。23日，记者从涉事网友处了解到，大麦方面给出了退款建议，但被其拒绝，“我希望平台退款加赔偿，并重视屡次出现的‘柱子票’问题。
产品刘
0
上班的时候，有一群摸鱼搭子非常重要...
上班的时候，有一群摸鱼搭子非常重要！一到上班时间，他们就从四面八方涌进群里冒泡...从八卦聊到股市、从职场聊到乌X兰局势，偶尔还会复读、相亲、battle...然后，下午6点钟准时消失不见...所以你要不要加入我们一起摸鱼？我们有北京、上海、深圳、广州、杭州、武汉、成都、南京等8个城市的摸鱼群，还有
产品经理日记
0
AI论文写作工具和生成器（一）
随着人工智能和大模型的迅猛发展，AI对研究人员和学生提供了极大的写作便利。本文将介绍市面上常用的AI论文写作工具，帮助你提高论文写作效率并遵循学术道德。请仅将AI论文生成器视为辅助参考手段，切勿直接挪用全文。XPaper AlXPaper AI是由点击式创作工具晓语台推出的一款论文写作生成平台，只需
IQ前端
0
周四002 瑞超：同样落寞的境遇——北雪平vs埃尔夫斯堡
上赛季最终排名联赛第9的北雪平本赛季伊始表现不佳，4轮战罢他们仅以1胜1平2负的战绩排在倒数第三，这支历史上曾夺得13次联赛冠军、6次杯赛冠军老牌劲旅，正如英格兰赛场上的一众百年俱乐部，在低谷中不断探索着出路。球队主教练安德烈亚斯·阿尔姆曾是AIK索尔纳及赫根队的主教练，他于今年年初刚刚拿起球队教鞭
产品与体验
0
雷军辟谣了！不是高考状元，卡里也没有冰冷的 40 亿
架构师大咖 架构师大咖，打造有价值的架构师交流平台。分享架构师干货、教程、课程、资讯。架构师大咖，每日推送。 公众号该公众号已被封禁最近很火的雷军简历，听说落魄时卡里只有冰冷的 40
源码共读
0
点赞
评论
收藏
分享

手机扫一扫分享

举报