Главная | Блог | Темы | Маркетинг | Что такое AMP-страницы, для чего они нужны и как их подключитьЧто такое AMP-страницы, для чего они нужны и как их подключить 29 августа 2022 21 мин на чтение 18 182 разработка google гайды seo разработка google гайды seo Юлия УсачеваРедактор блога Calltouch Содержание Нет времени читать? Что такое AMPAMP — это аббревиатура Accelerated Mobile Pages или ускоренных мобильных страниц. В чем суть?Всем нравится, когда так: кликнул ссылку — веб-страница моментально загрузилась. Так получается не всегда, но Google рассказал, что:если страница загружается 3 секунды, пользователи уходят на 32% чаще по сравнению с загрузкой в 1 секунду;а если целых 6 секунд, то на 106%.Тут-то и подключается AMP — инструмент для того, чтобы сократить время загрузки.Так выглядят AMP-страницы Это особенно актуально сейчас, когда трафик со смартфонов и планшетов постоянно растет, а мобильные версии сайтов продолжают подвисать чаще и больше, чем их веб-аналоги. AMP же позволяет просматривать содержимое сайта без перехода по ссылке. В статье разберемся, а нужна ли вам AMP-страница, как ее подключить, использовать и оптимизировать — легко и просто.Для чего нужны AMP-страницыОни полезны, например, контентным площадкам — новостным каналам, блогам, обучающим проектам, — которые подвисают из-за количества информации. Или интернет-магазинам — в AMP можно показать карточки товаров и быстро привести клиента к покупке.А на сайтах туроператоров, дизайнерских или агентств по недвижимости часто используют анимацию, 3D, видео и аудио. Такие файлы заметно снижают производительность — в таком случае AMP быстро загрузит аналог полноформатной страницы.ХорошоНужно увеличить скоростьПлохоВремя отрисовки самого крупного контента<=2,5 сек.<=4 сек.>4 сек.Время между первым взаимодействием (нажатием на ссылку или кнопку) и ответом бразуера<=100 мс<=300 мс>300 мсОценка показателей скорости загрузки по данным GoogleКроме скорости загрузки страницы, AMP улучшают:показатели взаимодействия — чем меньше пользователь ждет, тем меньше отказы и больше время пребывания на сайте;видимость в поиске — поисковики предпочитают показывать именно AMP-страницы в карусели новостных статей;выручку за рекламу — AMP поддерживает множество рекламных форматов, это монетизация без лишних потерь;UX или пользовательский опыт — с AMP клиент не встретит недостатков мобильного веба, всплывающих окон или тормозящих баннеров. Конверсия на сайте всего 2%, а хотелось бы все 100? Просто подключите CalltouchОткройте доступ ко всем посетителям сайтаЗвоните, отправляйте SMS, даже если нет контактов Подробнее Как работают AMP-страницыСейчас AMP-страницы используются только в Google. Принцип их работы такой: в HTML прописываются теги–«указатели», с помощью которых Google и находит их, а потом кеширует содержимое.Если пользователь кликает в поиске на такую страницу, информация подгружается из CDN Google в iframe — что это такое и зачем?CDN — это сетевая инфраструктура, главная цель которой — сократить время загрузки контента. По такой системе серверы, с которых подгружается информация, расположены в разных точках мира.Например, вы живете в Москве и заходите на сайт банка. Большая часть серверов банка находит рядом с вами — для вас сайт загрузится быстро. А если ваш друг из Владивостока заходит туда же, странички могут подвисать — по крайней мере, так было без CDN. А с CDN, используемой теперь, контент сайта загрузится с ближайшего сервера, например из того же Владивостока.А iframe — это то, что позволяет показывать AMP-страницу, как отдельную часть сайта.Почему вообще AMP-страницы загружаются быстрее?Для быстрой загрузки работают следующие методы:Оптимизация кода — упрощенный HTML и минимизированный CSS.AMP JavaScript — JS-библиотека для отображения динамического контента. Сторонний JS использовать нельзя.Кеширование — Google выделяет кеш для AMP-страниц.Асинхронность — весь контент подгружается асинхронно и не мешает основному потоку страницы.Размер — размер элементов определяется еще до загрузки, так под него заранее выделяется место.Принцип работы AMP-страниц Плюсы и минусы AMPИнструменты, которые используются для быстроты загрузки, накладывают и ограничения на то, что могут и как выглядят AMP-страницы. Вот основные плюсы и минусы:✅ быстрая загрузка — в среднем до 1 секунды✅ лучшее ранжирование — Google дает преимущество AMP-страницам✅ высокая конверсия — по сравнению с мобильными версиями✅ стандартизация — страницы выглядит одинаково на всех устройствах✅ уменьшение нагрузки на серверы❌ ограниченные функционал — ограничение JS может снизить функциональность❌ дизайн — может быть менее гибким❌недоступны навигация, сайдбар, другие полезные блоки❌ код отслеживания необходимо добавлять вручную на каждую страницу❌ только Google — AMP контролирует и продвигает Google, хотя это и открытый стандартКак подключить AMP-страницыСперва интеграция может показаться сложной — мы дадим пошаговую инструкцию того, как это сделать. Есть несколько способов подключения AMP:разработать вручную;использовать готовые плагины и расширения для популярных CMS.Это не всегда взаимозаменяемые методы. Чтобы выбрать метод подключения, нужно учесть:Тип и размер сайта — для крупных порталов или интернет-магазинов обычно нужны сложная интеграция и настройка. Маленьким сайтам и лендингам хватит базовых плагинов.CMS — на некоторых платформах, например WordPress, Drupal, уже есть плагины.Бюджет — готовые решения обычно стоят дешевле самописных AMP.Экспертность — если у вас или вашей команды достаточно технических знаний, вы можете выбрать самописное подключение. А если нет, лучше обратиться к специалистам или готовым решениям.Монетизация — не все плагины поддерживают интеграцию с рекламными платформами.Подключение AMP-страниц вручнуюВот простая инструкция подключения AMP-страниц вручную — если вы владелец бизнеса и вам это ни о чем не говорить, эксперт обязательно разберется:СтруктураНачните с базового HTML-шаблона и добавьте специфические для AMP теги — <!doctype html> в начале и <html ⚡> или <html amp> для обозначения AMP-страницы.AMP-скриптВставьте скрипт <script async src=”https://cdn.ampproject.org/v0.js”></script> внутри тега <head>. Это подгрузит AMP JS.Мета-тегиДобавьте мета-теги для корректного отображения страницы, например <meta charset=”utf-8″> и <meta name=”viewport” content=”width=device-width”>.СтилизацияВ AMP можно использовать только встроенные CSS-стили. Подключите их тегом <style amp-custom> ваш CSS </style> в <head>.Специальные тегиВместо обычных тегов (как <img>) используйте AMP-альтернативы (например, <amp-img>).Каноническая страницаДобавьте тег <link rel=”canonical” href=”URL_оригинальной_страницы”>, чтобы поисковые системы знали, что ваша AMP-страница — версия основной.Подробную инструкцию читайте здесь. А после создания страницы проверьте ее на соответствие стандартам AMP с помощью валидатора AMP.Самописные AMP — плюсы и минусыСамописные AMP часто кажутся первым логичным решением — или, наоборот, кажутся слишком сложными. Рассмотрим их преимущества и недостатки — так будет проще выбрать. Плюсы:Контроль — в отличие от готовых плагинов с ручными AMP-страницами можно полностью контролировать код. Это гибкость в плане дизайна и функционала.Производительность — вы оптимизируете страницы самостоятельно и знаете недостатки сайта, так можно достичь максимальной скорости загрузки без лишнего кода.Индивидуальный дизайн — код позволит вам создавать уникальный дизайн, который, правда, все равно должен соответствовать ограничениям AMP.Интеграция — вручную можно настроить интеграцию с различными сторонними сервисами и рекламными платформами. Здесь не действуют ограничения плагинов и расширений.Минусы ручного подключения:Знания — без экспертности никуда. Чтобы корректно создать и настроить AMP-страницы, нужно понимать, как работают код и разметка.Время — ручные страницы занимают больше времени, чем готовые решения.Ошибки — допустить ошибки в коде очень просто, особенно если у вас нет нужного опыта.Обновления и поддержка — придется самостоятельно следить за изменениями и обновлениями в спецификации.Тестирование — придется тщательно тестировать каждую страницу на соответствие требованиям и проверять их на разных устройствах.Подключение с помощью плагиновЧтобы не копаться в коде, можно подключить AMP-страницы с помощью плагина — они есть почти для всех популярных CMS и устанавливаются примерно одинаково. Разберем основные.WordPressПлагин устанавливается в 2 этапа: скачайте и запустите дополнение; проверьте корректность кода валидатором.Улучшить дизайн странички можно с AMP for WP — с ним же можно добавить дополнительные опции в админпанели плагина.WP предлагает разные темыПосле этого можно начать настройку:Логотип редактируют во вкладке General. Размер картинок — 190х36 пикселей, его можно изменить функцией Custom Logo Size.Главную страницу назначают опцией Front Page.Чтобы воспроизвести статические страницы, используют опцию AMP on Pages — надо поменять позицию на «on».Статистику подключают через Google Analytics — нужно внести идентификатор страницы в предназначенное для этого поле.Дизайнерские элементы редактируют функцией Launch Post Builder — это информационные блоки, цветовая гамма, фон, шрифт, другие элементы оформления.Пользовательские стили добавляют в разделе Design Selector.Для SEO-оптимизации рекомендуются дополнения типа Yoast SEO.С помощью плагина можно настроить и рекламу — в разделе Advertisement. Там можно указать расположение блоков и их характеристики. Есть дополнительные функции:Рекомендации для чтения.Кнопки для социальных сетей и комментариев.Чтобы предложить перейти на полную версию сайта, настройте кнопку Non-AMP.DrupalТут нужен не просто плагин, а целый комплект:основной модуль;тема;HTML-библиотека.Техническое дополнение: модуль работает в паре с Chaos Tools для управления контентом и Token.Для размещения рекламы есть интеграция с Google AdSense. Тема, отображение контента и другие элементы настраиваются в разделе AMP Configuration. Для статистики и отслеживания посещений можно добавить пиксель и подключить Google Analytics, как это делается и на WordPress.Joomla!AMP-страницы для сайтов на Joomla! создают с wbAMP. Плагин платный, стоимость полной версии — 44 USD. В бесплатном варианте функциональность ограничена, есть настройка только базовых характеристик.Такие страницы предлагает wbAMP Есть два основных варианта микроразметки: для новостей — NewsArticle; для статей — BlogPosting. Указать, для вывода каких из них применять AMP, можно в разделе «Выбрать страницы».Есть и другой плагин — JAmp. Тоже платный — 39€.OpenCart, Magento и PrestaShopДля «Опенкарт» есть дополнение Accelerated Mobile Pages. Параметры отображения информации на сайтах настраиваются примерно так же, как в других CMS. Для Magento — расширение Accelerated Mobile Pages. А для Prestashop — PrestaShop AMP.Как проверить AMP-страницыСледующий шаг после внедрения AMP — проверить их. Это очень важно — если страница некорректно отображается, есть ошибки в коде или интеграциях, она просто не попадет в выдачу.Валидатор от Google — . Для этого: Откройте AMP-страницу в браузере Chrome. Добавьте #development=1 к URL вашей страницы.Откройте инструменты разработчика Chrome (Ctrl+Shift+I или Cmd+Option+I на Mac) и перейдите на вкладку Console.Если есть ошибки, они появятся в консоли.Плагин для браузера — есть специальные плагины, которые автоматически проверяют страницы на соответствие стандартам.Онлайн-валидатор — есть и множество сторонних сервисов, которые проверят страницы.Google Search Console — если добавить сайт в Google Search Console, то в разделе AMP вы увидите все ошибки.Тестирование на устройствах — важно проверить, как страницы отображаются на различных смартфонах и планшетах.Тестирование функционала — нужно убедиться, что все элементы на странице работают корректно. Особенно, если вы писали страницу вручную.Проверка SEO и метаданных — проверить их важно, чтобы страницы правильно отображались в поисковике и высоко ранжировались.Сделать — это еще не всеКроме корректной работы AMP-страницы должны показывать результат — увеличение конверсии, трафика, удержания на странице. Если, наоборот, все осталось прежним или даже уменьшилось, то страницу надо подкручивать, а сперва — отследить эти метрики, плохие и хорошие.Тут поможет сквозная аналитика Calltouch — удобно, просто, полезно. Мы все автоматизировали — подключите сайт и следите за изменениями. Сквозная аналитикаОценивайте эффективность всех рекламных кампаний в одном окне от клика до ROIВкладывайте в ту рекламу, которая приводит клиентов ПодробнееОбратите внимание на:баннеры — может, реклама просто выглядит не очень?призыв к действию — он должен быть четким, понятным и привлекательным;что именно вы предлагаете — точно ли вы выбрали правильный контент для?Сделать работающую AMP — это только часть плана. Чтобы не потратить ресурсы зря, первым делом продумайте страничку со стороны SEO, пользовательского опыта и контента.Как удалить AMP-страницыСпособ, каким удаляют AMP-страницы, зависит от того, каким способом они были созданы и какой CMS вы пользуетесь. Это важно — если неправильно или не полностью удалить их, то возникнут проблемы.Вот общий план действий для удаления:Плагина или модуль: Если вы использовали CMS и добавили AMP-страницы с помощью плагина или модуля, вы можете просто отключить и удалить их — все очень просто.AMP-код: В случае самописного AMP вам придется отредактировать сайт и вручную удалить AMP-HTML код.Перенаправления (301 редиректы): Настройте перенаправления с удаленных AMP-URL на основные версии, чтобы не вылезали ошибки 404.Обновление robots.txt: Если вы добавляли директивы в robots.txt для управления индексацией, обновите этот файл и соответствующие директивы.Уведомление поисковых систем: Вы можете отправить обновленный sitemap.xml через Google Search Console — это ускорит удаление.Мониторинг ошибок: После удаления регулярно проверяйте Google Search Console или другие инструменты — появляются ли ошибки 404 или другие баги.Проверьте ссылки: Если на сайте или на сторонних ресурсах есть ссылки на AMP-страницы, обновите или удалите их.Кэш и CDN: Если использовались сервисы кеширования или CDN, убедитесь, что страницы удалены и из кеша.В заключениеПо данным на конец 2022 года доля мобильного трафика в Рунете достигла показателя в 90% — самый большой за всю историю.Технология AMP становится все актуальнее — дело в том, что мобильный трафик продолжает расти. Но выбирать, использовать их или нет, — это дело каждого бизнеса. Вам нужно основываться на потребностях компании, целях и аудитории. AMP может стать отличной точкой роста, а может только замедлить работу и отвлечь от важных задач. Внедрение AMP требует подготовки, и это — анализ, сбор статистики и внимательное планирование. Юлия УсачеваРедактор блога Calltouch