Обсудим ваш проект?
Интернет-маркетинг,
который даёт результат
Россия: 8 (800) 775-63-20
Отправить заявку

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

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

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

Директ Лайн
Кто мы
Крупнейшее агентство
интернет-маркетинга за МКАДом:
1200+ проектов
70 специалистов
15 лет на рынке
ТОП-10
лучших компаний интернет-продвижения России 2020
Коммерческое предложение

Что такое AMP?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Каким проектам подойдёт 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 позволяет значительно ускорить загрузку страниц, но она не очень подходит для сайтов со сложными техническими составляющими.


Комментарии 2
ДОБАВИТЬ КОММЕНТАРИЙ
Продвинем ваш сайт!
Помогли более 1000 сайтам получить высокие позиции и качественный трафик из Яндекс и Google. Подходим комплексно: аналитика, SEO-оптимизация, контент, ссылки, юзабилити. Над каждым проектом работает от 6 до 10 специалистов. Работаем по любой схеме — абонентская плата / оплата за позиции / оплата за трафик / оплата за лиды.

1 место SEO для e-commerce RatingRuneta.ru

1 место
SEO для e-commerce
RatingRuneta.ru

9 место в Топ-100 SEO-компаний России

9 место
В топ-100 SEO-
компаний России

11 место в топ-100 SEO-агентств Рунета

11 место
В топ-100 SEO-
агентств Рунета

Золотая сотня
Российского Digital

в топ-10 в SEO глазами клиентов 2014, 2016, 2017

В ТОП-10
«SEO глазами клиентов»


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