Если мобильная версия вашего сайта медленная как улитка, вы не превратите пользователей в своих клиентов. Мы расскажем, как завоевать доверие юзеров и Google, используя ускоренные мобильные страницы.

Мобильный трафик вырос на 500% за 10 лет — такой вывод в исследовании сделала платформа hostingtribunal.com. Это означает, что мы живем в эре, где смартфоны победили десктоп. Оптимизация мобильных браузеров важна как для пользователей, так и для SEO. Google находит страницы с медленной загрузкой или высоким показателем отказов и снижает рейтинг в поисковой выдаче.

О чем пойдет речь

Что такое Google AMP?

Accelerated Mobile Pages (ускоренные мобильные страницы) — это платформа с открытым исходным кодом. Google выпустил APM в 2016 году, чтобы провести революцию в потреблении контента. Прежде всего для сайтов новостей и онлайн-журналов.

Google AMP
Обратите внимание на значки молнии. Они означают, что страница быстро откроется на мобильном телефоне

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

Главная цель Google AMP — мгновенно загружать целевые страницы со смартфонов, привлекая пользователей быстрым и удобным доступом к мобильному контенту. AMP-страницы не такие привлекательные: без графики, видео, гифок, виджетов, форм и блоков рекомендованного контента. По сути это текст и оптимального качества изображения. Зато такие страницы быстрые и их загрузка экономит мобильный трафик. Согласитесь, это удобно в роуминге или в походе в горы, или в отпуске, когда сеть 3G уже счастье.

Страницы Google AMP загружаются в четыре раза быстрее 
за 0,7 секунды

Regular vs AMP

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

Сравните разные варианты отображения одной и той же страницы:

AMP Полная десктоп-версия
Полная десктоп-версия
Mobile AMP

Обратите внимание, что в AMP-версии есть кнопки для скачивания приложения и перехода на основной сайт. В основной версии — автор с активной ссылкой и колокольчик оповещений.

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

Google AMP использует облегченный HTML-кода, JavaScript и CSS. В ход также идет кэширование, приоритетная загрузка контента над сгибом, одновременная загрузка элементов и скриптов, предзагрузка отдельных целевых страниц. Порівняння звичайної сторінки та AMP

Кому нужен AMP?

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

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

Преимущества Google AMP

Кроме ускоренной загрузки и удобного контента без отвлекающих факторов, Google AMP предлагает несколько преимуществ.

Увеличение коэффициента вовлеченности

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

Более 50% пользователей уходят с мобильной версии сайта, если она загружается дольше трех секунд

number for list two

Рост рейтинга и трафика

У AMP — приоритет в поисковых алгоритмах Google, так как время загрузки страницы — фактор ранжирования. Из двух одновременно открытых сайтов выиграет тот, который быстрее загрузится.

Если мобильная версия вашего сайта медленная как улитка, вы не превратите пользователей в клиентов

number for list three

Высокий рейтинг кликов

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

number for list four

Низкий показатель отказов

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

Рентабельность рекламы

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

Недостатки Google AMP

Ограничение скриптов и стилей. Функциональность в AMP важнее эстетики, не все UX-элементы доступны в библиотеке JavaScript. Это минус для сайтов с акцентом на визуальным контент.

Придется загрузить пользовательские шрифты и одобренные AMP-расширения для использования видеоконтента.

На AMP-странице можно разместить только одно рекламное объявление. Что связывает руки контентным сайтам, которые зарабатывают именно на рекламе.

На страницах плагина AMP нельзя использовать формы.

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

AMP не поддерживает многие виджеты. Если вы делаете ставки на социалки, учтите: в облегченной версии нет виджета Facebook и других социалок.

Трудно отслеживать аналитику. AMP поддерживает только Google Analytics, и то с помощью плагинов или специального кода для мониторинга.

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

У некорректно внедренного AMP больше минусов, чем у правильно используемого — плюсов.

AMP: за и против

Как проверять AMP

Сервис от Google:

Сервис проверки AMP от Google

Сервис от сообщества:

Сервис проверки AMP от сообщества

Важно: при проверке смотрите в инструментах не только на главную, но и на страницы категории, товара, услуги, страницу со статьей по отдельности.

Итак, вы вдохновились преимуществами ускоренных мобильных страниц, учли возможные ограничения и решили внедрить Google AMP. Для этого вам понадобятся специальные плагины.

AMP для WordPress

В WordPress существует два способа установки плагинов.

Способ №1. Идем на сайт WordPress и выбираем официальный плагин — первый из списка с отметкой полмиллиона скачиваний.

AMP для WordPress

Открываем валидатор и скачиваем:

Скачать AMP для WP

Переходим в установку плагинов и загружаем скачанный плагин:

Скачать плагин AMP WP

Устанавливаем:

Встановити плагін для WP

И проводим активацию:

Активировать плагин AMP для WP

Способ №2. Ищем AMP прямо в админке WP, устанавливаем как на скрине:

AMP в админке WP

Проверка AMP для WordPress

Проверяем отдельные страницы при помощи сайтов:
https://search.google.com/test/amp
и
https://validator.ampproject.org/

Если на сайте каждый вид услуги — это отдельно сверстанная страница, то каждую страницу нужно проверить отдельно.

Важно!
Иногда сервис показывает, что все круто:

valid amp page

Но не забывайте нажимать «посмотреть подробнее»:

valid amp page check

Оказалось, что официальный плагин от сообщества в нашем случае срабатывает некорректно из-за сверстанной вручную темы:

Перестала работать и форма, нужна дополнительная доработка:

Проверка AMP для WordPress

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

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

Настройка AMP для WordPress

А вот плагин AMP for WP можно настраивать дополнительно. Есть два варианта как внедрить AMP.


Через кастомный код

Можно попросить доверстать код, валидный для AMP. Но придется доплатить за верстку каждой страницы:

Настройка AMP для WordPress

Через встроенный AMP Page Builder

Можно построить AMP версию с нуля, заново набросав блоки на страницу:

AMP Page Builder

Общие настройки AMP for WP

Можно заполнить поля самостоятельно или подружить формы с платным плагином.

AMP for WP

На WordPress лучше вообще не устанавливать AMP, чем внедрить неправильно, сломав сайт и снизив показатели конверсии. Тестируйте отдельно все страницы.

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

AMP для Magento

Создать AMP-версию главной страницы сайта, страниц категорий и товаров поможет платный плагин AMP.

Как правило, сайты на Magento обслуживают разработчики, которые сами установят AMP в наиболее оптимальном формате.

AMP для Magento

AMP для OpenCart

Для сайта на OpenCart используют плагины:

Можно купить плагин и проверить его работоспособность. Если в течение тестового периода будет работать некорректно, можно вернуть деньги.

AMP для Magento

AMP для PrestaShop

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

Скачивайте плагин по ссылкам:

AMP для PrestaShop

Главные тезисы

Зачем нужен AMP?

Молниеносно загружать целевые страницы со смартфонов, привлекая пользователей быстрым и удобным доступом к мобильному контенту.

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

AMP отображает страницы при помощи упрощенного HTML, JavaScript и CSS.

Кому нужен AMP?

Точно контентым сайтам. И всем, кто хочет зарабатывать! Молниеносный доход (аналогичный скорости загрузки) AMP не гарантирует, но помочь в продвижении — может.

Какие преимущества AMP?

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

Какие недостатки AMP?

Много функциональных ограничений. Которые сводятся к одному: ради скорости придется пожертвовать внешний видом.

Як сделать AMP?

С помощью специальных плагинов (платных и бесплатных), в зависимости от используемой платформы.

Як проверить работают ли AMP?

Сервисами тестирования от Google и AMP Project.

Теги этой статьи:
2 comments
Edwardbem says:

AMP уже скорее не так необходимы как раньше – скоро запустят 6 джи, уже в Китае тестирую, интернет быстрый, AMP умирает

Edwardbem says:

GOOGLE AMP это что-то новое для меня) Спасибо)

Leave a comment

Your email address will not be published. Required fields are marked *