Акция!
В ноябре скидка 50% на Смарт-коммуникации при покупке WhatsApp для бизнеса.
Реклама ООО «Колтач Солюшнс»
ИНН 7703388936
erid: 2VtzqxRbFoi
AMP-страницы: что это, как подключить и проверить Что такое AMP и для чего нужны AMP-страницы. Разбираемся, как это работает, плюсы и минусы ускорения страниц. Подробная инструкция по подключению и настройке AMP вручную или с помощью плагинов для CMS. Что такое AMP-страницы, для чего они нужны и как их подключить
Средняя оценка 4.2 Общее количество оценок 4
29 августа 2022
Нет времени читать?
Отправить статью на почту
Главная | Блог | Темы | Маркетинг | Что такое AMP-страницы, для чего они нужны и как их подключить

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

29 августа 2022
21 мин на чтение
18 182
Что такое AMP-страницы, для чего они нужны и как их подключить
author__photo

Что такое AMP

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

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

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

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

AMP-страницы

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

 

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

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

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

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

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

ХорошоНужно увеличить скоростьПлохо
Время отрисовки самого крупного контента<=2,5 сек.<=4 сек.>4 сек.
Время между первым взаимодействием (нажатием на ссылку или кнопку) и ответом бразуера<=100 мс<=300 мс>300 мс

Оценка показателей скорости загрузки по данным 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-страницы. Вот основные плюсы и минусы:

✅ быстрая загрузка — в среднем до 1 секунды

✅ лучшее ранжирование — Google дает преимущество AMP-страницам

✅ высокая конверсия — по сравнению с мобильными версиями

✅ стандартизация — страницы выглядит одинаково на всех устройствах

✅ уменьшение нагрузки на серверы

❌ ограниченные функционал — ограничение JS может снизить функциональность

❌ дизайн — может быть менее гибким

❌недоступны навигация, сайдбар, другие полезные блоки

❌ код отслеживания необходимо добавлять вручную на каждую страницу

❌ только Google — AMP контролирует и продвигает Google, хотя это и открытый стандарт

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

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

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

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

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

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

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

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

СтруктураНачните с базового HTML-шаблона и добавьте специфические для AMP теги — <!doctype html> в начале и <html ⚡> или <html amp> для обозначения AMP-страницы.
AMP-скриптВставьте скрипт <script async src=”https://cdn.ampproject.org/v0.js”></script> внутри тега <head>. Это подгрузит AMP JS.
Мета-тегиДобавьте мета-теги для корректного отображения страницы, например <meta charset=”utf-8″> и <meta name=”viewport” content=”width=device-width”>.
СтилизацияВ AMP можно использовать только встроенные CSS-стили. Подключите их тегом <style amp-custom> ваш CSS </style> в <head>.
Специальные тегиВместо обычных тегов (как <img>) используйте AMP-альтернативы (например, <amp-img>).
Каноническая страницаДобавьте тег <link rel=”canonical” href=”URL_оригинальной_страницы”>, чтобы поисковые системы знали, что ваша AMP-страница — версия основной.

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

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

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

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

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

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

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

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

WordPress

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

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

Разные темы на 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

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

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

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

Joomla!

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

Страницы от wbAMP

Такие страницы предлагает 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 — удобно, просто, полезно. Мы все автоматизировали — подключите сайт и следите за изменениями.

Сквозная аналитика
Оценивайте эффективность всех рекламных кампаний в одном окне от клика до ROI
Вкладывайте в ту рекламу, которая приводит клиентов
Подробнее

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

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

Сделать работающую 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 требует подготовки, и это — анализ, сбор статистики и внимательное планирование.

Редактор блога Calltouch
Нет времени читать?
Оцените
Поделитесь с друзьями
Лучшие маркетинговые практики — каждый месяц в дайджесте Calltouch
Подписывайтесь сейчас и получите 13 чек-листов маркетолога
Нравится наш блог?
Давайте дружить!
Медиакит
Хотите получить актуальную подборку кейсов?
Прямо сейчас бесплатно отправим подборку обучающих кейсов с прибылью от 14 730 до 536 900р.
[contact-form-7 404 "Not Found"]

Повышаем конверсию на каждом этапе воронки

Чтобы клиент шел по своему пути точно к цели, маркетологу нужны информация и сервисы – свои на каждом этапе. Инструменты Calltouch могут закрыть все потребности маркетинга на пути клиента.

У нас тут cookies…
На сайте используются файлы cookies. Продолжая использование сайта, вы соглашаетесь с этим. Подробности об обработке ваших данных — в политике использования файлов cookie.
Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить