AMP-страницы: полный гайд по ускоренным страницам Google. Создание, валидация, публикация

Контент-маркетолог
Стаж 15 лет

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

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

Google продвигает эту технологию, но в ее улучшении участвует и множество независимых разработчиков.

По данным W3Techs, на 24 октября 2021 года эту технологию использует всего лишь 0,2 % сайтов в интернете
По данным W3Techs, на 24 октября 2021 года эту технологию использует всего лишь 0,2 % сайтов в интернете

Достоинства AMP

Мгновенная загрузка: это главное их достоинство. Также они могут улучшить юзабилити, сделать сайт его более удобным и красивым для мобильного пользователя. Кроме этого, технология позволяет:

  1. Увеличить долю мобильного трафика.
  2. Улучшить поведенческие факторы трафика.
  3. Улучшить показатели e-commerce.
  4. Снизить статическую нагрузку, создаваемую вашим сайтом на хостинг.

Кроме того, можно сравнивать в процессе тестирования с обычной версией сайта и размещать в них рекламные блоки.

Недостатки AMP

  1. Портится и упрощается дизайн страницы. Если в полной версии визуальная составляющая страницы выводится корректно и красиво, то в AMP урезается все:
  2. Сравнение со стандартной страницей
    Сравнение со стандартной страницей

  3. Стандартные скрипты не работают. Частично эту проблему можно решить через iFrame. Этот тег позволяет сделать фрейм внутри уже существующего документа.
  4. Динамические функции не работают. Вы привыкли, что у вас есть модальные окна, анимированные элементы, подтверждение по клику и любые другие динамические функции. Но на AMP все это работать не будет.
  5. Стандартная веб-аналитика (GA, «Яндекс.Метрика») может работать с некорректно, если вы не установите специальный тег.

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

Как создать AMP-страницы на WordPress

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

Самый популярный open-source движок в мире — WordPress, поэтому рассмотрим установку и настройку плагина именно на примере этой CMS.

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

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

Плагин от разработчика Project Contributors — один из лучших вариантов для Wordpress
Плагин от разработчика Project Contributors — один из лучших вариантов для Wordpress

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

  1. Упрощает разработку страниц с нуля.
  2. Максимально автоматизирует процесс AMP-разметки, позволяя работать в стандартном интерфейсе WordPress.
  3. Позволяет валидировать созданные страницы.

Шаблоны в плагине By Project Contributors

Плагин позволяет создавать страницы тремя разными способами. Здесь эти способы называются шаблонами:

Доступно три типа шаблона: стандартный, переходный и читательский
Доступно три типа шаблона: стандартный, переходный и читательский

Различия между ними заключаются в количестве используемых тем (одна или две) и количестве версий сайта. Рассмотрим режимы шаблонов подробнее.

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

Transitional, или переходный режим. Предусматривает одну тему и две версии каждой страницы. Активная тема используется для обслуживания обоих версий. Этот режим является хорошим выбором, если сайт использует не полностью совместимую тему и функциональные различия между страницами допустимы.

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

Как установить плагин

Устанавливаем плагин как обычно — через административную панель WordPress:

Добавляем новый плагин
Добавляем новый плагин

В поисковой строке указываем название плагина:

Ищем плагин Project Contributors
Ищем плагин Project Contributors

Устанавливаем и активируем плагин:

После нажатия кнопки «Установить» она превратится в «Активировать». Нажимаем ее
После нажатия кнопки «Установить» она превратится в «Активировать». Нажимаем ее

Открываем настройки плагина удобным способом — через навигационное меню слева или через страницу установленных плагинов:

Открываем параметры установленного плагина
Открываем параметры установленного плагина

Если ваша тема WP поддерживает AMP, выберите Standard или Transitional и нажмите кнопку Save:

После выбора режима нажмите Save
После выбора режима нажмите Save

Если вы хотите настраивать внешний вид темы для AMP-страниц самостоятельно, выбирайте ручной шаблон:

Выбираем тему
Выбираем тему для

Сейчас мы рассматриваем настройки шаблона Reader. После выбора режима шаблона можно перейти в продвинутые настройки:

Активация автоматического редиректа мобильных пользователей на AMP-страницы и настройка типов контента
Активация автоматического редиректа мобильных пользователей на AMP-страницы и настройка типов контента

Часто плагины добавляют недопустимые варианты HTML-разметки. В разделе Plugin Suppression вы можете запретить запуск таких плагинов на всех страницах:

Список активных плагинов. Недопустимая разметка не обнаружена ни в одном плагине
Список активных плагинов. Недопустимая для не обнаружена ни в одном плагине

Если вы хотите подключать аналитику вручную, то придется указать конфигурацию JSON в разделе Analytics:

Плагин предоставляет простой механизм для вставки тегов аналитики
Плагин предоставляет простой механизм для вставки тегов аналитики

При необходимости в разделе Paired URL Structure можно настроить парную структуру URL:

Когда вы используете шаблон Transitional или Reader, ваш сайт находится в конфигурации «Парный AMP»
Когда вы используете шаблон Transitional или Reader, ваш сайт находится в конфигурации «Парный AMP»

«Парный AMP» подразумевает, что канонические URL-адреса не являются AMP-страницами, а отдельные версии страниц — имеют специфичные URL.

Структура парного URL-адреса для AMP-разметки не важна независимо от того, используется ли корректный параметр запроса или тот же суффикс пути. Использование параметра запроса позволит решить проблему 404-й ошибки, когда плагин деактивирован.

Внимание: изменение структуры парных URL-адресов может привести к тому, что AMP-страницы временно исчезнут из результатов поиска. Я рекомендую не менять эти настройки без серьезной необходимости.

Мастер настройки

Если вы не хотите копаться в лишних настройках, настраивайте плагин при помощи мастера. Чтобы запустить его на главной странице плагина нажмите кнопку Reopen Wizard:

Запустите мастер настройки и следуйте подсказкам плагина
Запустите мастер настройки и следуйте подсказкам плагина

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

Как создать AMP-страницы вручную

Если вы начинающий веб-разработчик и вам интересно, как устроена AMP-технология, попробуйте создать страницу на базе HTML-страницы. Для начала проанализируйте этот шаблон, который мы взяли с айта amp.dev:

<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/ru/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" content="width=device-width">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>

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

Разметка AMP

Давайте посмотрим требования к разметке в иерархическом порядке:

  1. <!doctype html> — начинает документ.
  2. <html > — тег обязателен.
  3. <head> и <body> — обязательны, в отличие от обычного HTML-документа.
  4. В теге head должен присутствовать обязательный код:

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Переходим к разметке заголовка.

Требования к разметке тега заголовка

  • <link rel="canonical" href="$SOME_URL"> — указывает исходную страницу и располагается внутри заголовка.
  • <meta charset="utf-8"> — определяет кодировку документа. Этот тег должен быть самым первым.
  • <meta name="viewport" content="width=device-width"> — определяет видимую область страницы. Обратите внимание: указывается initial-scale со значением 1.
  • <script async src="https://cdn.ampproject.org/v0.js"></script> — загружает библиотеку. Обязательно идет последним.

Как добавить изображение на AMP-страницу

Это можно сделать при помощи специального тега:

<amp-img src="primer.jpg" alt="Welcome" height="400" width="800"></amp-img>

Тег для изображения, как видите, немного изменен по сравнению с обычным HTML (вместо img src в начале идет amp-img). Но большая часть стандартных HTML-тегов прекрасно работает и в AMP-разметке.

Настраивать стили можно при помощи обычных свойств CSS. Здесь ничего нового. Единственное замечание: одна страница должна использовать одну таблицу. Стиль элементов меняется стандартными селекторами CSS:

<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>

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

Что касается размещения изображений, медиазапросов, других элементов, то подробно об этом написано на сайте, в разделе «Поддерживаемые макеты».

Прежде чем валидировать страницу, нужно ответить на вопрос: нужны ли вам обе версии страницы, с и без AMP? Если да, то нужно связать их при помощи <link>. Для этого на AMP-версию страницы добавьте следующий код (в раздел head). Не забудьте указать свой URL вместо www.primer.com:

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

На обычную версию страницы (без AMP) добавьте код:

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

Бывает и так, что есть только одна AMP-страница. В таком случае просто сделайте каноникал на нее саму:

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

Действия и события

AMP поддерживает интерактивный пользовательский интерфейс. Но для удобства использования все делается немного иначе, чем на обычных HTML-страницах. Так AMP использует атрибут on для установки event handlers (обработчиков событий) на элементы.

Как и атрибуты, некоторые события/действия доступны для общих элементов, другие — только для определенных компонентов.

Для нашей первой страницы мы зарегистрируем базовое событие — клик, а затем ответим действием скрытия.

Добавьте кнопку на свою страницу и присвойте ей атрибут on:

<button on="">
Goodbye AMPHTML World!
</button>

Первое, что мы определим в значении атрибута on — событие, которое мы ожидаем. Для регистрации клика (десктоп и мобильное устройство) на AMP-странице используем событие tap:

<button on="tap">

Затем добавляем двоеточие и определяем id цели, на которую должно воздействовать наше действие. Мы скроем наш элемент <h1 id = "hello">. Для этого добавим надпись "hello" после двоеточия:

<button on="tap:hello">

Наконец, мы добавляем знак «точка» и определяем действие. В данном случае — hide:

<button on="tap:hello.hide">

Теперь, если мы кликнем по кнопке, <h1> элемент будет скрыт. Подробнее о действиях и событиях написано в справке по AMP-технологии.

Осталось выполнить валидацию.

Валидация страницы

Прежде чем валидировать страницу, выполните ее предпросмотр. Самый простой способ — открыть страницу в браузере. Если визуально все корректно, сразу переходим к валидации.

Валидация — проверка кода страницы на стандартные или формальные ошибки HTML.

Для этого откройте сервис проверки страниц AMP от Google и укажите URL нужной:

Указываем ссылку
Указываем ссылку на AMP-версию страницы

Проблема не подтвердилась. Валидация пройдена успешно:

Страница валидирована
Страница валидирована

Все! Теперь страницу можно опубликовать на сайте.

Как отслеживать посещаемость AMP-страниц в Google Analytics

Для этого нужно связать AMP-страницы с Google Analytics. Сделать это проще всего через «Google Менеджер тегов».

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

  1. Откройте менеджер тегов. Нам нужен экран «Все аккаунты»:
  2. Открываем аккаунты в Tag Manager
    Открываем аккаунты в Tag Manager

  3. Нажмите на многоточие:
  4. Открываем настройки аккаунта
    Открываем настройки аккаунта

  5. Создаем новый тип контейнера:
  6. Нажмите кнопку «Создать контейнер»
    Нажмите кнопку «Создать контейнер»

  7. Название можно дать любое. Обязательно указываем целевую платформу — AMP :

Настройка контейнера завершена, осталось сохранить его. Для этого нажмите кнопку «Создать»
Настройка контейнера завершена, осталось сохранить его. Для этого нажмите кнопку «Создать»

Мы создали контейнер. После этого появится экран, откуда нужно скопировать скрипт (первый код) и config (второй код).

Нам нужно добавить скрипт и amp-analytics config на AMP-страницы своего сайта
Нам нужно добавить скрипт и amp-analytics config на AMP-страницы своего сайта

Для удобства оставляем эту вкладку браузера открытой или копируем оба фрагмента, например, в блокнот. Если вы уже закрыли менеджер тегов, получите скрипты по клику на пиктограмме шестеренки:

Открываем администрирование аккаунта
Открываем администрирование аккаунта

Далее нажмите кнопку «Установить Google Менеджер тегов»:

Получаем код контейнера для AMP-страниц
Получаем код контейнера для AMP-страниц

А вот и наш код — оба его фрагмента:

Копируем оба фрагмента в блокнот
Копируем оба фрагмента в блокнот

Итак, первый фрагмент кода — это главный скрипт. Его нужно добавить на AMP-страницу в конце тега head.

Второй скрипт относится к Tag Manager и включает настройки для него. Его нужно добавить в начале тега body. Если добавление кода на страницу вызвало у вас затруднение — изучите Краткое руководство по началу работы с Tag Manager или попросите разработчика добавить код на страницу.

Учтите, что код на скриншоте принадлежит моему контейнеру. Его не нужно копировать, ведь у вас будет собственный код.

Остался завершающий шаг — нужно кастомизировать теги в «Google Менеджер тегов» и опубликовать их. Для этого возвращаемся в «Google Менеджер тегов» и выполняем следующие действия:

1. На экране «Все аккаунты» кликаем по созданному контейнеру:

Выбираем ранее созданный контейнер
Выбираем ранее созданный контейнер

2. Нажимаем кнопку «Теги» и создаем новый:

Создаем новый тег
Создаем новый тег

3. Выбираем тип тега. Для этого кликаем по пиктограмме карандаша:

После нажатия мы попадем в окно с настройкой тип тега
После нажатия мы попадем в окно с настройкой тип тега

4. Далее нужно кастомизировать тег. Действия будут различаться в зависимости от поставщика тега. Допустим, у нас стандартная Google Analytics. Выбираем этого поставщика тегов:

Выбираем тип тега
Выбираем тип тега

5. Указываем ID. Выбираем переменную и уточняем тип отслеживания:

Чтобы указать идентификатор, кликните по иконке конструктора и выберите необходимую переменную
Чтобы указать идентификатор, кликните по иконке конструктора и выберите необходимую переменную

6. Теперь настраиваем действия, которые станут триггером активации тега:

Настраиваем триггеры активации
Настраиваем триггеры активации

7. Отмечаем чекбокс триггера, который мы настроили на предыдущем шаге и добавляем его:

Выбираем триггер и нажимаем «Добавить»
Выбираем триггер и нажимаем «Добавить»

8. Даем условию имя и сохраняем настройки:

Сохраняем настройки. Для этого нажимаем «Сохранить»
Сохраняем настройки. Для этого нажимаем «Сохранить»

9. Проверяем еще раз настройки тега, нажав «Предварительный просмотр»:

Проверьте все настройки сформированного тега, выполнив предпросмотр
Проверьте все настройки сформированного тега, выполнив предпросмотр

10. Если все правильно — публикуем тег. Для этого нажимаем кнопку:

Опубликуйте тег, нажав «Отправить»
Опубликуйте тег, нажав «Отправить»

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

Резюме. Преимущества и частые проблемы AMP-страниц: личный опыт

Главное достоинство технологии заключается в том, что средняя AMP-страница загружается в течение 0,7 секунд. Отсюда вытекают и все остальные преимущества AMP:

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

Но не все так радужно. Я собрал проблемы AMP-страниц, которые заметил на собственных сайтах:

  1. Переходы на полную версию чаще всего отсутствуют.
  2. На моем сайте таких переходов было всего 95. Период — 2 месяца. Трафик сайта — около 10 000 посетителей в сутки

  3. Лиды с AMP-страниц гораздо более редки, чем лиды с полной версии сайта. Период тестирования — 2,5 месяца.
  4. Количество просмотров за сеанс не превышает 1.
  5. У AMP-страниц хуже показатель отказов.
  6. У AMP-страниц хуже показатель «Время на сайте».

Есть и проблемы с «Яндексом». Он может проиндексировать AMP-версию вместо стандартной страницы. Последствия могут быть самыми разными: от долгой индексации до полного исключения обоих версий страниц.

Если трафик из «Яндекса» очень важен для вашего сайта и вы не хотите его терять из-за внедрения AMP-страниц, можно использовать компромиссное решение. Добавьте запрещающий тег в head-секцию страницы:

<meta name="yandex" content="noindex" />

Благодаря этому тегу поисковый робот «Яндекса» поймет: индексировать данную страницу не нужно.

Оценить статью
10 ответов

Комментарии 2

Lina Sokol
Написать комментарий
Очень жаль, что многие владельцы сайтов забывают про мобильные версии. А тк сейчас большинство сидит исключительно в телефонах, то из-за не настроенного amp теряются посетители.
Ответить
Алексей Галимов Алексей Галимов
Написать комментарий
Статья оказалась действительно полезной. оказывается это из-за изменения структуры URL из поиска у меня исчезали АМР-страницы. Теперь буду знать,что туда не стоит лезть без необходимости.
Ответить
Написать комментарий
Популярные статьи автора
Узнайте стоимость продвижения сейчас
Выберите удобный способ связи:
Выберите удобный способ связи:
Введите Ваш номер телефона:
Введите адрес Вашего сайта:
Введите Ваше имя:
Нажимая кнопку «Получить предложение» вы соглашаетесь с Политикой конфиденциальности.
Введите Ваш Email:
Введите адрес Вашего сайта:
Введите Ваше имя:
Нажимая кнопку «Получить предложение» вы соглашаетесь с Политикой конфиденциальности.
Оперативно отвечаем в рабочее время: с 10:00 до 19:00
Оперативно отвечаем в рабочее время: с 10:00 до 19:00
Вы уже проголосовали
Возьмем ТОП вместе?
Здравствуйте, меня зовут
,
я представляю компанию
.
Со мной можно связаться по телефону
Со мной можно связаться по тел.
,
или по email
ник в телеграм
Спасибо!
Нажимая кнопку «Оставить заявку» вы соглашаетесь с Политикой конфиденциальности.
Цена лидов в различных нишах
Тематика Стоимость лида (Москва/Россия)
Отдых 500
Мебель 350
Оборудование 500
Бансковские услуги 500
Безопасность 500
Организация мероприятий, концерты, праздники 500
Недвижимость 500
Строительство и отделка 500
Грузоперевозки 500
Доставка еды 350
Юридические услуги 500
Бухгалтерские услуги 500
Пластиковые окна 500
Детские товары 350
Автозапчасти 350
Образование 500
Возьмем ТОП вместе?
Здравствуйте, меня зовут
,
У меня есть сайт
.
Со мной можно связаться по телефону
Со мной можно связаться по тел.
,
или по email
ник в телеграм
Спасибо!
Нажимая кнопку «Оставить заявку» вы соглашаетесь с Политикой конфиденциальности.
Оставить заявку сейчас
Ваше имя*
Введите адрес Вашего сайта:*
Введите Ваш номер телефона:*
Введите Ваш e-mail:*
Введите Ваш ник в телеграм:
Выберите интересующую услугу *
Нажимая кнопку «Оставить заявку» вы соглашаетесь с Политикой конфиденциальности.
Подпишитесь на рассылку
Не пропустите самое интересное из мира SEO и Digital. Только актуальные и самые крутые статьи.
Заявка успешно отправлена!
Наши сотрудники уже приступили к анализу Вашего сайта. Наш менеджер свяжется с вами в течение дня, спасибо!