Услуги

  • Сайты

  • Контент

  • Продвижение

  • Битрикс24

  • Приложения

Все услуги Оплата
Все услуги Оплата

Поиск

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

Кейс: внедрение 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 страницы на WordPress

Под WordPress разработано огромное количество плагинов для внедрения AMP-технологии. Однако подобное внедрение подвергает сайт кардинальным переменам в структуре, что может привести к упрощению дизайна, «сломанной» вёрстке, конфликтности с общими методами оптимизации и другими плагинами. Для минимизации конфликтов рекомендуется придерживаться основ технологии AMP.

Чтобы не столкнуться с вышеперечисленными проблемами и уменьшить затраты на разработку, нужно учитывать некоторые ограничения технологии и требования к применению:

  • необходимо использовать для загрузки только асинхронные скрипты;
  • необходимо использовать только одну поддерживаемую библиотеку AMP JS;
  • нельзя применять стили с помощью обычного<style> по конкретному месту применения: их необходимо загружать в этом же HTML-файле в теге <style amp-custom>, где и добавляется специальный тег amp-custom, включающий стили для файла;
  • размер подключаемых стилей не должен превышать 50 Кб;
  • параметры ширины и высоты («width» и «height» соответственно) внешних ресурсов (например, изображений) указываются внутри HTML-файла;
  • шрифты загружаются по прямой ссылке в HTML-файле или же через CSS-правило @font-face.

AMP HTML

Banner
AMP HTML представляет собой упрощенную версию языка HTML с ограничениями, расширениями, а также особенными web-компонентами, регламентированными в спецификации. Всё вместе обеспечивает быструю загрузку веб-страниц, предназначенных для мобильных устройств. 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 также поддерживает расширения HTML для вставки роликов с Facebook, фотографий с Instagram, а также оплаты, аналитики, анимации, аудио и других популярных функций.

Настройка 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.

01

/ 02

Что в итоге?

Специалисты нашей компании считают, что ускоренные мобильные страницы могут помочь вашему сайту подняться в поиске. Ведь по факту AMP – это общедоступный путь веб-оптимизации, современный и активно продвигаемый в массы самим Google, в то время как тот же Facebook Instant Articles остаётся всё ещё технологией только “для элиты” и не имеет такого охвата.

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

Хотите обсудить проект?

Оставьте ваш номер телефона и наш менеджер свяжется с вами в ближайшее время