Вёрстка AMP-страниц сайта
AMP (Accelerated Mobile Pages) — открытый стандарт Google для создания мобильных страниц с гарантированно быстрой загрузкой. AMP-страницы кэшируются Google AMP Cache и загружаются мгновенно из поисковой выдачи. Наиболее актуальны для новостных сайтов и статейных порталов.
Когда применять AMP
AMP имеет смысл для:
- Новостных статей и блог-постов (AMP Story)
- Лендингов (AMP Email, AMP for Ads)
- Страниц с высокой долей мобильного трафика из поиска
AMP нецелесообразен для интерактивных приложений, корзин интернет-магазинов и страниц с тяжёлой логикой.
Структура AMP-документа
<!doctype html>
<html ⚡ lang="ru">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Заголовок статьи</title>
<link rel="canonical" href="https://example.com/article">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"NewsArticle",...}
</script>
<style amp-boilerplate>body{...}</style>
<noscript><style amp-boilerplate>body{...}</style></noscript>
<style amp-custom>
/* Максимум 75KB CSS. Обычный CSS, никаких @import */
body { font-family: 'Roboto', sans-serif; }
.article-header { font-size: 2rem; }
</style>
</head>
<body>
<amp-img src="/hero.jpg" width="1200" height="630" layout="responsive" alt="..."></amp-img>
<article>
<h1>Заголовок</h1>
<p>Текст статьи...</p>
</article>
</body>
</html>
Ключевые ограничения
-
Нет
<script>пользовательских тегов — только AMP-компоненты (<amp-script>с ограничениями) - CSS не более 75KB — всё inline, никаких внешних таблиц
-
<img>запрещён — только<amp-img>с явными width/height -
Inline стили (
style="") — запрещены, только через<style amp-custom> -
Формы — через
<amp-form>, не стандартный<form>
AMP-компоненты
Замены стандартным HTML-элементам:
| HTML | AMP-аналог |
|---|---|
<img> |
<amp-img> |
<video> |
<amp-video> |
<iframe> |
<amp-iframe> |
| Карусель | <amp-carousel> |
| Аккордеон | <amp-accordion> |
| Аналитика | <amp-analytics> |
Canonical и AMP-версии
У каждой статьи — две версии: обычная и AMP. Связываются через:
<!-- В обычной странице -->
<link rel="amphtml" href="https://example.com/article?amp=1">
<!-- В AMP-странице -->
<link rel="canonical" href="https://example.com/article">
Google показывает AMP-версию в поиске (с молнией ⚡), загружая из кэша.
Валидация
AMP-страница должна пройти валидацию. Инструменты:
- AMP Validator (validator.ampproject.org)
- Chrome AMP DevTools расширение
- CLI:
npx @ampproject/toolbox-cli validate https://example.com/article
Сроки
Вёрстка одного типа AMP-страницы (статья блога): 1–2 дня. Настройка автогенерации AMP-версий из CMS (например, WordPress AMP plugin или кастомная генерация) + валидация: 3–5 дней.