AMP-страницы: создание, валидация, публикация — полный гайд

AMP-страница (Accelerated Mobile Pages) — это технология создания облегченных HTML страниц для мобильных устройств с целью ускорения их загрузки и улучшения взаимодействия пользователя.

Главное их достоинство — мгновенная загрузка страницы даже при очень медленном интернете. Технология распространяется под эгидой Open Source, поэтому внести в нее исправление может каждый пользователь.

Google продвигает эту технологию, но в ее улучшении участвует и множество независимых разработчиков.

По данным W3Techs, на 24 октября 2021 года эту технологию использует всего лишь 0,2 % сайтов в интернете

Достоинства AMP

Мгновенная загрузка: это главное их достоинство. Также они могут улучшить юзабилити, сделать сайт его более удобным и красивым для мобильного пользователя. Кроме этого, технология позволяет:

1. Увеличить долю мобильного трафика.
2. Улучшить поведенческие факторы трафика.
3. Улучшить показатели e-commerce.
4. Снизить статическую нагрузку, создаваемую вашим сайтом на хостинг.

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

Читайте также:

A/B тестирование: что это такое, этапы и инструменты

Недостатки AMP

1. Портится и упрощается дизайн страницы. Если в полной версии визуальная составляющая страницы выводится корректно и красиво, то в AMP урезается все:

Сравнение со стандартной страницей

2. Стандартные скрипты не работают. Частично эту проблему можно решить через iFrame. Этот тег позволяет сделать фрейм внутри уже существующего документа.
3. Динамические функции не работают. Вы привыкли, что у вас есть модальные окна, анимированные элементы, подтверждение по клику и любые другие динамические функции. Но на AMP все это работать не будет.
4. Стандартная веб-аналитика (GA, «Яндекс.Метрика») может работать с некорректно, если вы не установите специальный тег.

Также встречаются и другие проблемы, о которых мы расскажем в конце нашего гайда.

Как создать AMP-страницы на WordPress

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

Самый популярный open-source движок в мире — WordPress, поэтому рассмотрим установку и настройку плагина именно на примере этой CMS.

Читайте также:

Подробный гайд по оптимизации сайта на WordPress

В разные годы я попробовал более десятка плагинов для создания. У каждого из них свои недостатки: некоторые конфликтуют со старыми версиями WordPress, другие замедляют работу полной версии сайта, третьи имеют очень ограниченный функционал и спартанские возможности кастомизации.

Сейчас я рекомендую наиболее, на мой взгляд, оптимальный вариант — AMP By Project Contributors.

Плагин от разработчика Project Contributors — один из лучших вариантов для WordPress

Плагин хорош тем, что создать страницу с его помощью сможет даже тот, кто никогда этим не занимался. Вся настройка происходит визуально, и по этой причине:

1. Упрощает разработку страниц с нуля.
2. Максимально автоматизирует процесс AMP-разметки, позволяя работать в стандартном интерфейсе WordPress.
3. Позволяет валидировать созданные страницы.

Читайте также:

Алгоритм Google Panda – руководство для тех, кто не хочет попасть под фильтр.

Шаблоны в плагине By Project Contributors

Плагин позволяет создавать страницы тремя разными способами. Здесь эти способы называются шаблонами:

Доступно три типа шаблона: стандартный, переходный и читательский

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

Standard, или стандартный режим. Предусматривает одну тему для обслуживания запросов и одну версию сайта. Этот режим — лучший вариант для сайтов, где тема и плагины полностью совместимы с AMP-технологией. Он также подходит, если некоторые компоненты не совместимы и вы хотите решить эту проблему.

Transitional, или переходный режим. Предусматривает одну тему и две версии каждой страницы. Активная тема используется для обслуживания обоих версий. Этот режим является хорошим выбором, если сайт использует не полностью совместимую тему и функциональные различия между страницами допустимы.

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

Присоединяйтесь к нашему Telegram-каналу!

• Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
• Для этого вам необходимо подписаться на наш канал.

Как установить плагин

Устанавливаем плагин как обычно — через административную панель WordPress:

Добавляем новый плагин

В поисковой строке указываем название плагина:

Ищем плагин Project Contributors

Устанавливаем и активируем плагин:

После нажатия кнопки «Установить» она превратится в «Активировать». Нажимаем ее

Открываем настройки плагина удобным способом — через навигационное меню слева или через страницу установленных плагинов:

Открываем параметры установленного плагина

Если ваша тема WP поддерживает AMP, выберите Standard или Transitional и нажмите кнопку Save:

После выбора режима нажмите Save

Если вы хотите настраивать внешний вид темы для AMP-страниц самостоятельно, выбирайте ручной шаблон:

Выбираем тему для

Сейчас мы рассматриваем настройки шаблона Reader. После выбора режима шаблона можно перейти в продвинутые настройки:

Активация автоматического редиректа мобильных пользователей на AMP-страницы и настройка типов контента

Часто плагины добавляют недопустимые варианты HTML-разметки. В разделе Plugin Suppression вы можете запретить запуск таких плагинов на всех страницах:

Список активных плагинов. Недопустимая для не обнаружена ни в одном плагине

Если вы хотите подключать аналитику вручную, то придется указать конфигурацию JSON в разделе Analytics:

Плагин предоставляет простой механизм для вставки тегов аналитики

Читайте также:

Микроразметка JSON-LD: что это и как использовать на своем сайте

При необходимости в разделе Paired URL Structure можно настроить парную структуру URL:

Когда вы используете шаблон Transitional или Reader, ваш сайт находится в конфигурации «Парный AMP»

«Парный AMP» подразумевает, что канонические URL-адреса не являются AMP-страницами, а отдельные версии страниц — имеют специфичные URL.

Структура парного URL-адреса для AMP-разметки не важна независимо от того, используется ли корректный параметр запроса или тот же суффикс пути. Использование параметра запроса позволит решить проблему 404-й ошибки, когда плагин деактивирован.

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

Мастер настройки

Если вы не хотите копаться в лишних настройках, настраивайте плагин при помощи мастера. Чтобы запустить его на главной странице плагина нажмите кнопку Reopen Wizard:Запустите мастер настройки и следуйте подсказкам плагина

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

Как создать AMP-страницы вручную

Если вы начинающий веб-разработчик и вам интересно, как устроена AMP-технология, попробуйте создать страницу на базе HTML-страницы. Для начала проанализируйте этот шаблон, который мы взяли с айта amp.dev:

<!doctype html> <html amp lang=»en»> <head> <meta charset=»utf-8″> <title>Hello, AMPs</title> <link rel=»canonical» href=»https://amp.dev/ru/documentation/guides-and-tutorials/start/create/basic_markup/»> <meta name=»viewport» content=»width=device-width»> <script type=»application/ld+json»> { «@context»: «http://schema.org», «@type»: «NewsArticle», «headline»: «Open-source framework for publishing content», «datePublished»: «2015-10-07T12:02:41Z», «image»: [ «logo.jpg» ] } </script> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async src=»https://cdn. ampproject.org/v0.js»></script> </head> <body> <h2>Welcome to the mobile web</h2> </body> </html>

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

Разметка AMP

Давайте посмотрим требования к разметке в иерархическом порядке:

1. <!doctype html> — начинает документ.
2. <html ⚡> — тег обязателен.
3. <head> и <body> — обязательны, в отличие от обычного HTML-документа.
4. В теге head должен присутствовать обязательный код:

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Переходим к разметке заголовка.

Требования к разметке тега заголовка

• <link rel=»canonical» href=»$SOME_URL»> — указывает исходную страницу и располагается внутри заголовка.
• <meta charset=»utf-8″> — определяет кодировку документа. Этот тег должен быть самым первым.
• <meta name=»viewport» content=»width=device-width»> — определяет видимую область страницы. Обратите внимание: указывается initial-scale со значением 1.
• <script async src=»https://cdn.ampproject.org/v0.js»></script> — загружает библиотеку. Обязательно идет последним.

Как добавить изображение на AMP-страницу

Это можно сделать при помощи специального тега:

<amp-img src=»primer.jpg» alt=»Welcome»></amp-img>

Тег для изображения, как видите, немного изменен по сравнению с обычным HTML (вместо img src в начале идет amp-img). Но большая часть стандартных HTML-тегов прекрасно работает и в AMP-разметке.

Настраивать стили можно при помощи обычных свойств CSS. Здесь ничего нового. Единственное замечание: одна страница должна использовать одну таблицу. Стиль элементов меняется стандартными селекторами CSS:

<style amp-custom> /* any custom style goes here */ body { background-color: white; } amp-img { background-color: gray; border: 1px solid black; } </style>

Также учитывайте, что AMP-разметка предъявляет четкие требования к расположению элементов — оно делается таблицами.

Что касается размещения изображений, медиазапросов, других элементов, то подробно об этом написано на сайте, в разделе «Поддерживаемые макеты».

Прежде чем валидировать страницу, нужно ответить на вопрос: нужны ли вам обе версии страницы, с и без AMP? Если да, то нужно связать их при помощи <link>. Для этого на AMP-версию страницы добавьте следующий код (в раздел head). Не забудьте указать свой URL вместо www.primer.com:

<link rel=»canonical» href=»https://www.primer.com/url/to/full/document.html»>

На обычную версию страницы (без AMP) добавьте код:

<link rel=»amphtml» href=»https://www.primer.com/url/to/amp/document.html»>

Бывает и так, что есть только одна AMP-страница. В таком случае просто сделайте каноникал на нее саму:

<link rel=»canonical» href=»https://www. primer.com/url/to/amp/document.html»>

Действия и события

AMP поддерживает интерактивный пользовательский интерфейс. Но для удобства использования все делается немного иначе, чем на обычных HTML-страницах. Так AMP использует атрибут on для установки event handlers (обработчиков событий) на элементы.

Как и атрибуты, некоторые события/действия доступны для общих элементов, другие — только для определенных компонентов.

Для нашей первой страницы мы зарегистрируем базовое событие — клик, а затем ответим действием скрытия.

Добавьте кнопку на свою страницу и присвойте ей атрибут on:

<button on=»»> Goodbye AMPHTML World! </button>

Первое, что мы определим в значении атрибута on — событие, которое мы ожидаем. Для регистрации клика (десктоп и мобильное устройство) на AMP-странице используем событие tap:

<button on=»tap»>

Затем добавляем двоеточие и определяем id цели, на которую должно воздействовать наше действие. Мы скроем наш элемент <h2 id = «hello»>. Для этого добавим надпись «hello» после двоеточия:

<button on=»tap:hello»>

Наконец, мы добавляем знак «точка» и определяем действие. В данном случае — hide:

<button on=»tap:hello.hide»>

Теперь, если мы кликнем по кнопке, <h2> элемент будет скрыт. Подробнее о действиях и событиях написано в справке по AMP-технологии.

Осталось выполнить валидацию.

Присоединяйтесь к нашему Telegram-каналу!

• Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
• Для этого вам необходимо подписаться на наш канал.

Валидация страницы

Прежде чем валидировать страницу, выполните ее предпросмотр. Самый простой способ — открыть страницу в браузере. Если визуально все корректно, сразу переходим к валидации.

Валидация — проверка кода страницы на стандартные или формальные ошибки HTML.

Для этого откройте сервис проверки страниц AMP от Google и укажите URL нужной:

Указываем ссылку на AMP-версию страницы

Проблема не подтвердилась. Валидация пройдена успешно:

Страница валидирована

Все! Теперь страницу можно опубликовать на сайте.

Читайте также:

Как создать карту сайта (sitemap.xml)

Как отслеживать посещаемость AMP-страниц в Google Analytics

Для этого нужно связать AMP-страницы с Google Analytics. Сделать это проще всего через «Google Менеджер тегов».

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

1. Откройте менеджер тегов. Нам нужен экран «Все аккаунты»:

Открываем аккаунты в Tag Manager

2. Нажмите на многоточие:

Открываем настройки аккаунта

3. Создаем новый тип контейнера:

Нажмите кнопку «Создать контейнер»

4. Название можно дать любое. Обязательно указываем целевую платформу — AMP :

Настройка контейнера завершена, осталось сохранить его. Для этого нажмите кнопку «Создать»

Мы создали контейнер. После этого появится экран, откуда нужно скопировать скрипт (первый код) и config (второй код).

Нам нужно добавить скрипт и amp-analytics config на AMP-страницы своего сайта

Для удобства оставляем эту вкладку браузера открытой или копируем оба фрагмента, например, в блокнот. Если вы уже закрыли менеджер тегов, получите скрипты по клику на пиктограмме шестеренки:

Открываем администрирование аккаунта

Далее нажмите кнопку «Установить Google Менеджер тегов»:Получаем код контейнера для AMP-страниц

А вот и наш код — оба его фрагмента:

Копируем оба фрагмента в блокнот

Итак, первый фрагмент кода — это главный скрипт. Его нужно добавить на AMP-страницу в конце тега head.

Второй скрипт относится к Tag Manager и включает настройки для него. Его нужно добавить в начале тега body. Если добавление кода на страницу вызвало у вас затруднение — изучите Краткое руководство по началу работы с Tag Manager или попросите разработчика добавить код на страницу.

Учтите, что код на скриншоте принадлежит моему контейнеру. Его не нужно копировать, ведь у вас будет собственный код.

Читайте также:

Что такое Google Tag Manager и как его настроить

Остался завершающий шаг — нужно кастомизировать теги в «Google Менеджер тегов» и опубликовать их. Для этого возвращаемся в «Google Менеджер тегов» и выполняем следующие действия:

1. На экране «Все аккаунты» кликаем по созданному контейнеру:

Выбираем ранее созданный контейнер

2. Нажимаем кнопку «Теги» и создаем новый:

Создаем новый тег

3. Выбираем тип тега. Для этого кликаем по пиктограмме карандаша:

После нажатия мы попадем в окно с настройкой тип тега

4. Далее нужно кастомизировать тег. Действия будут различаться в зависимости от поставщика тега. Допустим, у нас стандартная Google Analytics. Выбираем этого поставщика тегов:

Выбираем тип тега

Комплексная веб-аналитика

• Позволяет видеть каждый источник трафика, его качество — процент конверсии по каждой кампании, группе объявлений, объявлению, ключевому слову.
• Даст понимание насколько качественный трафик дает каждый канал, стоит ли в него вкладываться или стоит ограничить.

5. Указываем ID. Выбираем переменную и уточняем тип отслеживания:

Чтобы указать идентификатор, кликните по иконке конструктора и выберите необходимую переменную

6. Теперь настраиваем действия, которые станут триггером активации тега:

Настраиваем триггеры активации

7. Отмечаем чекбокс триггера, который мы настроили на предыдущем шаге и добавляем его:

Выбираем триггер и нажимаем «Добавить»

8. Даем условию имя и сохраняем настройки:

Сохраняем настройки. Для этого нажимаем «Сохранить»

9. Проверяем еще раз настройки тега, нажав «Предварительный просмотр»:

Проверьте все настройки сформированного тега, выполнив предпросмотр

10. Если все правильно — публикуем тег. Для этого нажимаем кнопку:

Опубликуйте тег, нажав «Отправить»

Если нужны и другие конфигурации, повторяем вышеуказанные действия и настраиваем дополнительные теги.

Читайте также:

Индексация в поисковых системах: что это простыми словами

Резюме. Преимущества и частые проблемы AMP-страниц: личный опыт

Главное достоинство технологии заключается в том, что средняя AMP-страница загружается в течение 0,7 секунд. Отсюда вытекают и все остальные преимущества AMP:

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

Но не все так радужно. Я собрал проблемы AMP-страниц, которые заметил на собственных сайтах:

1. Переходы на полную версию чаще всего отсутствуют.

На моем сайте таких переходов было всего 95. Период — 2 месяца. Трафик сайта — около 10 000 посетителей в сутки

2. Лиды с AMP-страниц гораздо более редки, чем лиды с полной версии сайта. Период тестирования — 2,5 месяца.
3. Количество просмотров за сеанс не превышает 1.
4. У AMP-страниц хуже показатель отказов.
5. У AMP-страниц хуже показатель «Время на сайте».

Есть и проблемы с «Яндексом». Он может проиндексировать AMP-версию вместо стандартной страницы. Последствия могут быть самыми разными: от долгой индексации до полного исключения обоих версий страниц.

Если трафик из «Яндекса» очень важен для вашего сайта и вы не хотите его терять из-за внедрения AMP-страниц, можно использовать компромиссное решение. Добавьте запрещающий тег в head-секцию страницы:

<meta name=»yandex» content=»noindex» />

Благодаря этому тегу поисковый робот «Яндекса» поймет: индексировать данную страницу не нужно.

Создание сайтов

• Разработка эффективных сайтов для продаж в интернете.
• Создаем сайты с нуля любой сложности, от сайтов визиток до интернет-магазинов и крупных порталов.

подробное руководство по ускоренным мобильным страницам

Ускоренные мобильные страницы или AMP — технология, которая обеспечивает удобное получение информации в интернете с экранов смартфонов и планшетов. Как работает AMP? Как создать и кастомизировать ускоренные мобильные страницы? Какими инструментами могут воспользоваться владельцы сайтов на популярных CMS, включая WordPress, Joomla!, Drupal, OpenCart? С какими подводными камнями сталкиваются вебмастера при внедрении AMP, и как решить проблемы? Ответы на эти и другие вопросы в руководстве.

Что такое AMP и как они работают

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

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

AMP — это платформа с открытым кодом. Поэтому каждый желающий может использовать ускоренные мобильные страницы бесплатно.

Идейным вдохновителем и адвокатом проекта считается Google. Крупнейшая в мире поисковая система использует AMP при формировании страниц поисковой выдачи. Более того, Google кэширует ускоренные страницы сайтов и выступает в роли CDN. Благодаря этому мобильные пользователи быстро загружают AMP даже при низкой скорости передачи данных.

Ускоренные страницы состоят из HTML-разметки со специальными тегами и библиотеки JavaScript. Для создания AMP можно использовать ограниченный набор тегов и скриптов. Это уменьшает функциональность и внешнюю привлекательность страниц, но резко увеличивает скорость их загрузки. Также ускорению загрузки способствует предварительное кэширование.

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

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

Читайте также: Какую CMS выбрать: руководство по выбору «движка» для сайта

К сожалению, Google не считает нужным показывать AMP-карусели на страницах выдачи, сформированных для моих устройств. Поэтому за пример спасибо Search Engine Land.

В отличие от Google, «Яндекс» не поддерживает технологию AMP.

Пока еще крупнейший поисковик рунета не считает ускоренные мобильные страницы дублями. Это объясняется тем, что AMP ссылаются на канонические страницы с помощью атрибута rel=»canonical».

Тем не менее «Яндекс» индексирует AMP и даже включает их в выдачу. Один из участников популярного SEO-форума рассказал, что поисковик включил ускоренные страницы в выдачу вместо основных. На жалобу техподдержка ответила, что робот не считает атрибут rel=»canonical» строгой директивой. Поэтому AMP оказались в выдаче вместо основных страниц сайта. Топикстартеру пришлось запрещать «Яндексу» индексировать ускоренные страницы в файле robots.txt.

За несколько месяцев использования AMP проблем с «Яндексом» я не заметил. В выдачу этой поисковой системы попадают основные версии страниц. Специальных правил индексации в файле robots.txt не указываю.

Стоит ли использовать ускоренные мобильные страницы

Чтобы ответить на этот вопрос, нужно уделить внимание преимуществам, недостаткам и результатам внедрения AMP.

Преимущества AMP

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

Сервис/Страница	Базовая	AMP
PageSpeed Insights от Google	62 балла для мобильных, 77 баллов для десктопов.	88 баллов для мобильных, 94 балла для десктопов.
Инструмент проверки скорости загрузки от Pingdom	Время загрузки 5,94 секунды, размер страницы 3,5 Мбайт.	Время загрузки 2,46 секунды, размер страницы 381,4 Кбайт.
Инструмент проверки скорости загрузки от GTmetrix	Скорость загрузки 18,6 секунды, размер страницы 3,49 Мбайт.	Время загрузки 3,4 секунды, размер страницы 314 Кбайт.

Ускоренные страницы загружаются в разы быстрее стандартных. Это возможно благодаря значительному уменьшению объема данных с помощью технологии AMP.

Низкая скорость загрузки негативно влияет на пользовательский опыт. Более половины посетителей не ждет отображения контента более 3 секунд.

Быстрая загрузка критически важна для пользователей с мобильными устройствами. Именно поэтому Google предварительно кэширует AMP и выступает в роли CDN для людей, которые пользуются медленным интернетом.

Google учитывает скорость загрузки страниц при ранжировании сайтов. Это важно в контексте тестирования mobile-first индекса. Обеспечивает ли AMP дополнительные преимущества в рейтинге?

В середине 2016 года на саммите Search Engine Journal в Чикаго представитель Google Гарри Ильес заявил, что ускоренные мобильные страницы не входят в число факторов ранжирования. Но специалист не смог однозначно сказать, что AMP не будет фактором ранжирования в будущем.

Что это значит? Технология AMP сама по себе не дает сайтам преимущества при ранжировании. Тем не менее она значительно увеличивает скорость загрузки сайта, которая учитывается при формировании поисковой выдачи.

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

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

Недостатки ускоренных мобильных страниц

У AMP много недостатков. Вот основные:

• Данные о посещении ускоренных страниц не попадают в отчеты «Метрики» и Google Analytics, которые формируются благодаря кодам отслеживания на основных страницах сайта. Чтобы отслеживать эффективность AMP, нужно добавить на них код отслеживания вручную или с помощью плагинов.
• Ускоренные страницы имеют урезанную функциональность по сравнению с базовыми. На AMP нет навигационного меню, блока похожих публикаций, сайдбара, формы комментирования. Нужные элементы приходится «прикручивать» вручную или с помощью плагинов.
• Внешний вид AMP отличается от базовых страниц не в лучшую сторону. Ради высокой скорости загрузки вы жертвуете визуальной привлекательностью сайта.
• На AMP нет сторонних виджетов, например, виджетов групп «Вконтакте» или Facebook.
• Если Google показывает ускоренные страницы сайта в карусели, пользователи могут читать их, не покидая SERP. Поэтому ваш сайт лишается трафика.
• Теоретически из-за AMP могут возникать проблемы с индексацией. Пример с «Яндексом» описан выше.

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

Результаты внедрения AMP

Сначала личный опыт. Внедрил ускоренные страницы на экспериментальной площадке на WordPress в ноябре 2016 года. Проблем с «Яндексом» нет. Эта поисковая система видит AMP, но не включает их в индекс.

Google быстро индексирует AMP. Информация о них появилась в разделе Search Console «Вид в поиске – Ускоренные мобильные страницы» в течение нескольких дней после внедрения на сайте.

Читайте также: Как пользоваться конструкторами сайтов, или Станут ли облачные платформы альтернативой CMS

Практически сразу после индексации Google направляет на AMP трафик. По состоянию на конец февраля 2017 года приблизительно каждый третий посетитель из Google попадает на ускоренную, а не на основную версию страницы. Вот интересная статистика:

• За неделю с 20 по 26 февраля на тестовую площадку из Google пришло 749 посетителей.
• 397 из 749 человек — мобильные пользователи.
• 246 пользователей из Google приземлились на ускоренные страницы.

На примере конкретного ресурса без претензии на репрезентативность видно, что Google охотно направляет на AMP посетителей. На ускоренные страницы из поисковой системы пришли 32,84 % от общего числа пользователей или 62 % мобильных пользователей. Оставшиеся 38 % владельцев смартфонов и планшетов попали на базовые страницы с адаптивной версткой.

По имеющимся данным нельзя сказать, что Google предпочитает AMP страницам с адаптивной версткой. Поисковик направляет почти 40 % мобильных пользователей на страницы с адаптивной версткой. Можно предположить, что на решение поисковой системы влияют характеристики устройства пользователя и скорость подключения к интернету.

Вот данные, на которые стоит обратить внимание:

• За три месяца с момента реализации посетители ускоренных страниц только один раз нажали на объявление AdSense. На ускоренных страницах висит прямоугольный блок 300 на 250 под основным контентом. Другие форматы объявлений пока не тестировал.
• Показатель отказов AMP значительно выше, чем у стандартных страниц. По данным Google Analytics он достигает 98 %. Это может быть связано с некорректным отслеживанием эффективности ускоренных страниц сервисом Google Analytics. При переходе пользователя с AMP на обычную страницу система мониторинга засчитывает новое посещение. При этом показатель отказов для ускоренных страниц растет, а глубина сессии уменьшается.
• Показатель просмотренных за сеанс страниц у посетителей AMP ниже чем у посетителей адаптивных страниц. Пользователи намного реже переходят на другие страницы сайта с помощью блока похожих публикаций, чем посетители обычных страниц.
• На ускоренные страницы практически все пользователи попадают из поисковой системы Google. За неделю Google Analytics зафиксировала несколько посещений с неопределенным источником трафика.
• Посетители ускоренных страниц редко переходят на полную версию, несмотря на наличие ссылки в футере. За неделю с 20 по 26 февраля сервис аналитики зафиксировал только 10 переходов.

После реализации AMP скачкообразного изменения трафика из Google не было. Сохранилась динамика умеренного роста посещаемости. На посещаемость из «Яндекса» и других источников ускоренные страницы также не повлияли.

Одного ресурса со средней посещаемостью из Google около 100 уников в сутки недостаточно, чтобы оценивать результаты использования AMP. Поэтому стоит обратиться к чужому опыту. Вот интересные данные:

• По результатам исследования Google заявил о более высокой эффективности контекстной рекламы на AMP по сравнению с обычными страницами. Показы объявлений в видимой части экрана выросли на 80 %, а CTR рекламных блоков выросли на 90 %.
• Участники известного русскоязычного форума о поисковых технологиях относятся к AMP преимущественно негативно. Вебмастера не замечают изменений трафика. Некоторые специалисты считают, что Google придумал AMP, чтобы лишить сайты трафика. В данном случае речь идет о возможности просмотра контента ускоренных страниц на странице выдачи.
• Любопытные данные от Search Engine Watch. Журнал Wired благодаря AMP получил рост CTR ссылок в поисковой выдаче на 25 %. А кликабельность объявлений на ускоренных страницах выросла на 63 %. Ежемесячная посещаемость сайта журнала Slate после внедрения AMP выросла на 44 %.
• Представители CNN в интервью The Wall Street Journal сказали, что AMP и обычные страницы монетизируются с помощью рекламы одинаково эффективно.

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

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

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

Пользователям WordPress повезло: ускоренные мобильные страницы можно реализовать буквально в течение минуты. Для этого установите и активируйте плагин AMP.

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

Читайте также: Как создать сайт на WordPress: полное руководство для новичков

Плагин AMP не имеет настроек. Чтобы расширить функциональность и улучшить внешний вид ускоренных страниц, воспользуйтесь надстройкой AMP for WP. После установки и активации плагина перейдите в меню настройки ускоренных страниц в административной панели.

В разделе General при необходимости загрузите логотип сайта. Рекомендованный размер изображения — 190×36. С помощью кнопки Custom Logo Size вы можете указать произвольный размер логотипа.

С помощью кнопки Front Page вы можете указать произвольную страницу в качестве главной на AMP-версии сайта.

Обратите внимание на функцию AMP on Pages. Базовый плагин создает только ускоренные версии страниц записей. Если вам необходимы AMP-версии статических страниц, переключите кнопку в положение On.

На сайтах под управлением WordPress контент можно публиковать на страницах записей и статических страницах. Записи подходят для публикации в блоге, а статические страницы для создания информационных разделов сайта, например, «Об авторе», «Услуги».

В разделе Analytics подключите отслеживание посещений AMP с помощью Google Analytics. Для этого укажите Google Analytics ID.

С помощью кнопки Use Google Tag Manager можно подключить Google Analytics с помощью диспетчера тегов Google.

В разделе Design вы можете изменить внешний вид ускоренных страниц. С помощью кнопки Launch Post Builder запустите drag-and-drop редактор дизайна. Добавляйте и удаляйте элементы страницы, выберите цветовую схему, цвет заголовка и фона.

Читайте также: Что делать, когда чешутся руки: рекомендации и лайфхаки для продвинутых пользователей WordPress

Меню Design Selector позволяет выбрать готовые варианты дизайна. В поле Custom CSS можно добавить пользовательские стили.

В разделе SEO можно настроить отображение на ускоренных страницах метаданных из плагина Yoast SEO, добавить в хедер произвольный HTML-код, а также настроить индексирование страниц архивов и категорий. Если вы не пользуетесь плагином Yoast SEO, оставьте настройки по умолчанию.

В разделе Menu настройте отображение меню на ускоренных страницах сайта. Для этого перейдите по предложенной ссылке.

В разделе Advertisement настройте отображение объявлений AdSense. Плагин предлагает четыре варианта размещения рекламы: над шапкой на всех страницах, под футером на всех страницах, а также над и под контентом на страницах публикаций.

Чтобы разместить объявление под контентом на страницах публикаций, включите кнопку AD #4. Выберите размер объявления. Создайте объявление в аккаунте AdSense и добавьте идентификаторы пользователя и рекламного блока в предложенные поля. Данные возьмите из кода созданного объявления.

По желанию вы можете показывать на ускоренных страницах блок рекомендуемого контента. Для этого в соответствующем поле плагина укажите идентификатор блока.

Блоки рекомендуемого контента приносят доход при переходах посетителей по рекламным ссылкам, а также стимулируют внутренние переходы на сайте. При выборе размера 300×600 блок выглядит так (см. иллюстрацию).

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

Читайте также: Создание сайта на WordPress: пошаговая видеоинструкция

В разделе Social Share подключите кнопки шеринга социальных сетей. В разделе Structured Data загрузите изображение для микроразметки ускоренных страниц. Google может использовать его при формировании поисковой выдачи. Также укажите размер изображений, которые будут использоваться в сниппетах при публикации ссылок на ускоренные страницы в социальных сетях.

В разделе Notification можно настроить отображение уведомлений. Например, вы можете сообщить посетителям об использовании cookies. В разделе Translation Panel переведите меню страниц на русский язык.

В разделе Disqus Comments можно подключить на ускоренных страницах систему комментирования Disqus. Для этого переключите кнопку Disqus Comments Support в положение On, укажите URL ресурса в системе Disqus и путь к файлу комментариев на сервере.

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

Читайте также: Какую систему комментирования выбрать для сайта

В разделе Advance Settings можно включить ускоренную версию главной страницы, а также страниц рубрик и архивов. За эту функцию отвечают кнопки Homepage Support и Archive Page Support соответственно.

С помощью кнопки Non-AMP Homepage link in Header and Logo можно включить ссылку на полную версию главной страницы в названии сайта и логотипе. Используйте эту возможность, чтобы перенаправлять посетителей ускоренных страниц на базовую версию сайта.

Кнопка Mobile Redirection включает автоматическое перенаправление всех мобильных пользователей с адаптивной версии сайта на AMP.

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

Более того, если Google видит только десктопную версию сайта и AMP, для mobile-first индекса он выбирает версию для стационарных ПК. Это может привести к потере трафика из-за отсутствия адаптации ресурса к мобильным устройствам.

Обязательно включите ссылку на полную версию страниц в футере с помощью кнопки Link to Non-AMP in footer. Это поможет пользователям переходить на базовые страницы с нормальной функциональностью.

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

В разделе Fix AMP Errors можно подключить платную поддержку. Разработчики плагина помогут разобраться с настройками и избавиться от уведомлений об ошибках в Search Console.

Блок Import/Export позволяет перенести настройки ускоренных страниц с одного сайта на другой.

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

AMP для Drupal

Чтобы внедрить ускоренные мобильные страницы на сайтах под управлением Drupal, воспользуйтесь следующими инструментами:

• Модуль AMP.
• Тема AMP.
• HTML-библиотека AMP.

Для работы модуля AMP необходимы плагины Token и Chaos Tools. Если вы планируете показывать на ускоренных страницах объявления AdSense, установите расширение Google AdSense Integration.

На странице настроек модуля AMP на вкладке AMP Configuration подключите отображение ускоренных версий для публикаций и страниц. Выберите тему, которая будет использована для создания AMP. Укажите Google Analytics ID для отслеживания посещений страниц. Также вы можете использовать для учета просмотров AMP-пиксель.

Читайте также: Как сделать сайт на Drupal самостоятельно

На вкладке AMP Metadata укажите название сайта. При необходимости загрузите логотип и выберите его размер.

После настройки проверьте отображение ускоренных версий страниц. Для этого к URL добавьте значение «?amp». Например, ускоренная версия страницы http://primer-saita.ru/node/1 будет доступна по адресу http://primer-saita.ru/node/1?amp.

AMP для Joomla!

Чтобы внедрить ускоренные страницы на сайтах под управлением CMS Joomla!, воспользуйтесь расширением wbAMP. Полная версия этого плагина обойдется вам в 44 доллара США в год. Сборка для сообщества доступна бесплатно.

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

Оставьте дефолтное значение суффикса для URL AMP. В этом случае для просмотра ускоренных страниц достаточно добавить значение amp. Например, ускоренную версию страницы http://primer-saita.ru/koshki можно будет найти по адресу http://primer-saita.ru/koshki/amp.

Также на странице основных настроек укажите информацию о сайте и данные издателя. Выберите подходящий тип микроразметки: NewsArticle для новостных заметок и BlogPosting для публикаций в блоге.

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

Читайте также: Как создать сайт на Joomla!: пошаговое руководство для начинающих

Заполните раздел «Правило для com_content». Если вы планируете показывать ускоренные страницы только для публикаций, в поле «Представление» укажите значение Article. В поле «Категории» выберите категории, публикации в которых будут иметь AMP-версии. В полях ID, ID номер материала и «Задача» укажите значение «*». В этом случае AMP будут созданы для всех публикаций в выбранных категориях.

Другие настройки в бесплатной версии плагина недоступны.

Существует еще один коммерческий инструмент для создания ускоренных страниц на сайтах под управлением Joomla!: плагин JAmp. Он стоит 39 евро. На тестовом сайте плагина можно увидеть, как инструмент трансформирует стандартную страницу в ускоренную.

В отличие от WordPress и Drupal, для Joomla! нет полностью бесплатного инструмента для создания AMP.

AMP для интернет-магазинов

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

Авторы проекта AMP утверждают, что онлайн-магазины могут и должны использовать ускоренные страницы. Главный аргумент в пользу внедрения технологии на ecommerce-ресурсах — повышение скорости загрузки мобильных страниц положительно влияет на конверсию. Кстати, eBay экспериментирует с AMP с середины 2016 года.

AMP для OpenCart

Чтобы создать ускоренные страницы для сайта под управлением OpenCart, воспользуйтесь модулем Accelerated Mobile Pages. Это платное решение. Тестовую версию ускоренных мобильных страниц, созданных с помощью модуля, можно посмотреть по ссылке.

Также вы можете испытать модуль AMP for Product Pages. Это бесплатное решение. Надстройка создает AMP только для страниц товаров. Для работы AMP for Product Pages нужен модуль SEO Friendly URLS.

Я не могу рекомендовать бесплатный модуль AMP for Product Pages, так как за полтора рабочих дня не смог заставить его работать на тестовом ресурсе. После установки и активации программы на OpenCart версии 2.3.0.2 ускоренные страницы на сайте не появляются. Надстройка добавляет в хедер страниц ссылку на AMP-версию. При переходе по ссылке появляется ошибка 404.

Кроме того, в результате установки модуля сайт периодически становится недоступным, а на экране браузера появляются кракозябры. Работоспособность восстанавливается после удаления и повторной установки модуля.

Возможно, проблема связана с отсутствием реального опыта администрирования сайтов под управлением ОС OpenCart. Пользователи профильного форума отзываются о модуле AMP for Product Pages преимущественно позитивно.

Читайте также: Как создать интернет-магазин на OpenCart: пошаговая инструкция

AMP для Magento

Если ваш интернет-магазин работает на платформе Magento, воспользуйтесь платным плагином Accelerated Mobile Pages. Модуль создает AMP для главной, страниц категорий и товаров.

Демонстрационная версия ускоренных страниц сайта на Magento доступна по ссылке.

AMP для PrestaShop

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

Внедрять или нет

Если у вас контент-проект, который работает на WordPress, реализовать ускоренные страницы можно быстро и без затрат. Вы потратите минуту на установку базового плагина и полчаса на установку и настройку дополнительного плагина.

Для сайтов под управлением Drupal также есть бесплатное решение, которое можно быстро установить и настроить. А вот для Joomla! и движков для интернет-магазинов плагины для создания AMP придется покупать.

Есть ли смысл использовать AMP, если их функциональность и внешний вид уступают стандартным страницам, а явных преимуществ в ранжировании пока нет?

«Яндекс» не поддерживает технологию и иногда неправильно индексирует ускоренные страницы. Google может передумать и закрыть проект.

Но почему-то кажется, что Google не передумает, а «Яндекс» будет вынужден играть по правилам глобального лидера поискового рынка. Логика простая: доля мобильного трафика растет и будет расти. Люди будут выходить в интернет не только с помощью телефонов и часов. На очереди кофеварки и стиральные машины. Поэтому технологии отображения контента на экранах мобильных устройств будут развиваться.

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

Как AMP работает в поиске Google | Центр поиска Google | Документация

Google Search индексирует AMP страницы, чтобы обеспечить быстрый и надежный доступ в Интернет. Когда страница AMP доступна, ее можно представлены в мобильном поиске как часть расширенных результатов и каруселей. Хотя AMP сам по себе не является фактор ранжирования, скорость является фактором ранжирования для поиска Google. Поиск Google применяет один и тот же стандарт ко всем страницы, независимо от технологии, используемой для создания страницы. Для получения дополнительной информации о преимущества использования AMP см. Истории успеха проекта AMP.

Когда пользователи выбирают страницу AMP, Google Search извлекает страницу из Кэш Google AMP, обеспечивающий различные оптимизации нагрузки, которые часто сделать так, чтобы эти страницы отображались мгновенно, например, предварительный рендеринг. В настоящее время страницы AMP на компьютере не подается из кэша Google AMP/средства просмотра AMP. Страницы Canonical AMP ведут себя как стандартные результаты.

Начальное отображение в результатах поиска

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

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

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

После того, как пользователи нажмут на AMP-контент

Когда пользователи нажимают на ваш AMP-контент в Google Поиске, AMP-контент может отображаться одним из двух способов:

• Средство просмотра Google AMP : В верхней части Google AMP Viewer, отображается домен вашего контента, чтобы пользователи понимали, кто опубликовал Это.
• Подписанный обмен : Технология, которая позволяет браузеру обрабатывать документ как принадлежащий вашему Источник.

О средстве просмотра Google AMP

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

О подписанном обмене

Подписанный обмен позволяет вам использовать файлы cookie первой стороны для настройки контента и измерения аналитика. Ваша страница отображается под вашим URL-адресом вместо URL-адреса google.com/amp . Поиск Google отдает предпочтение ссылкам на контент в виде подписанного обмена, а не с помощью Google AMP. Средство просмотра в браузерах, поддерживающих подписанный обмен. Чтобы предоставить пользователям результаты в этом формате, вы должны публиковать контент AMP как подписанный обмен в дополнение к обычному формату AMP HTML. В настоящее время подписанный обмен поддерживается только в Google Поиске для расширенных результатов и базовых результаты, а не карусели. Чтобы узнать больше о настройке подписанного обмена для страниц AMP, посетите Подавайте AMP с помощью подписанных бирж.

Использование AMP для целевых страниц Google Ads | Целевые страницы Google Ads AMP

Обычно более быстрые целевые страницы привести к большему количеству конверсий, а AMP — отличный способ создать привлекательную рекламу Google Ads целевые страницы, которые загружаются быстрее. amp.dev предоставляет веб-сайт разработчиков с ресурсами, которые им необходимы для создания привлекательных, высокопроизводительных страниц. В этом пошаговом руководстве описывается, как использовать Google Реклама и другие рекламные технологии на ваших AMP-страницах.

Шаг 1. Создайте и проверьте страницы AMP

Создание страниц AMP

Чтобы узнать, как создать базовую страницу AMP, начните с создания страницы AMP Project. ваша первая AMP-страница руководство. Чтобы получить дополнительные практические пошаговые инструкции, заполните Конвертировать HTML в AMP и добавить расширенный AMP Особенности учебники. Вы можете найти образцы кода и шаблоны компонентов AMP на сайте AMP. Примеры веб-сайтов и AMP Шаблоны.

В приведенном ниже списке описаны некоторые компоненты, используемые на страницах AMP — см. полный список компонентов для Справка.

• amp-bind: Добавить настраиваемая интерактивность с отслеживанием состояния на основе событий, подобных JavaScript.
• форма усилителя: Создать целевые страницы, которые требуют ввода от пользователя.
• список усилителей: Fetch содержимое динамически из конечной точки CORS JSON.
• усилитель-карусель: Карусель изображений для прокрутки галереи изображений.
• усилитель-лайтбокс: Отображение полноэкранного представления компонента при взаимодействии с ним.
• amp-отслеживание звонков Динамически заменяет номер телефона в гиперссылке для отслеживания звонков.
• усилитель-усы: Разрешает рендеринг с помощью Mustache.js.
• средство выбора даты усилителя: Предоставляет виджет для выбора дат. Средство выбора даты может отображаться как наложение относительно полей ввода или как виджет статического календаря.

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

Во время разработки вам нужно убедиться, что ваши AMP-страницы действительны. AMP-предложения несколько разных методы для проверки ваших документов. Самый распространенный способ проверить страницу AMP — это с помощью веб-валидатора или Google Webmaster Валидатор инструментов. Вы также можете использовать Chrome браузер плагин и консоль разработчика или интегрируйте amphtml-валидатор npm модуль в вашей сборке.

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

Для получения поддержки по тестированию AMP посетите сайт AMP Project’s Getting Страница поддержки.

Шаг 2. Настройте AMP для отслеживания конверсий и аналитики

Отслеживание конверсий Google Ads

Используйте amp-аналитика компонент для отслеживания конверсий Google Ads. Следуйте инструкциям в разделе Настройка Google Ads. отслеживание конверсий для AMP-лендингов страницы, чтобы узнать, как это настроить.

Google Analytics

Google Analytics является одним из поддерживаемые аналитические решения от amp-аналитика. Включить сеансы должны быть объединены на страницах AMP и не AMP, следуйте инструкциям в разделе Настройка Объединение сеансов Google Analytics для AMP.

Диспетчер тегов Google

amp-аналитика компонент имеет встроенную поддержку Google Tag Менеджер. В дополнение к Гуглу Конверсии рекламы, вы можете использовать Диспетчер тегов Google, чтобы добавить ремаркетинг, DoubleClick Floodlight, Google Universal Analytics и аналогичные измерения продукты. См. полный список совместимых теги.

Adobe Analytics (ранее известная как Omniture)

Adobe Analytics предлагает два метода повышения производительности веб-сайта. решение для отслеживания с amp-аналитика компонент: iframe ( adobeanalytics_nativeConfig ) и не-iframe ( adobeanalytics ) реализация. Читайте о плюсах/минусах и реализации детали каждого подход.

Вы можете использовать amp-аналитика компонент для отслеживания действий и событий пользователя. Аналитика AMP поставляется с нативным поддержка от более чем 40 поставщиков аналитики. Фреймворк гибкий и позволяет для измерения и запуска URL-адресов с помощью пользовательских конфигурации для отправки аналитической информации на ваши собственные серверы или поставщикам, где родной AMP поддержка недоступна. Если вы используете технологию, которой в настоящее время нет поддерживается, попросите вашего поставщика добавить поддерживать.

Аналитика AMP также допускает гибкую замену переменных; подробности см. к переменной замена документация.

Шаг 3. Включите показ AMP в пользовательском интерфейсе Google Ads

Пока страницы AMP в Google Поиске автоматически обнаружен по ссылке от твоего страницы, рекламодатели должны явно введите URL-адрес страницы AMP в Google Ads. Прочитайте, как использовать AMP с Google. Объявления для получения подробной информации о настройка URL-адресов AMP в пользовательском интерфейсе Google Ads.

Кэш обслуживание в настоящее время доступен для текстовых объявлений на страницах результатов поиска Google, большинство основных браузеров, включая Android Chrome, Android Google Search App и Мобильное сафари. В ближайшие месяцы мы расширяем охват.

Если вы хотите проверить, как выглядит страница AMP при доставке из Google AMP кеш внутри Google Search Viewer, введите свою статью AMP в Search AMP инструмент тестирования и нажмите Ссылка для предварительного просмотра .

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

Обновление контента AMP на целевых страницах

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