Кейс: внедрение AMP на сайт WordPress
В 2020 году большинство пользователей интернета по умолчанию ожидает, что загрузка мобильных версий сайта будет выполняться так же быстро, как и их десктопных эквивалентов. Подсчёты крупных компаний, таких как Amazon, лишь подтверждают это: например, всего 1 лишняя секунда в загрузке страниц может привести к ощутимому снижению годовой выручки компании — на $1,6 млрд.
Для обеспечения более быстрой загрузки страниц на мобильных устройствах Google в октябре 2015 года анонсировал AMP, проект с открытым исходным кодом. Тогда же возникло мнение, что AMP стал своеобразной попыткой Google конкурировать с новыми разработками конкурентов — мгновенными статьями Facebook Instant Articles и более быстрыми мобильными приложениями, обеспечивающими высокую скорость работы браузера.
Так или иначе, AMP — это новые возможности для создания быстрых версий сайтов для мобильных телефонов. В нашем сегодняшнем кейсе мы рассмотрим опыт внедрения и настройки AMP на WordPress, на примере собственного сайта нашей компании.
Что такое AMP-страницы
Accelerated Mobile Pages (ускоренные мобильные страницы) — это страницы созданные таким образом, чтобы загружаться максимально быстро на мобильных устройствах. Зачастую это «урезанная» версия обычной HTML-страницы, которая содержит весь основной контент (включая встроенные элементы вроде видео и рекламы), но из неё «вырезаны» замедляющие загрузку блоки и фрагменты кода.
Но их быстрая загрузка объясняется не только этим: AMP-страницы хранятся в отдельном кэше Google, благодаря чему они загружаются невероятно быстро — на 15-80% быстрее обычных страниц! Немаловажным бонусом является то, что при поиске через мобильные браузеры они отображаются в топе результатов Google Search, сдвигая “традиционные” страницы в низ рейтинга.
Как страницы AMP влияют на SEO
Google отдаёт предпочтение сайтам с высокой скоростью загрузки и хорошими поведенческими факторами. Быстрая загрузка контента на AMP-страницах позволяет снизить процент отказов, при условии, что ваш контент полезен и точно отвечает на поставленный пользователем вопрос. Однако наличие AMP-страницы не учитывается напрямую как сигнал ранжирования — важна именно скорость.
Быстрые страницы — счастливые посетители. Счастливые посетители чаще остаются на сайте, читают и взаимодействуют контентом. Google любит такое поведение. Таким образом, эффект на SEO-продвижение от внедрения AMP-страниц косвенный, но результат может вас порадовать.
Например, после внедрения технологии AMP на сайт Вебнавтов у нас наблюдался резкий рост посещаемости с мобильных устройств — за 5 месяцев трафик с Google вырос в 3 раза.
Благодаря такому привлечению мобильного трафика общая посещаемость сайта поднялась на 25%, увеличилась и динамика роста.
Читайте также:
Кейс: рост мобильного трафика с помощью внедрения AMPКак внедрить AMP страницы на WordPress
Под WordPress разработано огромное количество плагинов для внедрения AMP-технологии. Однако подобное внедрение подвергает сайт кардинальным переменам в структуре, что может привести к упрощению дизайна, «сломанной» вёрстке, конфликтности с общими методами оптимизации и другими плагинами. Для минимизации конфликтов рекомендуется придерживаться основ технологии AMP.
Чтобы не столкнуться с вышеперечисленными проблемами и уменьшить затраты на разработку, нужно учитывать некоторые ограничения технологии и требования к применению:
- необходимо использовать для загрузки только асинхронные скрипты;
- необходимо использовать только одну поддерживаемую библиотеку AMP JS;
- нельзя применять стили с помощью обычного<style> по конкретному месту применения: их необходимо загружать в этом же HTML-файле в теге <style amp-custom>, где и добавляется специальный тег amp-custom, включающий стили для файла;
- размер подключаемых стилей не должен превышать 50 Кб;
- параметры ширины и высоты («width» и «height» соответственно) внешних ресурсов (например, изображений) указываются внутри HTML-файла;
- шрифты загружаются по прямой ссылке в HTML-файле или же через CSS-правило @font-face.
AMP HTML
- начинаться с
<!doctype html>; - содержать тег верхнего уровня
<html ⚡>или<html amp>; - содержать
<head>и<body>; - на первых позициях внутри
<head></head>должна стоять ссылка<link rel="canonical" href="$SOME_URL" />, которая указывает на обычную версию страницы; - содержать
<meta name="viewport" content="width=device-width,minimum-scale=1">внутри<head>; - содержать
<style amp-boilerplate>внутри<head>; - перед закрывающим
</head>должен стоять<script async src="https://cdn.ampproject.org/v0.js"></script>, который включает библиотеку JS для AMP; - и дополнительная возможность, необязательная к применению: в
<head>можно подключать стили.
Основные встроенные компоненты AMP HTML
amp-ad— контейнер для рекламных блоков. Поддерживает только рекламные объявления по каналу HTTPS и требует наличия определённого скрипта. Также поддерживает встроенные стили и ряд рекламных сервисов.amp-img— управляемая и контролируемая через runtime amp-версия стандартного тега<img>с поддержкой стилей.amp-pixel— элемент для отслеживания просмотров страниц. Не поддерживает стили.amp-video— amp-версия тега<video>из HTML5. Данный компонент может использоваться только для прямой вставки видео HTML5. Для вставки видео с YouTube используется отдельный скрипт и отдельный тег.
Настройка AMP с помощью модуля WordPress
Достаточно просто перейти к репозиторию плагинов и выбрать любое из популярных решений. Для сайта нашей компании мы остановились на “AMP для WP — Ускоренные мобильные страницы” за авторством Ахмеда и Мохаммеда Калуди. Плагин находится в стадии активной разработки и сопровождается еженедельными обновлениями. На его примере рассмотрим интеграцию AMP на WordPress-сайт.
После установки и активации плагина AMP-страницы будут созданы автоматически, но для более точной и тонкой калибровки всё-равно придётся залезть в настройки.
Изначально плагин предлагает на выбор два варианта: конфигуратор, поэтапно позволяющий настроить плагин в общих чертах, или “продвинутая” настройка, которая нам и нужна.
Рассмотрим опции несколько подробнее.
- На вкладке «General» настраивается то, для каких страниц вашего сайта будут созданы AMP-версии, определяются кастомные таксономии и прочее.
- Вкладки «Advertisement» и «SEO» конфигурируют рекламные блоки и мета-информацию для поисковиков.
- «Page Builder» — включает или выключает конструктор AMP-страниц.
- «PWA» — Progressive Web App или «Прогрессивное веб-приложение» — как гласит Википедия, «технология в веб-разработке, которая добавляет сайтам возможности приложений для мобильных устройств, трансформирует сайт в приложение, гибрид сайта и приложения для мобильных устройств, продукт совместной эволюции мобильного сайта и классического нативного приложения».
Вообще, взаимодействие AMP и PWA – это довольно интересный результат эволюции веб-разработки, породивший начало эпохи “Mobile first”, но об этом мы расскажем в другой раз.
- Вкладка «Performance» привносит небольшие настройки оптимизации. Включить их можно в дополнение к любому из используемых на вашем сайте плагинов, направленных на повышение производительности.
- «Веб-аналитика» позволяет подлючать различные метрики и профильные сервисы.
- «Structured Data» – добавляет разметку Google Rich Snippets в соответствии с рекомендациями Schema.org для структурирования вашего сайта для SEO.
- «Notice Bar & GDPR» – настройки, касающиеся Общего регламента защиты персональных данных.
- «Push Notifications», «Contact Form», «Comments» – вкладки, отвечающие за настройки пуш-уведомлений, форм обратной связи и комментариев.
- «Instant Articles» – настройка интеграции и взаимодействия с функционалом Facebook, позволяющего просматривать материалы интернет-изданий в мобильном приложении Facebook без перехода на внешнюю веб-страницу ресурса.
- «Tools» и «Advance Settings» – важные разделы опций, позволяющие решать проблемные моменты в интеграции, например, ошибочные перенаправления с различных категорий и тегов на сайте к нужным AMP-версиям, роли редакторов и прочее.
- «E-Commerce» – настройка опций интеграции и взаимодействия с плагинами электронной коммерции, такими как WooCommerce и Easy Digital Downloads.
- «Translation Panel» – вкладка для локализации элементов навигации и уведомлений AMP-страниц.
Следующая важная и не менее объёмная по настройкам вкладка — «Design». Её Название говорит само за себя — она позволяет настраивать внешний вид AMP-страниц на вашем сайте. Подробного описания что там и к чему приводить не будем, т.к. здесь уже всё ограничено вашей фантазией.
Как проверить страницы на валидность
После того, как вы реализовали AMP-страницы и провели их настройку, необходимо провести проверку через Google Search Console — к этому моменту она уже должна быть сопряжена с вашим сайтом. Для этого войдём в Google Search Console и нажмём на «Вид в поиске > Ускоренные мобильные страницы (AMP)». Здесь мы увидим количество проиндексированных страниц и страниц с ошибками.
Любые ошибки и предупреждения, связанные с АМП, отобразятся в этом отчете. Изучив подробности и устранив ошибки, проводим проверку снова, дабы убедиться, что всё в порядке.
Также можно не дожидаюсь отчёта в Google Search Console проводить проверку напрямую – для этого нам понадобится другой сервис проверки AMP-страниц от Google.
Вводим нужный нам URL, нажимаем «Проверить» и смотрим – соответствует или не соответствует страница критериям AMP. Все остальные действия по устранению проблем и ошибок аналогичны действиям через Google Search Console.
Устранив все ошибки, можно проверить скорость загрузки ускоренных и стандартных мобильных страниц с помощью соответствующего инструмента, например, PageSpeed Insights.
Что в итоге?
Специалисты нашей компании считают, что ускоренные мобильные страницы могут помочь вашему сайту подняться в поиске. Ведь по факту AMP – это общедоступный путь веб-оптимизации, современный и активно продвигаемый в массы самим Google, в то время как тот же Facebook Instant Articles остаётся всё ещё технологией только “для элиты” и не имеет такого охвата.
Мы также рады, что и непосредственные разработчики WordPress, и независимые студии и отдельные специалисты развивают и улучшают интеграцию AMP на данной платформе, приобщая к этому всё больше пользователей и владельцев сайтов.
