Calltouch Лидс
Звоните, отправляйте SMS, показывайте рекламу посетителям сайта, даже если у вас нет их контактов
29 августа 2022
Темы | Маркетинг
Нет времени читать?
Отправить статью на почту

Что такое AMP-страницы и как их использовать

12 октября 2022
14 мин на чтение
3300
author__photo

Нет времени читать?
Отправить статью на почту

Современные интернет-пользователи ценят свое время. По статистике Google, если веб-страница загружается 3 секунды вместо 1, число отказов возрастает примерно на 32%, а при увеличении показателя до 6 секунд — на 106%. Для сокращения времени загрузки применяют технологию AMP. Рассказываем, что это такое и как установить страницу быстрой загрузки.

Что такое AMP и зачем они нужны

Аббревиатура AMP расшифровывается как Accelerated Mobile Pages — ускоренные мобильные страницы с открытым исходным кодом. Это модифицированный HTML-код с элементами для быстрой загрузки контента. Так, вместо тега <img> для изображений применяется <img-amp>. Аналогичная замена предусмотрена и для видео.

Производительность сайта снижается за счет большого количества графических и анимационных элементов, например 3D-визуализации, видеороликов. Такие файлы часто размещают на сайтах туристических компаний, агентств по недвижимости и предоставлению дизайнерских услуг, чтобы проиллюстрировать предложение. Технология AMP решает проблему ожидания пользователя — загружает аналог полноформатной страницы за доли секунды.

AMP HTML файл можно использовать как отдельно, так и в комбинации со стандартной версией страницы. Второй способ — предпочтительнее. 

Особенности технологии:

  • ускоренная визуализация данных за счет библиотеки AMP JS;
  • использование Google AMP Cache для загрузки станицы;
  • отсутствие доступа к некоторым скриптам JavaScript;
  • применение CSS3 без ограничений;
  • запрет на инлайновые (прописанные в самом коде) стили.

Плюсы и минусы

Внедрение AMP дает ряд полезных преимуществ. Рассмотрим основные плюсы:

  • ускоренная загрузка — в среднем до 1 секунды, что на 15–85% быстрее, чем открытие обычной страницы;
  • удержание пользователей (посетитель с большей вероятностью останется на ресурсе);
  • высокая конверсия по сравнению с мобильной версией сайта;
  • рейтинговые показатели — выше, чем у сайтов с обычными страницами;
  • уменьшение нагрузки на серверы (в том числе за счет сохранения данных на сервере Google).

Недостатки AMP:

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

Кому подходят

Ускоренные страницы разработаны для любителей интернет-серфинга со смартфонов и планшетов. Технология позволяет просматривать содержимое сайта без перехода по ссылке. 

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

Технология дает возможность выйти на верхние позиции в результатах поисковой выдачи. Страницы с разметкой AMP-HTML с большей вероятностью попадут в новостной блок Google — это полезно для расширения охвата.

Для увеличения конверсии сайта важно заинтересовать пользователя и мотивировать его совершить конверсионное действие. Подключите Виджеты Calltouch, чтобы потенциальный клиент смог оставить контакты или заявку на обслуживание. Программа передаст данные в ваш колл-центр, а сотрудники оперативно свяжутся с пользователем и обработают обращение. Сервис поможет собирать заявки даже в нерабочее время и не упустить ни одного клиента.

caltouch-platform
Виджеты Calltouch
  • Увеличьте конверсию сайта на 30%
  • Обратный звонок, промо-лендинги, формы захвата, мультикнопка, автопрозвон форм
Узнать подробнее
platform

Как работают AMP-страницы

Принцип действия технологии основан на применении специальных тегов. Google находит AMP-метки и кэширует размещенные в них данные. При вводе запроса в поисковую строку браузер загружает информацию из CDN Google в iframe, после чего страница отображается в специальном окне. В Яндексе же AMP недоступны.

Быстрая загрузка данных выполняется благодаря следующим элементам:

  • AMP HTML — это фактически модифицированный HTML5. Содержит спецтеги для более быстрой загрузки содержимого.
  • AMP JS — библиотека, предоставляющая доступ к AMP-тегам.
  • Google AMP Cashe — сетевая инфраструктура с географическим распределением, в которой задействованы прокси-серверы. Обеспечивает кэширование AMP-страниц. Контент подгружается из ближайшего источника.

Особенности взаимодействия с посетителями сайтов:

  • содержимое отображается без перехода на сайт — в поисковой выдаче;
  • доступно перелистывание страниц, как в слайдере («карусель»).

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

Как установить AMP

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

На WordPress

Установка осуществляется в 2 этапа: 

Затем вы сможете улучшить дизайн страницы помощью AMP for WP, этот же инструмент подойдет для добавления дополнительных опций в админпанели плагина.

Основные особенности:

  • Логотип редактируют во вкладке General. Размер картинок по умолчанию 190х36 Px. Воспользуйтесь функцией Custom Logo Size для его изменения.
  • Главную страницу назначают с помощью опции Front Page.
  • Для воспроизведения статических страниц используют опцию AMP on Pages (позиция «on»).
  • Статистику подключают через Google Analytics. Внесите идентификатор страницы в предназначенное для этого поле.
  • Дизайнерские элементы редактируют с помощью функции Launch Post Builder. Она дает возможность управлять информационными блоками и выбирать цветовую гамму — фон, шрифт, другие элементы оформления.
  • Пользовательские стили добавляют в разделе Design Selector.
  • Для оптимизации страниц устанавливают дополнение Yoast SEO.

С помощью AMP-плагина можно настроить рекламу. Зайдите в раздел Advertisement и укажите расположение рекламных блоков, их характеристики. 

Другие полезные функции: 

  • рекомендуемый контент; 
  • подключение кнопок соцсетей, Disqus, уведомлений. 

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

На Drupal

Для этой CMS одним плагином не обойтись. Потребуется тройной комплект: 

Модуль AMP-страниц работает совместно с дополнением Chaos Tools (управление контентом) и Token. Если вы хотите монетизировать ресурс, используйте Google AdSense Integration, чтобы публиковать объявления AdSense.

Выбор темы, отслеживание статистики, отображение контента и другие параметры настройте в разделе AMP Configuration. Для отслеживания просмотров установите AMP-пиксель. Как и для сайтов на WP, предусмотрено подключение к Google Analytics. 

На Joomla!

AMP-страницы для сайтов на Joomla! создают с применением wbAMP. Плагин платный, стоимость полной версии — 44 USD. В бесплатном варианте функциональность ограничена, предусмотрена настройка только базовых характеристик.

Укажите основную информацию о ресурсе: название, владельца. Есть два основных варианта микроразметки: 

  • для новостей — NewsArticle; 
  • для статей — BlogPosting. 

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

Альтернативный вариант внедрения AMP-технологии на Joomla! — дополнение JAmp. Это платный компонент, стоимость — 39€.

На OpenCart, Magento, PrestaShop

Для создания ускоренных страниц на «Опенкарт» скачайте дополнение Accelerated Mobile Pages. Параметры отображения информации на сайтах настраиваются примерно так же, как в других CMS. 

Для Magento загрузите расширение Accelerated Mobile Pages. Оно обеспечит быстрый вывод содержимого главной, товарных карточек и категорий. 

Для работы с Prestashop воспользуйтесь PrestaShop AMP.

Как внедрить вручную

Для самописных CMS плагины внедрения AMP отсутствуют — добавлять код нужно самостоятельно. Последовательность действий:

  • Создание AMP-шаблонов. Стили указывают с помощью тега style amp-custom (до 50 кБ). Размеры изображений, в том числе анимированных, указывают внутри HTML-документа. Для загрузки шрифтов используйте CSS @font-face. Выбирайте варианты из библиотеки AMP JS — кастомные скрипты не поддерживаются технологией. Отключите динамические элементы.
  • Масштабирование шаблонов. Его выполняют вручную или автоматически.
  • Настройка аналитики. Отслеживайте статистику с помощью amp-pixel или amp-analytics.
  • Проверка валидности кода. Используйте инструмент AMP Test.

Для отображения анимированных объектов, модальных окон и некоторых других функций, где традиционно применяют скрипты, используйте iframe и компоненты из AMP JS. Они позволяют выводить слайдеры, формы, рекламные блоки, боковое меню.

Примеры использования

Первыми технологию AMP оценили новостные порталы — The New York Times, lenta.ru и другие. Некоторые издания пошли дальше и стали использовать AMP-страницы в качестве альтернативы мобильной версии сайта.

Изначально интернет-магазины не использовали AMP из-за отсутствия фильтров и корзины. Первопроходцем стала британская компания ASDA Walmart — она запустила более 250 000 ускоренных мобильных страниц. В России технологию ускоренной загрузки успешно реализовал интернет-магазин «Ситилинк» и увеличил конверсию на 33%.

Чтобы узнать, насколько результативно продвижение вашей компании в поисковиках и на рекламных площадках, воспользуйтесь Сквозной аналитикой Calltouch. Сервис объединит данные ваших маркетинговых инструментов в единый удобный отчет. Он составит статистику переходов на сайт, лидов, сделок и прибыли и сопоставит ее с расходами на продвижение. Вы узнаете, какая реклама приносит доход, а какая — убытки.

caltouch-platform
Сквозная аналитика Calltouch
  • Анализируйте воронку продаж от показов до денег в кассе
  • Автоматический сбор данных, удобные отчеты и бесплатные интеграции
Узнать подробнее
platform

Заключение

AMP — это ускоренные мобильные страницы. Они дают возможность в разы сократить время загрузки контента и уменьшить число отказов. Особенности AMP-страниц:

  • просмотр содержимого в результатах выдачи без посещения сайта;
  • высокие позиции в рейтинге поисковых систем;
  • большое количество просмотров (частично за счет AMP-карусели);
  • ограниченная функциональность, простые визуальные эффекты.

AMP-страницы незаменимы в процессе оптимизации информационных сайтов. Для e-commerce предпочтительнее частичное внедрение, например только для товарных карточек. AMP-страницы создают с помощью расширений (для CMS) или путем добавления кода вручную (для самописных движков).

Нет времени читать?
Отправить статью на почту
Оцените
Поделитесь с друзьями
Лучшие маркетинговые практики — каждый месяц в дайджесте Calltouch
Подписывайтесь сейчас и получите 13 чек-листов маркетолога
Нажимая на кнопку "Подписаться", вы даёте своё согласие на обработку персональных данных и получение рекламной информации о продуктах, услугах посредством звонков и рассылок по предоставленным каналам связи.
У вас интересный материал?
Опубликуйте статью в нашем блоге
Опубликовать статью
Хотите получить актуальную подборку кейсов?
Прямо сейчас бесплатно отправим подборку обучающих кейсов с прибылью от 14 730 до 536 900р.
[contact-form-7 404 "Not Found"]
У нас тут cookies…
На сайте используются файлы cookies. Продолжая использование сайта, вы соглашаетесь с этим. Подробности об обработке ваших данных — в политике конфиденциальности.
Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить