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.

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

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 WordPress нужно отдельно подключать 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.

Пожалуйста, оцените статью:
1 звезда2 звезды3 звезды4 звезды5 звёзд (3 оценок, среднее: 5,00 из 5)
Загрузка…

Автор блога. SEO-специалист, веб-мастер. Консультирую по вопросам интернет-маркетинга, провожу аудиты сайтов.

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

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