
Ускоренные мобильные страницы (Accelerated Mobile Pages, AMP) - технология с открытым исходным кодом, которая помогает оптимизировать контент для мобильных устройств и обеспечивает быструю загрузку.
По сути AMP-страницы хранятся в специальном кеше Google, что обеспечивает более быструю загрузку. Страница грузится прямо с серверов google. При этом счетчики посещений и отображения рекламных блоков работают и учитываются.
Пример сайта на amp-страницах, можно увидеть на одном из моих подблогов - elims.org.ua/lifehack/amp. Лучше всего смотреть с мобильных устройств, ведь именно для них предназначены amp-страницы. Все реализовано при помощи установки 3-х wordpress-плагинов, при этом основные настройки производятся лишь в одном из них.
Содержание
Изначально я планировал создать подробное и полноценное руководство о том, как ввести AMP на своем сайте и не наступить на те или иные грабли. Но погрузившись с головой в их документацию, примеры и нюансы, понял что всего не описать и лучше вести эту запись в моем любимом формате - в виде сумбурных заметок, которые буду стараться как-то структуризировать.
Ввод AMP страниц на своем сайте
AMP можно вводить двумя способами (испробовал оба):
- Через установку и настройку плагинов к популярным CMS - наиболее легкий способ изучения технологии: "на живом примере". По сути вам нужно лишь иметь общее представление что такое AMP, произвести настройки в интуитивно понятных плагинах и проверить автоматическими валидаторами есть ли какие-то ошибки.
- Верстка своего шаблона с нуля в AMP-корректном формате - в этом случае Вам придется потратить свое время на изучение технологии, узнать о ее требованиях и ограничениях. Можете начать с внимательного прочтения этой записи и продолжить чтением всех ресурсов которые указаны в блоке полезных ссылок.
WordPress плагины для AMP
Если у вас wordpress-сайт, то вам повезло - тут все просто. Нужно установить и настроить три плагина:
- AMP - плагин-ядро AMP, от известной команды "Automattic", создателей таких мега-популярных плагинов и решений как Jetpack, Gravatar, VaultPress, Akismet, Woocommerce, WP Super Cache. Этот плагин нужно лишь установить, ничего настраивать в нем не нужно.
- Glue for Yoast SEO & AMP - дополнение к SEO-плагину от Yoast, в котором появляется несколько настроек, касающихся SEO на AMP - страницах.
- AMP for WP - Accelerated Mobile Pages - плагин в котором производятся основные настройки AMP страниц
Общая информация
AMP состоит из набора 3-х технологий:
- AMP HTML – HMTL в котором некоторые тэги заменены на свои.
- AMP JS – JS библиотека для AMP страниц
- Google AMP Cache – CDN, распространяет валидные AMP-страницы.
URL для AMP рекомендуются использовать такого вида: amp.domain.com/page или domain.com/amp/page, но не domain2.com/page когда при этом не amp версия находится на domain.com/page.
Как объявить о том, что доступна AMP-версия страницы
На не AMP страницу добавьте код:
<link rel="amphtml" href="https://example.com/amp-version" />
Если AMP версия страницы имеет не AMP, обычную версию - каноническую, то укажите на нее
<link rel="canonical" href="https://example.com/html-version" />
Если AMP версия страницы не имеет обычную версию страницы, то в canonical нужно указать ссылку на саму себя.
Пример самой простой 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>
Требования, ограничения, рекомендации
Требования к HTML разметке
Документ AMP HTML ДОЛЖЕН:
- Начинаться с типа документа
<!doctype html>
. - Содержать тег
<html ⚡>
или<html amp>
. - Содержать теги
<head>
и<body>
(необязательные в разметке HTML). - Содержать внутри заголовка тег
<link rel="canonical" href="$SOME_URL" />
, который указывает на обычную HTML-версию документа AMP HTML или на сам исходный документ, если такой версии не существует. - Содержать тег
<meta charset="utf-8">
в качестве первого дочернего элемента тега заголовка. - Содержать в теге заголовка тег
<meta name="viewport" content="width=device-width,minimum-scale=1">
. Рекомендуется включить значение initial-scale=1. - Содержать в качестве последнего элемента заголовка тег
<script async src="https://cdn.ampproject.org/v0.js"></script>
, который указывает и загружает библиотеку AMP JS. - Содержать в теге
<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>
Ограничения:
- Разрешены только асинхронные скрипты
- Нельзя описывать стили с помощью «style» по месту применения, например <div style='....'>.
- Стили должны быть описаны в HTML файле в единственном тэге <style amp-custom>, в разделе <head>
- Стили ограничены размером в 50 КБ
- Параметры «width» и «height» внешних ресурсов, таких как картинки, должен быть указан внутри html
- Нельзя написать произвольный Javascript-код, можно использовать только поддерживаемую библиотеку AMP JS
- Шрифты должны быть загружены по ссылке или в CSS-конструкции @font-face
- Запрещено использовать тег <img>, замена: <amp-img>
- css не должен использовать инструкции "!important"
Рекомендации по логотипам для отображения в "карусели горячих новостей"
- Изображения должны быть в растровом формате (например, .jpg, .png, .gif). Векторные форматы (например, .svg) и анимация не допускаются.
- Логотипы должны быть представлены полным товарным знаком или полным логотипом, а не значком.
- Изображение должно поместиться в прямоугольник с размерами 600x60 пикселей.
- В идеальном случае изображение логотипа должно иметь размер ровно 60 пикселей по вертикали и не более 600 пикселей по горизонтали. Если при высоте 60 пикселей ширина окажется более 600 пикселей, рекомендуется уменьшить ширину изображения до 600 пикселей и пропорционально уменьшить его высоту до размера менее 60 пикселей, сохранив исходное соотношение сторон.
- Изображение должно иметь размер либо точно 60 пикселей по вертикали (рекомендуется), либо точно 600 пикселей по горизонтали. Например, размер 450x45 пикселей не допускается, хотя он помещается в прямоугольник 600x60 пикселей.
- Логотипы на основе слов должны иметь высоту не более 48 пикселей и быть выровнены по вертикали относительно центра изображения высотой 60 пикселей.
- Для единообразного представления логотипы должны быть хорошо читаемы на белом или светлом фоне.
- Логотипы со сплошным фоном должны иметь вокруг торгового знака отступы не менее 6 пикселей.
Остальные рекомендации:
- Не рекомендуется использовать относительные URL при объявлении ссылки на AMP-страницу.
- Так НЕ рекомендуется: <link rel="amphtml" href="/lifehack/amp" />
- Так рекомендуется: <link rel="amphtml" href="https://elims.org.ua/lifehack/amp" />
Возможности
Множество демо-примеров возможностей технологии доступно на официальном сайте: ampbyexample.com
Ниже я буду собирать лишь, некоторые из них, которые нужны мне "под рукой".
"Адаптивные изображения"
amp-img позволяет показывать разные изображения устройствам с разными разрешениями экрана.
Например:
<amp-img media="(min-width: 650px)" src="wide.jpg" width=466 height=355 layout="responsive"></amp-img> <amp-img media="(max-width: 649px)" src="narrow.jpg" width=527 height=193 layout="responsive"></amp-img>
Или
<amp-img src="/img/narrow.jpg" srcset="/img/wide.jpg 640w, /img/narrow.jpg 320w" width="1698" height="2911" layout="responsive" alt="an image"> </amp-img>
Плюсы и минусы технологии
Плюсы:
- Увеличение скорости загрузки страниц может дать преимущество в SEO, ведь скорость загрузки - один из факторов ранжирования.
- Стандарт разработан Google, а значит само наличие AMP-страниц для выдачи мобильным пользователям на сайте может быть фактором ранжирования.
- АМР-страницы могут попасть в «карусель» в мобильной выдаче в топе Google.
- Есть возможности для кастомизации, и в том числе возможность не использовать AMP Cache от Google и отдавать контент со своей CDN или своего сервера.
- Наличие плагинов для популярных CMS облегчающие внедрение AMP
Минусы:
- АМР добавляет сложности. Приходится заниматься внедрением еще одной технологии.
- Поддержка кастомного Javascript возможна только через «amp-iframe», но это не дает возможности получить доступ к данным из этого скрипта.
Остальное
Нужно ли добавлять AMP страницы в xml карту сайта?
Нет, не нужно. Ссылки с rel=amphtml достаточно. Ответ в twitter Джона Мюллера - представителя поиска.
Проверка AMP страницы на корректность
- search.google.com/search-console/amp - сообщает соответствует ли указанная страница критериям AMP, можно посмотреть как страница будет отображаться в поиске, можно добавить в индекс Google
- search.google.com/structured-data/testing-tool - проверка структурированных данных, подскажет какие именно ошибки допущены
- validator.ampproject.org - мне этот валидатор показался наиболее информативным, можно проверять как по ссылке, так и просто вставив в форму исходный код страницы
- AMP Validator - расширение для chrome от создателей validator.ampproject.org. Расширением пользоваться намного удобней - также отображает все ошибки и замечания, с их описанием и номерами строк, в котором они обнаружены
- technicalseo.com/seo-tools/amp - проверяет правильно ли слинкованы между собой amp и полноценная каноническая страница и еще некоторые параметры. Можно проверять по 100 страниц за раз и выгружать результат в csv-файл
- javascript-консоль в Google Chrome - тоже может помочь с проверкой валидности AMP страниц. Для этого добавьте к ссылке на AMP-страницу вот это: "#development=1", должно получится например вот так: https://elims.org.ua/lifehack/amp/#development=1 . Для перехода в консоль нажмите в google chrome сочетание клавиш "Ctrl + Shift + J" - консоль появится. Для пущей верности можете еще раз обновить ту страницу, которую проверяете на предмет ошибок и замечаний.
Полезные ссылки
- Правила разметки для AMP страниц
- Документация по AMP
- Спецификация разметки - необходимые поля chema-разметки AMP страницы для их добавления в карусель горячих новостей.
- Полное руководство по использованию Google AMP
- Как использовать Google Analytics для AMP-страниц
- github.com/ampproject - спецификация AMP HTML
- Список разрешенных html тегов
- ampbyexample.com - куча разных demo-примеров
- amp.ampersandjs.com - amp js функции
- amphtml.wordpress.com - официальнный блог о AMP
- Практический обзор Google AMP (Accelerated Mobile Pages)
- Progressive Web Apps: WhoAmI - является логическим продолжением Accelerated Mobile Pages
Здравствуйте! Объясните, пожалуйста, как сделать эту страницу, если сайт не на джумлах, а просто на html. Надо сделать файл .html и разместить его в корне?? или как?
Отличный формат постов. Видно, что погружаетесь в каждую тему.