Вёрстка AMP-сторінок веб-сайту
AMP (Accelerated Mobile Pages) — відкритий стандарт Google для створення мобільних сторінок з гарантованою швидкою завантаженням. AMP-сторінки кешуються Google AMP Cache та завантажуються миттєво з пошукової видачі. Найбільш актуальні для новинних сайтів та статейних порталів.
Коли застосовувати AMP
AMP має сенс для:
- Новинних статей та блог-постів
- Лендингів (AMP Email, AMP for Ads)
- Сторінок з високою часткою мобільного трафіку з пошуку
AMP нецілісний для інтерактивних додатків, кошиків інтернет-магазинів та сторінок з важкою логікою.
Структура AMP-документа
<!doctype html>
<html ⚡ lang="uk">
<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 днів.