Ускоренные страницы: возможности AMP Google и Турбо-страниц Яндекса

Всеобщая «мобилизация» внесла коррективы в подходы к верстке и отображению сайтов в поиске. На первое место вышло удобство просмотра с экранов мобильных и высокая скорость загрузки страниц. В 2015 году Google запустил алгоритм Mobile Friendly, где предпочтение в мобильной выдаче отдается адаптированным сайтам. Тенденцию поддержал и Яндекс. Логическим развитием концепции Mobile Friendly стало внедрение Google ускоренных страниц — AMP (Accelerated Mobile Pages). Яндекс открыл доступ к подобной технологии под названием «Турбо-страницы». Что это и как работает? Разбираемся в этой статье.

Как работают ускоренные страницы и кому они нужны

Мы привыкли к тому, что после клика по ссылке в результатах поиска попадаем на сайт, изучаем информацию, после чего уходим назад в поиск или остаемся на сайте. Проблема в том, что если скорость интернет-соединения низкая (что не редкость в 3G-сетях), придется долго ждать загрузки страницы, особенно если на ней «тяжелые» изображения, много скриптов и прочего контента.

Ускорить загрузку можно двумя способами:

повысить скорость соединения;
оптимизировать веб-страницы и повысить скорость их загрузки.

Модуль SEO в системе Promopult: все инструменты для улучшения качества сайта и поискового продвижения. Полный комплекс работ — с нами вы не упустите ни одной мелочи. Чек-листы, подсказки, прозрачная отчетность и рекомендации профессионалов. Гарантии, оплата работ в рассрочку.

На скорость загрузки страниц поисковые системы пытаются влиять — сделали ее фактором ранжирования, тем самым стимулируя владельцев сайтов ускорять их загрузку. На скорость соединения они повлиять не могут. Поэтому было решено внедрить технологию ускоренных страниц, которая позволяет в разы увеличить скорость отображения контента. Google назвал их AMP (Accelerated Mobile Pages), Яндекс — Турбо-страницы.

Высокая скорость достигается благодаря нескольким моментам:

Контент кешируется на серверах Яндекса или Google, и подгружается с них, а не с сервера, на котором расположен сайт (пользователь фактически не переходит на сайт, а просматривает контент, не покидая Google или Яндекс).
Исходный код ускоренных страниц значительно облегчен по сравнению с кодом оригинальной страницы: здесь нет ничего кроме основного контента, картинки отображаются по мере прокрутки страницы, используются только асинхронные скрипты.
Ускоренные страницы сделаны так, чтобы одинаково хорошо отображаться вне зависимости от устройства, на котором они открыты.

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

Выгода ускоренных страниц для владельцев сайта

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

Ускоренные страницы подходят прежде всего информационным сайтам: блогам и СМИ. Вместе с тем AMP-страницы уже используют eBay, Skyscanner, Reddit и другие интернет-магазины и сервисы. В планах поисковых систем расширение функционала ускоренных страниц: поддержка встройки видео, таблиц, цитат, систем электронных платежей, геозависимой выдачи и многое другое.

Как отличить турбо-страницы в поиске

Google полностью оправдывает название технологии и показывает Accelerated Mobile Pages только в мобильном поиске. Яндекс начал бета-тестирование турбо-страниц на десктопе.

Как выглядят AMP-страницы в результатах поиска Google

1. Обычный результат (помечается значком молнии):

2. Карусель новостей:

3. Карусель результатов AMP-страниц для одного сайта:

4. Расширенный результат для статей, записей в блоге, рецептов, видео, ресторанов:

5. Иллюстрированные статьи (AMP-истории), которые можно развернуть на весь экран. Подробнее об этом формате — в руководстве Gоogle.

Чтобы контент с вашего сайта показывался в расширенных результатах поиска (пункты со второго по пятый), необходимо внедрить структурированные данные.

Как выглядят турбо-страницы в результатах поиска Яндекс

1. Обычный результат (помечается значком ракеты):

2. Карусель турбо-страниц:

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

Последние обновления технологии Турбо от Яндекса

В октябре 2019 г. Яндекс сообщил о введении нового знака отличия для сайтов, которые используют турбо-страницы. Его можно увидеть в разделе «Показатели качества» Вебмастера:

Напрямую представители Яндекса не говорят о влиянии турбо-страниц на ранжирование, но введение нового сигнала намекает вебмастерам на то, что пора начинать внедрять технологию.

В ноябре 2019 года Яндекс представил новые возможности турбо-страниц на Девятой вебмастерской. Перечислим важные обновления.

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

Ближайшие планы Яндекса по развитию формата

Увеличение скорости загрузки как для контентных страниц, так и для интернет-магазинов.
Передача в RSS собственной html верстки: дизайн контентных турбо-страниц станет практически неотличим от страниц основного сайта.
Фиксированная шапка меню с названием сайта.
Новые возможности для рекламы на турбо: блоки interscroller с параллакс-эффектом, видеореклама форматов InPage и InStream в ADFOX и другие.
Возможность размещать формы подписки на турбо-страницах.
Внедрение виджетов и возможность создавать свои.
Развитие элементов социальной активности на контентных турбо-страницах: комментарии, лайки.
Дальнейшее развитие технологии турбо для e-commerce: персонализированные товарные рекомендации, поиск с подсказками, главные страницы для магазинов, возможность кастомизации и интеграции с CMS, допродажи брошенных корзин, онлайн-оплата в один клик.

Как подключить AMP и «Турбо-страницы»

Несмотря на схожесть технологий, есть отличия в подключении ускоренных страниц в Яндексе и Google.

Создание и настройка AMP Google

Если у вас сайт на одной из поддерживаемых CMS, то настроить AMP без обращения к программистам можно с помощью плагинов (WordPress, Drupal, Joomla).

Например, для настройки AMP-страниц для сайта на WordPress достаточно установить бесплатный плагин AMP для WP и настроить ускоренную версию сайта. С помощью плагина можно:

задать логотип;
создать лендинг;
настроить показ рекламы;
указать метаописания и настроить индексацию;
подключить Google Analytics и другие системы аналитики (Яндекс.Метрика, Segment Analytics, Piwik Analytics, Quantcast Measurement, comScore и др.);
настроить управление через Google Tag Manager;
настроить структурированные данные;
активировать панель уведомлений и пуш-уведомления;
подключить контактные формы и комментарии (WordPress, Disqus или Facebook Comments);
включить AMP для всех мобильных пользователей;
добавить произвольный HTML-код (который поддерживает технология AMP) в Head, Body или Footer;
выбрать одну из дефолтных тем оформления сайта или создать свой дизайн;
добавить кнопки соцсетей и e-mail и др.

Интерфейс плагина AMP для WP

Без использования плагинов AMP-версию сайта можно создать:

с нуля (на сайте ampproject.org представлены подробные инструкции по настройке и наполнению AMP-страниц);
путем конвертации HTML в AMP (подробное руководство — по ссылке).

В любом из этих двух случаев нужно обладать знаниями в HTML, CSS и JavaScript. Если знаний нет, лучше обратиться к программистам.

Создание и настройка «Турбо-страниц» Яндекса

Порядок действий:

1. Изучите инструкцию Яндекса по подключению турбо-страниц для статейных сайтов или интернет-магазинов.

2. Создайте RSS-канал для контентного сайта или YML-файл для ecommerce. Для популярных CMS есть плагины, полный список — по ссылке.

3. Перейдите в раздел Вебмастера «Турбо-страницы»/«Источники»:

4. Добавьте источник одним из трех способов: через RSS-канал, YML-файл или подключитесь по API:

5. Укажите счетчик Яндекс.Метрики или другой системы веб-аналитики для того, чтобы данные по переходам на турбо-страницы корректно отображались в отчетах.

6. Если вы монетизируете сайт, настройте показ рекламных блоков.

Возникли сложности? Пишите в поддержку.

Ускоренные страницы пока несовершенны

При создании ускоренных страниц разработчики стремились улучшить пользовательский опыт и сделать контент доступней. Действительно, по словам представителей Яндекса, скорость загрузки новостей в 3G-сетях возросла до 15 раз. Вместе с тем AMP и «Турбо-страницы» создают ряд проблем, причем не только издателям, но и пользователям.

Неудобства для пользователей

1. Трудности при расшаривании ссылки (если человек захочет поделиться ссылкой на первоисточник и нажмет привычную кнопку на смартфоне «Поделиться», то фактически расшарит ссылку вида https://www.google.com/amp/… Для получения ссылки на оригинальную страницу придется кликнуть по специальной кнопке, перейти на основную версию сайта, скопировать ссылку и только тогда переслать ее).

2. Проблемы с отображением изображений в AMP (изображения подгружаются только в видимой части экрана; часто эта область так и остается пустой).

3. У пользователя нет возможности отключить ускоренные страницы (издатели могут выбирать — подключать AMP и Турбо-страницы или нет; у пользователей такой возможности нет, а ускоренные страницы нравятся не всем).

Трудности для владельцев сайтов

1. Потеря внешних ссылок (появление в ТОПе ускоренных страниц приводит к тому, что сторонние ресурсы начинают ссылаться на них, а не основную версию сайта, что тормозит наращивание ссылочной массы).

2. Поисковики отбирают трафик у сайтов. Контент ускоренных страниц отображается на стороне Google и Яндекса. Интерфейс сделан так, что при нажатии на крестик вверху страницы пользователь возвращается в поиск. Как результат, основной сайт недополучает трафик и просмотры.

3. Поддержка еще одной версии сайта (возникают дополнительные расходы, связанные с созданием и поддержкой ускоренных страниц).

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

В Яндексе это делается по-разному для разных типов источников:

для RSS-канала нужно добавить атрибут turbo="false" в элемент item страницы:

…

</item>

для YML или автопарсинга необходимо отключить источник в Вебмастере (отключение произойдет в течение 24 часов)
для десктопных турбо-страниц нужно выключить их в настройках соответствующего раздела Вебмастера (турбо пропадут в течение пяти минут).

Google предоставляет возможность удалить:

обе версии страницы — AMP и каноническую (наиболее быстрый способ, но пользователи увидят сообщение об ошибке);
только AMP-страницу и настроить редиректы 301 или 302.

Как это сделать, изложено в соответствующем разделе справки. Также удалить отдельно AMP или вместе с обычной страницей можно через вашу CMS: вот инструкции для WordPress и Drupal.

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

Поисковые системы все больше внимания уделяют скорости загрузки страниц. AMP и «Турбо-страницы» — это технологии, призванные улучшить пользовательский опыт и сделать контент доступней. Те издатели, которые на ранних этапах возьмут на вооружение ускоренные страницы, получат значительное преимущество перед конкурентами. В противном случае, скорее всего, придется догонять тех, кто уже внедрил AMP и Турбо-страницы.