t. +7 (495) 620-58-99
+7 (495) 620-58-99
Начнем знакомство?
/
/
Нужны ли AMP вашему сайту: подробное руководство по технологии
Блог
25986
25.02.2019

Нужны ли AMP вашему сайту: подробное руководство по технологии

Увеличение скорости работы сайта на мобильных устройствах остается одним из ключевых SEO-трендов, перешедших из 2018 в 2019 год. Для этого есть три весомые причины:

  • Мобильные устройства (смартфоны и планшеты) в России генерируют около половины суммарного количества трафика: практически каждый второй визит на сайты производится со смартфона.
  • Пользователи уже не готовы тратить время на загрузку: при просмотре с мобильных устройств 53% посетителей уйдут со страницы после 3 секунд ожидания загрузки.
  • В эпоху Mobile-first indexing, официально наступившую в 2018, сайты, оптимизированные под мобильные устройства, имеют преимущество при ранжировании в выдаче.
типы устройств за 2018 год
Данные сервиса Яндекс Радар о количестве визитов с разных типов устройств в 2018 году (регион: Россия).

И вот Google дает нам готовый инструмент для создания идеального web-ресурса — быстрого, адаптивного, отвечающего требованиям самой поисковой системы и пользователей — AMP. Рассмотрим, что это за технология и какая может быть отдача от ее внедрения.

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

Для кого актуально

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

Примеры сайтов на AMP

Хорошим примером сайта, сверстанного на AMP, является официальный сайт  www.ampproject.org (п.с.: оцените, что можно сделать при помощи технологии AMP для десктопа), а вот  тут есть готовые шаблоны сайтов разной тематики, которые помогут оценить возможности AMP (можно бесплатно скачать понравившееся).

Еще примеры:

Оценить потенциал разработки помогут кейсы о внедрении AMP на сайты регионального и мирового уровней различных тематик на официальном сайте технологии.

Как работает AMP

Страницы AMP построены с помощью трех основных технологий:

  • AMP HTML;
  • Библиотека AMP JS;
  • AMP Cache.

AMP HTML

Это HTML-разметка с ограничениями, расширениями, а также особенными web-компонентами, регламентированными в спецификации. Вот несколько примеров:

Тег в html

  • img
  • video
  • iframe

Тег-аналог в AMP HTML

  • amp-img
  • amp-video
  • amp-iframe

При этом следует учитывать, что многие компоненты не имеют аналогов и не могут быть использованы в коде AMP (также описано в спецификации). Код страницы AMP легко узнать по значку ⚡ (молния) в теге <html>:

Значок AMP
Смотрите также пример HMTL-кода AMP-страниц, предлагаемый  в валидаторе.
При создании AMP-версий страниц используются CSS-стили. О поддерживаемых элементах CSS и правилах размещения на странице можно прочесть  здесь.

Главные особенности:

  • встроенные стили запрещены (т.к. они снижают производительность),
  • также наложены ограничения по размеру заданных должным образом CSS на странице - не более 50 Кб.
О том, как конвертировать HTML-код в AMP, читайте  по ссылке.

Библиотека AMP JS

Обеспечивает визуализацию страниц. То, что страницы не могут содержать произвольный JavaScript-код и все скрипты должны быть асинхронными, и накладывает главные ограничения при создании AMP-версии сайта. Компоненты библиотеки позволяют если не полностью, то значительно компенсировать отсутствие возможности использовать кастомный код. С помощью библиотеки можно реализовать не только боковое меню, фильтры и сортировку, но и отправку формы, корзину интернет-магазина, ссылки на соцсети, подгрузку контента и рекламных блоков - инструменты для всего этого (и не только) можно найти  здесь. Также ознакомьтесь со списком расширенных возможностей АMP по этой ссылке.

AMP Cache

Позволяет загружать страницы AMP из поиска практически мгновенно за счет использования CDN (сети доставки контента) Google.

Именно благодаря набору ограничений библиотеки и компонентов сделанный с помощью AMP сайт гарантированно будет быстрым и легким.

Сравнение скорости загрузки и функционала AMP и адаптивной версии на конкретном примере

Для наглядности сравним адаптивную и AMP-версию новостной страницы сайта bbc.com и оценим, насколько в действительности технология позволяет увеличить скорость загрузки сайта на мобильных устройствах.

Страницы для сравнения:

По данным сервиса Google PageSpeed Insights адаптивная версия имеет низкую скорость загрузки:

сервис Google PageSpeed Insights

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

AMP-страница сайта отличается очень высоким показателем скорости:

apm-stranica

Первый экран и основной контент страницы загружается за 1 секунду — это очень хороший результат, а через 3,9 секунды AMP полностью готова к взаимодействию с пользователем (удовлетворительный результат). В среднем ускоренная мобильная страница оказалась быстрее в 2,5 раза своей адаптивной версии и оценивается поисковой системой Google как страница с высокой скоростью загрузки (95 пунктов из 100 в сервисе Google PageSpeed Insights), что дает ей преимущество при ранжировании согласно Mobile-first indexing.

преимущества APM

А что с визуальной составляющей и функционалом

А теперь сравним дизайн, функционал и удобство обеих версий страницы для пользователя.

адаптивная версия сайтаapm страница сайта
Адаптивная версия (слева) и AMP (справа).
Элемент
Адаптивная версия
AMP
Хедер (шапка сайта)
Кликабельный логотип
+
+
Меню
+
-
Строка поиска
+
-
Дополнительные навигационные элементы
-
+
Дата и время публикации
+
+
Блок “Поделиться”
+
+
Основной контент страницы
Основное изображение
+
+
Полнота контента
+
+
Элементы перелинковки
Встроенная в контент лента рекомендаций
+
+
Тегирование
+
-
Доп. блок “Поделиться”
+
-
Лента рекомендаций “Новости по теме”
+
+
Доп. ленты рекомендаций
+
-
Футер (подвал сайта)
Меню в футере
+
-
Дополнительное меню / элементы навигации
+
-
Информация о правообладателе / copyright
+
+
Элемент
Хедер (шапка сайта)
Элемент
Кликабельный логотип
Адаптивная версия
+
AMP
+
Элемент
Меню
Адаптивная версия
+
AMP
-
Элемент
Строка поиска
Адаптивная версия
+
AMP
-
Элемент
Дополнительные навигационные элементы
Адаптивная версия
-
AMP
+
Элемент
Дата и время публикации
Адаптивная версия
+
AMP
+
Элемент
Блок “Поделиться”
Адаптивная версия
+
AMP
+
Элемент
Основной контент страницы
Элемент
Основное изображение
Адаптивная версия
+
AMP
+
Элемент
Полнота контента
Адаптивная версия
+
AMP
+
Элемент
Элементы перелинковки
Элемент
Встроенная в контент лента рекомендаций
Адаптивная версия
+
AMP
+
Элемент
Тегирование
Адаптивная версия
+
AMP
-
Элемент
Доп. блок “Поделиться”
Адаптивная версия
+
AMP
-
Элемент
Лента рекомендаций “Новости по теме”
Адаптивная версия
+
AMP
+
Элемент
Доп. ленты рекомендаций
Адаптивная версия
+
AMP
-
Элемент
Футер (подвал сайта)
Элемент
Меню в футере
Адаптивная версия
+
AMP
-
Элемент
Дополнительное меню / элементы навигации
Адаптивная версия
+
AMP
-
Элемент
Информация о правообладателе / copyright
Адаптивная версия
+
AMP
+

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

Можно сделать вывод, что AMP позволяет создавать полноценные версии страниц (аналогичные или даже идентичные мобильным и адаптивным), которые будут загружаться в разы быстрее: технология позволяет и дает нужные инструменты, а дальше - все в руках разработчиков.

Нужен ли AMP вашему сайту

Оценить актуальность технологии для вашего сайта помогут ответы на следующие вопросы:

1. Есть ли у вашего сайта мобильная или адаптивная версия? Насколько она быстрая? Смотрите оценку скорости загрузки в  Google PageSpeed или  Google Lighthouse.

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

Высокая скорость загрузки на мобильных устройствах
По данным сервиса PageSpeed Insights сайт ampproject.org имеет высокую скорость загрузки на мобильных устройствах.
Неудовлетворительная скорость загрузки
Пример сайта с неудовлетворительной скоростью загрузки.
2. У вас новостной или контентный сайт? Актуальность внедрения AMP подтверждается статистикой: среди более 25 миллионов доменов с реализованным AMP новостные сайты занимают основную долю.
Помимо того, что ускоренные страницы имеют преимущества в ранжировании из-за mobile-first именно из AMP-версий формируется выдача карусели «Главные новости»:
карусель главные новости

Блок «Главные новости» размещается в верхней части мобильной выдачи, попадание в карусель вашей новостной или контентной страницы может обеспечить значительное количество дополнительных переходов на AMP-страницу.

3. Вы владелец интернет-магазина или агрегатора товаров и услуг? Ранее внедрение AMP для коммерческих сайтов было нецелесообразным из-за невозможности реализовать фильтры, сортировку и других ограничений технологии, несовместимых с нуждами ecommerce. Однако технология не стоит на месте и многие проблемы уже были решены, что демонстрируют готовые шаблоны:
коммерческий сайтготовый шаблон
По данным сервиса PageSpeed Insights сайт ampproject.org имеет высокую скорость загрузки на мобильных устройствах.
Читайте, что пишут авторы проекта о преимуществах, которые дает технология интернет-магазинам, и возможностях AMP для создания продуктовых страниц. Не лишним будет изучить  кейсы ecommerce сайтов о внедрении AMP-страниц.

К примеру, вот результаты внедрения AMP из кейса сайта-агрегатора бронирования авиаперелётов и отелей wego.com:

источники трафика
Пример сайта с неудовлетворительной скоростью загрузки.

Технология позволила улучшить скорость загрузки сайта в 10 раз, увеличить конверсию по партнерским программам на 95% и на 49% улучшить конверсию из мобильного поиска. Суммарно CTR рекламы на мобильных устройствах выросла в 3 раза.

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

4. Оцените выдачу Google и опыт конкурентов: если в тематической выдаче уже присутствуют страницы AMP, этот тренд будет только усиливаться. Будьте среди первых.

Например, по коммерческому запросу «купить телевизор в москве» в ТОП-5 мобильной выдачи Google представлена 1 ускоренная мобильная страница:

ускоренная страница по запросу

А вот пример для сайта кулинарной тематики: по запросу «Блины на кефире» в топ-5 представлено 5 AMP-страниц, первые две из которых отображаются в поиске с помощью разметки вида «Карусель рецептов».

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

Еще один пример по информационному запросу «amp для интернет-магазина»: 2 из 5 страниц топа выдачи - AMP:

AMP для интернет-магазина топAMP для интернет-магазина

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

К практике: как внедрить AMP

Для популярных CMS (Bitrix, Wordpress, Drupal, Joomla и др.) имеются готовые решения, позволяющие быстро внедрить AMP на сайт. Следует отметить, что большинство плагинов платные и достаточно ограничены в своих возможностях, так что перед выбором и покупкой стоит взвесить все «за» и «против». Возможно, лучше создать свою AMP-версию с нуля.

В Wordpress выбрать подходящий плагин можно на странице wordpress.org/plugins. Наиболее популярный плагин —  wordpress.org/plugins/amp, инструкция по настройке находится тут.
Для сайтов на Drupal есть несколько взаимодополняющих инструмента для внедрения Google AMP:
  • AMP-модуль;
  • АМР-тема;
  • АМР-библиотека.
Подробнее о функционале и способе использования каждого инструмента можно узнать  по ссылке.
В Joomla найти расширение для реализации технологии можно найти на странице  extensions.joomla.org/tags/amp.
В Bitrix на данный момент имеется только одно решение: marketplace.1c-bitrix.ru/solutions/impel.amp. Перед покупкой рекомендуется подробно изучить модуль и его возможности: у модуля нет рейтинга и он был установлен сравнительно малое количество раз (50-99). Возможно, более приемлемым решением будет создание AMP-версии «с нуля» под нужды проекта.

Нет подходящего плагина? Пишем техническое задание по созданию AMP c нуля

Основные требования к шаблонам.

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

Чтобы страницы правильно работали и показывались в результатах Google поиска, HTML-код шаблонов должен успешно пройти проверку  в валидаторе AMP.
Дизайн страниц должен быть адаптивным и корректно отображаться на всех типах устройств. Ссылка на официальную инструкцию  тут.

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

URI AMP-страниц должен относиться к домену сайта и быть сформирован образом, понятным пользователям. Примеры:

example.com/amp/page
example.com/page?amp

Шаблон AMP и канонической версии страницы должны быть перелинкованы между собой. Основная (каноническая) страница между открывающим и закрывающим тегами <head>…</head> должна содержать тег:

<link rel="amphtml" href="URL AMP-версии страницы"

Страница-AMP между открывающим и закрывающим тегами <head>…</head> должна содержать тег:

<link rel="canonical" href="URL основной версии страницы">

Следует учитывать, что Яндекс не поддерживает технологию AMP и его роботы не считают атрибут rel=”canonical” строгой директивой. Игнорирование указания канонической страницы может привести к появлению AMP страниц в выдаче вместо основных страниц сайта. Для того чтобы этого не произошло, в robots.txt необходимо добавить запрет на индексацию ускоренных страниц для ботов Яндекс:

User-agent: Yandex

...

Disallow: */amp/

На шаблоны всех AMP-страниц должны быть добавлены коды счётчиков Google Analytics, Яндекс Метрики и пр. (укажите необходимые вам), добавленные согласно инструкциям по ссылкам:  https://developers.google.com/analytics/devguides/collection/amp-analytics/ и  https://yandex.ru/support/metrika/code/install-counter-amp.html.

В футере должна присутствовать ссылка на полную версию сайта. Если функционал AMP и базовой версии отличается, это даст пользователю возможность перейти на «не урезанную» каноническую страницу.

AMP-страницы должны включать структурированную разметку данных schema.org, как и на канонических страницах сайта.

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

Перечень наиболее важных типов разметки:

  • Product (для страниц товаров);
  • Article (для информационных статей и новостей). Наличие данной разметки определяет возможность попадания новостной страницы в карусель “Главные новости”, о важности данной разметки для страниц AMP по ссылке.
  • Recipe (для страниц рецептов);
  • Organization (информация о компании);
  • Web-site (поиск по сайту);
  • BreadcrumbList (строка навигации).
Чем подробнее будет реализована разметка, тем лучшее представление в поиске получит страница. Кроме того, микроразметка может содержать техническую информацию для поисковой системы. Например, данные из dateModified разметки Article используются роботами Google для отслеживания изменений в статье и оперативного обновления кешированной версии страницы – это помогает предоставлять пользователям самую свежую версию статьи.  Обязательно проверьте реализованную разметку на валидность в  Инструменте проверки структурированных данных: отсутствие ошибок является критичным фактором для данной доработки. О рекомендуемых типах разметки можно узнать на страницах Справочных материалов Google в разделе  Структурированные данные.
К логотипу сайта предъявляются строгие требования, ознакомиться с которыми можно  по ссылке. Выдержка из требований:

Логотип должен быть вписан в прямоугольник 60х600px по одной из сторон на выбор (т.е. высота может быть равна 60px, а ширина взята произвольного размера (до 600px) или же наоборот: ширина равна 600px, а высота - произвольная, но не более 60px). Соответствие одной из сторон названному размеру — обязательное условие, а использование лого квадратной формы не допускаются.

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

После реализации ускоренных мобильных страниц отслеживать их состояние можно в Google Search Console (вкладка Улучшения > Страница AMP).

Google Search Console
Search Console генерирует отчет о найденных проблемах, ошибках и предупреждениях на AMP-страницах сайта.

О монетизации AMP-версии

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

Справка Google рекомендует сначала создать одну тестовую AMP-страницу и проверить, будет ли на ней выполняться показ рекламы.

Полезные ссылки по теме:
Требования, которым должны соответствовать рекламные блоки -  https://support.google.com/adsense/answer/7183212?hl=ru. Рекомендации по размещению объявлений, а также типы, способы создания и добавления объявлений на страницы (инструкция на русском языке) -  https://support.google.com/admanager/answer/6352089?hl=ru.