Что такое AMP-страницы?

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

AMP страницы хранятся в отдельном кеше Google и поэтому у них более высокая скорость загрузки. Google впервые анонсировал Accelerated Mobile Pages – Ускоренные страницы для мобильных устройств в октябре 2015 года.

Если кратко, то AMP страница, это урезанная версия вашей страницы, которая содержит все основное содержание, но без всех остальных дополнительных компонентов, которые замедляют загрузку. AMP страницы позволяют загрузить контент мгновенно, вместо того, чтобы ждать до 20 секунд (что интересно, это среднее время загрузки адаптивных сайтов).
amp-page

Ограничение для AMP страниц:

  • Только асинхронные скрипты
  • Нельзя описывать стили с помощью «style» по месту применения, все они должны быть описаны в HTML файле в тэге «style amp-custom»
  • Ограничение на размер стилей в 50 КБ
  • Параметры «width» и «height» внешних ресурсов, таких как картинки, должен быть указан внутри html
  • Ограничение на Javascript, можно использовать только поддерживаемую библиотеку AMP JS
  • Шрифты должны быть загружены по ссылке или в CSS-конструкции @font-face

Зачем вам AMP?

Быстрые страницы — счастливые посетители. Счастливые посетители чаще остаются на сайте, читают и взаимодействуют контентом. Google любит такое поведение.

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

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

Как настроить AMP на WordPress сайте?

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

Шаг #1: Установите плагин «Accelerated Mobile Pages (AMP) Project»

Это бесплатный плагин AMP от Automattic. Для установки заходим в Плагины > Добавить новый и ищем плагин «Accelerated Mobile Pages (AMP) Project», он поддерживает последнюю версию WordPress 4.6.1.
Установите плагин «Accelerated Mobile Pages (AMP) Project»
После того, как вы его активируете, он сразу же создаст AMP страницы на сайте. Что бы проверить, добавьте в конце адреса любой страницы /amp/.

Так же вам не стоит опасаться дублирование контента плагин автоматически добавить в код вашей страницы:

<link rel=»amphtml» href=https://www.example.com/page/amp/» />

А на AMP страницу добавит:

<link rel=»canonical» href=» https://www.example.com/page/amp/» />






Шаг #2: Установите плагин Yoast Glue Plugin

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

Плагин Yoast Glue Plugin интегрирует основные SEO мета-данные на страницы AMP и позволяет настраивать их оформление.
Yoast Glue Plugin
После того, как вы установили и активировали плагин, перейдите в Yoast SEO > AMP в панели управления WordPress. В вкладке «Design» вы можете загрузить лого, настроить основные цвета.


Примечание: Yoast Glue Plugin плагин не будет работать, если вы используете другой SEO плагин. Если вы используете другой SEO плагин настоятельно не рекомендуется устанавливать Yoast в качестве дублирующего плагина, это может привести к неправильной работе сайта. Если у вас установлен другой плагин, то придется либо остаться на дефолтном оформлении AMP, либо удалить старый SEO плагин.


На данный момент у вас уже есть две версии страниц. Версия AMP урезанна. На ней нет хидера, расширений социальных сетей, комментариев и меню.

Шаг #3: Добавление AMP страниц в Search Console

После того, как вы реализовали AMP и настроили их, пришло время проверить, что бы Google заметил ваши усилия. Войдите в Google Search Console и нажмите Вид в поиске > Ускоренные мобильные страницы (AMP).
Здесь можно проверить AMP страницы:

  • Количество проиндексированных ускоренных мобильных страниц (AMP)
  • Количество AMP-страниц с ошибками (без предупреждений).

Добавление AMP страниц в Search Console

Любые ошибки в AMP будут отображаться в этом отчете. При возникновении ошибок просто нажмите кнопку, чтобы выяснить, что вызывает ошибку. Это может быть скрипт или плагин. Устраните проблему, а затем запустить AMP валидатор, по ссылке:
https://validator.ampproject.org/#url=<url_страницы>

Пример:

https://validator.ampproject.org/#url=http://www.example.com/myamp

Как отслеживать ускоренные мобильные страницы (AMP)

Стандартный код счетчиков нельзя установить на AMP страницы, на данный момент есть возможность установки счетчика Google Analytics. Вот официальное руководство по настройке на Developers.google и подробный разбор в блоге Netpeak. Metrika не устанавливается на AMP, но скорее всего Yandex скоро внедрит эту возможность.

Вывод

Вот и все, это простое трех шаговое руководство по созданию AMP-страниц на WordPress сайте. Если у вас не WordPress, не волнуйтесь. Есть подробное руководство созданию AMP страниц. Это будет не так просто, как в WordPress, но оно того стоит.)

Остались вопросы? Задавайте!


Читайте также: Google Search Console: Фильтр AMP показывает данные только с раздела «Главные новости»