Публикации, статьи от веб-студии Webtend. Блог веб-мастера Алексея Блохина

AMP и Турбо-страницы: плюсы и минусы

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

Те, кто следит за новинками сферы IT, знают про “быстрые страницы” от Google и Яндекс: AMP и Турбо-страницы. Они были выпущены больше 2 лет назад.

Волна восторгов от них стихла, и теперь можно трезво оценить плюсы и минусы. Турбо и AMP все еще в тренде, Яндекс и Google работают над их функциональностью, но они по-прежнему подходят далеко не всем и вряд ли скоро полностью заменят оптимизированные адаптивные сайты и мобильные версии.

Несколько лет назад поисковые системы стали отмечать в выдаче не пригодные страницы специальными маркерами. Выделенные страницы загружались быстрее обычных и не вызывали раздражение у пользователей. Позже появились алгоритм "Владивосток" у Яндекс и mobile-first indexing у Google.

Не все смогли сделать мобильные версии или адаптивные сайты, чтобы подстроиться под требования поисковых систем, и одним из решений проблемы стали Турбо и AMP.

Это разные технологии, но у них есть общие принципы работы:

  • владелец сайта создает облегченные версии страниц;
  • контент кэшируется на серверах Google и Яндекс и загружается оттуда, а не с сервера, где размещен сайт;
  • исходный код проще, чем у обычных страниц, страницы содержат только текст, картинки и некоторые виджеты;
  • корректность отображения Турбо- или AMP-страниц не зависит от устройства.

В 2016 году владельцы сайтов бросились делать ускоренные страницы, не разобравшись, нужно ли им это на самом деле. У AMP и Турбо-страниц есть преимущества перед обычными:

  • первое время маркеры ускоренных страниц привлекали много внимания, хотя сейчас значки с молнией и ракетой выглядят привычно;
  • за время загрузки этих страниц, меньше секунды, пользователь не успевает передумать и уйти на другой сайт;

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

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

AMP страницы google.ru

Суть в том, что на сайте используются специальные теги (с префиксом amp), количество и функционал которых строго ограничены. Задача разработчика состоит в том, чтобы собрать солянку из доступных схем, которые решат проблему заказчика.

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

При использовании на сайте какой-либо CMS, для AMP страниц необходимо сделать свой отдельный шаблон для отображения данных согласно требованиям к разметке AMP страниц.

Турбо-страницы Яндекса

Основное отличие от AMP — контент Турбо-страниц берется не со страниц сайта, а из специального RSS-канала.

Их содержимое хранится на серверах Яндекса. Но для того, чтобы Яндекс забрал с нашего сайта контент, мы должны написать скрипт, который будет передавать все необходимые данные (текст, изображения, стили и т.д.) в специальном формате XML-документ. Процесс похож на подготовку данных для Яндекс.Товары или Яндекс.Маркета.

Честно говоря, настройка максимально простая. Если количество страниц небольшое (10-20), то сделать RSS-канал для Яндекса можно самим, без привлечения программиста. Правда, в этом случае обновляться он будет тоже вручную.

Скорость загрузки Турбо — страницы превышает обычную примерно в 15 раз. И, дополнительный (но не последний), бонус — если сайт упадёт, например, из-за заражения или DDoS-атаки, его Турбо-страницы продолжат открываться и контент будет по-прежнему доступен пользователям.

Страницы с AMP и Турбо, ранжируются выше других запросов в поиске за счет того, что соответствуют требованиям к быстрой загрузке.

Особенности AMP и Турбо-страниц

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

Решение — использование доступных компонентов и iframe. Доступные компоненты позволяют добиться, пусть и не полной, реализации привычного инструментария на сайте, но представляют ему достойную замену и оптимизированы для быстрой загрузки.

С помощью AMP и Турбо-тегов, можно реализовать боковое меню, карусель, отправку формы, подгружаемый контент, рекламу и прочее. Каждый компонент связан со своей js-библиотекой, которую нужно подключить для его использования на сайте.

Особенности Турбо-страниц

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

Преимущества Турбо-страниц в том, что после их внедрения на вашем сайте:

  • Падает показатель отказов. Когда пользователь заходит на ваш сайт и из-за своего плохого интернета долго не может открыть вашу страницу, он может просто не дождаться ее загрузки, закрыть и снова вернуться в поисковую выдачу, чтобы найти какой-то другой, более быстрый сайт. Таким образом у вас повышается показатель отказов, а чем больше показатель отказов, тем хуже ваши позиции в поисковой выдаче.
  • Растет мобильный трафик. На сегодняшний день многие пользователи уже знают, что сайты, отмеченные в выдаче значком ракеты, грузятся очень быстро и поэтому по ним активно кликают. Это дает вам преимущество перед конкурентами и позволяет увеличить посещаемость вашего сайта с мобильных устройств.
  • Снижается нагрузка на хостинг. Если на сайте довольно высокая посещаемость, то этот пункт будет тоже актуален. За счет того, что загрузка контента идет не с вашего хостинга, а с серверов Яндекса, нагрузка снижается. При этом для создания и хранения Турбо-страниц Яндекс использует собственную сеть доставки контента (CDN), что еще сильнее ускоряет загрузку контента.

Недостатки Турбо – в ограниченном функционале:

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

Особенности AMP

  • Создание «легких» страниц;
  • Поисковик сохраняет облегченные версии страниц у себя на серверах;
  • «Яндекс» предлагает владельцам смартфонов турбо-страницы в поиске или новостной ленте;
  • Благодаря высокой скорости загрузки улучшается пользовательский опыт и поведенческие показатели.

После создания AMP страниц, Google пошел дальше. Он перевел все сайты на новую систему ранжирования — Google Mobile Friendly. Теперь ранжирование сайтов зависит в первую очередь от мобильной версии сайта. Если раньше можно было создать и «вылизать» десктопную версию сайта, не делая адаптивную или на крайний случай мобильную версию сайта. То теперь при разработке сайта, особое внимание нужно обращать на адаптивную версию.

Подготовка данных

Для AMP-страниц

Все изображения на странице должны быть описаны в особом теге <amp-img>, что затрудняет вставку изображений пользователем через текстовый редактор.

Так же, если используются карусель или lightbox, нужно вставить аналоги из компонентов amp. Для реализации этого функционала был реализован обработчик, который с помощью регулярных выражений заменяет стандартные HTML-теги, на теги используемые в amp спецификации.

Еще одна особенность, которая должна коснуться в первую очередь текстового редактора, так как редактирование стилей там проходит inline. Элементы с атрибутами типа style=“color:…”, не являются валидными, а изменение цвета или размера шрифта запишет это свойство в код.

Чтобы поисковик понял, что есть AMP-версия страницы, она должна содержать ссылку:

<linк rel=«amphtml» href=«www.site.com/url/to/amp/document.html»>


А на AMP-странице — присутствовать обратная ссылка:

<linк rel=«canonical» href=«www.site.com/url/to/full/document.html»>

Css стили пишутся inline, и их размер не должен превышать 50кб.

Для Турбо-страниц

Чтобы подключить Турбо-страницы, достаточно внести небольшие изменения в текущий экспортный файл согласно техническим требованиям:

  • Корневым элементом RSS-файла является rss, атрибут version которого должен иметь значение 2.0.
  • Внутри элемента rss содержится элемент channel, который включает информацию об источнике и его содержание.

Далее указываются:

  • Информация о сайте-источнике — сведения передаются в элементе channel.
  • Информации о сообщении — данные передаются в элементе item.
  • контент для турбо-страницы

В турбо страницы можно встроить дополнительные элементы типа: шапка страницы, ссылки, картинки, логотип, меню, видео, кнопка «Поделиться», цитаты, таблицы и т.д. Также можно подключить некоторые системы веб-аналитики (ограничено и это минус).

Подробнее, смотрите здесь: https://yandex.ru/adv/turbo

Имеются бесплатные и платные плагины (модули) для многих CMS https://tech.yandex.ru/turbo/, поэтому подключить сейчас вообще не проблема. Проблема, потом отключить, но об этом ниже.

Минусы ускоренных страниц

1. Ваш сайт не будет оригинальным

Посетители Турбо- или АМР-страницы не увидят дизайн, на который вы потратили так много денег и времени. Все ускоренные страницы выглядят похоже, и это очень обидно. Придется выбирать между красотой и скоростью.

2. Сложно поддерживать столько всего

Веб-мастеру придется следить за основным сайтом, Турбо, АМР и мобильной версией. Возможно, еще за чем-то. У "коробочных" движков есть специальные плагины, а для самописного сайта сделать ускоренные страницы будет затратно по времени. К тому же, владелец ресурса перестает контролировать свой проект, потому что на ускоренной странице управление контентом переходит к поисковой системе.

3. Падение доходов от рекламы

Если вы зарабатываете не только на рекламных сетях поисковых систем, но и на прямых размещениях, доходы от рекламы снизятся. Например, на Турбо-страницах Яндекса можно разместить 2-3 объявления, а на своем сайте — сколько угодно.

4. Отсутствие многих функций

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

5. Потеря ссылок и трафика

Если у вашего сайта много ускоренных страниц, и на них будут ссылаться другие ресурсы, эти внешние ссылки будут не ваши. Яндекс.Метрика и Google Analytics дают информацию о трафике на Турбо и АМР, но если вам важна ссылочная масса, а для Google она еще имеет значение, лучше сделать адаптивный сайт и не терять ссылки.

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

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

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

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

Наши выводы

Если у вас хорошая мобильная адаптация (респонсив), сайт быстро загружается и удовлетворяет все потребности пользователей, то нужды в Турбо-страницах просто нет. Они только создают лишние проблемы для вас.

Я заметил на 2 сайтах снижение посещаемости после ввода турбо страниц - на 40% примерно! При том, что посещаемость с мобильных гаджетов на обоих составляла примерно 60%. Были проблемы с трафиком, рекламой, счетчиками других поисковых систем и т.д. Например, у меня, в отдельных статьях, как вы может быть заметили, используется тег <code>. С его помощью я отмечаю код в статьях. Это удобно и для пользователей, которые потом смогут легко скопировать этот программный код. Но, к сожалению, Турбо-страницы не понимают этого тега, и уже на протяжении года классифицирует этот тег в ленте RSS как ошибку.

Как удалить Турбо-страницы

Способ отключения Турбо-страниц зависит от способа, с помощью которого они были сформированы:

RSS-канал как источник данных -

Для того, чтобы удалить Турбо-страницы, мы должны добавить значение false в тег <item turbo>. Это можно сделать вручную, просто открыв xml-файл с фидом или реализовать самим плагином Яндекс.Турбо.

Если для формирования RSS-канала вы используете плагин, обратитесь к разработчикам плагина или в службу поддержки CMS, чтобы уточнить способ отключения Турбо-страниц.

В использованном мною бесплатном плагине для Joomla FL Yandex Turbo нужно перейти в пункт расширенных настроек, найти там пункт «Отключить турбо-страницы», отметить его галочкой и сохранить изменения.

Теперь в наш фид добавилась строчка <item turbo="false">, она сообщит Яндексу, что мы не хотим, чтобы Турбо-страницы нашего сайта участвовали в поиске.

Созданную ленту мы должны добавить в Яндекс Вебмастер. Переходим в сервис, в раздел «Источники».

В течение нескольких дней после добавления источника в тегом <item> турбо-страницы будут удалены. Больше они не будут участвовать в поиске и съедать ваш трафик. Вместо нее будет отображаться обычная или мобильная версия сайта.
Вы в любой момент сможете вернуть их, если просто уберете запрещающий элемент из фида. В случае с плагином Яндекс Турбо достаточно просто убрать галочку с соответствующего пункта и заново добавить ссылку в Яндекс Вебмастер.

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

Если источник данных - YML файл или автопарсинг - чтобы отключить показ Турбо-страниц, выполните следующее:

В интерфейсе Яндекс.Вебмастера перейдите в раздел Турбо-страницы → Источники. Установите переключатель в положение Откл напротив нужного источника. Турбо-страницы интернет-магазина отключатся в течение часа.

Также про удаление турбо-страниц можно почитать в официальной документации Яндекса.

При этом, я не призываю вас обязательно делать это. В турбо-страницах есть свои плюсы. Решать вам!

CMS Joomla

CMS Joomla!

CMS Joomla (джумла) – один из мировых лидеров среди систем для создания сайтов и интернет-магазинов. Предельно простая, удобная, многофункциональная, полностью русифицированная административная часть. Простой и интуитивно понятный интерфейс, позволяющий, не имея специальных технических знаний или навыков программирования, работать с системой управления любому пользователю.

Веб-студия WebTend работает исключительно с системой управления контентом CMS Joomla!

Интернет-магазины создаем на CMS Joomla с немецким компонентом электронной коммерции - Joomshopping.

Подробнее о Joomla