или закажите обратный звонок
Пн –Чт с 10:00 до 19:00,Пт с 10:00 до 18:00
  1. Главная
  2. База знаний
  3. Нужны ли AMP вашему сайту: подробное руководство по технологии
SEO

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

Что такое AMP: обзор технологии и способов создания ускоренных мобильных страниц.

25 Февраля 2019 | 1159 | 1

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

1. Мобильные устройства (смартфоны и планшеты) в России генерируют около половины суммарного количества трафика: практически каждый второй визит на сайты производится со смартфона.

Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru - Изображение №1
Данные сервиса Яндекс Радар о количестве визитов с разных типов устройств в 2018 году (регион: Россия).

2. Пользователи уже не готовы тратить время на загрузку: при просмотре с мобильных устройств 53% посетителей уйдут со страницы после 3 секунд ожидания загрузки.

3. В эпоху Mobile-first indexing, официально наступившую в 2018, сайты, оптимизированные под мобильные устройства, имеют преимущество при ранжировании в выдаче.

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

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

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

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

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

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

Еще примеры:

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

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

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

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

Тег в html Тег-аналог в AMP HTML
img amp-img
video amp-video
iframe amp-iframe

При этом следует учитывать, что многие компоненты не имеют аналогов и не могут быть использованы в коде AMP (также описано в спецификации). Код страницы AMP легко узнать по значку ⚡ (молния) в теге <html>:
Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru - Изображение №2
Смотрите также пример HMTL-кода AMP-страниц, предлагаемый в валидаторе.

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

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

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

О том, как конвертировать HTML-код в AMP, читайте по ссылке.

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

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

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

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

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

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

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

Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru - Изображение №3 Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru - Изображение №3

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

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

Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru - Изображение №4 Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru - Изображение №4

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

Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru - Изображение №5

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

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

Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru - Изображение №6   Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru - Изображение №6
Адаптивная версия (слева) и AMP (справа).

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

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

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

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

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

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

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

Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru - Изображение №7
По данным сервиса PageSpeed Insights сайт ampproject.org имеет высокую скорость загрузки на мобильных устройствах.

Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru - Изображение №8
Пример сайта с неудовлетворительной скоростью загрузки.

2. У вас новостной или контентный сайт? Актуальность внедрения AMP подтверждается статистикой: среди более 25 миллионов доменов с реализованным AMP новостные сайты занимают основную долю.

Помимо того, что ускоренные страницы имеют преимущества в ранжировании из-за mobile-first, именно из AMP-версий формируется выдача карусели «Главные новости»:

Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru - Изображение №9

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

3. Вы владелец интернет-магазина или агрегатора товаров и услуг?

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

Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru - Изображение №10   Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru - Изображение №10
AMP-версия интернет-магазина с каталогом (реализованы фильтры и сортировка), полноценными продуктовыми страницами, корзиной и блогом.

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

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

Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru - Изображение №11
Источник: кейс, размещенный в разделе тематических исследований ampproject.org.

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

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

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

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

Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru - Изображение №12Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru - Изображение №12

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

Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru - Изображение №13Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru - Изображение №13

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

Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru - Изображение №14Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru - Изображение №14

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

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

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

В Wordpress выбрать подходящий плагин можно на странице wordpress.org/plugins. Наиболее популярный плагин — wordpress.org/plugins/amp, инструкция по настройке находится тут

Для сайтов на Drupal есть несколько взаимодополняющих инструмента для внедрения Google 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 и базовой версии отличается, это даст пользователю возможность перейти на «не урезанную» каноническую страницу.
  • 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).

Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru - Изображение №15
Search Console генерирует отчет о найденных проблемах, ошибках и предупреждениях на AMP-страницах сайта.

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

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

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

Полезные ссылки по теме:


ТОП статей и материалов по digital-маркетингу и не только

(0)
Комментарии
<Без имени><Без имени>
Очень интересный материал по теме, спасибо!
Написать сообщение …Загрузить файлы?

Делимся десятилетним опытом продвижения и web-исследованиями по отраслям в рассылке

Всего 2 раза в месяц

Наш и клиентский опыт в digital за 10 лет по отраслям

Подробности в первом письме

Больше статей
Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru- Изображение №1

16 Июля 2019

Агентство AMDG получило сертификат A+ в категории SEO

Наивысшим грейдом сертификации RUWARD обладают только два digital-агентства в стране

Читать далее...
Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru- Изображение №2

12 Июля 2019

Artox Media Digital Group о развитии голосовых помощников

Директор по производству Алексей Чечукевич рассказал об основных тенденциях рассматриваемого рынка

Читать далее...
Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru- Изображение №3

9 Июля 2019

Исследование Artox Media Digital Group на портале Sostav.ru

Ведущее российское отраслевое бизнес-СМИ в области рекламы, маркетинга и PR опубликовало наше исследование о скорости реакции брендов в сети.

Читать далее...
Нужны ли AMP вашему сайту: подробное руководство по технологии - читайте в разделе Материалы на www.artox-media.ru- Изображение №4

24 Июня 2019

Клиентский сервис онлайн: какова скорость реакции компаний в сети?

Мы проанализировали более 15 000 сообщений в социальных сетях брендов, чтобы узнать, насколько быстро они реагируют на запросы пользователей

Читать далее...

ОСТАВЬТЕ ЗАЯВКУ И МЫ ОБЯЗАТЕЛЬНО СВЯЖЕМСЯ С ВАМИ

ОСТАВЬТЕ ЗАЯВКУ И МЫ ОБЯЗАТЕЛЬНО СВЯЖЕМСЯ С ВАМИ