Posted:
Янв 7, 2023
Comments:
0 Comments

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

Содержание

AMP — что это и почему ускорение сайтов для мобильных нужно для SEO — CMS Magazine

AMP — Accelerated Mobile Pages: Ускоренные Мобильные страницы

Все больше людей в настоящее время используют свои мобильные устройства для просмотра сайтов и поиска в сети интернет. Больше, чем когда-либо. Появились целые новые отрасли — для создания продуктов для мобильных устройств, такие как мобильные приложения, носимые гаджеты, и др. технологии. А общий трафик с мобильных (смартфоном и планшетов) уже превысил Desktop-трафик с компьютеров и ноутбуков.

По статистики Google и Facebook, однако, есть много пользователей в мире, где мобильный интернет не такой уж быстрый (например, 3G, GPRS). Из-за этой причины эти два гиганта начали принимать меры по обеспечению «лучшего опыта» для пользователей с медленным соединением к сети Интернет. Большинство людей, особенно не в странах первой десятки, до сих пор не используют быстрые сети 4G, LTE или Wi-Fi.

Компания Google таким образом, запустила открытый проект AMP для мобильных устройств с медленным доступом в Интернет. Все дело в том, что веб-сайты становятся более сложными и «тяжелыми», и существует тенденция — постоянно растущий объем контента для мобильных устройств.

Что же такое AMP?

Ускоренные Мобильные страницы (AMP) — это просто говоря, в основном HTML с расширениями и некоторыми элементами/блоками кастомных страниц для мобильных сайтов. Есть определенные теги, которые вы можете и должны использовать при разработке сайтов, и есть те (классические), которые вы не можете использовать с AMP. Так, например, тег IMG (изображение) станет в этом случае AMP-IMG, видео заменяется новым AMP тегом и т.д. Даже если это накладывает определенные ограничения для разработчиков, это сулит большие преимущества в плане скорости и продвижения сайта (помогает с SEO).

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

AMP HTML документы могут быть также использованы для разработки сайта, как и любой другой HTML-документ. Так что если вы не хотите разрабатывать отдельно 2 версии сайта, вы можете просто построить свой веб-сайт на основе AMP-HTML и загружать на веб-сервер только эту версию. Тем не менее, ряд экспертов предлагают создавать обе версии для лучшей совместимости и <b>преимуществ SEO</b>.

Больше не нужно искать и обзванивать каждое диджитал-агентство

Создайте конкурс на workspace.ru – получите предложения от участников CMS Magazine по цене и срокам. Это бесплатно и займет 5 минут. В каталоге 15 617 диджитал-агентств, готовых вам помочь – выберите и сэкономьте до 30%.
Создать конкурс →

Использование AMP-JS и AMP CDN совместно с AMP HTML

JavaScript (JS) является настолько мощным инструментов, что он может изменить практически любой аспект страницы, но приходится считаться с неутешительным фактом, что он может задерживать (замедлять) рендеринг страниц вебсайта, блокируя блоки DOM. Новая технология AMP-JS обеспечивает более быстрый рендеринг страниц, предполагая использование AMP-тегов (как упоминалось в выше). Теги IMG, video, audio и iframeзаменяются на amp-img, amp-video, amp-audio и amp-iframe соответственно.

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

Для сайтов с использованием WordPress и других CMS— как создать AMP HTML?

Первое решение. Используйте AMP плагин! Например, https://wordpress.org/plugins/amp/.

Исследования показывают, что более 50% людей отказаться от веб-сайтов, если страница/ы не загружаются в течение 3-4 секунд. Это плохой знак для бизнеса — так как это потенциально потерянные клиенты или даже косвенные потери дохода (особенно для компаний и бизнеса, напрямую зависящего от веб-сайтов и/или поисковых систем).

Мы в компании SEO-Website.ru сделали все записи блога с дополнительными версиями /AMP/.

Рассмотрим результаты, что это дало в рейтинге Google Speed Insights:

Пример 1

Обычная страница. Получаем рейтинг по скорости 74, по удобству — 99 из 100.

AMP страница. Получаем рейтинг по скорости 83, по удобству- 99 из 100.

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

Пример 2

Обычная страница. Получаем рейтинг по скорости 80, по удобству — 99 из 100.

AMP страница. Получаем рейтинг по скорости 88 (зеленая зона — отлично!), по удобству — 99 из 100.

Короткое резюме:

AMP вполне дееспособная технология, способная повысить рейтинг веб-страницы, что положительно влияет на SEO и продвижение вашего веб-сайта. Для сайтов на базе WordPress это реализуется специальным плагином AMP -достаточно просто, но с одним ограничением — только для записей (posts), а не для всех страниц (в этом случае вам необходимо вручную разработать заново структуру страниц согласно ниже приведенным требованиям и правилам). <br>

***

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

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

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

Перспективы и сложности AMP

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

Конечно, еще много нерешенных вопросов вокруг AMP, но многие уже собираются производить обе версии сайта — легкую/простую и обычную, чтобы сделать AMP-страницы (которые загружаются быстрее) конкурентным преимуществом. Что еще остается загадкой, так это Отображение объявлений на AMP HTML. Это одна из проблем, и это пока ограничивает возможности монетизировать свои мобильные AMP-сайты.

Рекомендации от Google по созданию AMP ускоренных мобильных страниц

Как обеспечить корректный показ ускоренных мобильных страниц в результатах Google Поиска?

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

Google дает рекомендации по оптимизации сайтов — они относятся и к технологии AMP. А в во второй части этой статьи мы дадим советы по созданию таких страниц:

  • Дизайн. Создайте страницы в соответствии с требованиями AMP.

  • Видимость. Сделайте страницы видимыми для пользователей.

  • Проверка. Узнайте, правильно ли созданы страницы.

  • Структурированные данные. Разметьте содержание страниц.

  • Статус. Отслеживайте эффективность страниц с помощью Search Console.

Резюме. Проще говоря, технологии усложняются, требования к качеству и скорости растут, и если вы хотите, чтобы ваш сайт был «наверху», необходимо учитывать все это (adaptive design, AMP) уже при разработке или хотя бы при оптимизации веб-сайта.

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 и нужен ли он мне для SEO?

Согласно исследованию 2020 года, с 2011 года мобильный трафик вырос на 504 % в ежедневном потреблении медиа. Поскольку все больше и больше потребителей используют свои мобильные телефоны для доступа к контенту, как никогда важно оптимизировать работу с мобильными устройствами, а не только для вашего читателей, но и для вашего SEO; Google может обнаруживать страницы, которые загружаются медленно или имеют высокий показатель отказов, и ранжировать эти страницы ниже в результатах поиска.

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

  • Что такое Google AMP, для кого он лучше всего подходит и как он работает.
  • Преимущества и недостатки Google AMP.
  • Как внедрить AMP на свой сайт, если он вам подходит.

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

Что такое Google AMP?

В 2016 году Google объявила о запуске Accelerated Mobile Pages — веб-решения с открытым исходным кодом, призванного кардинально изменить потребление мобильного контента. Это был прямой ответ на тогдашнюю платформу публикации в приложениях Facebook (Instant Articles) и iOS 9 от Apple.платформа сбора и обнаружения новостей (Apple News).

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

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

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

Необходим ли AMP?

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

  • AMP широко применяется на сайтах издателей с большим объемом новостных статей или сообщений в блогах. Если большинство страниц вашего веб-сайта не являются статьями, то AMP может не понадобиться вашему бизнесу.
  • Если вы публикуете большое количество статей, но уже используете CDN (сеть доставки контента), эти платформы часто поставляются с функциями оптимизации производительности, такими как размещение изображений, кэширование файлов и отложенная загрузка (что означает, что сначала загружается текст, а затем изображения).
  • AMP-страницы чище и проще для читателей, но часто потому, что определенные функции и плагины JavaScript лишены приоритета или подавлены. Если вы полагаетесь на сторонние инструменты для захвата потенциальных клиентов и отслеживания аудитории, вам нужно протестировать, чтобы убедиться, что ваши AMP-страницы работают и собирают информацию так же, как и ваши обычные страницы.
  • AMP сам по себе не является фактором ранжирования Google. Это может помочь улучшить аспекты ваших веб-страниц, которые учитываются в алгоритме Google (особенно с учетом того, что Core Web Vitals станет фактором ранжирования в 2021 году), но это не единственный способ оптимизировать работу и производительность вашего сайта.
  • Если у вас уже есть мобильная версия вашего сайта или меры по оптимизации для мобильных устройств (например, объединенный или минимизированный код CSS), AMP может не понадобиться и даже может усложнить производительность и отчетность.

Хотя AMP может помочь вашему SEO, он не обязательно необходим для SEO, и его преимущества более применимы к некоторым предприятиям, чем к другим.

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

Каковы преимущества Google AMP?

Помимо более высокой скорости загрузки и большего удобства для потребителей контента, AMP предлагает ряд преимуществ для компаний, использующих контент и стратегию SEO:

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

Улучшение рейтинга и трафика

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

Более низкие показатели отказов

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

Больше времени на вашем сайте может означать больше конверсий от вашего контента.

Исходный источник изображения

Увеличение числа просмотров рекламы

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

Более высокий рейтинг кликов

Основным преимуществом AMP является то, что он отображается в списке «Главные новости» (или карусели) поисковой выдачи Google для мобильных устройств, который отображается поверх всех результатов поиска. Читатели с большей вероятностью выберут эти страницы AMP в первую очередь, что приведет к увеличению рейтинга кликов.

 Текущая статистика AMP

Несмотря на то, что сегодня многие популярные веб-сайты используют технологию AMP, например Yahoo, CNN, BBC, Reddit, Washington Post, WordPress, Gizmodo, Wired, Independent.co.uk, Pinterest, eBay и многие другие, это не технология, предназначенная только для крупных брендов. Технология AMP используется более чем на 1,4 миллиона веб-сайтов. На приведенной ниже диаграмме показано, какие отрасли используют AMP больше всего:

  • Искусство и развлечения составляют почти 11% от общего использования технологии AMP.

    • На долю

  • Computer Electronics & Technology приходится около 6%.
  • «Наука и образование» находится рядом с 5,88%.
  • На долю игр приходится около 5,15% использования технологии AMP.
  • Оставшиеся 73% представляют собой сумму незначительных процентов каждой другой отрасли

Источник изображения

Анатомия страницы Google AMP

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

AMP HTML

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

Говоря о пользовательском интерфейсе, вы в курсе предстоящего обновления Google?

AMP JavaScript

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

Источник изображения

Кэш AMP

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

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

 

Как отмечает Кричлоу, если у вас есть версия AMP, в исходном коде вы должны обозначить ее ссылкой rel AMP HTML . Например, если вы поместите /amp в конце любой новости на веб-сайте The Guardian (даже на компьютере), вы увидите HTML-код AMP. В отображении он связан со ссылкой AMP HTML в исходном коде. Вы также можете увидеть разницу в AMP:

Вот обычная страница новостей Guardian:

А вот AMP-версия той же страницы новостей Guardian:

То есть после добавления «/amp» в конце ссылки.

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

Недостатки и дополнительные соображения по интеграции Google AMP

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

  • Начнем с того, что внедрение AMP-страниц влечет за собой отказ от значительного количества элементов UX на вашей веб-странице. По своей сути AMP HTML отдает предпочтение эффективности, а не творчеству, поэтому, если привлекательные визуальные эффекты являются важной частью вашего веб-опыта, это может быть не для вас.
  • В дополнение к ограниченному количеству изображений на ваших AMP-страницах вам также будет разрешено размещать только одну рекламу на странице. Эта ограничивающая структура также не поддерживает разрушительную рекламу, такую ​​как расходные материалы, в то время как рекламу с прямой продажей может быть сложно реализовать.
  • С точки зрения маркетинга, сканирование одной части контента обходится в два раза дороже, что является частью стремления Google обеспечить паритет. Было обнаружено, что для многих издателей это влияет на количество показов, но не обязательно на показатели вовлеченности. Это связано с каруселью «Главные новости», которая побуждает пользователей читать из других источников.
  • Аналогичным образом, средство просмотра AMP от Google, как правило, разбавляет идентичность бренда, поскольку в адресной строке отображается домен Google. Хотя есть исправление для отображения фактического сайта поверх страницы AMP, он занимает драгоценное место в верхней части страницы. Вы также можете не добиться того же ощущения бренда на странице Google AMP, что и на стандартной странице, как показано в примере ниже:
  • Кроме того, AMP работает, только если пользователи нажимают на AMP-версию веб-страницы (вместо канонической версии). И хотя исследования показали, что библиотека AMP может сократить количество запросов к серверу для извлечения документа на целых 77 %, версия AMP не всегда обслуживается, если она реализована неправильно.
  • Несмотря на то, что AMP существует уже четыре года, он все еще относительно зарождается.

Вот некоторые последние сведения о Google AMP, которые необходимо учитывать при принятии решения о внедрении его на вашем сайте.

  • Вам необходимо использовать оптимизированную версию CSS.
  • Вам разрешено использовать только библиотеку JavaScript, предоставляемую AMP, и, поскольку вы не контролируете ее, вы можете столкнуться с ленивой загрузкой (возможно, единственным недостатком AMP).
  • Сайты AMP должны быть должным образом проверены, чтобы они работали каждый раз.
  • Страницы плагинов AMP не позволяют использовать формы.
  • Пользовательские шрифты должны быть специально загружены для лучшего восприятия.
  • Вам необходимо объявить высоту и ширину изображения.
  • Если вы хотите, чтобы видеоконтент размещался на ваших страницах, вам нужны расширения, одобренные AMP.

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

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

Как внедрить AMP для улучшения контента и SEO

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

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

Шаг № 1. Создайте шаблон страницы AMP

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

Вот пример простой HTML-страницы AMP, которую вы можете использовать для своего контента:

Вот теги, которые следует включать в HTML-документы AMP:

  1. Теги и
  2. как первый дочерний элемент вашего тега
  3. внутри тега для включения и загрузки библиотеки JavaScript AMP
  4. внутри тега
  5. внутри вашего тега
  6. Стандартный код AMP в теге

Эти теги можно изменить в коде самих страниц:

  • link href=»hello-world.html»
  • Содержимое раздела body Hello World!

Теперь, когда вы знаете, как создать шаблон страницы AMP для своего блога, вы можете узнать обо всех тегах HTML, которые вы можете использовать для своих страниц AMP.

К сожалению, некоторые HTML-теги нельзя использовать для AMP-страниц. К ним относятся:

  • <набор кадров>
  • <объект>
  • <параметр>
  • <апплет>
  • <встроить>
  • <базовый>
  • <элементы ввода>

Шаг № 2:   Предварительный просмотр и проверка вашей AMP-страницы

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

Чтобы сделать убедитесь, что ваша AMP-страница действительна, с другой стороны, все, что вам нужно сделать, это открыть свою страницу в веб-браузере, добавить «#development=1» к URL-адресу, а затем открыть консоль Chrome DevTools для проверки. ошибки.

Источник изображения

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

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

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

Шаг 3. Отслеживание эффективности

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

Для этого вы можете использовать внутренние инструменты, такие как Google Analytics, или любые сторонние инструменты B2B. Существует ряд поставщиков аналитики, которые предоставляют встроенные функции для аналитики AMP.

Источник изображения

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

Кроме того, атрибут extraUrlParams в amp-analytics добавляет параметр строки запроса к каноническому URL-адресу (например, «тип = усилитель» ). Это упрощает дифференциацию AMP-страниц от обычных веб-страниц в аналитике. Это позволяет сравнить общий трафик на страницах до и после запуска AMP.

Канонические URL-адреса позволяют изолировать AMP-трафик в Google Analytics для лучшего отслеживания и оптимизации.

Подходит ли вам AMP?

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

Об авторе

Аарон Чичиоко — директор по контенту (CCO) и один из веб-дизайнеров Design Doxa. Помимо своего опыта в веб- и мобильном дизайне и разработке, он также имеет многолетний опыт работы в области цифрового маркетинга, брендинга, обслуживания клиентов, электронной коммерции и управления бизнесом.

Все, что вам нужно знать

С момента своего запуска проект AMP был окружен спорами.

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

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

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

Уходя из маркетинговой индустрии с этим вопросом:

Важен ли AMP для SEO?

Сегодня мы углубимся в вопрос о том, стоит ли AMP того, взглянув на:

  • Что такое AMP?
  • Какие плюсы и минусы?
  • Как оптимизировать AMP
  • Какие сайты должны внедрять AMP
  • Как измерить воздействие

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

Что такое AMP?

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

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

Их слова, не мои.

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

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

Не слишком отличается от Facebook Instant Articles или Apple News, которые также имеют заявленную цель сделать мобильный контент более быстрым и легким для восприятия.

Ключевое различие между форматами?

AMP поддерживает распространение контента в открытой сети без использования приложения для конкретной платформы.

И вот где это становится политическим

Начнем с «открытого исходного кода».

Технически это верно.

Проект поддерживается WordPress, LinkedIn, Twitter, Pinterest и Bing, и это лишь некоторые из них.

Но Google является основным автором кода и главным промоутером. Настолько, что люди часто называют его «Google AMP».

AMP «уделяет приоритетное внимание пользовательскому опыту» за счет введения ограничений на рекламу и дизайн пользовательского интерфейса.

  • Ограничение CSS до 75 КБ.
  • Ограничение JavaScript до 150 КБ.
  • Удаление всего лишнего с критического пути рендеринга.

Хотя этих ограничений уже достаточно для создания «быстрых веб-страниц», не секрет, что делает их мгновенными.

Вот скорее техническая часть

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

Это позволяет Google кэшировать, предварительно загружать и предварительно отображать AMP-контент до того, как пользователь щелкнет ссылку в результатах поиска.

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

  • Средство просмотра Google AMP : источник издателя контента отображается вверху, но URL-адрес остается доменом Google.
  • Подписанный обмен (SXG) : позволяет браузеру рассматривать страницу так, как будто она принадлежит вашему домену. Подписанный AMP-контент доставляется в дополнение, а не вместо обычного AMP HTML. Из этих двух Google будет отдавать приоритет ссылкам на подписанный контент, но только для браузеров, которые его поддерживают (в настоящее время это только Chrome), и только для стандартных результатов, а не для карусели главных новостей. Это делает возможности SXG довольно ограниченными.

В целом, «разветвляя» HTML, предварительно обрабатывая AMP-контент и отдавая предпочтение AMP-страницам, Google может влиять на то, как создаются и монетизируются веб-сайты, чтобы формировать Интернет в свою пользу.

Поэтому неудивительно, что все эти действия подверглись критике со стороны многих представителей технологической и SEO-индустрии как попытка Google усилить контроль над сетью.

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

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

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

Но я хочу сосредоточиться на двух наиболее часто реализуемых преимуществах AMP для SEO.

Более быстрая загрузка страниц

Хотя AMP сам по себе не является фактором ранжирования, скорость является.

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

При правильной реализации время загрузки значительно сокращается.

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

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

  • Более низкие показатели отказов.
  • Высшее время на сайте.
  • Увеличение коэффициента конверсии.

Дополнительная видимость в результатах поиска Google

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

Значок молнии в поисковой выдаче Google

На самом базовом уровне страницы AMP выделяются значком молнии в поисковой выдаче Google.

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

Пока это 9 мая0027 приводит к незначительному увеличению в отдельных отраслях, я не видел никаких статистически значимых данных, подтверждающих это утверждение для массового рынка.

AMP + структурированные данные = больше изменений в результатах обогащения

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

Хотя AMP не является обязательным для этих расширенных функций.

Проведите пальцем для посещения

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

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

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

Но это должно измениться в 2021 году с обновлением Core Web Vitals, позволяющим использовать как AMP-страницы, так и не-AMP, с ранжированием, ориентированным на показатели взаимодействия на странице.

После этого объявления многие SEO-специалисты начали задаваться вопросом, перевешивают ли оставшиеся плюсы AMP минусы.

Недостатки AMP

С точки зрения разработчика

  • По замыслу это ограничительная структура и, скорее всего, так будет всегда, чтобы обеспечить обещанную скорость.
  • Внедрить и впоследствии оставаться в силе с постоянно развивающимся стандартом AMP — дополнительная нагрузка. Плагины могут дать фору, но они редко работают идеально из коробки.
  • Это создает технический долг , так как и AMP, и канонические страницы кода должны синхронизироваться, если только вы не переходите полностью на AMP.
  • Скорость света не гарантируется без AMP Cache . Для источников, которые ссылаются на страницы AMP без использования кэша AMP (например, Twitter), для оптимальной скорости необходимы дополнительные оптимизации производительности.

С точки зрения продаж

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

С точки зрения маркетолога

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

Как оптимизировать страницы AMP

Пользователи AMP не всегда видят улучшение результатов.

Если это не так, есть две возможные причины.

  • Либо не подходит, мы подойдем к этому в следующем разделе.
  • Или не до конца и правильно реализовано. AMP часто не так прост, как «подключи и работай».

Так что же нужно сделать с точки зрения SEO для повышения видимости с помощью AMP?

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

Обеспечение возможности обнаружения

Добавьте информацию об AMP-странице на не-AMP-страницу и наоборот в форме rel=»amphtml» (на AMP) и rel=»canonical» (на не-AMP-странице). ) в виде тегов в файле .

SEO-дружественные URL-адреса AMP

Существует множество способов сообщить, что URL-адрес является AMP.

  • Параметр : ?amp
  • Субдомен : amp.domain.tld
  • Язык внешнего интерфейса : домен/папка/article.amp.html
  • Подпапка : домен/папка/статья/усилитель

Опция подпапки, как правило, является наиболее удобной для SEO и гибкой.

Этот параметр вместе с языком интерфейса также являются единственными двумя, рекомендованными Google.

Согласованный пользовательский интерфейс

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

Полностью функциональный

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

Проверка четности элементов SEO

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

AMP-Friendly Logo

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

Не добавляйте URL-адреса AMP в карту сайта XML (если вы не являетесь родным AMP)

В карты сайта XML входят только канонические URL-адреса.

rel=»amphtml» предоставляет Google достаточно сигналов для обнаружения AMP-страниц.

Если Google проиндексирует правильно сопряженную AMP-страницу, пользователю будет предоставлена ​​именно эта версия.

Это немалые усилия, и многие маркетологи задаются вопросом, стоит ли AMP затраченных усилий?

Какие сайты должны использовать AMP?

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

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

Решение по AMP однозначно не для всех сайтов.

Клише «это зависит от обстоятельств» звучит правдоподобно.

Однако существуют четкие решающие факторы для оптимального ответа.

Если ваши пользователи в основном с настольных компьютеров, AMP не для вас.

Хотя страницы AMP работают на настольных компьютерах, они не отображаются с расширенными функциями и не обслуживаются из кэша AMP. Таким образом, оба основных преимущества становятся недоступными.

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

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

Только при благоприятных условиях проверьте влияние удаления AMP (обязательно следуйте передовым методам) , если ваши страницы без AMP могут выполнить базовое требование Web Vitals по наибольшему содержанию контента (LCP) в течение 2,5 секунд после того, как страница сначала начинает загружаться.

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

Лучше потратить время на другие возможности.

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

Но проверьте, можно ли реализовать эту функциональность с помощью компонентов AMP.

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

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

Внимание, спойлер, скорее всего, нет.

Оценка воздействия AMP

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

Сделайте это в четыре этапа.

1. Подтверждение проверки кода AMP на всех соответствующих страницах

Выборочная проверка пары страниц с помощью инструмента AMP Test Tool — это начало, но этого недостаточно.

В Google Search Console есть специальный отчет о состоянии AMP, предупреждающий вас о причине, по которой ваши URL-адреса AMP не могут быть проиндексированы (ошибки) или могут не работать в поисковой выдаче (предупреждения).

2. Проверка правильности синтаксического анализа структурированных данных

Для применимых типов контента AMP инструмент проверки расширенных результатов полезен для выборочных проверок по одному — обязательно вводите URL-адрес AMP, а не канонический.

Я считаю, что соответствующие отчеты об улучшениях в Google Search Console также полезны, хотя структурированные данные статей не охватываются.

Надежный инструмент SEO-сканирования часто является лучшим вариантом для масштабирования.

3. Понимание драйверов видимости AMP в Google

В отчетах об эффективности Google Search Console есть несколько параметров для анализа:

  • Тип поиска: Интернет, внешний вид поиска: небогатые результаты AMP: В этом отчете показаны показатели для синих ссылок с молниями.
  • Тип поиска: Интернет, Внешний вид поиска: Статья AMP: Показывает метрики для визуально оформленных результатов поиска, таких как карусели или изображения. Обратите внимание, что они также учитываются в расширенных результатах, они не исключают друг друга.
  • Тип поиска: изображение, внешний вид поиска: AMP on Результат изображения: Показывает метрики для результатов поиска изображений, размещенных на страницах AMP на вкладке Google Images.
  • Тип поиска: Видео, вид поиска: Статья AMP: В отчете показаны показатели для результатов видео, размещенных на страницах AMP на вкладке Google Видео.
  • Тип поиска: Новости, Внешний вид поиска: Статья AMP: Показывает показатели для страниц AMP на вкладке Новости Google в результатах поиска, а не в приложении Новости Google.
  • Обнаружение, внешний вид Discover: статья AMP:  Показывает показатели для страниц AMP в Google Discover.

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

Данные на графике по-прежнему будут сгруппированы по свойствам.

Это может привести к большим расхождениям на вкладках изображений, видео и новостей.

4. Понимание драйверов и производительности сеансов AMP

Search Console показывает только сторону Google, вы можете получить гораздо больше информации из Google Analytics.

Но прежде чем Google Analytics сможет доверять точной отчетности по AMP, вы должны внедрить «сшивание сеансов».

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

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

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

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

Общие источники и их пояснения в отношении сеансов AMP, за исключением ручных тегов UTM:

Хотя UTM-теги ваших собственных сообщений в социальных сетях и кнопки «Поделиться» на сайте могут помочь прояснить часть этой путаницы, всегда будут какие-то посторонние источники за пределами свойств Google, но вряд ли они будут значительными.

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

Обязательно сравнивайте яблоки с яблоками.

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

Подводя итоги

Прием AMP и результаты тематического исследования были неоднозначными.

Ясно, что многие издатели наслаждались эксклюзивным размещением AMP карусели главных новостей.

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

Остается только скорость, которая станет еще более важной, поскольку Core Web Vitals станет фактором ранжирования SEO.

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

Если уложиться в 2,5 секунды невозможно, стоит подумать о поддержке AMP для ключевых целевых страниц, особенно если у вас есть значительная часть мобильных Google/органических сеансов, которые впоследствии могут воспользоваться преимуществами предварительного рендеринга AMP Cache.

И, наконец, для тех, кто решил стать AMPd, помните, что это постоянное обязательство.

This entry was posted in Популярное