Меню

Кейс: внедрение AMP на сайт WordPress

Сейчас, в 2020 году, большинство пользователей интернета по-умолчанию ожидает, что загрузка мобильных версий сайта будет выполняться так же быстро, как и их десктопных эквивалентов. Подсчёты крупных компаний таких как Amazon, лишь подтверждает это: например, всего лишь 1 лишняя секунда в загрузке страниц могла бы привести к ощутимому снижению годовой выручки компании на $1,6 млрд.

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

Так или иначе, AMP – это новые возможности для создания быстрых версий сайтов для мобильных телефонов. В нашем сегодняшнем кейсе мы рассмотрим опыт внедрения и настройки AMP на WordPress, на примере собственного сайта нашей компании.

Что представляют собой AMP-страницы?

Что же такое AMP и как это применимо к страницам сайта? Accelerated Mobile Pages, AMP – ускоренные мобильные страницы – это страницы, созданные таким образом, чтобы загружаться максимально быстро на мобильных устройствах. Обычно это “урезанная” версия вашей обычной HTML-страницы, также содержащая весь основной контент, с учётом встроенных элементов (например, видео или реклама), но без замедляющих загрузку блоков или кусков кода.

Но не только поэтому они так быстро загружаются: AMP-страницы хранятся в отдельном кеше Google и  во многом поэтому у них более высокая скорость загрузки: они загружаются на 15-80% быстрее обычных страниц! Немаловажным бонусом таких страниц является то, что появляются в мобильном браузере в топе результатов Google Search,  сдвигая “традиционные” страницы в низ рейтинга.

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

Техническая сторона интеграции AMP

Основы применения

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

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

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

Необходимо использовать для загрузки только асинхронные скрипты.

следующее ограничение, связанное с Javascript, заключается в возможности использовать только одну поддерживаемую библиотеку AMP JS.

Нельзя применять стили с помощью обычного <style> по конкретному месту применения, их необходимо загружать в этом же HTML-файле в теге <style amp-custom>, где и добавляется специальный тег amp-custom, включающий стили для файла.

Размер подключаемых стилей не должен превышать 50 Кб.

Параметры ширины и высоты («width» и «height» соответственно) внешних ресурсов, например, изображений, указываются внутри HTML-файла.

Шрифты загружаются по прямой ссылке в HTML-файле или же через CSS-правило @font-face.

AMP HTML

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 при SEO-продвижении?

Быстрые страницы — счастливые посетители. Счастливые посетители чаще остаются на сайте, читают и взаимодействуют контентом. Google любит такое поведение.

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

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

Внедрение и настройка АМП на Вордпресс-сайте

Имея теперь в голове общую картину о технологии и её компонентах, базовая настройка AMP на сайте с CMS 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

После того, как вы реализовали на своём сайте AMP-страницы и провели их настройку – необходимо провести проверку через Google Search Console (надеемся, что к этому моменту она уже сопряжена с вашим сайтом). Для этого войдём в Google Search Console и нажмём на “Вид в поиске > Ускоренные мобильные страницы (AMP)”.

Здесь можем увидеть следующее:

  • Количество проиндексированных ускоренных мобильных страниц.
  • Количество AMP-страниц с ошибками (без предупреждений).

Любые ошибки и предупреждения, связанные с АМП, отобразятся в этом отчете. Изучив подробности и устранив ошибки, проводим проверку снова, дабы убедиться, что всё в порядке.

Также можно не дожидаюсь отчёта в Google Search Console проводить проверку напрямую – для этого нам понадобится другой сервис проверки AMP-страниц от Google.

Вводим нужный нам URL, нажимаем «Проверить» и смотрим – соответствует или не соответствует страница критериям AMP. Все остальные действия по устранению проблем и ошибок аналогичны действиям через Google Search Console.

Устранив все ошибки, можно проверить скорость загрузки ускоренных и стандартных мобильных страниц с помощью соответствующего инструмента, например, PageSpeed Insights.

Что в итоге?

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

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

Данную технологию обозревали и внедряли:

Дмитрий Белобородов

Front-end разработчик
Разработка, наполнение и сопровождение сайтов на WordPress.

Олег Фролов

CEO, партнер
Продажи. Управление проектами. SEO. Разработка сайтов на CMS Wordpress и Битрикс.

Оставить комментарий

avatar
  Подписаться  
Уведомление о