Расширенный гайд по AMP (Accelerated Mobile Pages)

Для начала давайте разберемся, что такое AMP (Accelerated Mobile Pages) и кому необходимо их использовать для оптимизации своего сайта. Быстрая загрузка стала важным фактором продвижения не только для SEO, но и пользовательского поведения на вашем сайте. Еще в 2016 году Google проводил исследование, которое показало, что 53% пользователей, использующих для серфинга смартфоны покидают сайт, если страница загружается дольше 3 секунд.

Исходя из отчета Global Digital 2023, 92.3% пользователей интернета делают это с помощью смартфонов. Что явно намекает нам, что ваш сайт должен быть идеально оптимизирован под мобильные устройства. В том числе и по скорости загрузки сайта.

Как пример, можно рассмотреть исследование крупного австралийского интернет-магазина Adore Beauty. После того как им удалось ускорить скорость загрузки страниц до желтого уровня в PageSpeed конверсия на сайте выросла на 16%.

Ускоренные мобильные страницы (AMP - Accelerated Mobile Pages) — это фреймворк, который значительно ускоряет процесс загрузки страниц на мобильных устройствах после клика в поисковой выдаче. Если говорить простым языком — вы используете специальный набор инструментов, который отключает на мобильной странице почти все ненужные элементы оставляя для загрузки только важный контент. Сразу небольшой инсайт — это must have инструмент для новостных сайтов и блогов. Почему именно для новостников? Все просто, использовать ускоренные страницы можно только на статичных страницах — страницы новостей и статей в блоге.

Если копнуть немного в историю технологии AMP, то все намного проще чем кажется. После того как два цифровых гиганта в лице Facebook и Apple выпускают технологию быстрых страниц в своих приложениях (Facebook статьи и Apple News), Google отвечает разработкой собственного HTML-фреймворка, который может использовать почти любой автор из-за отсутствия привязки к конкретному приложению.

Вот пример, как это выглядит в Facebook на примере поста Washington Post:

Перед тем, как перейти к технической части настройки AMP, напомним вам о том, как выглядели AMP страницы в поисковой выдаче раньше, и то, как они выглядят сейчас.

Слева возле каждой AMP страницы был небольшой значок молнии, который выделял ускоренные страницы в разделе Top Stories. После обновление в мае 2020 года, Google решил убрать значок и снизил у AMP страниц приоритет в выдаче. Справа видно, что AMP уже никак не выделяются в поисковой выдаче.

Мы уже сказал, что технология AMP работает по принципу упрощения веб-страницы для ускоренной загрузки. Как именно она это делает? Страница загружается быстрее по причине того, что некоторые элементы страницы просто отключаются во время загрузки, например JS библиотеки, большинство CSS. А некоторые классические HTML теги, заменяются AMP HTML тегами, повышающими производительность. Схематически структуру выглядит так:

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

Теперь немного пользовательского пути. Чтобы пользователь увидел ваш AMP контент есть два варианта:

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

Повышенная скорость загрузки страницы

По данным сервиса LittleData на протяжении всего 2022 года, средняя скорость загрузки мобильной страницы 4.5 - 5 секунд. Все результаты загрузки меньше 3 секунд — возводятся в эталон. Если ваши результаты выше 3 секунд, при всех прочих равных, вы уже будете в топ-20% сайтов по скорости загрузки страниц.

Картинка выше как раз говорит, что самых высоких показателей с помощью ускоренных страниц можно добиться только через поисковик Google. Потому что технология кеширования на серверах Google - AMP Cache используется только при условии перехода на страницу через “родную” для технологии поисковую систему.

Низкий процент отказов

Еще один эксперимент показал, что после того, как время загрузки страницы увеличилось с 1,5 до 3,5 секунды — процент отказа в системе аналитики на сайте повысился на 32%. Поэтому скорость загрузки напрямую будет влиять на ваши SERP результаты.

Небольшое потребление трафика

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

Повышает вашу видимость в поисковой выдаче

Снова повторим, что сама технология не является критичным фактором для повышения ваших позиций в SERP, однако она непременно влияет на рейтинг доверия вашего сайта, что напрямую влияет на позиции в выдаче. А дополнительным приятным пунктом является возможность расширенной поисковой выдачи при условии понятной для поисковой системы разметки ускоренной страницы.

Вот так будет выглядеть ваш расширенный результат поисковой выдаче при верной разметке страницы.

Несмотря на то, что Google самостоятельно отменили привилегию перед ранжированием AMP страниц в разделе Top Stories, данные говорят об обратном. На февраль 22 года, почти 70% страниц в Top Stories были AMP формата в США, Великобритании, Канаде, Австралии, Германии и Франции.

Что буквально говорит о том, что если вы хотите продвигать свой новостной ресурс по данным странам, вам просто необходимо использовать AMP.

Несмотря на все плюсы технологии, минусы у нее тоже присутствуют.

Ограниченный функционал

Технология постоянно развивается и не стоит на месте, но пока все равно остается ограничена функциональными требованиями. Вам придется использовать готовые шаблоны AMP, которые могут значительно различаться с фирменным стилем вашего ресурса. CSS ограничен 75 кБ, а JS скрипты 150 кБ.

Редкие обновления

Последние информационные обновления на сайте amp.dev были год назад. Google редко рассказывает о своих планах на технологию, но все же продолжает поддержку. На Youtube канале AMP можно найти множество гайдов и обучающих видео по технологии.

Дополнительные затраты

Решили для себя, что хотите попробовать AMP? Отлично, но будьте готовы к дополнительным затратам. Ведь теперь вам нужно адаптировать не только обычные респонсивные страницы, но и ускоренные. И не стоит забывать, что после начала индексации вашей ускоренной страницы, ее все равно придется оптимизировать под SEO, так же как и любую другую страницу новости.

Помимо обычных ускоренных страниц, команда amp.dev разрабатывает дополнительные продукты, которые также нацелены на максимальную производительности на мобильных устройствах. Среди них Web Stories, AMP Ads, AMP Email.

Если вы знакомы с Instagram, то вы сразу поймете о чем идет речь. Формат страницы с полноэкранным визуальным контентом, которые можно смотреть в вебе без дополнительных приложений.

Ниже будет классный кейс использования данного инструмента в социальной японской сети Ameba. Вот несколько примеров использования Web Stories от именитых изданий: BBC, Washington Post, PCGamesN.

Что можно делать с помощью сторис?

Технология размещения рекламных блоков в AMPHTML теге, что значительно повышает скорость загрузки сайта. Актуально только для AMP страниц, но действительно работает и повышает прибыль веб-мастеров и владельцев сайта. Вот прекрасный пример работы AMPHTML vs HTML - просто сравните скорость отображение рекламного блока в первом видео и во втором.

Гениальный инструмент для Email маркетинга. Позволяет отправлять электронные письма с динамическими элементами. Например, вы можете отправить письмо с подборкой товаров, которые можно сразу купить или отправить форму записи на событие прямо в письме.

Вот неплохие примеры динамических писем. https://res.cloudinary.com/mailmodo/image/upload/f_webp,q_50/v1656047587/strapi/NPS_200e1b9676.gif

Выше вы видите динамическое письмо с NPS формой.

А вот еще один пример, с формой записи: https://res.cloudinary.com/mailmodo/image/upload/f_webp,q_50/v1643223403/strapi/Demo_bookings_c1968eb242.gif

Использование AMP Email значительно поднимает вероятность взаимодействия пользователя с вашим письмом.

Покажем вам самые интересные кейсы роста с использованием AMP-технологии среди крупных новостных изданий.

RCS MediaGroup — это крупная сеть изданий в Европе. В составе паблишера газеты Corriere della Sera, La Gazzetta dello Sport и El Mundo, и журналы - Oggi, Amica, Io Donna, Living, Style Magazine, Dove, Abitare, Sette и Sport Week.

Располагая огромным цифровым ресурсом, компанией было принято верное решение в 2018 году начать интеграцию технологии в свои цифровые медиа.

Что было сделано:

В 2018 году собственная команда разработчиков работала в течение шести месяцев, внедряя AMP во всех своих цифровых ресурсах. Затем компания решила использовать технологию Progressive Web App (PWA), в основном для уведомлений, закладок и автономного доступа, чтобы пользователи могли читать их контент из любого места.

К чему привело:

Количество уникальных пользователей выросло на 98%, Просмотры страниц за сессию выросли на 119%, а скорость загрузки страницы на 72%.

Крупнейший информационная цифровая платформа в Индии. Статистика говорит все сама за себя 180 млн уникальных посетителей в месяц.

Что было сделано:

TOI (Times of India) - стали одним из первых цифровых изданий, которые заключили партнерское соглашение с Google по массовому внедрению AMP технологии на свой ресурс. Была произведена крупная цифровая трансформация и полная адаптация всех новостных страниц под AMP.

К чему привело:

Общий трафик вырос в 6 раз, благодаря чему прибыль издания выросла в 1,5 раза, а скорость загрузки страниц с обычного 3G интернета выросла в 3,6 раза. Что чрезвычайно важно для такой крупной страны как Индия. Благодаря такой оптимизации изданию получилось охватить крупный сегмент населения.

Не менее интересный кейс японского новостного издания Asahi.com. Паблишер решил использовать парный подход в оптимизации только бесплатных новостных статей. Для справки только 30% статей на ресурсе являются бесплатными и существуют за счет рекламной прибыли.

Что было сделано:

К чему привело:

Просмотр страницы вырос на 240%, CTR на бесплатные статьи вырос на 201%, а рекламная прибыль на 344%.

Еще один замечательный пример использования AMP технологии из Японии. Ameba — это японская социальная сеть и блог. Для понимания масштаба использования AMP - более 20 млн ускоренных страниц.

Что было сделано:

К чему привело:

Повышение CTR внутри Stories выросло на 20%. Просмотр историй до конца вырос на 53% - значит что более половины пользователей читаю контент до конца. Среднее время на странице также выросла в 1,5 раза.

Если после прочтения статьи у вас остался вопрос, стоит ли использовать AMP на своем сайте, то ответ один — ДА.

Помимо технических моментов внедрения, необходим действительно творческий подход, например кейс Ameba или Asahi станут отличными примерами.

В ваших руках 4 уникальных инструмента: AMP Website, AMP Ads, Web Stories, AMP Email. Используя их комплексно, вы сможете повысить не только ваши результаты в SERP, но и повысить другие маркетинговые показатели.

В следующей статье мы вместе с вами разберем пример использования AMP в нескольких CMS системах.