Как создать AMP страницы в WordPress и добавить рекламу и код аналитики

AMP — Accelerated Mobile Pages (Google AMP Project) делают сайт более быстрым для мобильных посетителей.

AMP появилось уже давно и, наверное, многие уже настроили всё, что нужно. Я же пропустил эту технологию как что-то не совсем понятное и, в целом, ненужное.

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

Веб-мастеру нет смысла показывать контент, если на нём отсутствует реклама. Поэтому мы сразу же разберём, как вставить рекламу (это тоже очень просто). Заодно, мы добавим код метрики, чтобы всё-таки собрать информацию, насколько это всё актуально.

Бесплатный плагин AMP для WordPress со вставкой рекламы

Я настройку на примере плагина AMP for WP (авторы Ahmed Kaludi, Mohammed Kaludi). Конечно же есть альтернативы, но в этом плагине есть все нужные мне функции. Альтернативы я не проверял, поэтому не исключаю, что есть варианты и получше.

Итак, в Панели управления WordPress перейдите в «Плагины» → «Добавить новый» в поиске введите «AMP for WP». Я использую плагин, который выделен красной рамкой:

Установите и активируйте его.

Выберите количество показываемых опций. Я выбираю Advance, For Experts.

Перейдите в «AMP» → «Setup» и кликните на «Where do you need AMP?» (для каких страниц создать AMP копии).

Выберите типы страниц, для которых будут созданы AMP версии.

И… это всё, что нужно, чтобы AMP начал работать на вашем сайте.

Для проверки, в зависимости от выбранного типа Постоянных ссылок, а адресу вашего сайта или любой страницы добавьте /amp или ?amp (или &amp если в URL уже встречается знак вопроса).

К примеру, для моего сайта получается следующий адрес: https://suay.ru/?amp

То, что вы увидите, это и будут AMP страницы.

Как вставить рекламу на AMP страницы

Прежде всего нужно знать, что AMP разметка отличается от HTML, поэтому вам нужно получить специальный код вашей партнёрской сети для AMP объявлений.

Если вы используете AdSense, то всё просто: во-первых, AdSense поддерживает AMP; во-вторых, объявления являются автоматизированными — то есть достаточно просто добавить код и объявления будут расстанавливаться автоматически.

В административном интерфейсе AdSense перейдите в раздел Объявления (Ads) → «Обзор». Там вы увидите надпись «У вас есть AMP-сайт» или там будет написано «AMP вкл.», если вы уже включили эту функцию.

Нажмите на неё и активируйте ползунок.

Прежде чем нажать «Готово», нужно скопировать два фрагмента кода. В отличие от обычных автоматизированных объявлений, в автоматизированных объявлениях AMP нужно вставить один фрагмент между тегами <head> и ещё один сразу после тега <body>.

Итак, копируем первый фрагмент, переходим в Панель управления WordPress → «AMP» → «Settings» → «Advanced Settings» → «Enter HTML in Head» и скопируйте в это поле первый фрагмент:

В панели управления AdSense скопируйте второй фрагмент

и вставьте его в «Enter HTML in Body (beginning of body tag)»:

Сохраните сделанные изменения — кнопка «Save Changes». В панели управления AdSense также не забудьте нажать кнопку «Готово», для сохранения настроек и там и включения AMP объявлений.

Как вставить рекламные блоки в определённые места страницы AMP

Вам необязательно использовать автоматические объявления для AMP, вы также можете вручную настроить расположение блоков — всего доступно 6 слотов.

Перейдите в Панель управления WordPress → «AMP» → «Settings» → «Advertisement». Там предложено установить плагин, который улучшает возможности по вставки рекламных блоков, но можно обойтись и без него. Для этого активируйте желаемый слот и введите информацию о рекламном блоке и его настройки.

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

Я покажу, как вставить рекламный блок AdSense. К примеру, я взял уже имеющийся или создал новый блок в Панели управления AdSense:

Можно увидеть, что есть вариант для AMP страницы, но для рассматриваемого плагина он не походит. Нам нужен обычный код, из которого мы возьмём значения data-ad-client и data-ad-slot. Значение data-ad-client одинаково для всего вашего аккаунта, а data-ad-slot уникально для каждого объявления. Рассматриваемый плагин позволяет только установить размер или выбрать автоматический размер, но не позволяет установить тип объявления. Но тип объявления установлен для самого объявления и хранится в настройках AdSense, поэтому в AMP версии страницы можно получить:

медийное объявление
рекомендуемый контент
объявления со ссылками

Что касается объявлений в статьях, то при показанном методе оно превращается в медийное объявление. Это же самое должно происходить и с объявлением в фидах, но я не эксперементирвоал с ним.

Вставьте необходимую информацию из объявления в Data AD Client и Data AD Slot.

В AD Size вы можете выбрать один из размеров, либо воспользуйтесь опцией «Responsive Ad unit», которая сделает объявление с автоматическим размером.

Я использую следующую схему расстановки блоков объявлений:

Below the Header (SiteWide) — под шапкой (на всём сайте) — обычное объявление, автоматический размер
Below the Footer (SiteWide) — ниже футора (на всём сайте) — обычное объявление, автоматический размер
Above the Post Content — над статьёй — обычное объявление, размер 320*100
Below the Post Content (Single Post) — под статьёй (только в статьях) — рекомендуемый контент, автоматический размер
Below The Title (Single Post) — под заголовком (только в статьях) — блок ссылок, автоматический размер
Above the Related Posts (Single Post) — ни на одном моём сайте этот блок не показывается (возможно, баг или зависит от темы оформления)

Такую схему оформления можно считать спорной из-за объявления «Below the Header» — оно получает большим, возможно, вы захотите сделать его поменьше. Блок ссылок в этой ситуации не страшен ни для каких сайтов, т. к. Трафик на AMP страницы идёт исключительно с Google.

Кстати, помните, что в Рекламной Сети Яндекса имеются блоки AMP, но с помощью этого плагина их невозможно вставить — нужно использовать что-то ещё.

Как вставить счётчики метрики

Перейдите в Панель управления WordPress → «AMP» → «Setup» → «Settings» → «Веб-аналитика». Активируйте нужный вам сервис метрики и введите номер вашего счётчика.

Как проверить AMP

Кроме того, что страницы можно открыть и посмотреть, добавив к адресу /amp или ?amp (или &amp если в URL уже встречается знак вопроса), вы можете воспользоваться сервисами проверки правильности AMP страницы, например:

Итак

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

Из-за этих единичных пользователей кажется нелогичным делать откат на 20 лет в функциональности и внешнем виде сайта, когда сайты, кстати, были очень «лёгкими».

Другая проблема — монетизация: ограниченность в расстановке блоков рекламы и количестве посетителей.

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