Microbrowsers are everywhere. But what do we know about them?

Fig. 1. Preview the same page in iMessage (left), Hangouts and WhatsApp (right)

If you mention any URL in a tweet, on a Slack channel, in Telegram or WhatsApp – the link will expand in the preview. It gives a rough idea of ​​what a real web page looks like.

Previewing has become so commonplace that we hardly pay attention to how it works. But this is a powerful tool to attract a new audience. Perhaps it is even more important than search engine optimization. Unfortunately, most web analytics systems do not see this traffic and cannot show how microbrowsers interact with your site.

Here are the basic facts about microbrowsers that every web developer should know.

1. What is a microbrowser? How is it different from a “normal” browser?

We are all familiar with major browsers such as Firefox, Safari, Chrome, Edge, Internet Explorer, and Opera. Not to mention the many new browsers on the Chromium engine, but with unique features or an interface, such as Samsung Internet or Brave.

Microbrowsers are a class of user agents that also follow links to sites, parse HTML, and interact with the user. But they have limited parsing capabilities for HTML, and especially for rendering. There is no interactive user interaction for the displayed site. Rather, it is purely a representation: you need to hint to the user what is on the other side of the URL.

Link preview window generation is not a new concept. Facebook and Twitter have been doing this for almost a decade. At that time, the function was almost exclusively with them. Marketing departments handed out tasks to use various microdata – Twitter Cards and Open Graph annotations for Facebook. Soon, LinkedIn also included the Open Graph and OEmbed tags to generate previews.

Over time, group chats and other collaboration tools became more popular – and they began to copy some functions from large social networks. In particular, in recent years we have seen the spread of the function of expanding links on chat platforms. In order not to reinvent the wheel, to create a preview, all platforms are looking for existing microdata.

But what data to use? How should this be arranged? It turns out that each platform behaves a little differently, presenting information with some differences from others, as shown in Fig. 1.

2. If microbrowsers are everywhere, then why can’t I see them in analytic reports?

Traffic from microbrowsers is easy to overlook. There are several reasons for this.

Firstly, microbrowsers do not execute JavaScript and do not accept cookies. Block

Finally, many platforms, including Facebook Messenger and Hangouts, request preview layouts through centralized services. This distinguishes them from WhatsApp and iMessage, where each user receives their own requests. With a centralized approach, you will receive only one request, which can combine the requests of thousands of users.

3. Probably microbrowsers are more important than googlobot

Everyone knows the importance of being well indexed by search engines so that our websites are visited by their crawlers, such as googlebot. These bots are a source of vitality for generating leads and attracting new users.

But the real treasure for marketers is word of mouth. Conversations with friends or colleagues, where you recommend a product, a clothing brand or share news. This is the most valuable type of marketing.

Last year, collecting data for visual status report on the internet, we found a very pronounced pattern that manifests itself strongly during the US holiday season. From Thanksgiving to Black Friday, link exchange speeds skyrocketed. The reason is that people in group chats shared links and discounts on goods.

We scaled down and normalized statistics by time of day. So you can evaluate the daily audience of word of mouth and the frequency of link exchange. It’s probably not going to be shocking that at Slack we exchange links from Monday to Friday, and WhatsApp is used all week. In addition, WhatsApp is most often used during so-called “breaks,” such as lunch or late afternoon, when the children are already asleep.


Fig. 2. Exchange links in WhatsApp and Slack

Although link previews are becoming more common, there are two factors to consider that affect user behavior:

• Users are skeptical of the links they receive in SMS and chat. They are afraid of phishing and do not follow the link blindly, but seek additional confirmation of the value of the content. This is why most platforms use page previews, highlighting URLs heavily.

  

• Scrolling. I’m sure you came across group chats with hundreds of unread messages that you quickly scroll to catch up with the conversation. With this behavior, it's easy to miss the links, and the preview gives a brief summary with information on how important or not it is to go to this URL.

  
  Fig. 3. Squeeze Nielsen Norman Group research in the preview window

  
  Fig. 4. An example of how attractive a product from an online store might look like. The preview window displays color options, price and product rating

4. Microbrowsers are not real browsers (they just pretend)

As I already mentioned, the microbrowser pretends to be a real browser, sending the correct HTTP headers, and often showing someone else's user agent string. However, it is important for web developers to know some of the features of their work.

Firstly, microbrowsers are trying to protect user privacy. The user is not going to visit your site yet. Moreover, he is shown a preview from a private chat window. Despite the fact that your brand and website are mentioned, the confidentiality of the conversation should be strictly respected.

For this reason, all microbrowsers:

• Ignore JavaScript - so your React application will not work;
• Ignore all cookies - so your A / B tests are also useless;
• some will follow the redirects, but after a few seconds they will quickly fly out by timeout and abandon attempts to deploy the link;
• do not wait refererwhen the user opens the link in a full browser. In fact, it will look like “direct” traffic, as if the user manually entered the URL into the address bar.

Secondly, microbrowsers have a very small brain and, most likely, not the most advanced network algorithm. Most full-fledged browsers use a tokenizer to parse HTML markup, and send requests to the network stack asynchronously. Moreover, before sending the async request, browsers will nevertheless conduct some analysis of the necessary resources.

Judging by our experiments, most microbrowsers use HTML to parse HTML parsers. forwhile requesting resources. This is normal for fast Wi-Fi, but can cause problems on an unstable connection.

For example, iMessage will first detect and download all favicons all images , and , and only later decides what to draw from this.

Now you understand where the traffic goes.

Many sites still broadcast favicons in five or more sizes. This means that iMessage will download all favicons regardless of size, and then will not use them if it decides to display the image instead.

For this reason, meta markup is gaining importance. The lighter the content, the higher the likelihood that it will appear on the user's screen.

5. Markup matters

Since microbrowsers are primitive, it’s important to make good markup. Here are some good strategies:

• It’s already 2020, one favicon is enough. Delete all other links and .
• Judging by our observations, most often microbrowsers understand Open Graph tags. If the OG and Twitter Card tags are missing, then the default seosh description is used . But since it is often filled with meaningless phrases for search engine optimization, people will not understand anything.

  

• Write sensible text in description.
• Specify up to three images in . Most platforms download only the first, but some (in particular, iMessage) try to create a collage.

  
  Fig. 5: Amazon tries to recognize the user-agent of microbrowsers, because of which text from the meta tag description often gets into the preview

• Use

• No need to sniff user agent to hide tags . Some sites, such as Amazon, do this so that the corresponding microdata is visible only to Facebook / Twitter. But this can cause problems for some microbrowsers that do not adhere to the same user agent convention. As a result, the user will see only a simple link without a normal preview.
• Previews are a great place to tell the story of your product or summarize your ideas.

Summary

As more of our conversations take place in group chats and Slack channels, link previews are an important way to attract new users. Unfortunately, not all websites provide good and convincing previews (and now that you know what to look for, you will not be able to see the bad examples - sorry).

To help people decide to follow the link and visit your site, you need to register annotations with microdata on the pages. What's even better, we can transmit beautiful visual stories through microbrowsers.