AMP WordPress: как настроить Accelerated Mobile Pages

AMP WordPress: как настроить Accelerated Mobile Pages

Еще в 2015 году Google анонсировал проект Accelerated Mobile Pages (AMP) – Ускоренные Мобильные Страницы. По задумке, эта новая технология должна позволить пользователям мобильных устройств получать более быструю загрузку сайтов при переходе из результатов поисковой выдачи. Некоторые считают, что AMP – это ответ Google на мгновенные статьи Facebook Instant Articles. А Яндекс открыл для всех пользователей возможность подключить свой вариант быстрых страниц – Турбо-страницы. Так что тренд, как говорится, на лицо. Давайте рассмотрим, что же это за зверь такой – AMP WordPress.

Что такое AMP

Страницы в формате AMP должны появляться в ТОПе мобильной выдачи, вытесняя обычные HTML-страницы. Загружается AMP действительно мгновенно. Страницы AMP помечены специальным значком в виде молнии.

AMP

Хотя AMP больше предназначен для крупных медиа и СМИ и вряд ли существенно поможет небольшим блогерам или мелким изданиям, я все же настроил его на своем блоге и некоторых проектах, ведь надо экспериментировать со всем, что связано с новыми технологиями и трендами в мире поискового маркетинга. Но владельцам например интернет-магазинов AMP пока никакой пользы не принесет.

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

Естественно, что многих волнует вопрос недополучения трафика на свои проекты. Посетители смогут взаимодействовать с вашим контентом, даже не заходя на сайт. Поисковики от этого выигрывают, пользователи тоже, а вот веб-мастера – пока это вопрос. AMP-страницы позволяют встраивать рекламу, но все равно они являются краеугольным камнем в отношениях между владельцами сайтов и Google. К сожалению, это глобальная тенденция, все больше места на первом экране поисковой выдачи вместо органики занимает контекст, все активнее поисковики продвигают свои сервисы и проекты, которые не всегда приносят пользу владельцам сайтов, стремящимся привлекать трафик.

Также тот момент, что вместо использования HTML 5 создатели AMP начали создавать отдельный язык разметки AMP HTML, имхо, только все усложняет. Но, как говорится, время покажет.

AMP WordPress: как подключить

Я предпочитаю работать с движком WP, так как считаю его лучшей бесплатной CMS на данный момент, хоть WP и не подходит абсолютно для всех типов сайтов. Читайте о том, как выбрать CMS для сайта.

Подключить Ускоренные Мобильные Страницы можно с помощью плагина AMP WordPress.

Можно скачать плагин по ссылке выше и установить, либо поставить его прямо из админки WP. Для этого перейдите в Плагины->Добавить новый

Установка AMP WordPress Plugin

В поиске введите AMP и найдите нужный плагин.

Установка WordPress AMP Plugin

Нажмите Установить, дождитесь завершения установки и нажмите Активировать.

Теперь откройте любую запись вашего сайта и добавьте к ее URL окончание /amp/. Вы увидите очень сильно упрощенную версию страницы в AMP-формате. Но как настроить ее так, как нам надо? Добавить логотип сайта, фирменные цвета и так далее?

Первым делом всем хочется зайти в настройки плагина в поисках необходимых опций. Но тут вас ждет сюрприз: настроек у плагина практически нет.

Единственный экран настроек AMP-плагина выглядит так:

Настройки плагина AMP WordPress

Что же делать?

“Склейка” AMP Plugin и Yoast SEO

Рекомендую всем владельцам сайтов на WP использовать именно Yoast SEO Plugin. Имхо, это лучший плагин для оптимизации WordPress-сайта на сегодняшний день. Даже его бесплатной версии будет достаточно, а если вам нужен полный контроль над внутренним SEO, то можете перейти на pro-версию или приобрести SEO-плагин Clearfy для WordPress.

В нашем случае Yoast поможет там настроить AMP-плагин так, как надо.

Glue for Yoast SEO & AMP

Glue for Yoast SEO & AMP

Для этого необходимого скачать еще один плагин, который является аддоном для Yoast. Называется он Glue for Yoast SEO & AMP. Скачиваете, устанавливаете и активируете его. После этого можете не искать настройки плагина (их нет), а сразу переходить в меню Yoast. Там вас ждет новый пункт – AMP, который-то и добавляет Glue.

Glue for Yoast SEO & AMP

И вот тут-то и открывается возможность настроить AMP-страницы.

На первой вкладке можно выбрать типы страниц, для которых нужно включить AMP. На данный момент поддерживаются записи, а отдельные страницы – нет (надеюсь, вы в курсе, что в WP есть два типа страниц – записи и отдельные страницы). Поддержку отдельных страниц обещают добавить со временем.

Настройка AMP WordPress

На следующей вкладке можно настроить внешний вид страницы, добавить фирменные цвета и логотип.

Настройка внешнего вида AMP-страницы в WordPress

На AMP нужно отдельно подключать Google Analytics, чтобы увидеть статистку по данным страницам. Делается это на третьей вкладке. Код надо вставлять именно в таком формате, где UA-XXXXXXXX-X – это ID вашего счетчика в GA.

Google Analytics AMP

Не забывайте после всех изменений нажать Сохранить изменения.

После всех этих манипуляций откройте валидатор AMP и убедитесь, что все в порядке.

Валидатор AMP

Google Search Console

Если вдруг вы еще не пользуетесь данным инструментом, то сейчас самое время изучить, как добавить сайт в Google Search Console. В его интерфейсе есть отчет по текущему положению дел с вашими AMP-страницами.

Отчет Google Search Console по AMP

Как видите, критических ошибок нет, но есть какие-то другие ошибки. Чтобы устранить их, пришлось вносить доработки в файл functions.php. Нужно добавить функцию, добавляющую логотип в микроразметку schema.org. Лично у меня Google Search Console ругался именно на это.

Сам код:

Не забудьте изменить /images/amp-site-icon.png на путь к вашему логотипу для AMP-страницы. Кстати, он должен быть в разрешении 32х32.

AMP и Яндекс

На одном из своих проектов я обнаружил, что страницы с /amp/ попали в индекс Яндекса. Данный поисковик с AMP не работает, а продвигает свой ответ Чемберлену – Турбо-страницы, которые были открыты для всех 22 ноября 2017, в день, когда я писал данную статью. Совпадение? Не думаю. О Турбо-страницах также будет статья, а пока закончим с AMP.

Итак, AMP-страницы в Яндексе не нужны, поэтому создаем в файле robots.txt отдельный набор директив для Яндекса (копируем полностью директивы из набора для всех роботов), добавляя к нему еще одну директиву:

Не забываем данному набору указать, что он актуален только для Яндекса:

Можете подсмотреть в моем robots.txt, как это выглядит. Но слепо копировать не надо, структуры наших сайтов могут отличаться.

Проверяем валидатором robots.txt от Яндекса, что все в порядке, что Яндекс правильно видит директивы и не ругается.

Выводы

Теперь вы знаете, что такое Accelerated Mobile Pages, как настроить AMP на WordPress-сайте и оформить их внешний вид, используя логотип и фирменные цвета сайта. В следующих статьях поговорим о том, как выводить рекламу AdSense на AMP-страницах, как подключить Яндекс Турбо-страницы и Facebook Instant Articles.

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: