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

Мануалы
6Нравится
Комментарии
Поделиться
Технология 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. Основное преимущество, конечно же, в высокой скорости загрузки. Пользователи могут быстро получать необходимую информацию, а это повышает вероятность того, что они останутся на странице подольше.

  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-код шаблонов нужно проверить в специальном валидаторе. Это важно, так как страницы должны правильно работать и показываться в результатах выдачи.

О результатах после внедрения AMP, и о том, что делать дальше, читайте в посте «AMP: как ускорить загрузку первой страницы до 0.2 секунд».

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

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

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

    Как проверить AMP-страницы в инструменте Google «Проверка AMP страниц»

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

    Как проверить AMP-страницы в инструменте Google «Проверка AMP страниц»

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

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

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

    Как проверить правильность настройки AMP-страниц в Netpeak Spider

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

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

    Как проверить правильность настройки AMP-страниц в Netpeak Spider

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

    Как проверить правильность настройки AMP-страниц в Netpeak Spider

  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:
  2. 1С-Битрикс: Яндекс Турбо-страницы.
  3. Drupal: Яндекс.Турбо RSS.
  4. Joomla: FL Yandex Turbo.
  5. OpenCart: Модуль Турбо-страницы товаров в Яндекс Opencart 3.0.

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

<?xml version = "1.0" encoding = "UTF-8"?> <rss xmlns:yandex="http://news.yandex.ru" xmlns:media="http://search.yahoo.com/mrss/" xmlns:turbo="http://turbo.yandex.ru" version="2.0"> <channel> <item turbo="true"> <link>http://www.example.com/page1.html</link> <turbo:content> <![CDATA[ <!-- Page content --> ]] > </turbo:content> </item> </channel> </rss>

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

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

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

    Как подключить простую турбо-страницу в Яндекс.Вебмастере

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

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

Помимо AMP и турбо-страниц существуют другие мобильные форматы, о них мы рассказали в посте «5 быстрых мобильных форматов: плюсы и минусы с точки зрения SEO».

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

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

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

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