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

Юля ТелижнякРедакторка блога в Netpeak Software

2427

7 августа 2020

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

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

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

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

1. Что такое AMP

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

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

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

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

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

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

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

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

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

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

AMP-страницы должны отвечать требованиям HTML-вёрстки.
При внедрение стилей и адаптивного дизайна необходимо опираться на официальную инструкцию.
URL AMP-страниц должен быть понятным для пользователей. Например, для URL канонической страницы example.com/news/odessa адрес AMP-страницы будет выглядеть так: amp.example.com/news/odessa. Или так: example.com/amp/news/odessa.
Канонические страницы должны быть прописаны в теге header AMP-страниц. Пример:
```
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
```
Контент на AMP-страницах должен соответствовать контенту канонических страниц.
На всех главных страницах должна стоять ссылка на AMP-страницу:
```
<rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
```
В футере должна быть ссылка на полную версию сайта: это нужно, чтобы пользователь смог легко перейти на основной сайт.
В файле robots.txt нужно указать запрет на индексацию страниц AMP роботами Яндекса:
User-agent: Yandex
...
Disallow: */amp/
Чтобы добавить коды счётчиков аналитики на шаблоны AMP-страниц, следуйте этой инструкции от Google.
Логотип сайта на AMP-страницах также должен соответствовать определённым требованиям. Подробнее тут.
При внедрении JavaScript на страницах используется только библиотека AMP JS, никаких произвольных кодов.
Для вставки видео используйте специальные AMP-расширения.
Для добавления рекламы следуйте этой инструкции.
Чтобы добавить структурированные данные на AMP-страницу, ознакомьтесь со справочным материалом от Google, где описаны типы структурированных данных и алгоритмы их реализации.
После внедрения HTML-код шаблонов нужно проверить в специальном валидаторе. Это важно, так как страницы должны правильно работать и показываться в результатах выдачи.

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

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

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

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

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

Отметьте в разделе «Head теги» параметр «AMP» на боковой панели.
Введите начальный URL и нажмите «Старт».
По окончании анализа в столбце «AMP HTML» основной таблицы значение TRUE будет указывать, что у страницы есть AMP-версия, а FALSE, что нет.
На боковой панели в отчёте по ошибкам посмотрите, не найдена ли среди них ошибка высокой критичности «Неправильный формат AMP HTML» и и ошибка средней критичности «Индексируемые AMP-страницы».
Если на сайте есть AMP-страницы, которые не соответствуют стандартам AMP Project, их необходимо исправить. А для AMP HTML страниц, у которых ест десктопная версия, нужно установить canonical на эту версию.

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

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

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

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

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