Настройка AMP на WordPress за 10 минут

Разместил , 13 Апр.2016 / комментариев 10
Нашли то, что нужно вам? Закажи себе! Без переплат.

Новый тренд мобильной верстки AMP уже появился в Google Webmaster Tools и доступен для использования веб-мастерами. В статье обсудим что это, преимущества использования и настройку AMP на WordPress.

Что такое AMP?

AMP (accelerated mobile pages) – страницы для мобильных устройств с ускоренной загрузкой.

На самом деле, AMP – это не просто страницы, а новый стандарт страниц с собственной разметкой, ограничениями и требованиями.

Подробную информацию про AMP вы можете найти на официальном сайте проекта www.ampproject.org.

Рекомендации Google для индексирования страниц в формате AMP HTML вы можете найти на странице https://support.google.com/webmasters/answer/6340290?hl=ru (если будете настраивать под WordPress, углубляться в изучение не нужно).

Преимущества использования AMP для сайта

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

Страница в формате AMP не содержит лишнего кода – использование HTML, CSS и JS ограничено. В AMP HTML контент страницы, который нужно донести посетителю, полностью передается в неизменном виде.

Комментарий Андрея Липатцева про технологию AMP, её применимость и преимущества:

Настройка AMP на WordPress за 5 минут

  1. Устанавливаем модуль «AMP». У этого модуля нет настроек, после его установки у вашего блога сразу появляются клоны записей и страниц в формате AMP, доступные по ссылке поста или страницы с добавлением в URL /amp/ или если не настроено ЧПУ — ?amp=1. Дополнительно, в обычные статьи добавляется строка, извещающая Google о том, что у страницы есть клон в формате AMP HTML.
  2. Устанавливаем модуль «Glue for Yoast SEO & AMP». Этот модуль соединяет настройки Yoast SEO и плагина AMP. Кроме того, появляются дополнительные настройки (во вкладке Yoast -> AMP). Например, с его помощью можно установить код Google Analytics или Яндекс Метрику, стилизировать страницы или применить кастомный javaScript, выбрать таксономии, для которых нужно включить генерацию страниц в формате AMP.

Не получилось настроить AMP на вашем WordPress? Обратитесь по контактам и я помогу за $30.

Проверка AMP на сайте онлайн

Чтобы проверить, корректно ли отрабатывает код, откройте вашу страницу в формате AMP в браузере Google Chrome. Нажмите правую кнопку в любой части страницы -> Просмотреть код -> Console. Ниже скриншот того, что вы должны увидеть в итоге (Powered by AMP ⚡ HTML). Если в коде ошибки – они высветятся в консоли.

Проверка AMP онлайн

Результаты работы (обновлено 10.07.2017)

На моём блоге начали индексироваться AMP-версии постов. Все они в топе Google по их названиям и связанным поисковым запросам, если гуглить на мобильном устройстве. Скриншот одного из запроса, по которым вышли в топ сразу 2 статьи.

AMP-страницы в топе мобильной выдаче Google

  • Покемон Го

    У меня получилось настроить по вашему примеру, но не пойму как амп страница будет выводиться? Не будет же пользователь подписывать всегда в конце /amp/

  • Здравствуйте! А не подскажите: на WP плагин «AMP для WordPress» не добавляет на основные страницы атрибут rel=»amphtml», а по справке Google он необходим, есть какие то оптимальные пути решения?

    • Оптимальных путей решения не знаю. Или искать альтернативные (неофициальные) модули или ручками дописывать разметку в шаблонах модуля.

  • Как добавить рекламный блок AdSense на страницы amp ?

  • Денис

    Добрый день! Т.е. получается amp страницы будут отдельно от основных?! Например, главная страница будет по адресу site.com/amp?
    Нужно тогда сделать переадресацию с мобильных на amp-страницы?!
    И еще есть вопрос имеет ли этот скрипт отношение к кнопке «Адаптировать для мобильного» в Google Chrome на Android. Иногда эта кнопка появляется когда посещаю некоторые сайты, но не на всех

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

  • Кирилл

    Спасибо за материал. Плагин АМП посмотрел, настроек множество, а русского интерфейса до сих пор нет. И сам плагин довольно часто обновляется, что создаёт проблемы, если надо что-то подправить «под себя» непосредственно в коде. А в остальном, конечно, надо внедрять. Но подводных камней на текущий момент много 🙁

    • Насчёт обновлений и правок «под себя». В плагине AMP есть шаблон. Для изменений вёрстки (визуальной составляющей) вам нужно будет править только шаблон. В процессе обновлений, возможно, он тоже обновляется, но его несложно править и в процессе правок можно сохранять, к примеру, на компьютер.