Хабрахабр

[Перевод] Микробраузеры повсюду. Но что мы о них знаем?


Рис. 1. Превью одной и той же страницы в iMessage (слева), Hangouts и WhatsApp (справа)

Оно даёт примерное представление, как выглядит настоящая веб-страница. Если упомянуть любой URL в твите, на Slack-канале, в Telegram или WhatsApp — ссылка развернётся в превью.

Но это мощнейшее средство привлечения новой аудитории. Предварительный просмотр стал настолько обычным делом, что мы почти не обращаем внимания, как он работает. К сожалению, большинство систем веб-аналитики не видят этот трафик и не могут показать, как микробраузеры взаимодействуют с вашим сайтом. Возможно, оно даже важнее, чем поисковая оптимизация.

Вот основные факты о микробраузерах, которые должен знать каждый веб-разработчик.

1. Что такое микробраузер? Чем он отличается от «обычного» браузера?

Мы все хорошо знакомы с основными браузерами, такими как Firefox, Safari, Chrome, Edge, Internet Explorer и Opera. Не говоря уже о многих новых браузерах на движке Chromium, но с уникальными функциями или интерфейсом, таких как Samsung Internet или Brave.

Но у них ограничены возможности по парсингу HTML, а особенно по рендерингу. Микробраузеры — это класс юзер-агентов, которые тоже ходят по ссылкам на сайты, анализируют HTML и взаимодействуют с пользователем. Скорее, это чисто репрезентация: нужно намекнуть пользователю, что же находится по ту сторону URL. Для отображаемого сайта не предусмотрено никакого интерактивного взаимодействия с пользователем.

Facebook и Twitter делают так почти десять лет. Генерация окошка с предварительным просмотром по ссылке — не новая концепция. Отделы маркетинга раздавали задания, чтобы использовать различные микроданные — аннотации Twitter Cards и Open Graph для Facebook. В то время функция была практически только у них. Вскоре 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">

Со временем всё популярнее становились групповые чаты и другие инструменты совместной работы — и они начали копировать некоторые функции у больших социальных сетей. В частности, в последние годы мы наблюдаем распространение на чат-платформах функции разворачивания ссылок. Чтобы не изобретать велосипед, для создания предварительного просмотра все платформы ищут уже существующие микроданные.

Как это должно быть устроено? Но какие данные использовать? Оказывается, каждая платформа ведёт себя немного по-разному, представляя информацию с некоторыми отличиями от других, как показано на рис. 1.

2. Если микробраузеры повсюду, то почему я не вижу их в аналитических отчётах?

Трафик от микробраузеров легко упустить из виду. Это происходит по ряду причин.

Блок <script> из Google Analytics не запустится и не выполнится. Во-первых, микробраузеры не выполняют JavaScript и не принимают куки. И агент рендеринга проигнорирует все куки.

Если вообще сможете распознать соответствующие user agent'ы. Во-вторых, если проанализировать HTTP-логи с сервера или у CDN, то вы увидите совсем небольшое количество запросов. Например, iMessage для всех запросов использует одну и ту же строку user-agent, и она не изменилась со времён iOS 9: Некоторые из них маскируются под реальные браузеры, а другие — под Facebook или Twitter.

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, где от каждого пользователя приходят свои запросы. При централизованном подходе вам придёт только один запрос, который может объединять запросы тысяч пользователей.

3. Вероятно, микробраузеры важнее, чем гуглобот

Все знают, как важно хорошо индексироваться в поисковых системах, чтобы наши веб-сайты посещали их краулеры, такие как googlebot. Эти боты являются источником жизненной силы для генерации лидов и привлечения новых пользователей.

Разговоры с друзьями или коллегами, где вы рекомендуете какой-то товар, бренд одежды или делитесь новостями. Но настоящее сокровище для маркетологов — это сарафанное радио. Это самый ценный вид маркетинга.

Начиная с Дня благодарения, вплоть до Чёрной пятницы, скорость обмена ссылками взлетела до небес. В прошлом году, собирая данные для отчёта о состоянии визуальных медиа в интернете, мы обнаружили очень явный паттерн, который сильно проявляется в течение сезона отпусков в США. Причина в том, что народ в групповых чатах делился ссылками и скидками на товары.

Так можно оценить ежедневную аудиторию сарафанного радио и частоту обмена ссылками. Мы уменьшили масштаб и нормализовали статистику по времени суток. Кроме того, WhatsApp чаще всего используется во время так называемых «перерывов», таких как обед или позднее вечернее время, когда дети уже уснули. Вероятно, не станет шоком тот факт, что в Slack мы обмениваемся ссылками с понедельника по пятницу, а WhatsApp используется всю неделю.

2.
Рис. Обмен ссылками в WhatsApp и Slack

Хотя предварительный просмотр ссылок становится всё более распространённым, необходимо учесть два фактора, которые влияют на поведение пользователей:

  • Пользователи скептически относятся к ссылкам, которые получают в SMS и чатах. Они боятся фишинга и не переходят слепо по ссылке, а ищут дополнительное подтверждение ценности содержимого. Вот почему большинство платформ используют предварительный просмотр страницы, крупно выделяя URL.

  • Прокрутка. Уверен, вам попадались групповые чаты с сотней непрочитанных сообщений, которые вы быстро прокручиваете, чтобы догнать разговор. При таком поведении легко упустить ссылки, а предварительный просмотр даёт краткое резюме с информацией, насколько важно или нет перейти по этому URL.

    3.
    Рис. Выжимка исследования Nielsen Norman Group в окне предварительного просмотра

    4.
    Рис. В окне предварительного просмотра отображаются варианты цвета, цена и рейтинг товара Пример, как привлекательно может выглядеть товар из интернет-магазина.

4. Микробраузеры — не настоящие браузеры (они просто притворяются)

Как я уже упоминал, микробраузер выдаёт себя за настоящий браузер, отправляя правильные заголовки HTTP, а зачастую демонстрируя чужую строку user agent. Тем не менее, веб-разработчикам важно знать некоторые особенности их работы.

Пользователь пока не собирается посетить ваш сайт. Во-первых, микробраузеры пытаются защитить приватность пользователя. Несмотря на то, что упоминается ваш бренд и сайт, конфиденциальность разговора должна строго соблюдаться. Более того, ему показывают превью из окна приватного чата.

По этой причине все микробраузеры:

  • игнорируют JavaScript — так что ваше приложение React не будет работать;
  • игнорируют все куки-файлы — так что ваши А/B-тесты тоже без толку;
  • некоторые последуют редиректам, но через несколько секунд быстро вылетят по таймауту и откажутся от попыток развернуть ссылку;
  • не ждите referer, когда пользователь откроет ссылку в полноценном браузере. Фактически, это будет выглядеть как «прямой» трафик, словно пользователь вручную ввёл URL в адресную строку.

Во-вторых, у микробраузеров очень маленький мозг и, скорее всего, не самый продвинутый сетевой алгоритм. Большинство полноценных браузеров используют токенизатор, чтобы парсить HTML-разметку, и асинхронно отправляют запросы в сетевой стек. Более того, перед отправкой async-запроса браузеры всё-таки проведут некоторый анализ необходимых ресурсов.

Это нормально для быстрого Wi-Fi, но может вызвать затруднения на нестабильном соединении. Судя по нашим экспериментам, большинство микробраузеров при парсинге HTML используют просто цикл for, одновременно запрашивая ресурсы.

Например, iMessage сначала обнаружит и загрузит все фавиконы <link rel="icon" >, все изображения <meta property="og:image", а также <meta name="twitter:image:src", и только потом решит, что из этого отрисовать.

Теперь вы понимаете, куда уходит трафик.

Это означает, что iMessage загрузит все фавиконы независимо от размера, а затем не использует их, если решит вместо этого показать изображение. Многие сайты до сих пор транслируют фавиконы в пяти и более размерах.

Чем легче контент, тем выше вероятность, что он появится на экране пользователя. По этой причине важное значение приобретает мета-разметка.

5. Разметка имеет значение

Поскольку микробраузеры примитивны, важно сделать хорошую разметку. Вот несколько правильных стратегий:

  • На дворе уже 2020 год, хватит одного фавикона. Удалите все остальные ссылки <link rel="shortcut icon" и <link rel="icon".
  • Судя по нашим наблюдениям, чаще всего микробраузеры понимают теги Open Graph. Если теги OG и Twitter Card отсутствуют, то используется дефолтное сеошное описание <meta name= "description". Но поскольку часто оно наполнено бессмысленными фразами для поисковой оптимизации, люди ничего не поймут.

  • Пропишите в description толковый текст.
  • Укажите до трёх изображений в <meta property="og:image". Большинство платформ загружает только первое, но некоторые (в частности, iMessage) пытаются создать коллаж.

    5: Amazon пытается распознать user-agent микробраузеров, из-за чего в превью часто попадает текст из метатега description

    Рис.

  • Используйте <meta property="og:vi с прогрессивным (не потоковым) видео.

    <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">

  • Не нужно снифить user agent, чтобы скрыть теги <meta>. Так делают некоторые сайты, такие как Amazon, чтобы соответствующие микроданные были видны только для Facebook/Twitter. Но это может вызвать проблемы у некоторых микробраузеров, которые не придерживаются той же конвенции user agent. В результате пользователь увидит только простую ссылку без нормального предварительного просмотра.
  • Превью — отличное место, чтобы рассказать историю своего продукта или обобщить свои идеи.

Резюме

Поскольку всё больше наших разговоров происходит в групповых чатах и каналах Slack, предварительный просмотр ссылок — важный способ привлечь новых пользователей. К сожалению, не все веб-сайты обеспечивают хорошие и убедительные предварительные просмотры (а теперь, когда вы знаете, что искать, вы не сможете развидеть плохие примеры — уж извините).

Что ещё лучше, мы можем передавать через микробраузеры красивые визуальные истории. Чтобы помочь людям принять решение перейти по ссылке и посетить ваш сайт, нужно прописать на страницах аннотации с микроданными.

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть