Serpstat использует файлы cookie для обеспечения работоспособности сервиса, улучшения навигации, предоставления возможности связаться с командой поддержки, а также маркетинговых активностей Serpstat.

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

Сообщить об ошибке

Отменить
3961
How-to Читать 7 минут 19 ноября 2018

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

Как настроить AMP страницы на сайте
ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — МОБИЛЬНАЯ ВЕРСИЯ
Инструкцию одобрил SEO Classifieds Specialist в Inweb
AMP страницы предназначены для того, чтобы ускоренно загружаться на мобильных устройствах. В эру, когда мобильный поиск превалирует в ряде тематик и ниш, данная технология становится must have.
Accelerated mobile pages (AMP) — это ускоренные мобильные страницы.
Они отображаются на сайте в виде урезанного контента. Дополнительные элементы — виджеты, формы обратной связи, реклама — на них не подгружаются. Страницы состоят из HTML-разметки с атрибутами и тегами из Javascript библиотеки. Google сохраняет эти страницы в отдельном кеше, что ускоряет загрузку со смартфона.

Влияние на SEO продвижение данной технологии — косвенное. Посетитель не покинет сайт, дождавшись его загрузки. Если же контент будет максимально отвечать запросу, посетителю не придется искать другие веб-ресурсы. Это влияет на поведенческие факторы, например, на снижение показателя отказов.

Преимущества AMP:
  • ускоренная загрузка страниц сайта;
  • сокращение времени от клика до просмотра веб-сайта;
  • потенциальное снижение показателя отказов.

Настройка AMP для WordPress

Множество сайтов построено с помощью CMS WordPress, поэтому есть смысл рассмотреть настройку AMP страниц для этого случая. Для наглядности мы рассмотрим несколько плагинов, которые используются чаще всего.
#1

AMP WordPress

Чтобы настроить AMP страницы для WordPress, скачайте и установите плагин AMP. Для этого перейдите в панель управления, найдите раздел, отвечающий за плагины, и выберите подпункт «Добавить новый», как на скриншоте:
Установка плагина AMP в WordPress
В поле поиска напишете AMP и установите плагин, который выделен на скриншоте:
Плагин AMP в WordPress
Активируйте установленный плагин. Он автоматически создаст необходимые версии AMP, не допуская дублирования контента, использовав специальные коды. В общих настройках задайте, какие типы страниц вы хотите выводить в AMP:
AMP plugin WordPress
Настроек дизайна в плагине немного, но все же они присутствуют:
Дизайн AMP страниц в WordPress
Измените цвет фона, шрифт, отображение контента и общую цветовую схему: темная или светлая. Внесенные изменения опубликуются после сохранения.

Вспомогательный плагин

Чтобы расширить функциональность плагина — отрегулировать дизайн ускоренных для мобильных устройств страниц, интегрироваться с системами аналитики — используйте плагин Glue for Yoast SEO & AMP. Он поможет интегрировать настройки установленного плагина вместе с плагином Yoast, который содействует SEO оптимизации сайта. Интеграция в свою очередь позволит расширить настройки AMP страниц.
Настройки плагина Glue for Yoast SEO & AMP
#2

AMP для WP

Еще один плагин, который упрощает создание AMP-страниц, представлен на скриншоте:
Плагин AMP для WP
Этот AMP-плагин, в отличие от предыдущего, не нуждается в дополнительных инструментах для настройки. Найдите его по запросу «AMP plugin» или скачайте из магазина. Установив, активируйте. Перейдите в меню настроек нового плагина.
Настройки плагина AMPforWP
В меню общих настроек вы cможете усовершенствовать свои AMP страницы. Например, добавить логотип, как на скриншоте, настроить мета теги title и description, интегрировать системы аналитики, включить
комментарии.
Дизайн страниц в плагине AMPforWP
Настройки дизайна позволяют выбрать общую тему, чтобы страницы были более красочными, а не монотонными:
Оформление AMP страниц в плагине AMPforWP
Функционал плагина позволяет редактировать цветовые схемы, шрифт, вариации отображения заголовков, кнопки для социальных сетей. У вас есть возможность расширить набор функций, купив платную версию плагина. Вы получите больше тем, контактные формы и рейтинги.

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

После любых настроек на сайте необходимо их проверять. AMP страницы тоже нужно проверить в системе. Протестируйте результат своей работы, воспользовавшись инструментом Проверка AMP страниц от Google.
 Проверка AMP страниц Google
Перейдите в инструмент онлайн-проверки и укажите адрес своего сайта. Нажмите кнопку «Проверить». Так как вы указали каноническую ссылку на сайт, то анализатор попросит вас переадресовать тест на AMP страницы, как на скриншоте:
 Проверка AMP инструментом Google
Необходимо переадресовать запрос на адрес, нажав кнопку «Проверить связанную AMP-страницу». Результат будет следующим:
Успешная проверка AMP страниц в Google Search Console
Если же проверка показывет наличие ошибок, то их необходимо устранить в настройках вашего плагина.
Ошибки AMP страниц при проверке в Google Search Console
Как правило основные ошибки подразумевают:

  • ошибки в тегах AMP HTML и атрибутах;
  • ошибки в стилях и макетах;
  • ошибки в шаблонах;
  • устаревшие теги.

С каждым случаем потребуется разобраться по отдельности в зависимости от типа ошибки. Google поможет вам и приложит к анализу рекомендации.
Рекомендации по AMP страницам в Google

Яндекс.Турбо-страницы

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

  • страницы быстрее загружаются;
  • снижается нагрузка на сервер сайта;
  • технология помогает адаптировать под мобильный устройства сайт без редактирования основного кода;
  • изменения на таких страницах отслеживаются автоматически;
  • не влияют на сбор метрики;
  • поддерживают рекламу.
О возможностях Турбо-страниц подробно пишет справочник:
Возможности Турбо-страниц Яндекса
Настройки Турбо-страниц несколько отличаются: тут необходимо создать RSS-канал. Если ваш сайт работает на WordPress, нужно скачать Яндекс Турбо — плагин, который автоматически создаст RSS-ленту согласно всем требованиям поисковика.

Настройте канал для WordPress через специальные плагины. Для партнеров Яндекс.Новостей формируются специальные RSS-каналы. Создайте RSS-канал и загрузите Турбо-страницы одним из способов:
Яндекс.Турбо скачать плагин для WordPress
Для других CMS есть специальные плагины, аналогичные Яндекс.Турбо.

После создания RSS-канала загрузите Турбо-страницы одним из способов:
1
через Вебмастер;
2
через API Яндекс.Турбо-страниц.
Например, загрузите RSS-канал через Вебмастер, указывая сгенерированную плагином ссылку, в разделе «Источники»:
Установка Яндекс.Турбо-страниц
Настройте его: загрузите логотип, добавьте пункты меню, счетчики метрики и рекламу, если требуется:
Настройки Турбо-страниц Яндекса
Проверьте, как работают Турбо-страницы Яндекса. В панели Вебмастера перейдите в меню «Турбо-страниц» и выберите «Источники».
Проверка Яндекс.Турбо-страниц
Успешная проверка Турбо-страниц от Яндекса
Посмотрите несколько страниц. Как только вы убедились, что страницы отображаются правильно, запускайте показ Турбо-страниц. Показ включается кнопкой «Вкл» в верхнем правом углу. Она отмечена красным квадратом на предыдущем скриншоте.

Заключение

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

Для сайтов, созданных на популярных CMS, существуют готовые решения — плагины. Они позволяют автоматизировать процесс создания AMP страниц.

После завершения настройки плагинов не забудьте проверить качество их работы. Google предоставляет инструмент, который выполняет проверку AMP страниц. Если Google обнаружит ошибки, изучите их и исправьте. Основные типы ошибок при настройке AMP страниц:

  • ошибки в тегах AMP HTML и атрибутах;
  • ошибки в стилях и макетах;
  • ошибки в шаблонах;
  • устаревшие теги.

Аналог для AMP страниц от Яндекса — Турбо-страницы. Установите специальный плагин, который генерирует RSS-канал, загрузите его через Яндекс Вебмастер или API Яндекс.Турбо-страниц.

Когда завершите настройку, проверьте, правильно ли отображается содержимое страниц с помощью предварительного просмотра. Если результат вас устраивает, запускайте показ Турбо-страниц.
Эта статья — часть модуля «Список задач» в Serpstat
«Список задач» в Serpstat
«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач»

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Оцените статью по 5-бальной шкале

3.33 из 5 на основе 3 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Хотите узнать новые фишки по интернет-маркетингу?
Подпишитесь на нашу рассылку — только полезные статьи, реальные кейсы и новости Serpstat раз в неделю.

Поделитесь статьей с вашими друзьями

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

Свяжитесь с нашей службой поддержки
Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
Выберите один из проектов

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

Экспорт недоступен для вашего тарифного плана. Вам необходимо улучшить свой тариф до Lite или выше, чтобы получить доступ к инструменту Подробнее

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

Пригласить
Просмотр Редактирование

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

Я хочу больше лимитов