Amp google: АMP. Что это и с чем его едят? / Хабр

alexxlab

Содержание

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. Сравнение со стандартной страницей

  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. Откройте менеджер тегов. Нам нужен экран «Все аккаунты»:

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

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

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

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

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

  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. Переходы на полную версию чаще всего отсутствуют.

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

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

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

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

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

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

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

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

Модуль Google AMP для товаров Opencart 3.0

Модуль Google AMP — это дополнение для создания упрощенных страниц товаров в системе поиска Google. Этот модуль работает на Opencart 3.0.

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

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

Наш модуль позволяет создать такие страницы для товаров вашего магазина на Opencart 3.

Возможности модуля:

  • боковое всплывающее меню категорий
  • настройка цветовой схемы шаблона
  • собственные размеры изображений
  • добавление товара в корзину с АМР-страницы
  • отображение вкладок отзывов, атрибутов, а также рекомендуемых товаров

Установка модуля:
1. Загрузить архив в админке в разделе Установка модулей
2. Обновить модификации в админке
3. Включить и настроить модуль «Google AMP для товаров»
4. Проверить исходный код страницы любого товара в браузере (кнопка F12 на клавиатуре) на наличие в блоке <head> ссылки на AMP-страницу, выглядит это так: <link href=»ссылка» rel=»amphtml»>
Есть еще один способ проверить добавилась ли amp-версия страницы товара — скопировать ссылку на любой товар из вашего сайта, проверить эту ссылку в сервисе https://search. google.com/test/amp — проверка покажет, что это «НЕ AMP», но у этой страницы есть AMP-версия и предложит ее проверить. Если все нормально — вы получите сообщение «Страница соответствует критериям AMP». 
5. Дождаться пока Google проиндексирует ваш сайт, найдет там AMP страницы и добавит их в поисковую выдачу

Лог изменений:
05.02.2019 — добавлена проверка на наличие изображений
26.03.2019 — решена проблема с отображением главного изображения товара
29.09.2019 — реализована совместимость с ocStore 3; решены проблемы в микроразметке AMP-страниц.
08.10.2019 — решена проблема в работе с SEO PRO в ocStore 3

  • Opencart 3.0.0.0
  • Opencart 3.0.1.1
  • Opencart 3.0.1.2
  • Opencart 3.0.2.0 или ocStore 3.0.2.0
  • Opencart 3.1.0.0
  • Opencart 3.0.3.1
  • Opencart 3.0.3.2
  • Opencart 3.0.3.3
  • Opencart 3.0.3.6
  • Opencart 3.0.3.7 и OcStore 3. 0.3.7

1. «Директория не доступна для записи!» или «Папка не разрешена для записи!»»

Решение проблемы:

Скачайте и установите дополнение Localcopy OCMOD

После установки этого дополнения нужно перейти в раздел Модификаторы и нажать кнопку «Обновить модификаторы». После этого можно устанавливать другие модули.

2. Модуль установился и работает в админке, но на сайте ничего не отображается

Возможно несколько проблем и вариантов их решения:

1. Не сброшен кеш шаблона  — нужно обновить кеш [скриншот]

2. Вы раньше редактировали файлы шаблона через админку в разделе «Редактор темы», тогда этот файл сохранился в базе данных и на него уже не влияют ocmod-модификаторы, это проблема Opencart 3. Вам нужно установить фикс [скачать] и обновить модификации в админке.

3. Ваш шаблон устроен на TPL-файлах (*.tpl), в то время, когда в Opencart 3 шаблоны должны быть в формате TWIG (*. twig). Проблема в том, что ocmod-модификаторы не влияют на TPL-файлы — все изменения нужно вносить в эти файлы вручную.

3. Ошибка 500 Internal Server Error

Нужно включить вывод всех ошибок php на экране — для этого в файле .htaccess в конце нужно добавить строки:

php_value display_errors 1
php_value display_startup_errors 1
php_value error_reporting E_ALL

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

4. Не работает модуль на Opencart 3.0.3.6

В официальных сборках Opencart 3.0.3.5 — 3.0.3.6 есть баг — там модификаторы не работают с twig-файлами из-за ошибки в стандартном модификаторе /system/modification.xml — вторая операция из этого модификатора не срабатывает.
Проблема есть на оф. гитхабе и предложено решение https://github.com/opencart/opencart/blob/3.0.x.x_Maintenance/upload/system/modification.xml
Мы сделали фикс-модификатор по этим рекомендациям, он заменит файл /system/modification. xml на правильный.

Решение проблемы:
1. Сделайте резервную копию вашего файла /system/modification.xml
2. Скачайте фикс-модификатор по ссылке и установите его у себя в админке
3. Обновите кэш модификаторов
4. Обновите кэш twig-шаблонов

Включите javascript, чтобы увидеть комментарии

Как 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 | Аналитика для страниц AMP

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

Базовая настройка для измерения просмотров страниц

Чтобы создать базовую установку Google Analytics на странице AMP, скопируйте этот фрагмент кода и замените с идентификатором свойства, которое вы хотели бы использовать. (Найдите свой идентификатор Google Analytics.)

  
<тип скрипта="приложение/json">
{
  "варс": {
    "gtag_id": "",
    "конфигурация": {
      "": { "группы": "по умолчанию" }
    }
  }
}
Важно: Если тег amp-analytics , настроенный с type="gtag" , уже существует в исходном коде вашей страницы, добавьте "GA_MEASUREMENT_ID": { "groups": "default" } к существующему параметр "config" . Для оптимальной производительности не добавляйте второй экземпляр тега amp-analytics с type="gtag" .

Как это работает

Элемент является расширенным компонентом AMP и явно включен как пользовательский элемент в теге скрипта.

Блок элементов настроен на поддержку продуктов Google для измерения. Установите для атрибута type для значение » gtag » (чтобы включить поддержку gtag.js), а для атрибута data-credentials значение » include » (для включения файлов cookie. )

 
  ...

AMP не допускает использования JavaScript, кроме собственных утвержденных библиотек, поэтому конфигурация выполняется с помощью JSON. Свойство gtag_id с действительным добавляется в блок vars , а под ним в качестве значения добавляется свойство конфигурации с : {} .

Примечание: Если amp-analytics настроен с идентификатором свойства Google Analytics, события page_view автоматически регистрируются по умолчанию.

Измерение событий

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

  • селектор : селектор CSS для указания целевого элемента.
  • на : определяет тип события.
  • vars : укажите тип события в имя_события и при необходимости добавьте дополнительные параметры.

В этом примере показано, как настроить базовое событие Google Analytics. Создайте триггер с именем « кнопка », который будет срабатывать при нажатии элемента со значением идентификатора « кнопка ». Этот триггер отправит event_name со значением « login » и методом со значением « Google » в Google Analytics:


  <тип скрипта="приложение/json">
    {
      "варс": {
        "gtag_id": "",
        "конфигурация": {
         "": { "группы": "по умолчанию" }
        }
      }, 
      "триггеры": {
        "кнопка": {
          "селектор": "#кнопка",
          "по щелчку",
          "варс": {
            "event_name": "логин",
            "метод": "Гугл"
          }
        }
      } 
    }

События Google Analytics — это категория событий, специфичных для Google Analytics, которые обычно используются для создания отчетов по кампаниям. Эти значения могут быть указаны в блоке vars с параметрами event_category , event_label и value :


  <тип скрипта="приложение/json">
    {
      "варс": {
        "gtag_id": "",
        "конфигурация": {
          "": { "группы": "по умолчанию" }
        }
      },
      "триггеры": {
        "кнопка": {
          "селектор": "#логин",
          "по щелчку",
          "варс": { 
            "event_name": "логин",
            "метод": "Гугл" 
          }
        }
      }
    }

См. документацию amp-analytics , чтобы узнать больше о настройке триггеров.

Изменить параметры

Чтобы переопределить параметры Google Analytics по умолчанию или добавить новые параметры, добавьте нужные значения в раздел параметра блока конфигурации . В этом примере переопределяются значения просмотров страниц и событий по умолчанию для page_title и page_location :


<тип скрипта="приложение/json">
{
  "варс": {
    "gtag_id": "",
    "конфигурация": {
      "": {
        "группы": "по умолчанию", 
        "page_title": "Симфонии Бетховена",
        "page_location": "https://www.example.com/beethoven.html" 
      }
    }
  }
}

Link domains

Компоновщик доменов позволяет измерять два или более связанных сайта в разных доменах как один. Укажите домены, которые должны быть связаны с "компоновщиком": { "domains": [...] } свойство:


<тип скрипта="приложение/json">
{
  "варс": {
    "gtag_id": "",
    "конфигурация": {
      "": {
        "группы": "по умолчанию",
          "linker": { "domains": ["example. com", "example2.com"] } 
      }
    }
  }
}

На страницах AMP с настроенным Google Analytics возможность ссылки на ваш канонический домен из кэша AMP включена по умолчанию. Чтобы отключить возможность Google Analytics связывать трафик домена, добавьте "linker": "false" в параметры конфигурации:


<тип скрипта="приложение/json">
{
  "варс": {
    "gtag_id": "",
    "конфигурация": {
      "": {
        "группы": "по умолчанию",
          "линкер": "ложь" 
      }
    }
  }
}
Примечание: Функциональность компоновщика доменов также можно отключить с помощью пустого массива доменов : "linker": { "domains": [] } .

Скорость сайта

Google Analytics настроен на автоматический сбор данных о скорости сайта для небольшая часть трафика вашего сайта. Вы можете изменить частоту дискретизации для сбора более-менее данные. Чтобы установить частоту дискретизации на 100 %, добавьте выделенный код в ваша конфигурация:


<тип скрипта="приложение/json">
{
  "варс": {
    "gtag_id": "",
    "конфигурация": {
      "": {
        "группы": "по умолчанию",
          "site_speed_sample_rate": 100 
      }
    }
  }
}

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


<тип скрипта="приложение/json">
{
  "варс": {
    "gtag_id": "",
    "конфигурация": {
      "": {
        "группы": "по умолчанию",
          "site_speed_sample_rate": 0 
      }
    }
  }
}

AMP и не-AMP-трафик

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

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

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

Отладка конфигурации

Средство проверки AMP можно использовать для определения того, не соответствует ли веб-страница спецификации AMP HTML. Добавьте #development=1 к URL-адресу страницы, чтобы включить валидатор.

Расширение amp-analytics предоставляет предупреждения и сообщения об ошибках, помогающие отлаживать и устранять неполадки в конфигурации. Добавить #log=1 на URL-адрес страницы для просмотра зарегистрированных сообщений об ошибках в консоли веб-браузера.

Полный пример

В этом примере демонстрируется полная страница AMP с одной кнопкой на странице. Эта конфигурация будет отправлять стандартные данные о просмотрах страниц и события » button-click » в Google Analytics:

  <голова> <мета-кодировка="utf-8">Демонстрация тега AMP html" />