Как начать работу с ускоренными мобильными страницами (AMP)

Что такое AMP?

В октябре 2015 года Google объявила о выпуске ускоренных мобильных страниц (AMP), очень доступной инфраструктуры для создания быстрозагружающихся мобильных веб-страниц. Инициатива с открытым исходным кодом предназначена для того, чтобы издатели могли легко улучшить скорость (и, следовательно, пользовательский опыт) для своих мобильных пользователей.

Хотя опытные разработчики могут добиться схожих результатов благодаря правильной оптимизации кода, AMP позволяет легко выполнить эту оптимизацию без специальных навыков.

Как работает AMP?

Как и любая другая страница AMP состоит из трех основных частей кода:

  • AMP HTML: Подмножество HTML, этот язык разметки имеет некоторые пользовательские теги и свойства и множество ограничений. Но если вы знакомы с обычным HTML, вам не должно быть трудно адаптировать существующие страницы к AMP HTML. Более подробно ознакомиться с тегами разметки можно здесь.
  • AMP JS: Этот код по большей части управляет обработкой ресурсов и асинхронной загрузкой. Следует отметить, что обычный JavaScript не разрешен на AMP-страницах.
  • AMP CDN: Дополнительная сеть доставки контента, она будет загружать ваши страницы с поддержкой AMP, кэшировать их и автоматически их оптимизировать для увеличения скорости загрузки.

Как можно использовать AMP на своем сайте?

Для начала вам нужно будет поддерживать как минимум две версии любой страницы статьи: оригинальная версия страницы вашей статьи, которую обычно видят пользователи, и AMP-версию этой страницы.

Поскольку AMP не разрешает такие вещи, как сторонний JavaScript и сложные стили, то вам, вероятно придется отказаться от множества интерактивных элементов сайта в угоду высокой скорости загрузки.

Также, вероятно, вам придется переписать шаблон своего сайта, чтобы он соответствовал ограничениям. Например, все CSS в AMP должны быть меньше 50 КБ. Из-за интенсивности загрузки пользовательских шрифтов они должны быть загружены с использованием специального расширения шрифта amp-font, чтобы лучше контролировать эту загрузку.

Все медиа-файлы должны проходить специальную обработку. Например, изображения должны использовать пользовательский элемент amp-img и должны содержать явную ширину и высоту. (При преобразовании устаревшего веб-сайта в шаблон AMP это может стать серьезной проблемой, если атрибуты ширины и высоты еще не используются). Кроме того, если ваши изображения представляют собой анимированные GIF-файлы, вам необходимо использовать отдельный расширенный компонент amp-anim.

Как и изображения, существует специальный тег, который должен использоваться для встраивания локально размещенных видео через HTML5, называемый amp-video. Тем не менее, для встраивания видео на YouTube - в большинстве веб-видео есть отдельный расширенный компонент amp-youtube. Также существует поддержка таких вещей, как слайд-шоу через amp-carousel и лайтбоксы изображений через amp-image-lightbox.

Эти теги и расширенные компоненты не сложны в использовании; они просто требуют некоторого планирования и продуманного подхода в дизайне вашего сайта.

Чтобы Google (и другие технологии, поддерживающие проект AMP) могли обнаружить AMP-версию вашей страницы, вам нужно будет изменить добавить строчку на основной странице. В исходной странице статьи должен быть указан следующий тег, по существу, канонический тег для страниц AMP:

< link rel = "amphtml" href = "http:/ /www. example. com/blog-post/amp/" > (можно посмотреть в коде этой страницы)

На AMP-странице потребуется указание микроразметки для правильной индексации. Кроме того, наличие микроразметки дает вашей статье шанс показаться в результатах Google в специальном сниппете.

Как монетизировать рекламу в AMP?

Увеличенный рост рекламных блокировщиков затруднил для издателей монетизацию своих веб-сайтов. Некоторым сайтам даже пришлось отказаться от некоторых видов рекламы для увеличения скорости загрузки страниц. AMP-страницы можно рассматривать как выход из этой ситуации, так как в описании самого проекта говорится:

Цель проекта «Ускоренные мобильные страницы» - обеспечить эффективную монетизацию рекламы в мобильной сети при использовании ориентированного на пользователя подхода. В этом контексте целью является поддержка широкого спектра форматов объявлений, рекламных сетей и технологий на ускоренных мобильных страницах.

В результате в настоящее время ряд наиболее популярных рекламных сетей использует расширенный компонент amp-ad (с большей вероятностью совместимости):

Amazon A9
AdReactor
Google AdSense
AOL AdTech
Google Doubleclick
Flite
Taboola
Adform
DotAndAds
plista
Smart AdServer
Yieldmo

Аналитика на AMP-страницах

На самом деле, аналитика в AMP очень умна. Чтобы предотвратить замедление отслеживания нескольких аналитических сайтов, они внедрили философию «один раз, сообщите многим». Существует два пути, позволяющие использовать возможности аналитики с AMP для вашего сайта:

  • Элемент Amp-Pixel: это простой тег, который можно использовать для подсчета просмотров страниц, поскольку типичный пиксель отслеживания будет использовать запрос GET. Существует несколько переменных, которые могут быть переданы через него, например DOCUMENT_REFERRER и Title.
  • Компонент расширенного компонента Amp-Analytics: это немного более продвинутый, чем amp-пиксель. Скорее всего, вы будете использовать для реализации аналитики на своем сайте, потому что это позволяет использовать более высокий уровень конфигурации для взаимодействия с аналитиками.

Если вас интересует Google Analytics в AMP, ознакомьтесь с разделом «Аналитика AMP Google» в руководстве Google для разработчкиов. Он имеет несколько примеров реализации.

Что будет выглядеть AMP в Google?

Google предоставил демо-версию того, как будет выглядеть функция AMP в SERP. Вы можете попробовать его, перейдя на g.co/ampdemo на свой мобильный телефон (или подражайте его в Chrome Developer Tools).

google-blog-amp-example

Нажмите на один для чтения, встроенного в SERP. Вы можете прокручивать вправо или влево, чтобы прочитать другую статью с поддержкой AMP. Это отличный опыт от простого перехода на страницу AMP издателя.

Как интегрировать AMP с наиболее популярными CMS?

  • Wordpress. Для самой попляной и открытой CMS системы сделали множество дополнений, которые преобразуют текущие страницы в AMP версии.
  • Ghost. Для Ghost - новой открытой CMS для блогов функция AMP является встроенной.

Выводы

AMP-страницы становятся новым трендом современных сайтов. Поскольку пользователи становятся все более требовалеьными к сайтам и к скорости их работы AMP-страницы могут стать решением для решения этой проблемы. Также поскольку страницы кешируются самой поисковой системой - это может стать дополнительным полюсом, так как снижает нагрузку на хостинг, а также обеспечивает более высокие позиции в SERP.

Святослав

Святослав

Управляющий партнер, эксперт в digital-маркетинге

Как начать работу с ускоренными мобильными страницами (AMP)