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

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

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

А на вашем сайте техничка в порядке?

• Подарим чек-лист по внутренней оптимизации
• Проконсультируем по SEO-вопросам

Получить чек-лист

Что такое AMP и кому он подходит в 2026

AMP — открытый формат упрощенного кода для сверхбыстрой загрузки мобильных страниц. Сегодня внедрение AMP не требуется для попадания в карусель новостей Top Stories (Google отменил это правило еще в 2021 году). Поисковая система отдает приоритет качеству контента и метрикам Core Web Vitals: LCP, CLS и INP.

Вердикт: технология рациональна для новостных сайтов, блогов и медийных платформ, а также работает как быстрое решение для медленных CMS. Для интернет-магазинов и бизнес-проектов с настроенным современным стеком (SSR/CDN) формат необязателен. Достаточно оптимизировать основную страницу под актуальные пороги: LCP менее 2,5 секунды, INP до 200 мс, CLS ниже 0,1.

Преимущества и ограничения AMP

Целесообразность использования AMP зависит от ниши и текущих показателей Core Web Vitals. Ниже приведено сравнение плюсов и недостатков технологии.

В процессе тестирования рекомендую запускать A/B-тесты: сравнивать поведение пользователей на ускоренных мобильных страницах и стандартных версиях, анализируя конверсию и кликабельность рекламных блоков.

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

Настраивать разметку вручную необязательно. Проще использовать готовый модуль (плагин), который автоматически генерирует облегченные версии. Подобные расширения существуют для любой популярной CMS, включая Joomla и Drupal.

Разберем процесс внедрения на примере WordPress — самой распространенной платформы.

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

Оптимальное решение на сегодня — официальный плагин AMP By Project Contributors.

Расширение позволяет внедрить технологию без глубоких знаний программирования. Настройка выполняется через визуальный интерфейс. Инструмент решает три задачи:

1. Упрощает разработку с нуля.
2. Автоматизирует генерацию AMP-разметки прямо в консоли WordPress.
3. Запускает встроенную проверку (валидацию) готового документа.

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

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

Разберем доступные режимы:

Standard (стандартный). Использует одну тему и формирует единую версию сайта. Оптимален для ресурсов, где текущий дизайн и активные плагины имеют полную поддержку AMP-технологии.

Transitional (переходный). Применяет одну тему, но создает две версии каждого URL. Активный шаблон обслуживает оба варианта. Подходит для случаев, когда тема совместима частично, а небольшие визуальные различия между десктопом и мобильным устройством допустимы.

Reader (режим чтения). Формирует две независимые версии сайта. Выбирайте этот вариант, если текущая тема полностью несовместима с форматом, либо требуется максимально упрощенный технический запуск.

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

Установка стандартная — через административную панель CMS:

5 классных SEO-кейсов

Круче, чем Гудини: как мы вырастили трафик в 2,2 раза

Все вы прекрасно знаете Гарри Гудини: этот фокусник мог выбраться из закрытой бочки, брошенной в воду. Примерно в таких же рамках оказались и мы, начиная работу с сайтом Eurorepar. Узкий функционал, жесткие требования. Но мы справились без магии, увеличив трафик х2!

Читать кейс

Читать кейс

Как выжать максимум из двадцатилетнего сайта

Можно ли выжать максимум из 20-летнего сайта и докрутить его до современных стандартов? А если есть отягчающие обстоятельства — накрутка поведенческих факторов, антиботы, да еще и админка капризничает и сама удаляет категории?

Читать кейс

Читать кейс

Долгая дорога в SEO и мощный прорыв

Наш клиент — интернет-магазин B2B промышленной тематики. Он достался нам после предыдущих подрядчиков, и первые год-два мы исправляли их ошибки. А потом началась долгая кропотливая работа, которая в итоге принесла желанный результат.

Читать кейс

Читать кейс

Qugo: вырастили трафик из блога платформы b2b в 9,7 раз!

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

Читать кейс

Читать кейс

Эффективное ссылочное продвижение для федеральной аптечной сети

Федеральная аптечная сеть пришла в Kokoc Performance (входит в Kokoc Group) за ссылочным продвижением. Интересно, что в компании есть своя in-house команда по SEO, которая подготовила ссылочную стратегию, а за ее реализацией обратилась к нам.

Читать кейс

Читать кейс

1/5

В строке поиска вводим название:

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

Переходим в параметры через боковое меню или список расширений:

При полной поддержке технологии вашей темой выбирайте Standard или Transitional, затем сохраните изменения:

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

В продвинутых настройках (Advanced Settings) доступно управление редиректами и типами контента:

Сторонние модули часто генерируют невалидный код. Вкладка Plugin Suppression позволяет принудительно отключить конфликтные скрипты:

Для сбора данных о посещаемости потребуется добавить JSON-конфигурацию нужного сервиса в блоке Analytics:

Раздел Paired URL Structure отвечает за формирование ссылок:

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

Формат адреса не влияет на ранжирование. Однако использование параметра запроса (query parameter) страхует от появления 404-й ошибки при отключении плагина.

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

Для быстрого старта предусмотрен пошаговый мастер. Запуск доступен по кнопке Reopen Wizard на главной панели:

Мастер дублирует описанные выше параметры, предлагая их в строгой последовательности.

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

Разработка кастомных решений требует понимания структуры кода. Базовый шаблон документа, рекомендованный официальным сайтом 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,initial-scale=1">
    <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

Ключевые требования к иерархии тегов:

• <!doctype html> — объявляет тип документа.
• <html ⚡> (или amp) — обязательный атрибут формата.
• <head> и <body> — строго обязательны.
• Boilerplate-код — специальный CSS-блок, скрывающий контент до полной загрузки стилей. Размещается в секции 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>

Требования к секции head

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

Работа с медиа и стилями

Вставка графики (а также видео) выполняется через кастом components:

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

Синтаксис отличается от классического HTML заменой стандартного img на amp-img. При этом большинство базовых текстовых тегов работают без изменений.

Дизайн настраивается через классические свойства CSS, но с жестким ограничением: допускается только один инлайн-блок стилей <style amp-custom> суммарным объемом не более 75 KB.

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

Макеты формируются через layout-атрибуты компонентов (responsive, fixed) и жестко заданные размеры медиафайлов. Использовать таблицы для верстки сетки запрещено.

Для корректного SEO-продвижения необходимо связать мобильный формат с десктопным. В секцию head ускоренного документа добавляется ссылка на оригинал:

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

На канонической странице размещается обратный линк:

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

Если проект состоит исключительно из AMP-страниц, атрибут canonical должен указывать сам на себя:

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

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

Технология поддерживает интерактивный пользовательский интерфейс без написания кастомного JavaScript. Обработка событий (event handlers) реализуется через атрибут on.

Рассмотрим базовый пример — скрытие элемента по клику. Добавляем кнопку с пустым обработчиком:

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

Определяем тип взаимодействия. Для регистрации клика на десктопе или тапа на мобильном устройстве используется событие tap:

<button on="tap">

Через двоеточие указываем ID целевого блока (например, заголовка с id="hello"):

<button on="tap:hello">

Через точку задаем конкретное действие — hide (скрыть):

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

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

Валидация кода

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

Используйте официальный инструмент от Google. Вставьте URL или фрагмент кода:

При отсутствии ошибок система выдаст подтверждающий статус:

Документ готов к публикации.

Настройка аналитики через Google Tag Manager

Сбор информации о трафике и показателях вовлеченности удобнее всего реализовать через GTM, так как сервис имеет встроенную поддержку формата.

Эффективное SEO

• Гарантия результатов
• Комплексное развитие
• При любом тарифе отслеживаем динамику заявок и звонков с сайтов
• Регулярный пересмотр семантического ядра

Узнать больше

Алгоритм создания контейнера:

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

   

2. Кликните по иконке меню (многоточие) для вызова настроек.
   

   

3. Нажмите «Создать контейнер».
   

   

4. Задайте имя и обязательно выберите целевую платформу — AMP.
   

   

Система сгенерирует два фрагмента кода: основной скрипт и конфигурацию (config).

Скопируйте их. Если окно закрылось, данные всегда доступны по клику на ID контейнера в верхней панели.

Первый фрагмент (главный скрипт) размещается перед закрывающим тегом head. Второй (настройки) — сразу после открывающего тега body.

Далее необходимо настроить передачу данных в Google Analytics:

1. В рабочей области выберите созданный AMP-контейнер.
   

   

2. Перейдите в раздел «Теги» и создайте новый.
   

   

3. Кликните по блоку конфигурации.
   

   

4. Выберите тип — Google Analytics.
   

   

   
   
5. Укажите идентификатор отслеживания (ID) через выбор переменной.
   

   

6. В блоке «Триггеры» задайте условие активации (например, просмотр страницы).
   

   

   
   

   

7. Сохраните настройки.
   

   

8. Запустите режим предварительного просмотра для проверки корректности срабатывания.
   

   

9. Опубликуйте изменения кнопкой «Отправить».
   

   

Вариант без GTM: GA4 через amp-analytics (gtag)

Прямое подключение GA4 через нативный компонент — более прозрачный метод, не требующий сторонних менеджеров.

В секцию head добавляется скрипт библиотеки:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

В начало body вставляется конфигурация с вашим идентификатором:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">{
  "vars": { "gtag_id": "G-XXXXXXX", "config": { "G-XXXXXXX": { "groups": "default" } } }
}</script>
</amp-analytics>

Важно: запрещено использовать GTM и прямой код одновременно. Это исказит результаты аналитики из-за дублирования хитов.

Личный опыт: подводные камни технологии

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

Кейс из моей практики выявил следующие проблемы при анализе трафика:

• Изоляция аудитории. Переходы на основную версию сайта практически отсутствуют. За два месяца тестирования при трафике около 10 000 посетителей в сутки было зафиксировано всего 95 кликов на full-версию.
• Падение конверсии. Лиды и продажи товаров с ускоренных URL генерируются значительно реже.
• Снижение глубины просмотра. Показатель страниц за сеанс редко превышает единицу.
• Ухудшение поведенческих факторов. Возрастает показатель отказов и снижается среднее время на сайте.

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

Для защиты органического трафика из Яндекса необходимо закрыть мобильный дубль от индексации специальным метатегом в секции head:

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

Влияние AMP на SEO и индексацию в Google (2026)

Ускоренная разметка больше не дает прямых преимуществ в ранжировании. Позиция в выдаче и попадание в блок Top Stories зависят исключительно от качества контента и соответствия пороговым значениям Core Web Vitals (данные Google Search Central). Приоритет смещен на технические метрики LCP, CLS и INP.

Для корректной индексации необходимо строго соблюдать связку атрибутов: на AMP-версии указывается rel="canonical" со ссылкой на десктоп, а на канонической странице — rel="amphtml" со ссылкой на мобильный вариант. При использовании формата в качестве единственной версии сайта, страница ссылается сама на себя. Нарушение этой логики гарантированно приводит к ошибкам сканирования и потере трафика.