专栏首页前端之旅「译」无处不在的微浏览器

「译」无处不在的微浏览器

最近对交互设计方面比较感兴趣,关注了 Medium 的一些相关栏目,有很多文章虽然篇幅不长,但是讲的东西都是我们在使用 app 时经常接触到的,所以阅读这类文章我觉得是一个满足好奇心、增长知识的过程。这篇文章讲的恰好就是这种主题,如果注意观察,你会发现很多聊天 app 或者购物 app 在分享链接的时候能够自动抓取并生成网页的预览图或文本说明,这样即使我们最终没有点击进入链接,也能大概知道网站内容。那么这种技术是怎么实现的呢?本文将会告诉你答案。

你已经在各个地方见到了它 —— Tweet 里提及到的网站的小型缩略预览图,Slack 频道或者 Whatsapp 群聊里详细的网站描述。

图 1:群聊中的预览提示我们实际网站大概的样子

这些链接的预览图对大多数人来说司空见惯,因此我们很少留意网站设计对生成的预览的影响。然而,在吸引新用户和增加参与度上,这些预览图可以说是最重要的 —— 可能比 SEO 还重要。而令人担忧的是,大多数网站分析对这种类型的流量视而不见,无法向你展示这些微浏览器是如何与你的网站进行交互的。

在这一年结束之际,我这里给出了五个关于微浏览器的重要问题和观点,这是每个 web 开发人员都应该了解的。

1 什么是微浏览器?它们与“普通的”浏览器有什么区别?

我们非常熟悉的主流浏览器有 Firefox,Safari,Chrome,Edge 和 Internet Explorer,更不用说还有众多使用 Chrominum 作为渲染引擎但提供了独特用户体验的新型浏览器,比如 Samsung Internet 或者 Brave

相反,微浏览器是一类同样可以访问网站链接、解析 HTML 并产生用户体验的 User-Agent,但和传统的浏览器不同,其 HTML 解析能力是有限的,并且渲染引擎非常集中。它打造的用户体验并不是交互式的,而是具象的 —— 为了告知用户 URL 的另一端到底有什么内容。

创建链接预览图并不是什么新鲜的事情。Facebook 和 Twitter 早在十多年前就开始在帖子中使用这个技术了。那也是最早的使用案例。营销团队创建了 backlog 条目从 Twitter Cards 和 Facebook 的 Open Graph 注释中采用不同的微数据。LinkedIn 同样采用了 Open GraphOEmbed 标签来帮助生成预览图。

随着群聊和其它协作工具变得越来越普遍,我们发现各个大型社交媒体平台出现了许多新的功能。特别是近年来,很多聊天平台采用了链接展开功能。各个平台并没有重新造轮子,而是寻找既存的微数据来生成预览。

但是应该使用哪些数据呢?这些数据又该怎么处理呢?各个平台的看法不一,这使得它们提供的信息有些许差异。

图片 2:同样是亚马逊网站的链接,在 iMessage(左),Hangouts 和 WhatsApp(右)中显示的信息有所不同。

2 既然微浏览器无处不在,为什么我在网站分析报告中没看到关于它的部分?

来自微浏览器的流量很容易被忽略,其中的原因有很多:

首先,来自微浏览器的页面请求不会运行 JavaScript,并且不接受 cookie.因此,谷歌分析的 <script> 代码块根本不会被执行,而所有的 cookie 也都会被渲染代理忽略掉。

其次,如果你打算基于 CDN 或 web 栈中的 HTTP 日志进行日志分析,你将看到相对较少的流量,这是假设你可以识别用户代理字符串的情况。因为部分微浏览器会伪装成真实的浏览器,还有一些则会伪装成 Facebook 或 twitter。举个例子,iMessage 对所有这些请求都使用相同的用户代理字符串,这一点从 iOS 9 以来就没有更改过。

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) 
            AppleWebKit/601.2.4 (KHTML, like Gecko) 
            Version/9.0.1 Safari/601.2.4 
            facebookexternalhit/1.1  
            Facebot Twitterbot/1.0

最后一点,许多平台 —— 特别是 Facebook Messenger 和 Hangouts ,都采用集中服务来请求预览布局。这与 WhatsApp 和 iMessage 不同,对后者而言,一个用户会对应一个请求。而前者由于采用集中服务,所以你这边的 web 服务器只会看到一个请求,尽管这个请求背后代表的实际上是数千个用户。

3 微浏览器可能比 googlebot 更加重要

我们都知道搜索引擎抓取网页内容的重要性。googlebot 为潜在客户开发和发掘新用户提供了源源不断的动力。

然而,对于营销人员来说,真正发挥巨大作用的是用户群体的口口相传。比方说,你向朋友安利一档电视节目,一个品牌的衣服或者是分享一则新闻。这才是最有价值的营销方式。

去年,当我为 Cloudinary 的 视觉媒体现状报告 收集数据时,我发现在美国的节假日期间链接分享的频率非常突出。在感恩节期间,一直到黑色星期五,在群聊中交易分享的带动下,链接的分享率飞快增长。 缩小时间的范围(直至以一天为单位),我们可以看到每天的链接分享和口碑推荐都是有起有落的。我们在周一到周五期间主要通过 Slack 分享链接,而 WhatsApp 则是持续了整整一周,大多数人可能不会对这个结果感到特别惊讶。同样地,我们在“休息”时间 —— 比如午餐时间,或者是晚上孩子们都入睡后,最常用的也是 WhatsApp,

链接预览变得越来越普遍的同时,有两种用户行为是需要引起我们关注的:

  • 用户可能会怀疑通过 SMS 和其它聊天信息发送过来的链接,没有人想要误点钓鱼链接,因此他们会根据其它信息对网站做出判断,这也是为什么大多数的平台使用链接预览,同时也强调自己网站的域名。
  • 浏览。你一定有过这种体验:从会议或者是商场中走出来后,发现群聊多了 100 多条消息。在你不断滚动屏幕浏览聊天记录的时候,链接很容易被跳过。正因如此,用户希望链接的预览可以体现网站信息,从而判断这个链接是否有访问的必要。

图片 4:尼尔森诺曼集团在动态图片预览中总结研究成果。

图片 5:电商产品如何通过显示产品颜色、库存和价格呈现吸引用户的预览效果

4 微浏览器并不是真正的浏览器(只是看上去像那么回事)

正如我之前提到的,微浏览器通过发送正确的 HTTP 头以及伪造的用户代理字符串来伪装成真正的浏览器。不过,还有几点是 web 开发人员应该清楚的。

首先,微浏览器会设法保护用户的隐私。用户尚未决定要访问你的网站,并且更重要的是,他们目前正在开展的是一场私人的对话,也许对话会提及你的品牌或网站,但这不意味着你可以窃听他们的对话。

因此,所有的微浏览器:

  • 不会执行 JavaScript —— 这意味着你的交互应用不会正常运行
  • 忽略所有 cookie —— 这意味着你的 A/B 或者 red/green cookie 将会被忽略
  • 部分会跟随重定向,但几秒后就会超时并放弃拓展链接
  • 用户点击链接的时候不会有 referer: HTTP header。事实上,新用户将会被认为是“直接”流量 —— 就好像他们是通过键入 url 来访问网站的一样。

其次,微浏览器无法使用高级的网络算法。大多数传统的浏览器都能使用一个 tokenizer 来解析 HTML 标记并向网络栈发送异步请求。更有甚者会在发送异步请求之前对所需资源进行分析。

研究得知,大多数平台在解析 HTML 的时候只是使用一个改进的 for 循环,并且经常同步请求资源。如果网速够快,问题倒是不大,但是网速较差时,情况就不是那么乐观了。

例如,iMessage 在决定渲染什么之前会找出并加载所有的 <link rel="icon" > 网站图标,所有的 <meta property="og:image" 图片,以及所有的 <meta name="twitter:image:src"。很多网站会展示 5 种或更多的网站图标尺寸,这意味着 iMessage 将会下载所有尺寸的网站图标,但如果它决定渲染的是图片,那么这些下载的图标一个也不会被用到。

因此,meta 标记很重要。内容越轻量,被渲染的可能性越大。

5 标记很重要

既然微浏览器“头脑简单”,那么编写好的标记就很重要了。下面是一些不错的建议:

  • 都快 2020 年了,网站图标一个尺寸就够了。移除所有其它的 <link rel="shortcut icon"<link rel="icon" 引用。
  • 研究得知,最常见的用于预览的微数据标签是 Open Graph 标签。如果没有 OG 和 twitter card 标签,那么将使用默认的 SEO <meta name=“description”。然而,描述往往是没有实际意义的 SEO 优化词,让用户看到这些,毫无疑问是一种“伤眼”的行为。
  • 因此,描述文本应该足够清晰
  • 提供最多三个 <meta property="og:image" 图片。大多数平台只会加载第一个,有的平台(尤其是 iMessage)则会加载全部图片并将它们拼贴在一起。

图片 6:亚马逊使用用户代理检测,这导致许多链接预览使用的是用于描述的 meta 标签。

  • 使用 <meta property="og:video* 来达到渐进式(而不是流式)的视频体验。
  • 不要使用 UA sniffing 来隐藏 <meta> 标签。这会给使用不同伪装协议的微浏览器带来问题,结果就是链接失去预览效果。

总结

随着更多的对话发生在群聊和 Slack 频道,链接预览变得更加重要,用户会在进入你的网站之前就被预览吸引住。不幸的是,并不是所有的网站都提供了优秀且吸引人的预览效果。(由于你现在知道了这些,所以对预览效果差的网站也无法做到视而不见了 —— 对此我感到抱歉)。为了能够更快地吸引用户访问你的网站,我们需要确保自己网站的所有页面都用微数据进行了注释。更进一步说,如果我们可以结合这些页面的预览来创建一个可视化的网站摘要,那就可以说是锦上添花了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 操作系统学习笔记-8:线程

    首先回忆一下为什么会有进程 —— 在以前,程序是串行执行的,为了让多道程序并发执行,引入了进程。进程虽然显著提高了资源利用率和系统吞吐量,满足了并发的需求,但是...

    Chor
  • 如何用开源项目申请 JetBrains 产品的 license

    起因:一直以来敲代码的工具都是 Vscode,最近想试一试 WebStorm 了。

    Chor
  • 闭包和计数器

    之前想不通的一道题—–主要是不知道思路怎么来的,为何会想到用闭包。本来打算就将原博客转载过来,但是刚刚重新审视这道题的时候,好像看到了以前没有发现的东西,有种恍...

    Chor
  • 分分钟搭建MySQL Group Replication测试环境(r11笔记第82天)

    最近看了下MySQL 5.7中的闪亮特性Group Replication,也花了不少做了些测试,发现有些方面的表现确实不赖。当然要模拟这么一套环境还是需...

    jeanron100
  • 表——完整约束性规则(键)

    一 介绍 约束条件与数据类型的宽度一样,都是可选参数 作用:用于保证数据的完整性和一致性 主要分为: primary key (PK) 标识该字段为该表的...

    用户1214487
  • SpringBoot系列-- Mybatis配合AOP和注解实现动态数据源切换配置

    随着应用用户数量的增加,相应的并发请求的数量也会跟着不断增加,慢慢地,单个数据库已经没有办法满足我们频繁的数据库操作请求了。

    用户4143945
  • 全国首例候车亭AR广告:小S这样撩嗨众路人

    近日,全国首条候车亭AR广告案例刷爆了都市白领和广告汪的朋友圈。城会玩的爱奇艺在推广其“明星高食商网综“《姐姐好饿2》时,竟然把以鬼马精灵形象著称的节目主持人小...

    罗超频道
  • 【观察】谷歌走向毁灭之路?广告业务面临崩溃,“AI 为先”四面受敌

    新智元编译 【新智元导读】 本文作者在文中列出了谷歌走向崩溃的几点理由:广告收入削减、AI 为先的策略失效、来自Facebook和亚马逊的竞争威胁等等。一...

    新智元
  • 聊天机器人API Demo

    FHYC
  • JMM—详细总结

    Java并发的通信机制是通过共享内存实现的。线程之间共享程序的公共状态,线程通过读写内存中的公共状态进行隐式通讯。这对程序员是透明的,我们需要理解其工作机制,以...

    用户5325874

扫码关注云+社区

领取腾讯云代金券