Новая инициатива Google нацелена на улучшение веб-опыта пользователей мобильных устройств. Accelerated Mobile Pages — новый формат построения веб-страниц для оптимизации контента (картинки, JS, плагины соц. сетей) и увеличения отзывчивости мобильной версии сайта, по сути облегчая страницы.
Принцип работы
AMP состоит из трех частей:
- AMP HTML — немного видоизмененный язык разметки, в котором некоторые теги заменены на эквиваленты с упором на AMP, а часть и вовсе запрещена;
- AMP JS — ограничение на использование библиотеки AMP, которая заточена под асинхронную загрузку;
- Google AMP Cache — опциональная возможность кэширования страниц AMP на сервера Google для максимально быстрой отдачи пользователям.
Основные требования и ограничения:
- Только асинхронные скрипты;
- Только встроенный CSS;
- Стили ограничены размером 50 КБ;
- Необходимо указывать размер в HTML-ссылках на внешние ресурсы (картинки);
- JS всегда выполняется асинхронно;
- Поддерживаются только JavaScript для AMP;
- Шрифты загружаются при помощи тега ссылки или CSS @font-face rule.
AMP HTML
Разберем простую HTML-страницу, построенную по требованиям AMP:
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,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 с новыми тегами и асинхронным скриптом
Синтаксис AMP-страниц
HTML-документ, разработанный по требованиям технологии, должен следовать синтаксису:
- Начинаться с <!doctype html>;
- Содержать тег верхнего уровня <html ⚡> или <html amp>;
- Содержать <head> и <body>;
- Первым в <head> должен стоять <meta charset="utf-8">;
- Содержать ссылку <link rel="canonical" href="$SOME_URL" /> внутри <head>, которая указывает на обычную версию страницы;
- Содержать <meta name="viewport" content="width=device-width,minimum-scale=1"> внутри <head>;
- Содержать <style amp-boilerplate> внутри <head>;
- Перед закрывающим </head> должен стоять
<script async src="https://cdn.ampproject.org/v0.js"></script>, который включает библиотеку JS для AMP.
Дополнительно в </head> можно включить стили:
<style amp-custom>
# Здесь размещается нужный стиль
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
# Включает пользовательский стиль
Основные встроенные компоненты AMP HTML
- amp-ad — контейнер для рекламных блоков.
Поддерживает только рекламные объявления по каналу HTTPS. Требует наличия скрипта:
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script> <amp-ad width=300 height=200 type="adsense" data-ad-client="ca-pub-8125901705757971" data-ad-slot="7783467241"> </amp-ad>
# Устанавливает рекламу AdSense
Amp-ad также поддерживает встроенные стили и ряд рекламных сервисов.
- amp-img — управляемая рантаймом замена стандартному тегу <img>. Поддерживает стили. Используется в виде:
<amp-img src="img/hero@1x.jpg" srcset="img/hero@1x.jpg 1x, img/hero@2x.jpg 2x" layout="responsive" width="360" placeholder heights="(min-width:1420px) 20%, (min-width:1320px) 25%, (min-width:1000px) 40%, (min-width:760px) 85%, (min-width:500px) 100%, 120%" alt="an image" height="216" on="tap:headline-img-lightbox" role="img" tabindex="0"> </amp-img>
# Вставка картинки с указанием различных исходников под разные размеры экранов
- amp-pixel — элемент для отслеживания просмотров страниц. Он не поддерживает стили, код имеет вид:
<amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
# Указывается трекинговый, случайно генерируемый код
- amp-video — замена тега <video> из HTML5. Учтите, что компонент может использоваться только для прямой вставки видео HTML5:
<amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4" poster="video-poster.jpg"> <div fallback> <p>Your browser doesn’t support HTML5 video</p> </div> <source type="video/mp4" src="foo.mp4"> <source type="video/webm" src="foo.webm"> </amp-video>
# Указывает размер и путь к видео, а также ошибку, если HTML5 не поддерживается
Для вставки видео с YouTube используется отдельный скрипт и отдельный тег:
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script> <amp-youtube data-videoid="WHD8FM2lpUE" layout="responsive" width="480" height="270"></amp-youtube>
# Вставка ID ролика с YouTube, с указанием опции для подстройки размера окна
AMP поддерживает расширения HTML для вставки роликов с FaceBook, фото с Instagram, оплаты, аналитики, анимации, аудио и других популярных функций.
rel="canonical"
Если на сайте имеется две версии страницы, стандартная и AMP, то для правильной индексации в Google необходимо указать перекрестные ссылки:
# На основной странице
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
# На AMP странице
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
# Поисковик автоматически проиндексирует AMP-версию при индексации основной страницы
Проверка AMP-страниц
Есть два способа проверки страниц AMP на ошибки. Первый и самый простой — добавить к URL-адресу новой страницы #development=1 в виде:
http://www.example.org/released.amp.html#development=1
# Ошибки отобразятся в консоли для разработчиков Chrome DevTools
Кроме этого, компания разработала консольный валидатор (в статусе Beta), написанный на JavaScript:
$ ./index.js testdata/feature_tests/minimum_valid_amp.html
testdata/feature_tests/minimum_valid_amp.html: PASS
$ ./index.js testdata/feature_tests/several_errors.html
testdata/feature_tests/several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='.
testdata/feature_tests/several_errors.html:26:2 The tag 'script' is disallowed except in specific forms.
# Выводит ошибки в HTML
AMP Cache
Для ускоренной отдачи страниц AMP можно использовать еще один сервис Google — AMP Cache. Чтобы раздавать страницы через CDN, нужно видоизменить их URL:
# Было
https://example.com/amp_document.html
# Стало
https://cdn.ampproject.org/c/s/example.com/amp_document.html
# Префиксы /c/s означают защищенное соединение, /c — обычное
Исходный адрес URL может также содержать строку запроса. Google предоставляет AMP URL API для автоматического получения кэшированных страниц при помощи метода batchGet.
Самое главное
Если значительная часть аудитории заходит с мобильных устройств, то создание AMP-версий страниц улучшит взаимодействие пользователей с сайтом. Не забывайте про оптимизацию веб-сервера и мобильную оптимизацию.