X

Настройка AMP на WordPress — практическое руководство

👁9 847 просм.

Что из себя представляет технология 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 технологии.

Категории: WordPress Уроки
Сергей Коваленко: @BlessSergeyКонсультирую и делюсь своим опытом Поисковой оптимизации (SEO), WEB разработки, настройки контекстной рекламы и рекламы в соцсетях. С 2007 года я занимаюсь работой в сфере информационных технологий. Начинал с работы мастером по ремонту компьютеров и компьютерной техники в небольшой компании. Затем, повысив уровень своих знаний и навыков, занялся удаленным администрированием информационно технических сетей предприятий. Побывал на должности руководителя отдела инженерно технических средств безопасности. Сейчас нашел себя в такой многофункциональной среде как WEB разработка. Развиваю свои навыки в проектировании и обслуживании сайтов на различных платформах. Изучаю WEB разработку на популярной CMS Wordpress, занимаюсь SEO оптимизацией сайтов, контекстной рекламой в поисковых системах Google и Yandex, а так же в социальных сетях Facebook и Vkontakte.