Технология AMP: что это, и как её реализовать
Мануалы
Низкая скорость загрузки страниц не просто огорчает пользователей, она также может стать причиной падения конверсий. Потому оптимизаторы и веб-мастера так стремятся улучшить данный показатель.
В далёком 2015 году Google анонсировал проект AMP, который помогает в разы ускорить загрузку страниц. Изначально оптимизаторы и веб-разработчики восприняли AMP оптимистично, но на данный момент многие неоднозначно относятся к этой технологии, а некоторые считают её даже вредной для сайта. О том, так ли это на самом деле, в чём заключаются преимущества и недостатки AMP-страниц, и как их настроить, я расскажу в этом посте.
- 1. Что такое AMP
- 2. Преимущества и недостатки AMP-страниц
- 3. Как внедрить AMP-страницы на сайте
- 4. Как проверить AMP-страницы
- 5. Турбо-страницы от Яндекса
1. Что такое AMP
AMP (Accelerated Mobile Pages) — это проект с открытым исходным кодом, предназначенный для ускорения загрузки страниц, которое достигается за счёт оптимизации тегов HTML-кода и отсутствия большинства дополнительных элементов (баннеров, виджетов, фоновых изображений и пр.). Таким образом AMP-страница содержит только основную информацию, которая нужна пользователю.
2. Преимущества и недостатки AMP-страниц
Преимущества AMP:
- Основное преимущество, конечно же, в высокой скорости загрузки. Пользователи могут быстро получать необходимую информацию, а это повышает вероятность того, что они останутся на странице подольше.
Читайте также: «Как бороться с медленной загрузкой сайта с Netpeak Spider».
- Второе преимущество вытекает из первого: если страница быстро загружается, шансы на то, что пользователь её не покинет и продолжит ходить по сайту, увеличиваются.
- Бесплатное использование для всех, так как AMP — платформа с открытым кодом.
Перейдём к недостаткам этой технологии. Их, к сожалению, немало, но остановимся на основных:
- Проблемы с отслеживанием. Эффективность AMP-страницы сложно отслеживать в сервисах аналитики — набор данных сильно ограничен. Чтобы настроить теги и коды, по которым будут отслеживаться важные показатели, уйдёт много времени и ресурсов.
- Так как Google кэширует контент на AMP-страницах и хранит их на собственном сервере, он присваивает своё доменное имя.
- Так как большая часть дополнительных элементов на AMP-страницах урезается, в том числе и рекламные баннеры, это может привести к снижению доходов от рекламы на сайте.
- Вебмастерам приходится контролировать основной сайт, версию АМР и мобильную версию. Это зачастую непросто.
- Сложность в реализации технологии на самописных сайтах.
- Cложно реализовать возможность добавления товаров в корзину, если речь идёт о коммерческих сайтах.
3. Как внедрить AMP-страницы на сайте
Для внедрения AMP на сайтах, которые разработаны на CMS, воспользуйтесь специальными плагинами:
- AMP для сайтов на Wordpress.
- Для Joomla — плагин wbAMD.
- AMP для Drupal можно установить с помощью: модуля AMP, темы AMP и HTML-библиотеки AMP.
- Для Битрикс — Google AMP.
- Для сайтов на Opencart — Opencart AMP.
А что с самописными сайтами? Как я уже говорила, внедрение AMP-страниц на них — задача сложная. Поэтому составляем ТЗ для разработчика с самыми главными требованиями:
- AMP-страницы должны отвечать требованиям HTML-вёрстки.
- При внедрение стилей и адаптивного дизайна необходимо опираться на официальную инструкцию.
- URL AMP-страниц должен быть понятным для пользователей. Например, для URL канонической страницы example.com/news/odessa адрес AMP-страницы будет выглядеть так: amp.example.com/news/odessa. Или так: example.com/amp/news/odessa.
- Канонические страницы должны быть прописаны в теге header AMP-страниц. Пример:
<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
- Контент на AMP-страницах должен соответствовать контенту канонических страниц.
- На всех главных страницах должна стоять ссылка на AMP-страницу:
<rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
- В футере должна быть ссылка на полную версию сайта: это нужно, чтобы пользователь смог легко перейти на основной сайт.
- В файле robots.txt нужно указать запрет на индексацию страниц AMP роботами Яндекса:
User-agent: Yandex
...
Disallow: */amp/
- Чтобы добавить коды счётчиков аналитики на шаблоны AMP-страниц, следуйте этой инструкции от Google.
- Логотип сайта на AMP-страницах также должен соответствовать определённым требованиям. Подробнее тут.
- При внедрении JavaScript на страницах используется только библиотека AMP JS, никаких произвольных кодов.
- Для вставки видео используйте специальные AMP-расширения.
- Для добавления рекламы следуйте этой инструкции.
- Чтобы добавить структурированные данные на AMP-страницу, ознакомьтесь со справочным материалом от Google, где описаны типы структурированных данных и алгоритмы их реализации.
- После внедрения HTML-код шаблонов нужно проверить в специальном валидаторе. Это важно, так как страницы должны правильно работать и показываться в результатах выдачи.
4. Как проверить AMP-страницы
Помимо валидатора кода вы можете проверить, соответствуют ли AMP-страницы всем стандартам, в инструменте Google «Проверка AMP страниц».
- Введите URL в строке и нажмите на кнопку «Проверить страницу».
- Если вы указали каноническую страницу, инструмент покажет ссылку на AMP-версию. Нажмите на «Результаты проверки AMP-версии».
- Если страница соответствует всем критериям,вы увидите соответствующее оповещение.
Другой способ проверить AMP-страницы — с помощью Netpeak Spider. Краулер определяет AMP-страницы, которые не отвечают требованиям AMP Project, как ошибку «Неправильный формат AMP HTML», а также находит индексируемые AMP-страницы.
Для проверки проделайте следующее:
- Отметьте в разделе «Head теги» параметр «AMP» на боковой панели.
- Введите начальный URL и нажмите «Старт».
- По окончании анализа в столбце «AMP HTML» основной таблицы значение TRUE будет указывать, что у страницы есть AMP-версия, а FALSE, что нет.
- На боковой панели в отчёте по ошибкам посмотрите, не найдена ли среди них ошибка высокой критичности «Неправильный формат AMP HTML» и и ошибка средней критичности «Индексируемые AMP-страницы».
- Если на сайте есть AMP-страницы, которые не соответствуют стандартам AMP Project, их необходимо исправить. А для AMP HTML страниц, у которых ест десктопная версия, нужно установить canonical на эту версию.
Проверять AMP-страницы вы можете даже в бесплатной версии Netpeak Spider без ограничений по времени. Также во Freemium-версии доступны и другие базовые функции программы.
Чтобы начать пользоваться бесплатным Netpeak Spider, просто зарегистрируйтесь, скачайте и установите программу — и вперёд! 😉
5. Турбо-страницы от Яндекса
Турбо-страницы от Яндекса — это аналогия AMP страниц. Они тоже предназначены для ускорения загрузки, которое достигается за счёт оптимизации вёрстки и кэшированию контента на сервере Яндекса.
5.1. Преимущества турбо-страниц
- Быстрая загрузка.
- Уменьшение нагрузки на сервер сайта.
- Потенциальный рост посещаемости сайта с мобильных устройств.
- Поддерживается реклама.
- Бонусы от Яндекса за их использование (он старается ранжировать такие страницы выше).
- Наличие турбо-страниц способствует формированию расширенных сниппетов (но не гарантирует).
5.2. Недостатки турбо-страниц
- Никакой оригинальности. Турбо-страницы делаются по одному шаблону и поэтому похожи друг на друга. Если вы намерены отличаться от конкурентов дизайном, турбо-страницы вам не подойдут.
- Малополезны для коммерческих сайтов из-за отсутствия возможности делать заказ.
- Турбо-страницам присваивается домен Яндекса (как и в случае с Google).
5.3. Как настроить турбо-страницы
Чтобы настроить турбо-страниц на сайте, нужно создать RSS-ленту. Для CMS есть решения в виде плагинов, которые позволяют автоматически генерировать RSS:
- Для WordPress:
- 1С-Битрикс: Яндекс Турбо-страницы.
- Drupal: Яндекс.Турбо RSS.
- Joomla: FL Yandex Turbo.
- OpenCart: Модуль Турбо-страницы товаров в Яндекс Opencart 3.0.
RSS-канал для сайтов собственной разработки создаётся вручную, и для этого потребуются навыки программирования или привлечение специалистов. Упрощённый пример RSS-канала выглядит так:
О том, как добавить дополнительную информацию на турбо-страницах, читайте в справке Яндекса.
После создания RSS-канал откройте Яндекс.Вебмастер и выполните следующие действия:
- Откройте раздел «Турбо-страницы» → «Источники», выберите сайт и добавьте созданный RSS-канал.
- После этого RSS-канал будет отправлен на валидацию. Если сервис покажет ошибки, перепроверьте, правильно ли выполнили требования, которые описаны в документации Яндекса.
- Настройте отображение турбо-страниц в разделе «Настройки». Здесь вы можете:
- указать название сайта;
- выбрать логотип;
- добавить пункты меню;
- выбрать счётчик метрики;
- подключить рекламные блоки.
Выполнив все описанные выше действия, вы сможете подключить простую турбо-страницу.
Подводим итоги
Быстрая загрузка страниц сайта — мастхэв для тех, кто хочет, чтобы сайт позитивно воспринимали пользователи и поисковые системы. Один из распространённых методов ускорить страницы — внедрить технологии AMP от Google и турбо-страницы от Яндекс. Чтобы настроить AMP / турбо-страницы для сайтов, созданных на CMS, воспользуйтесь специальными плагинами, которые я описала в этом посте. Внедрение технологии на самописных сайтах осуществляется труднее, так как потребуется навыки программирования или привлечение разработчика.
Но перед тем как настроить AMP и турбо-страницы, советую принять взвешенное решение и ознакомиться не только с их преимуществами, но и недостатками, так как эти технологии иногда могут привести к проблемам.
Расскажите о своём опыте использования этих технологий в комментариях: как внедряли, и какие это дало результаты?