Технология AMP: что это, и как её реализовать

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

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

• 1. Что такое AMP
• 2. Преимущества и недостатки AMP-страниц
• 3. Как внедрить AMP-страницы на сайте
• 4. Как проверить AMP-страницы
• 5. Турбо-страницы от Яндекса

1. Что такое AMP

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

2. Преимущества и недостатки AMP-страниц

Преимущества AMP:

1. Основное преимущество, конечно же, в высокой скорости загрузки. Пользователи могут быстро получать необходимую информацию, а это повышает вероятность того, что они останутся на странице подольше.
   Читайте также: «Как бороться с медленной загрузкой сайта с Netpeak Spider».

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

3. Бесплатное использование для всех, так как AMP — платформа с открытым кодом.

Перейдём к недостаткам этой технологии. Их, к сожалению, немало, но остановимся на основных:

1. Проблемы с отслеживанием. Эффективность AMP-страницы сложно отслеживать в сервисах аналитики — набор данных сильно ограничен. Чтобы настроить теги и коды, по которым будут отслеживаться важные показатели, уйдёт много времени и ресурсов.
2. Так как Google кэширует контент на AMP-страницах и хранит их на собственном сервере, он присваивает своё доменное имя.
3. Так как большая часть дополнительных элементов на AMP-страницах урезается, в том числе и рекламные баннеры, это может привести к снижению доходов от рекламы на сайте.
4. Вебмастерам приходится контролировать основной сайт, версию АМР и мобильную версию. Это зачастую непросто.
5. Сложность в реализации технологии на самописных сайтах.
6. Cложно реализовать возможность добавления товаров в корзину, если речь идёт о коммерческих сайтах.

3. Как внедрить AMP-страницы на сайте

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

1. AMP для сайтов на Wordpress.
2. Для Joomla — плагин wbAMD.
3. AMP для Drupal можно установить с помощью: модуля AMP, темы AMP и HTML-библиотеки AMP.
4. Для Битрикс — Google AMP.
5. Для сайтов на Opencart — Opencart AMP.

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

1. AMP-страницы должны отвечать требованиям HTML-вёрстки.
2. При внедрение стилей и адаптивного дизайна необходимо опираться на официальную инструкцию.
3. URL AMP-страниц должен быть понятным для пользователей. Например, для URL канонической страницы example.com/news/odessa адрес AMP-страницы будет выглядеть так: amp.example.com/news/odessa. Или так: example.com/amp/news/odessa.
4. Канонические страницы должны быть прописаны в теге header AMP-страниц. Пример:

   <link rel="canonical" href="https://www.example.com/url/to/amp/document.html">

5. Контент на AMP-страницах должен соответствовать контенту канонических страниц.
6. На всех главных страницах должна стоять ссылка на AMP-страницу:

   <rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

7. В футере должна быть ссылка на полную версию сайта: это нужно, чтобы пользователь смог легко перейти на основной сайт.
8. В файле robots.txt нужно указать запрет на индексацию страниц AMP роботами Яндекса:
   User-agent: Yandex

   ...

   Disallow: */amp/

9. Чтобы добавить коды счётчиков аналитики на шаблоны AMP-страниц, следуйте этой инструкции от Google.
10. Логотип сайта на AMP-страницах также должен соответствовать определённым требованиям. Подробнее тут.
11. При внедрении JavaScript на страницах используется только библиотека AMP JS, никаких произвольных кодов.
12. Для вставки видео используйте специальные AMP-расширения.
13. Для добавления рекламы следуйте этой инструкции.
14. Чтобы добавить структурированные данные на AMP-страницу, ознакомьтесь со справочным материалом от Google, где описаны типы структурированных данных и алгоритмы их реализации.
15. После внедрения HTML-код шаблонов нужно проверить в специальном валидаторе. Это важно, так как страницы должны правильно работать и показываться в результатах выдачи.

4. Как проверить AMP-страницы

Помимо валидатора кода вы можете проверить, соответствуют ли AMP-страницы всем стандартам, в инструменте Google «Проверка AMP страниц».

1. Введите URL в строке и нажмите на кнопку «Проверить страницу».
2. Если вы указали каноническую страницу, инструмент покажет ссылку на AMP-версию. Нажмите на «Результаты проверки AMP-версии».

   

3. Если страница соответствует всем критериям,вы увидите соответствующее оповещение.

   

Другой способ проверить AMP-страницы — с помощью Netpeak Spider. Краулер определяет AMP-страницы, которые не отвечают требованиям AMP Project, как ошибку «Неправильный формат AMP HTML», а также находит индексируемые AMP-страницы.

Для проверки проделайте следующее:

1. Отметьте в разделе «Head теги» параметр «AMP» на боковой панели.

   

2. Введите начальный URL и нажмите «Старт».

3. По окончании анализа в столбце «AMP HTML» основной таблицы значение TRUE будет указывать, что у страницы есть AMP-версия, а FALSE, что нет.

   

4. На боковой панели в отчёте по ошибкам посмотрите, не найдена ли среди них ошибка высокой критичности «Неправильный формат AMP HTML» и и ошибка средней критичности «Индексируемые AMP-страницы».

   

5. Если на сайте есть AMP-страницы, которые не соответствуют стандартам AMP Project, их необходимо исправить. А для AMP HTML страниц, у которых ест десктопная версия, нужно установить canonical на эту версию.

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

Турбо-страницы от Яндекса — это аналогия AMP страниц. Они тоже предназначены для ускорения загрузки, которое достигается за счёт оптимизации вёрстки и кэшированию контента на сервере Яндекса.

5.1. Преимущества турбо-страниц

1. Быстрая загрузка.
2. Уменьшение нагрузки на сервер сайта.
3. Потенциальный рост посещаемости сайта с мобильных устройств.
4. Поддерживается реклама.
5. Бонусы от Яндекса за их использование (он старается ранжировать такие страницы выше).
6. Наличие турбо-страниц способствует формированию расширенных сниппетов (но не гарантирует).

5.2. Недостатки турбо-страниц

1. Никакой оригинальности. Турбо-страницы делаются по одному шаблону и поэтому похожи друг на друга. Если вы намерены отличаться от конкурентов дизайном, турбо-страницы вам не подойдут.
2. Малополезны для коммерческих сайтов из-за отсутствия возможности делать заказ.
3. Турбо-страницам присваивается домен Яндекса (как и в случае с Google).

5.3. Как настроить турбо-страницы

Чтобы настроить турбо-страниц на сайте, нужно создать RSS-ленту. Для CMS есть решения в виде плагинов, которые позволяют автоматически генерировать RSS:

1. Для WordPress:
   • RSS for Yandex Turbo,
   • Mihdan: Yandex Turbo Feed,
   • Yandex.News Feed by Teplitsa.
2. 1С-Битрикс: Яндекс Турбо-страницы.
3. Drupal: Яндекс.Турбо RSS.
4. Joomla: FL Yandex Turbo.
5. OpenCart: Модуль Турбо-страницы товаров в Яндекс Opencart 3.0.

RSS-канал для сайтов собственной разработки создаётся вручную, и для этого потребуются навыки программирования или привлечение специалистов. Упрощённый пример RSS-канала выглядит так:

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

После создания RSS-канал откройте Яндекс.Вебмастер и выполните следующие действия:

1. Откройте раздел «Турбо-страницы» → «Источники», выберите сайт и добавьте созданный RSS-канал.

   

2. После этого RSS-канал будет отправлен на валидацию. Если сервис покажет ошибки, перепроверьте, правильно ли выполнили требования, которые описаны в документации Яндекса.
3. Настройте отображение турбо-страниц в разделе «Настройки». Здесь вы можете:
   • указать название сайта;
   • выбрать логотип;
   • добавить пункты меню;
   • выбрать счётчик метрики;
   • подключить рекламные блоки.

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

Подводим итоги

Быстрая загрузка страниц сайта — мастхэв для тех, кто хочет, чтобы сайт позитивно воспринимали пользователи и поисковые системы. Один из распространённых методов ускорить страницы — внедрить технологии AMP от Google и турбо-страницы от Яндекс. Чтобы настроить AMP / турбо-страницы для сайтов, созданных на CMS, воспользуйтесь специальными плагинами, которые я описала в этом посте. Внедрение технологии на самописных сайтах осуществляется труднее, так как потребуется навыки программирования или привлечение разработчика.

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

Расскажите о своём опыте использования этих технологий в комментариях: как внедряли, и какие это дало результаты?