21556
How-to Читать 7 минут

Как настроить 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 — набор инструментов для поискового маркетинга!

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

Набор инструментов для экономии времени на выполнение SEO-задач.

7 дней бесплатно

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

3.8 из 5 на основе 15 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Используйте лучшие SEO инструменты

Подбор ключевых слов

Поиск ключевых слов – раскройте неиспользованный потенциал вашего сайта

Возможности Serpstat

Возможности Serpstat – комплексное решение для эффективного продвижения вебсайтов

Кластеризация ключевых слов

Кластеризация ключевых слов автоматически обработает до 50 000 запросов в несколько кликов

SEO аудит страницы

Проанализируйте уровень оптимизации документа используя SЕО аудит страницы

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

Вы уверены?

Знакомство с Serpstat

Узнайте об основных возможностях сервиса удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Я принимаю условия Политики конфиденциальности.

Спасибо, мы сохранили ваши новые настройки рассылок.

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

Отменить
Открыть чат технической поддержки
mail pocket flipboard Messenger telegramm