Что такое AMP-страницы, для чего они нужны и как их подключить

Что такое AMP

AMP — это аббревиатура Accelerated Mobile Pages или ускоренных мобильных страниц. В чем суть?

Всем нравится, когда так: кликнул ссылку — веб-страница моментально загрузилась. Так получается не всегда, но Google рассказал, что:

• если страница загружается 3 секунды, пользователи уходят на 32% чаще по сравнению с загрузкой в 1 секунду;
• а если целых 6 секунд, то на 106%.

Тут-то и подключается AMP — инструмент для того, чтобы сократить время загрузки.

Так выглядят AMP-страницы

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

В статье разберемся, а нужна ли вам AMP-страница, как ее подключить, использовать и оптимизировать — легко и просто.

Для чего нужны AMP-страницы

Они полезны, например, контентным площадкам — новостным каналам, блогам, обучающим проектам, — которые подвисают из-за количества информации. Или интернет-магазинам — в AMP можно показать карточки товаров и быстро привести клиента к покупке.

А на сайтах туроператоров, дизайнерских или агентств по недвижимости часто используют анимацию, 3D, видео и аудио. Такие файлы заметно снижают производительность — в таком случае AMP быстро загрузит аналог полноформатной страницы.

Оценка показателей скорости загрузки по данным Google

Кроме скорости загрузки страницы, AMP улучшают:

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

Конверсия на сайте всего 2%, а хотелось бы все 100? Просто подключите Calltouch

Откройте доступ ко всем посетителям сайта

Звоните, отправляйте SMS, даже если нет контактов

Подробнее

Как работают AMP-страницы

Сейчас AMP-страницы используются только в Google. Принцип их работы такой: в HTML прописываются теги–«указатели», с помощью которых Google и находит их, а потом кеширует содержимое.

Если пользователь кликает в поиске на такую страницу, информация подгружается из CDN Google в iframe — что это такое и зачем?

CDN — это сетевая инфраструктура, главная цель которой — сократить время загрузки контента. По такой системе серверы, с которых подгружается информация, расположены в разных точках мира.

Например, вы живете в Москве и заходите на сайт банка. Большая часть серверов банка находит рядом с вами — для вас сайт загрузится быстро. А если ваш друг из Владивостока заходит туда же, странички могут подвисать — по крайней мере, так было без CDN. А с CDN, используемой теперь, контент сайта загрузится с ближайшего сервера, например из того же Владивостока.

А iframe — это то, что позволяет показывать AMP-страницу, как отдельную часть сайта.

Почему вообще AMP-страницы загружаются быстрее?

Для быстрой загрузки работают следующие методы:

• Оптимизация кода — упрощенный HTML и минимизированный CSS.
• AMP JavaScript — JS-библиотека для отображения динамического контента. Сторонний JS использовать нельзя.
• Кеширование — Google выделяет кеш для AMP-страниц.
• Асинхронность — весь контент подгружается асинхронно и не мешает основному потоку страницы.
• Размер — размер элементов определяется еще до загрузки, так под него заранее выделяется место.

Принцип работы AMP-страниц

Плюсы и минусы AMP

Инструменты, которые используются для быстроты загрузки, накладывают и ограничения на то, что могут и как выглядят AMP-страницы. Вот основные плюсы и минусы:

Как подключить AMP-страницы

Сперва интеграция может показаться сложной — мы дадим пошаговую инструкцию того, как это сделать. 

Есть несколько способов подключения AMP:

• разработать вручную;
• использовать готовые плагины и расширения для популярных CMS.

Это не всегда взаимозаменяемые методы. Чтобы выбрать метод подключения, нужно учесть:

• Тип и размер сайта — для крупных порталов или интернет-магазинов обычно нужны сложная интеграция и настройка. Маленьким сайтам и лендингам хватит базовых плагинов.
• CMS — на некоторых платформах, например WordPress, Drupal, уже есть плагины.
• Бюджет — готовые решения обычно стоят дешевле самописных AMP.
• Экспертность — если у вас или вашей команды достаточно технических знаний, вы можете выбрать самописное подключение. А если нет, лучше обратиться к специалистам или готовым решениям.
• Монетизация — не все плагины поддерживают интеграцию с рекламными платформами.

Подключение AMP-страниц вручную

Вот простая инструкция подключения AMP-страниц вручную — если вы владелец бизнеса и вам это ни о чем не говорить, эксперт обязательно разберется:

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

Самописные AMP — плюсы и минусы

Самописные AMP часто кажутся первым логичным решением — или, наоборот, кажутся слишком сложными. Рассмотрим их преимущества и недостатки — так будет проще выбрать. Плюсы:

• Контроль — в отличие от готовых плагинов с ручными AMP-страницами можно полностью контролировать код. Это гибкость в плане дизайна и функционала.
• Производительность — вы оптимизируете страницы самостоятельно и знаете недостатки сайта, так можно достичь максимальной скорости загрузки без лишнего кода.
• Индивидуальный дизайн — код позволит вам создавать уникальный дизайн, который, правда, все равно должен соответствовать ограничениям AMP.
• Интеграция — вручную можно настроить интеграцию с различными сторонними сервисами и рекламными платформами. Здесь не действуют ограничения плагинов и расширений.

Минусы ручного подключения:

• Знания — без экспертности никуда. Чтобы корректно создать и настроить AMP-страницы, нужно понимать, как работают код и разметка.
• Время — ручные страницы занимают больше времени, чем готовые решения.
• Ошибки — допустить ошибки в коде очень просто, особенно если у вас нет нужного опыта.
• Обновления и поддержка — придется самостоятельно следить за изменениями и обновлениями в спецификации.
• Тестирование — придется тщательно тестировать каждую страницу на соответствие требованиям и проверять их на разных устройствах.

Подключение с помощью плагинов

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

WordPress

Плагин устанавливается в 2 этапа: 

• скачайте и запустите дополнение; 
• проверьте корректность кода валидатором.

Улучшить дизайн странички можно с AMP for WP — с ним же можно добавить дополнительные опции в админпанели плагина.

WP предлагает разные темы

После этого можно начать настройку:

• Логотип редактируют во вкладке General. Размер картинок — 190х36 пикселей, его можно изменить функцией Custom Logo Size.
• Главную страницу назначают опцией Front Page.
• Чтобы воспроизвести статические страницы, используют опцию AMP on Pages — надо поменять позицию на «on».
• Статистику подключают через Google Analytics — нужно внести идентификатор страницы в предназначенное для этого поле.
• Дизайнерские элементы редактируют функцией Launch Post Builder — это информационные блоки, цветовая гамма, фон, шрифт, другие элементы оформления.
• Пользовательские стили добавляют в разделе Design Selector.
• Для SEO-оптимизации рекомендуются дополнения типа Yoast SEO.

С помощью плагина можно настроить и рекламу — в разделе Advertisement. Там можно указать расположение блоков и их характеристики. 

Есть дополнительные функции:

• Рекомендации для чтения.
• Кнопки для социальных сетей и комментариев.
• Чтобы предложить перейти на полную версию сайта, настройте кнопку Non-AMP.

Drupal

Тут нужен не просто плагин, а целый комплект:

• основной модуль;
• тема;
• HTML-библиотека.

Техническое дополнение: модуль работает в паре с Chaos Tools для управления контентом и Token.

Для размещения рекламы есть интеграция с Google AdSense.
Тема, отображение контента и другие элементы настраиваются в разделе AMP Configuration. Для статистики и отслеживания посещений можно добавить пиксель и подключить Google Analytics, как это делается и на WordPress.

Joomla!

AMP-страницы для сайтов на Joomla! создают с wbAMP. Плагин платный, стоимость полной версии — 44 USD. В бесплатном варианте функциональность ограничена, есть настройка только базовых характеристик.

Такие страницы предлагает wbAMP

Есть два основных варианта микроразметки: 

• для новостей — NewsArticle; 
• для статей — BlogPosting. 

Указать, для вывода каких из них применять AMP, можно в разделе «Выбрать страницы».

Есть и другой плагин — JAmp. Тоже платный — 39€.

OpenCart, Magento и PrestaShop

Для «Опенкарт» есть дополнение Accelerated Mobile Pages. Параметры отображения информации на сайтах настраиваются примерно так же, как в других CMS. 

Для Magento — расширение Accelerated Mobile Pages. 

А для Prestashop — PrestaShop AMP.

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

Следующий шаг после внедрения AMP — проверить их. Это очень важно — если страница некорректно отображается, есть ошибки в коде или интеграциях, она просто не попадет в выдачу.

• Валидатор от Google — . Для этого: 

1. Откройте AMP-страницу в браузере Chrome. 
2. Добавьте #development=1 к URL вашей страницы.
3. Откройте инструменты разработчика Chrome (Ctrl+Shift+I или Cmd+Option+I на Mac) и перейдите на вкладку Console.
4. Если есть ошибки, они появятся в консоли.

• Плагин для браузера — есть специальные плагины, которые автоматически проверяют страницы на соответствие стандартам.
• Онлайн-валидатор — есть и множество сторонних сервисов, которые проверят страницы.
• Google Search Console — если добавить сайт в Google Search Console, то в разделе AMP вы увидите все ошибки.
• Тестирование на устройствах — важно проверить, как страницы отображаются на различных смартфонах и планшетах.
• Тестирование функционала — нужно убедиться, что все элементы на странице работают корректно. Особенно, если вы писали страницу вручную.
• Проверка SEO и метаданных — проверить их важно, чтобы страницы правильно отображались в поисковике и высоко ранжировались.

Сделать — это еще не все

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

Тут поможет сквозная аналитика Calltouch — удобно, просто, полезно. Мы все автоматизировали — подключите сайт и следите за изменениями.

Обратите внимание на:

• баннеры — может, реклама просто выглядит не очень?
• призыв к действию — он должен быть четким, понятным и привлекательным;
• что именно вы предлагаете — точно ли вы выбрали правильный контент для?

Сделать работающую AMP — это только часть плана. Чтобы не потратить ресурсы зря, первым делом продумайте страничку со стороны SEO, пользовательского опыта и контента.

Как удалить AMP-страницы

Способ, каким удаляют AMP-страницы, зависит от того, каким способом они были созданы и какой CMS вы пользуетесь. Это важно — если неправильно или не полностью удалить их, то возникнут проблемы.

Вот общий план действий для удаления:

• Плагина или модуль:
  Если вы использовали CMS и добавили AMP-страницы с помощью плагина или модуля, вы можете просто отключить и удалить их — все очень просто.
• AMP-код:
  В случае самописного AMP вам придется отредактировать сайт и вручную удалить AMP-HTML код.
• Перенаправления (301 редиректы):
  Настройте перенаправления с удаленных AMP-URL на основные версии, чтобы не вылезали ошибки 404.
• Обновление robots.txt:
  Если вы добавляли директивы в robots.txt для управления индексацией, обновите этот файл и соответствующие директивы.
• Уведомление поисковых систем:
  Вы можете отправить обновленный sitemap.xml через Google Search Console — это ускорит удаление.
• Мониторинг ошибок:
  После удаления регулярно проверяйте Google Search Console или другие инструменты — появляются ли ошибки 404 или другие баги.
• Проверьте ссылки:
  Если на сайте или на сторонних ресурсах есть ссылки на AMP-страницы, обновите или удалите их.
• Кэш и CDN:
  Если использовались сервисы кеширования или CDN, убедитесь, что страницы удалены и из кеша.

В заключение

По данным на конец 2022 года доля мобильного трафика в Рунете достигла показателя в 90% — самый большой за всю историю.

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