Как создать AMP-страницу: структура, теги и проверка

Что такое AMP: определение и история технологии

AMP (Accelerated Mobile Pages, или ускоренные мобильные страницы) — это открытый фреймворк, разработанный корпорацией Google в 2015 году для решения одной острой проблемы: мобильный контент загружался слишком долго. Тогда статья на смартфоне могла грузиться 5–10 секунд, что приводило к массовому уходу пользователей со страниц, пока они еще не успевали загрузиться.

И вот статистика: если мобильная страница загружается 5 секунд вместо 1 секунды, вероятность отхода пользователя возрастает на 75%. Потеря даже одной секунды загрузки означает потерю примерно 7% конверсий. Для интернет магазина или новостного проекта это огромные убытки. Поэтому Google создал amp-страницы как инструмент для кардинального ускорения мобильных версий сайтов и одновременно улучшения рейтинга в выдаче.

Как работает технология AMP

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

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

Кеширование контента. Ускоренные мобильные страницы автоматически кешируются на серверах Google и других поисковых систем, включая Яндекс. Когда пользователь переходит по ссылке, контент подгружается уже с ближайшего сервера CDN, а не из основного хоста вашего сайта.

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

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

Базовая структура AMP HTML

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

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Пример AMP страницы</title>
  <link rel="canonical" href="https://example.com/article.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <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>
<body>
  <h1>Добро пожаловать на AMP страницу</h1>
  <p>Это базовая структура HTML amp</p>
</body>
</html>

Разберём каждый обязательный элемент для валидации amp-страницы:

DOCTYPE HTML и атрибут ⚡. Первая строка — <!doctype html> — обязательна. В открывающий тег <html> добавляется символ ⚡, который сообщает браузеру и поисковым системам, что это ускоренная мобильная страница.

Meta charset utf-8. Кодировка символов должна быть четко указана: <meta charset="utf-8">. Без этого тега валидация не пройдет.

Script async src. Обязательный скрипт <script async src="https://cdn.ampproject.org/v0.js"></script> подключает все AMP-компоненты. Без него amp-страницы просто не запустятся.

Meta name viewport. Адаптивность мобильных устройств обеспечивается тегом: <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">. Это основа для правильного отображения контента на экранах разного размера.

Canonical link и amp-boilerplate CSS. Тег <link rel="canonical"> указывает на оригинальную (не-AMP) версию страницы. CSS amp-boilerplate — это встроенный стиль, который скрывает содержимое до того, как AMP-скрипт полностью загрузится.

Регистрация компонентов. Если вы используете специальные AMP-элементы (видео, карусель, форму), каждый из них требует собственного <script custom-element>. Например, для видео: <script custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js" async></script>.

Главная структура и ограничения технологии AMP

Технология amp-версии имеет чёткие ограничения, которые нужно помнить при создании страниц:

Вы не сможете использовать обычный JavaScript — только AMP-компоненты и встроенные скрипты через <script type="application/json">.

Встроенные стили запрещены на отдельные элементы. Весь CSS должен находиться в одном теге <style amp-custom> в head, и общий размер стилей не может превышать 75 КБ.

Картинки требуют обязательных размеров. Каждому изображению нужно явно указать ширину и высоту: <amp-img src="foto.jpg" width="400" height="300" layout="responsive"></amp-img>. Это помогает браузеру зарезервировать место до загрузки файла.

Формы и отслеживание. Большинство аналитических скриптов и пиксельных тегов либо запрещены, либо требуют специальных компонентов. Google Analytics всё еще работает, но через специальный amp-компонент <amp-analytics>.

Никаких видеоплееров без компонента <amp-video> или встроенного <amp-youtube>. Обычный тег <video> не поддерживается.

Почему Google приоритизирует скорость через Core Web Vitals

Связь технологии amp со скоростью загрузки сайта прямая и неразрывная. Google внедрил систему Core Web Vitals — три метрики, которые влияют на ранжирование в поиске:

Largest Contentful Paint (LCP) — время, за которое на экране появляется самый крупный визуальный элемент. Для amp-страниц LCP обычно 0,5–1,5 секунды, для обычных сайтов без оптимизации — 3–5 секунд и больше.

First Input Delay (FID) — задержка отклика на первое действие пользователя. В amp это практически всегда меньше 50 миллисекунд, потому что JavaScript минимален.

Cumulative Layout Shift (CLS) — параметр стабильности визуального оформления. AMP строго контролирует размеры элементов именно чтобы избежать неожиданных сдвигов контента.

Поисковая система Google специально создала ускоренные мобильные страницы, чтобы все сайты могли соответствовать этим стандартам. Если ваша amp-страница соответствует Core Web Vitals, то она получает приоритет в выдаче поиска перед медленными обычными версиями того же сайта.

Для разных сегментов аудитории

Разработчикам: создания amp требует освоить синтаксис специальных компонентов, понять систему кеширования и научиться обходить ограничения базовой версии JavaScript. Зато если вы правильно реализуете amp-страницы, у вас будет меньше bugs, связанных с производительностью, и команда быстрее выкатит релиз без опасений за скорость.

Владельцам интернет магазина или новостного сайта: внедрение amp обычно означает +15–30% прироста трафика с мобильных устройств. Пользователи видят вашу страницу быстро, переходят на товар или читают статью, конверсии растут. Плюс позиции в выдаче часто улучшаются, потому что Google любит быстрые мобильные версии.

SEO-специалистам: технология amp — удобный инструмент для аудита скорости загрузки сайта и рекомендаций клиентам. Если мобильный трафик падает, а скорость загрузки медленная, amp часто становится приоритетной задачей наряду с основными оптимизациями.

Часто задаваемые вопросы по AMP

Что произойдет, если я не добавлю обязательный скрипт amp? Страница просто не будет работать как AMP. Браузер попытается отобразить её, но компоненты amp не инициализируются, интерактивные элементы не будут функционировать, и поисковая система не признает её amp-версией. Валидация упадет, и преимуществ скорости вы не получите.

Каковы реальные результаты ускорения с AMP для среднего проекта? На практике: время загрузки сокращается с 4–5 секунд до 0,8–1,2 секунды на мобильных устройствах. Для новостного проекта это означает прирост просмотров на 20–40%, для e-commerce — увеличение конверсий на 10–25%. Данные варьируются в зависимости от исходного состояния сайта и количества контента на странице.

Как проверить, валидна ли моя AMP страница? Воспользуйтесь официальным валидатором Google: перейдите на amp-страницу, откройте инструменты разработчика (F12), перейдите в консоль. Если страница валидна, вы увидите сообщение "AMP validation successful". Если есть ошибки, консоль выдаст список с указанием проблем. Второй способ — использовать сервис google.com/webmasters: загрузите URL и проверьте статус.

Чек-лист требований для валидной AMP страницы

Перед публикацией amp-версии убедитесь, что выполнены все пункты:

Документ начинается с <!doctype html> и содержит символ ⚡ в теге <html ⚡>.

Указаны теги <meta charset="utf-8"> и <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> в head.

Подключен скрипт <script async src="https://cdn.ampproject.org/v0.js"></script>.

Добавлен стиль <style amp-boilerplate> и его noscript-версия.

Каждому изображению и встроенному медиа явно указаны ширина и высоту.

Используются только AMP-компоненты для интерактивных элементов (amp-video, amp-carousel, amp-form и т. д.).

Внешние стили подключены только внутри одного тега <style amp-custom>.

Добавлена ссылка на каноническую версию через <link rel="canonical">.

Все скрипты и компоненты имеют атрибуты async и custom-element.

Валидация пройдена в консоли браузера или инструментах Google Search Console.