Что такое АМР
В конце февраля 2016 года Google запустил проект Accelerated Mobile Pages (АМР). И в новостном блоке мобильного поиска появились первые мобильные страницы с ускоренной загрузкой. Данный проект поможет оптимизировать загрузку текстовых материалов на мобильных устройствах. Это позволит издателям сделать опыт мобильного чтения более удобным, не жертвуя при этом доходами от рекламы.
Если говорить конкретнее, проект AMP нацелен на решение сразу нескольких задач:
- нивелировать различия между мобильными сайтами разного качества;
- устранить проблемы с монетизацией сайтов издателей из-за низкой скорости загрузки;
- постараться обойти многочисленные блокировщики рекламы, также мешающие монетизации;
- упростить процесс разработки;
- сделать формат «быстрых» мобильных страниц общедоступным.
По существу, формат АМР состоит из трёх основных частей:
1. AMP HTML: это обычный HTML с рядом ограничений для более надежной работы и некоторыми расширениями для создания медийного контента. Если вы знакомы с HTML, то вам будет несложно адаптировать существующие страницы под формат AMP HTML. Более подробную информацию вы найдете в списке требуемой разметки AMP.
2. AMP JS: это фреймворк JavaScript для мобильных страниц. По большей части он контролирует работу ресурса и асинхронную загрузку. Следует заметить, что сторонний JavaScript для AMP не допускается.
3. AMP CDN: дополнительный сервис для работы с контентом (Content Delivery Network). С его помощью АМР-страницы сохраняются в кэше Google и при медленном интернет-соединении загружаются прямо из кэша.
В механизм кэширования АМР-страниц от Google встроена система валидации для проверки работоспособности страниц. Важно проследить, чтобы АМР-страницы были реализованы без ошибок. Иначе они не попадут в кэш Google и не будут показаны пользователям.
Вы можете проверить страницу на отсутствие ошибок и удостовериться, что она пройдет валидацию. Если ошибки всё-таки допущены, то рекомендуем ознакомиться с советами Google о том, как устранить ошибки в AMP.
Как АМР-тимизировать сайт
Следует понимать что вам потребуется поддерживать по крайней мере, две версии каждой страницы — оригинальную версию, которую обычно видят пользователи, и её АМР-вариант.
Т.к. АМР не предполагает использование элементов тега < form> и сторонний JavaScript, скорее всего, не получится разместить формы заявок, комментарии и прочие привычные элементы страниц со стандартной имплементацией.
Также, скорее всего, придётся переписать шаблон сайта с целью соблюдения ограничений. Например, все CSS в AMP должны быть строчными и весить менее 50 Кб. А пользовательские шрифты следует загружать при помощи специального расширения amp-font. Это необходимо для лучшего контроля за их загрузкой.
Особое внимание требуется уделить мультимедиа. Например, для изображений должен быть прописан специальный элемент amp-img, а также ширина и высота. Если же атрибуты ширины и высоты не были указаны ранее, то это может усложнить процесс конвертации сайта в АМР-формат. Если изображения представлены в виде анимированных гифок, следует использовать отдельный расширенный компонент amp-anim.
Для видео в формате HTML5 существует свой тег — amp-video. А для видеороликов с YouTube, коих большинство, предназначен расширенный компонент — amp-youtube.
Для слайдшоу — amp-carousel, для соцсетей Twitter, Instagram, Facebook, Pinterest и Vine используются их собственные расширенные компоненты.
Чтобы Google (и другие технологии, поддерживающие проект АМР) распознавали АМР версию статей, следует модифицировать исходную версию страницы статьи. Она должна включать следующий необходимый для АМР-страниц тэг:
< link rel="amphtml" href="http://www.example.com/blog-post/amp/">
На странице описания АМР также упоминается, что некоторые платформы, которые поддерживают АМР, могут потребовать метаданные Schema.org для определения типа контента страницы. Более того, метаданные Schema.org требуются для того, чтобы контент появился в новостной карусели поиска Google.
Рекламные возможности АМР
Растущее количество блокираторов рекламы усложнило издателям монетизацию ресурсов. Для некоторых пользователей ускорение загрузки сайтов стало стимулом к использованию блокираторов. Формат АМР может выступить потенциальным решением данной проблемы.
Одной из целей проекта АМР является обеспечение эффективной монетизации ресурсов с помощью рекламы при соблюдении подхода, ориентированного на пользователей. В этом контексте стоит задача обеспечить поддержку разнообразного набора рекламных форматов, сетей и технологий в АМР.
Сейчас специальный компонент для рекламы — amp-ad уже используют многие крупные компании, например:
- Amazon A9
- Google AdSense
- AOL AdTech
- Google Doubleclick
- Adform
Если у ресурса более сложная схема монетизации, например, с использованием платного доступа или подписки, следует воспользоваться специальной документацией для реализации нужного формата в АМР. Также можно использовать расширение «AMP Access».
Аналитика для AMP-страниц
Аналитика для AMP достаточно хороша. Она реализована по принципу «один раз измерь, сообщи многим», чтобы не нагружать сайт и избежать проблем с загрузкой. Чтобы воспользоваться аналитическим функционалом AMP для своего сайта, нужно применить один из инструментов:
- Элемент Amp-Pixel: просто тег, который используется для подсчета просмотров.
- Компонент Amp-Analytics: специальный компонент, с помощью которого можно настроить конкретные параметры в Google Analytics, например, просмотры страниц или события.
Если вы не планируете работать с Google Analytics, ваш вариант — amp-analytics. Вам нужно добавить необходимые JavaScript-библиотеки в < head > и настроить их с помощью json-разметки в теге < body > страницы. Если вам интересны данные Google Analytics для AMP, изучите материал о том, как добавить Google Analytics к AMP-страницам.
AMP-страницы в выдаче Google
Google представил демо-версию того, как AMP-страницы будут отображаться в выдаче. Вы можете протестировать их на своем мобильном телефоне, посетив страницу g.co/ampdemo. Введите запрос «Марс», и в топе выдачи вы увидите карусель с AMP-статьями. Можно выбрать конкретную статью, пролистать до конца и с помощью горизонтальной прокрутки перейти к следующему материалу в карусели.
В выпущенной версии уже представлены некоторые крупные издательства, такие как The Guardian (пример AMP-страницы) и The Washington Post (пример AMP-страницы).
Заключение
AMP-страницы будут использоваться во всех продуктах Google, например, Google Новости, Google Now, Google Play Пресса, Google Now in tap. Страницам в формате AMP поисковик отдаст свое предпочтение. Например, при нажатии на сниппет материала в Google Новостях пользователь будет перенаправляться на AMP-страницу, если она есть. Все проекты-партнеры будут придерживаться той же логики: Twitter и Pinterest тоже будут открывать AMP-страницы на мобильных устройствах.
Однако отметим, что пока мобильные страницы с ускоренной загрузкой не являются фактором ранжирования. По заявлениям представителей Google, AMP повышает такой показатель страницы, как mobile-friendly, благодаря чему позиции сайта могут улучшиться. Но само по себе присутствие AMP-формата не влияет на ранжирование в Google.
Статьи выпуска: