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

更新日期: 2019-03-03阅读: 2.4k标签: 浏览器

你已经在各个地方见到了它 —— Tweet 里提及到的网站的小型缩略预览图,Slack 频道或者 Whatsapp 群聊里详细的网站描述。这些链接的预览图对大多数人来说司空见惯,因此我们很少留意网站设计对生成的预览的影响。然而,在吸引新用户和增加参与度上,这些预览图可以说是最重要的 —— 可能比 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 Graph 和 OEmbed 标签来帮助生成预览图。

<meta name="description" content="seo description long">
<meta name="keywords" content="seo keyword list">

<link rel="shortcut icon" href="favicon.ico" 
                          type="image/x-icon">
<link rel="icon" href="favicon_32.png" sizes="32x32">
<link rel="icon" href="favicon_48.png" sizes="48x48">
<link rel="icon" href="favicon_96.png" sizes="96x96">
<link rel="icon" href="favicon_144.png" sizes="144x144">

<meta property="og:title" content="Short title here" />
<meta property="og:description" content="shortish description" />
<meta name="twitter:title" content="Short title here">
<meta name="twitter:description" content="shortish description">

<meta property="og:image"
      content="https://res.cloudinary.com/.../hero-img.png" />

<meta name="twitter:image:src"
      content="https://res.cloudinary.com/.../hero-img.png">

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

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


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 微浏览器并不是真正的浏览器(只是看上去像那么回事)

正如我之前提到的,微浏览器通过发送正确的 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)则会加载全部图片并将它们拼贴在一起。
使用 <meta property="og:video* 来达到渐进式(而不是流式)的视频体验。
<meta property="og:type" content="video.other">
<meta property="og:video:url" 
                content="https://shoesbycolin.com/blue.mp4">
<meta property="og:video:secure_url" 
                content="https://shoesbycolin.com/blue.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="1280">
<meta property="og:video:height" content="720">
不要使用 UA sniffing 来隐藏 <meta> 标签。这会给使用不同伪装协议的微浏览器带来问题,结果就是链接失去预览效果。

总结

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

原文地址:Microbrowsers are Everywhere
原文作者: Colin Bendell
译者:Chor

链接: https://www.fly63.com/article/detial/2200

浏览器禁用了javascript,各种浏览器如何开启javascript的方法总汇

您的浏览器禁用了JS脚本运行,请启用该功能。怎么解除浏览器禁用js?这篇文章将总结整理各个浏览器如何开启、禁用javascript的方法总汇。

浏览器的回流与重绘 (Reflow & Repaint)

浏览器使用流式布局模型 (Flow Based Layout)。浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了Render Tree。有了RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上。

IE6浏览器有哪些常见的bug,以及解决IE6常用bug的方法

IE6不支持min-height,解决办法使用css hack,ol内li的序号全为1,不递增。解决方法:为li设置样式display: list-item;定位父元素overflow: auto;,包含position: relative;子元素,子元素高于父元素时会溢出。解决办法:

css重设样式_清除浏览器的默认样式

由于不同的浏览器默认的样式也不同,所以在网页开发前设置一个公用样式,来清除各个浏览器的默认样式,已达到做的网页在各个浏览器中达到统一。

浏览器访问一个网站所经历的步骤

浏览器访问网站的步骤:Chrome搜索自身的DNS缓存、读取本地HOST文件、浏览器发起一个DNS的一个系统调用、浏览器获得域名对应的IP地址后,发起HTTP三次握手、TCP/IP连接建立起来、服务器端接受到了这个请求、浏览器根据拿到的资源对页面进行渲染

一个新式的基于文本的浏览器 Browsh

Browsh是一个纯文本浏览器,可以运行在大多数的TTY终端环境和任何浏览器。目前,终端客户端比浏览器客户端更先进。终端客户端即时更新和交付,以便于体验新的功能,例如,你可以观看视频。

浏览器内核有哪些?主流浏览器的所使用的内核介绍

一般说的浏览器内核是指浏览器最重要的核心部分,RenderingEngine,翻译成中文大概意思就是“解释引擎”,我们一般称为浏览器内核。由于不同的内核各自有一套自己的渲染网页和解释页面代码的机制,所以就会有一些问题存在。

程序员眼中的浏览器是什么样的?IE:有本事你卸了我啊

主流浏览器之争从上个世纪开就开始,已经持续了很长的时间。人们都在笑话IE,纷纷转向其它浏览器。今天,我向大家分享一下针对IE的搞笑图片,只是逗乐而已,喝杯咖啡,坐下来慢慢享受吧。

精打细算浏览器空闲时间

有时候我们希望在浏览器中执行一些低优先级的任务,比如记录统计数据、做一些耗时的数据处理等,暂且将其称为后台任务。这些任务跟动画计算、合成帧、响应用户输入等高优先级的任务共享主线程

深入浏览器事件循环的本质

浏览器的事件循环,前端再熟悉不过了,每天都会接触的东西。但我以前一直都是死记硬背:事件任务队列分为macrotask和microtask,浏览器先从macrotask取出一个任务执行,再执行microtask内的所有任务,接着又去macrotask取出一个任务执行

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!