Настройка AMP на WordPress — практическое руководство
Что из себя представляет технология AMP от Google
AMP (англ. Accelerated Mobile Pages), — это технология создания ускоренных мобильных страниц, для устройств с медленным доступом в Интернет. Реализованы в основном посредством HTML верстки, с расширениями, и некоторыми блоками кастомных страниц для мобильных устройств. Для них не может быть использован ряд скриптов JavaScript, но без ограничения можно использовать CSS3.
Технология позволяет сохранять эти страницы в отдельном кеше Google, что дает возможность получить более высокую скорость загрузки, по сравнению с мобильными и адаптивными страницами. Впервые была анонсирована в октябре 2015 года. На момент написания этой статьи проект все еще активно развивающийся и предполагающий широкое применение на сайтах, крупных порталах и интернет-магазинах. Больше информации о нем вы можете получить на официальном сайте, перейдя по ссылке www.ampproject.org
Зачем нужны AMP страницы
Основная цель применения AMP страниц, это ускорение загрузки сайта, при просмотре с мобильных устройств. Чем более быстрый сайт, тем более удовлетворенный посетитель. Конечно же, при условии что контент полезный, актуальный и необходимый пользователю, посетившему ваш сайт.
Использование AMP страниц не является дополнительным сигналом ранжирования. Но если сайт имеет хорошее наполнение, то ускоренные мобильные страницы повысят комфорт пребывания пользователей и, предположительно, уменьшат процент отказов, из-за медленной загрузки сайта. В данной ситуации, улучшается пребывание пользователей на страницах интернет ресурса и увеличивается их вовлечение. А это уже сигнал для Google о необходимости повышения сайта в поисковой выдаче. И если все сработает, то результат может весьма порадовать.
Конечно есть ряд сложностей, с которыми можно столкнуться при работе с AMP страницами, ведь не любой контент удастся передать при помощи HTML. Но Google активно продвигает эту разработку, стимулируя веб мастеров появлением ускоренных страниц на первых страницах поиска у мобильных пользователей.
Руководство по настройке AMP страниц на WordPress
Если вы решились использовать ускоренные мобильные страницы на своем сайте WordPress, то это можно быстро реализовать при помощи следующих плагинов:
- AMP By Automattic, — официальный плагин разработан командой Automattic, но имеет весьма ограниченные возможности.
- AMP for WP – Accelerated Mobile Pages. Имеет много возможностей и более гибкие настройки.
- AMP WooCommerce. Плагин, позволяющий включить AMP на страницах вашего магазина.
- Glue for Yoast SEO & AMP. Дополнение к известному плагину Yoast SEO, но к сожалению на момент написания статьи не совместим с версией WordPress 4.8.2
Далее подробно рассмотрим настройку плагина AMP for WP – Accelerated Mobile Pages.
Установка AMP for WP – Accelerated Mobile Pages
Установить плагин вы можете скачав его с официальной страницы wordpress.org/plugins/accelerated-mobile-pages, либо через панель управления: Плагины → Добавить новый…
Вводите в строке поиска название плагина, жмете кнопу установить, а затем активировать.
Настройка AMP for WP – Accelerated Mobile Pages
После активации вы попадаете на окно с настройками плагина. Так же в панели управления появляется значок настроек AMP.
Далее я привожу настройки, как это сделал я для своего сайта. Вы же можете менять эти настройки в зависимости от своих потребностей.
General
В графе Logo вы можете выбрать логотип для сайта. В выпадающем списке Select Page as Front Page, выберете домашнюю страницу своего сайта. В используемом мной шаблоне WordPress, эта страница реализована таким образом, что не может автоматически быть преобразована в AMP-формат. И здесь на помощь приходит дополнительные блоки AMP Page Bilder и Custom AMP Editor, которое плагин встраивает в каждую страницу сайта.
С помощью этих блоков вы можете внести необходимую информацию или изменения в отображение контента на AMP-страницах.
Page Builder
Раздел отвечающий за отображение этих блоков.
Advertisement
Отвечает за выведение блоков рекламных сетей, в том числе и Google Adsense. Но для его работы необходимо доплатить за эту функцию (на момент написания статьи 30$)
SEO
Позволяет настроить параметры поисковой оптимизации для ускоренных мобильных страниц.
Analytics
Позволяет подключить систему аналитики. Для корректного отображения данных в Google Analytics, необходимо создать отдельный ресурс.
Structured Data
Здесь необходимо загрузить изображения по умолчанию для сайта, используемые в разметке структурированных данных.
Notifications
Позволяет включить использование cookie. Платная функция, на момент написания статьи стоимость 30$.
Contact Form
Функция для установки формы обратной связи. Так же платная.
Comments
Позволяет подключить комментарии Disqus и Facebook.
Возможность комментировать непосредственно на AMP страницах блога нужно докупать.
Facebook Instant Articles
Позволяет подключить к страницам скрипты Facebook
Hide AMP Bulk Tools
Позволяет отключать поддержку AMP в категориях сайта
Advance Settings
Позволяет включить перенаправление посетителей с мобильных устройств на AMP страницы; установить необходимый код в Header и Footer и автоматическое добавление директории /amp/ в меню, используемое для ускоренных мобильных страниц.
Translation Panel
Позволяет перевести необходимые пункты AMP страниц и добавить свой копирайт в футер.
Themes
Позволяет выбрать одну из трех тем, для отображения мобильных страниц.
Global
Позволяет вывести отображение номера телефона, формы поиска по сайту и установить собственные CSS.
Header
Позволяет включить переход при нажатии на логотип на кастомную версию сайта и включить навигационное меню для AMP версии.
HomePage
Позволяет установить количество отображаемых слов и размер картинки в превью записи блога.
Single
Позволяет настроить отображение записи блога
Footer
Добавляет в футер ссылку на не AMP версию сайта.
Page
Позволяет включать на страницах мета-описания.
Social
Позволяет подключить данные социальных профилей к AMP страницам.
Misc
Позволяет перейти на предпросмотр вида постов, при нажатии кнопки Launch Post Builder, и включить поддержку языков с письменностью справа налево.
Extensions
Позволяет установить необходимые дополнительные плагины.
Все плагины платные, кроме одного, — Category Base Remove. Этот плагин необходимо скачать, перейдя по указанной в интерфейсе ссылке, и установить на сайт. Дополнительной настройки он не требует. Необходим для корректного отображения страниц категорий.
Fix AMP Errors
Это раздел с дополнительными платными сервисами, помогающими в устранении ошибок AMP страниц, которые были выявлены при сканировании роботами Google, и отображаются в панели управления Search Console.
Plugins Manager
Включает функцию управления купленными дополнительными плагинами.
Send Feedback
Кнопка обратной связи с разработчиками.
Import / Export
Позволяет экспортировать и импортировать настройки данного плагина.
Выводы
Как видите, настройка не так уж и сложна. Пример AMP страницы, генерируемой плагином AMP for WP вы можете увидеть на этом блоге, добавив в конце любой страницы каталог /amp/.
Внедрение всех настроек на сайте у меня заняли около двух часов. После чего через Search Console я отправил на индексацию основную AMP страницу блога с расположенными на ней ссылками. Первые проиндексированные страницы появились через два дня.
А дальше, как я уже писал, все будет зависеть от качества контента, и его актуальности для пользователей.
Надеюсь эта статья была полезна для вас. Если есть вопросы, задавайте в комментариях.
Так же буду благодарен, если вы поделитесь своим опытом внедрения и использования AMP технологии.
