Обсудим ваш проект?
15 лет опыта
90+ специалистов
Комплексный интернет-маркетинг
15 лет опыта | 90+ специалистов
Отправить заявку

Что такое технология AMP: для чего нужна и способы ее подключения

Дарья ,
редактор
Наталья ,
руководитель отдела SEO-продвижения
Поделиться
Просмотров:
1525
Время на прочтение:
Статья обновлена:
17 июня 2021
Информация о статье
Просмотров: 1525
Время на прочтение:
Статья обновлена: 17.06.2021
Дарья , редактор
Наталья , руководитель отдела SEO-продвижения
Поделиться

Уже не первый год мобильный трафик на большинстве сайтов составляет более половины всех посещений. Этот факт заставляет пересмотреть подход к оптимизации скорости загрузки страниц ресурсов. Одним из инструментов ускорения мобильных страниц выступает технология Google AMP. Разберем что это, кому подходит и способы ее внедрения на сайт.

Директ Лайн
Кто мы
Крупнейшее региональное интернет-агентство России. ТОП-10 в рейтинге Рунета.
1200+ проектов
90 специалистов
15 лет на рынке
Коммерческое предложение

Что такое AMP?

AMP (Accelerated Mobile Pages) является технологией, используемой и активно продвигаемой Google, позволяющей создавать адаптивные страницы, содержащие в себе основной контент. Но главная их особенность заключена в обеспечении практически мгновенной загрузки страниц, которая достигается благодаря следующим решениям:

  • Использованию специальных HTML-тегов и библиотек JavaScript. Подобная разметка имеет ограниченный функционал, что снижает привлекательность страницы, но отображает основное ее содержимое. 
  • При обращении пользователем к странице сайта, загрузка происходит не с сервера, где она находится, а из кэша, находящегося на серверах Google.
  • Загрузка содержимого происходит асинхронно, при этом стили оформления имеют ограничения по размеру.
  • Если страница содержит повторяющиеся элементы, то они кэшируются с помощью технологии CDN (сеть доставки содержимого, с учетом географии конечного пользователя).

Нет времени разбираться?
SEO-продвижение под ключ
Проанализируем конкурентов, подберем запросы с низкой конкуренцией, проведем поисковую оптимизацию сайта, организуем внешнюю ссылочную массу, проработаем карточки компании на онлайн картах, проведем базовую UX-аналитику сайта. Над каждым проектом работает от 6 до 10 специалистов. Собственные разработчики для доработки сайта при необходимости. От вас - сайт, от нас - позиции в Яндекс/Google и трафик.
Ваш сайт:

По итогу, страницы сайта имеют минимальный вес и загружаются моментально на мобильных устройствах.

Преимущества и недостатки реактивного формата

Преимущества технологии AMP:

  • Скорость загрузки оптимизированной страницы значительно вырастает в сравнении с исходной версией.
  • Поисковики «любят» сайты, страницы которых загружаются быстро, и при прочих равных условиях, ранжируют их выше относительно медленных конкурентов. Пользователи теперь имеют множество альтернатив практически всем сайтам, и, если какой-то ресурс долго загружается, посетитель с высокой долей вероятности закроет его. Это приведет к росту показателя отказов, которые являются одним из ключевых факторов ранжирования в поисковиках. Другими словами, долгая загрузка страниц может привести к потере позиций в поисковой выдаче.
  • Загрузка страниц, имеющих разметку AMP, в ряде случаев происходит из кэша Google, таким образом снижается нагрузка на ваш сервер.
  • AMP-страницы индексируются по тем же принципам, что и обычные.

Перед внедрением технологии AMP на сайт, следует также учитывать ее недостатки, которых, к сожалению, немало:

  • Возникают проблемы со сбором статистики с помощью Яндекс.Метрики и Google Analytics. Для ее учета потребуется добавить на все ускоренные страницы специальный тег, что также не гарантирует точность статистических данных.
  • Внешне оптимизированные страницы по технологии AMP имеют крайне упрощенный вид и ограниченную функциональность: отсутствует анимация, возможно лишь минимальное взаимодействие с содержимым страницы, нет формы комментариев и прочих элементов, доступных на полной версии документа.
  • Иногда сниппеты AMP-страниц выводятся в поисковой выдаче в виде карусели, при этом отображается их основное содержимое (например, какое-то определение). Пользователь таким образом получает ответ на свой запрос и не переходит на сайт-источник, который, соответственно, теряет трафик.
  • Требуется постоянно отслеживать работоспособность как основного сайта, так и AMP-страниц.

Основным недостатком ускоренных страниц является их ограниченность в функционале и визуальном отображении. 

Пример AMP-страниц

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

Поисковая выдача и AMP-страницы
Поисковая выдача и AMP-страницы

Перейдя на одну из подобных страниц, видим, что она загружается не из сайта-источника, а с серверов Google.

Загрузка AMP-страницы
Загрузка AMP-страницы

При этом в данном случае содержимое страницы несмотря на то, что это интернет-магазин со сложным функционалом, отображается корректно и позволяет ознакомиться с товаром, купить его и т.д. 

А вот как выглядит AMP-страница популярного новостного сайта.

AMP-страница новостного сайта
AMP-страница новостного сайта

Привлекли 35.000.000 людей на 185 сайтов
Мы точно знаем, как увеличить онлайн–продажи
Применяем лучшие практики digital–продвижения как из вашей тематики, так и из смежных областей бизнеса. Именно это сделает вас на голову выше конкурентов и принесёт лиды и продажи.
Ваш сайт:

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

Каким проектам подойдёт AMP

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

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

Способы внедрения AMP-технологии

Основных способов внедрения AMP-технологии на сайт два: используя готовое решение под одну из популярных CMS, установка AMP на самописные движки. Разберем то, как сделать оба эти варианта.

Готовое решение под CMS

Здесь все относительно просто: находим плагин, устанавливаем и настраиваем. В большинстве случаев, если контент на страницах несложный, например, это блог, то настройка достаточно проста.

Wordpress

Одним из популярнейших плагинов для Вордпресса выступает одноименный AMP. К его ключевым особенностям относится:

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

После активации плагина, будет предложено выбрать режим его работы (один из трех: standard – если тема сайта совместима с AMP, transitional – если присутствуют проблемные страницы с точки зрения перевода в AMP-формат и reader – режим с простой настройкой, подходит новичкам). При это процесс настройки сопровождается всей необходимой информацией.

Joomla!

Для этой CMS также имеется готовое решение в виде плагина wbAMD.

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

  • Использование модулей внутри страниц AMP.
  • Валидация готовых страниц.
  • Автоматически прописывает метаданные.
  • Различные настройки визуальной составляющей AMP-страниц (цвета, форма кнопок и т.д.), при этом не нужно редактировать код.
  • Готовые темы оформления.
  • Поддержка Google Аналитики и Tag Manager.
  • Поддержка всех видов рекламы, разрешенных в AMP.
  • Возможность принудительного включения AMP-страниц для пользователей мобильных устройств.
  • Расширенная документация, есть руководства от пользователей по настройке плагина, в том числе в видео формате.
  • Плагин следит за корректностью настройки страниц, в противном случае предупреждает об ошибках.

При этом расширение умеет работать с большинством популярных плагинов, удалять в них различные теги и т.д.

Drupal

Здесь немного сложнее, чем в предыдущих CMS:

  1. Необходимо установить модуль AMP.
  2. Убедиться в том, что используемая тема поддерживает AMP.
  3. Настроить HTML-библиотеку.

Внедрение AMP на Drupal больше подходит для продвинутых пользователей, но тем не менее, это проще, чем установка на самописные движки.

1C-Битрикс

В Битриксе придется приобрести платный плагин – Google AMP, который позволит настроить AMP-технологию на сайте.

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

  • Внедрение технологии для интернет-магазинов, поддержка блоков описания доставки, товаров, элементы оплаты и т.д.
  • Отображение логотипа сайта и шапки с контактными данными.
  • Использование разметки Schema.org.
  • Настройка визуальной составляющей AMP-страницы.
  • Кэширование данных.

Opencart

Плагин Opencart AMP позволяет просто и в короткие сроки настроить AMP-страницы для интернет-магазинов. 

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

  • Кастомизация внешнего вида страницы.
  • Кнопки «поделиться» для популярных социальных сетей.
  • Поддержка нескольких уровней вложенности категорий.
  • Отображение ссылок из футера.
  • Блоки сопутствующих и похожих товаров на просматриваемый. Пользователь может просматривать товар, добавлять его в корзину и оплачивать инструментами AMP.
  • Поддержка Google Аналитики.

Решение для самописной CMS

Здесь все усложняется в значительной степени и без разработчика не обойтись. Перед этим требуется составить для него подробное ТЗ. На что следует обратить внимание:

  1. В процессе разработки использовать информацию из официального источника технологии.
  2. При этом все AMP-страницы должны соответствовать требования HTML-верстки.
  3. Т.к. у каждой AMP-страницы индивидуальный URL-адрес, то по итогу он должен быть ЧПУ.
  4. Если документ имеет каноническую страницу, то информация об этом должна быть указана в теге header (<link rel="canonical" href="https://www.site.com/amp/page.html">).
  5. Любая страница-исходник, у которой имеется версия AMP, должна содержать в коде URL-адрес на нее (<rel="amphtml" href="https://www.site.com/amp/page.html">).
  6. При этом на AMP-странице должен быть размещен URL на страницу-исходник. Чаще всего его ставят в футере, а нужен он для случаев, когда у пользователя возникли проблемы с функционалом AMP-страницы (помним о том, что он может быть ограничен).
  7. Как говорилось выше, одним из недостатков AMP-страниц является сложность сбора данных для систем аналитики. Если на сайте установлена Гугл Аналитика, то следует добавить специальный код на каждую AMP-страницу. Сделать это можно с помощью официальной инструкции.
  8. Если требуется разместить логотип сайта на AMP-страницах, то делать это следует в соответствии с требованиями Google.
  9. Добавление видео требует специального расширения, описание которого есть у разработчика технологии.
  10. Если необходимо разместить рекламу на AMP-страницах, то следуем инструкции.
  11. Для успешной индексации AMP-страниц необходимо добиться того, чтобы они проходили валидацию без ошибок. Обязательно проверить все страницы.

Проверка AMP-страниц

Проверить корректность работы AMP-страниц можно с помощью инструмента от Google. Достаточно вставить URL-адрес такой страницы и запустить проверку, после которой будут указаны ошибки, если таковые присутствуют.

Результат проверки AMP-страниц
Результат проверки AMP-страниц

Если потребуется удалить AMP-страницу из поисковой выдачи, то полную информацию можно получить в официальной справке от Google. Рекомендуется убрать возможность индексации AMP-страниц краулерами Яндекса. Связано это с тем, что он не всегда корректно это делает.

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


Комментарии
ДОБАВИТЬ КОММЕНТАРИЙ
Комплекс услуг для вашего бизнеса
Проанализируем ваши бизнес-цели, ваш бизнес, продукт и текущие продажи, и подберем варианты онлайн-продвижения, которые дадут лучший эффект. Опираемся на наш опыт в самых разных тематиках, т.к. наилучшее решение часто лежит в иной тематики, но которая решает схожую бизнес-задачу. Наша стратегия - готовый пошаговый план по внедрению, с деталями и референсами.
Сертифицированное агентство Яндекса

Обсудим задачи онлайн?
Telegram
WhatsApp
Добавили ваш email
в рассылку
Работающие инструменты SEO, интернет–рекламы, UX от
90 профессионалов
Директ Лайн — агентство интернет–маркетинга с 15-летним опытом, 1200+ клиентами и 50+ специалистами. Мы сами ведем этот блог. Раз в месяц пришлём самые интересные и полезные материалы.
  • #SEO
  • #интернет-реклама
  • #email-рассылки
  • #юзабилити сайта
  • #веб–разработка на bitrix
  • #кейсы
90 профессионалов
Раз в месяц
Без спама и СМС