AMP Stories от Google — как работают и как подключить


Содержание материала:

AMP-страницы

AMP-страницы – это технология Google для отображения контента сайтов на мобильных устройствах, позволяющая максимально ускорить загрузку (меньше одной секунды) и сократить объем данных в 10 раз. Название составлено из первых букв английской фразы accelerated mobile pages, то есть «ускоренные мобильные страницы». В выдаче поисковика отмечаются особым значком.

История

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

AMP – платформа с открытым кодом, которую может бесплатно использовать любой желающий. Технология активно поддерживается WordPress.com, Twitter, Pinterest, Tumblr, LinkedIn и другими интернет-гигантами. Социальные сети ссылаются на ускоренные мобильные страницы AMP в своих приложениях. Другие поисковые системы (Bing, Baidu, Yahoo Japan и т. д.) поддерживают контент такого формата и добавляют ссылки в мобильную выдачу.

Технология

AMP-страницы создаются с помощью специальных тегов (некоторые стандартные запрещены) и собственной библиотеки асинхронных скриптов.

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

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

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

Чтобы документ попал в Top stories Google, необходимо наличие структурированных данных:

  • сведений о статье;
  • информации об авторе и издателе;
  • даты публикации и изменения;
  • логотипа компании.

При клике по ссылке в выдаче открывается контент, но видно, что нет перехода на сам сайт: в адресной строке отображается Google.

Формат «карусели» сохраняется. Можно переходить на другие документы, не возвращаясь на поиск, а пользуясь горизонтальной прокруткой.

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

Статистика

Даже если пользователь посетил только AMP-версию страницу, но не перешел на сам сайт, можно отслеживать статистику.

Для сбора статистики есть два варианта:

  • тег amp-pixel, отслеживающий просмотры с помощью GET-запросов;
  • Amp-analytics – расширенный компонент, позволяющий подключить Google Analytics.

Данные для монетизации трафика за счет рекламных блоков сохраняются.

Преимущества и недостатки AMP

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

Но в то же время:

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

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

Кому подключать AMP

AMP-страницы используются в первую очередь новостными и информационными сайтами. Но в зарубежном сегменте отмечают, что внедрение технологии для E-commerce не только возможно, но и необходимо, приводит к реальному повышению конверсии. Например, для сайта AliExpress была увеличена конверсия на 4 %. Коммерческий гигант eBay также отмечает преимущества применения Accelerated Mobile Pages. В российском сегменте пока не наблюдается кейсов об успешном применении в E-commerce.

Как реализовать AMP

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

  • , а на ускоренной
  • .

    Генерацию документов по шаблону можно сделать автоматической, доработав используемую CMS.

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

    • WordPress – плагин и надстройка;
    • Joomla – плагин wbAMP или JAmp;
    • Drupal – модуль (для него нужны плагины Token и Chaos Tools), тема, библиотека;
    • OpenCart – модуль;
    • Magento – плагин;
    • PrestaShop – модуль.

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

    Что такое AMP-страницы от Google и как их настроить на WordPress

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

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

    Как работает технология AMP

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

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

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

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

    Он очень легкий, размер файлов может не превышать 60 – 70 Кбайт. Даже на мобильных устройствах с медленным интернетом облегченная страница будет загружаться не дольше нескольких секунд. Это повышает вероятность того, что пользователи не покинут страницу раньше времени, и вы не получите лишний процент отказов.

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

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

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

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

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

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

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

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

    То есть для правильной генерации облегченной страницы придется менять этот тег на всей странице.

    Благо в WordPress для этого есть большое количество плагинов. Они автоматически генерируют валидные AMP-страницы. Вам остается только добавить ID счетчиков, настроить компоненты и функционал. После всего этого облегченные страницы будут готовы к добавлению в поисковую систему.

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

    Плагины для создания AMP-страниц на WordPress

    Теперь мы поговорим о плагинах, с помощью которых можно будет создать AMP-страницы на WordPress. Их достаточно много. Вы можете убедиться в этом, если зайдете в каталог (Плагины – Добавить новый) и введете ключевое слово “AMP” в поле поиска. В выдаче будет очень много популярных и не очень расширений, каждое из которых поможет вам создать облегченные версии страниц для Гугла.

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

    Плагин AMP

    Самый популярный плагин для WordPress, который позволяет автоматически генерировать облегченные варианты веб-содержимого. Расширение имеет более 300 000 активных установок, оно постоянно поддерживается разработчиками и обновляется.

    Хоть этот модуль и позиционируется как официальный, отзывов у него не так уж и много. В каталоге WordPress рейтинг AMP имеет всего 3,5 звезды – не очень хороший показатель, учитывая, что аналогичные “неофициальные” варианты имеют 5 из 5.

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

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

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

    Установить плагин можно прямо из каталога WordPress. Перейдите в меню “Плагины” – “Добавить новый”, введите название и кликните по кнопке “Установить”. Далее, расширение нужно будет активировать и после этого можно переходить к настройкам, которые описаны ниже.

    К сожалению, параметры не переведены на русский язык. После установки и активации вы увидите два раздела с настройками: “Общие” и “Аналитика”.

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

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

    Template Mode – режим оформления, который определяет внешний вид генерируемого содержимого. На выбор доступно три варианта:

    1. Native – будут использованы цвета и стили вашего стандартного шаблона для WordPress. Адреса записей будут совпадать с оригинальными.
    2. Paired – также будет использоваться внешний вид активной темы WordPress, но вместе с тем при генерации облегченного содержимого будут использоваться отдельные URL. То есть адреса стандартного вида поста и его облегченной версии не будут совпадать, как в первом случае.
    3. Classic – отображение AMP в стандартном классическом дизайне, который никак не связан с используемым вами вариантом. То есть цвета, шрифты и т. д. будут стандартными. Вариант по умолчанию при установке.

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

    Вкладка Supported Templates поможет вам выбрать типы записей, которые будут поддерживаться плагином. Всего тут три варианта:

    1. Записи – статьи, которые находятся в одноименной вкладке.
    2. Страницы – таксономии, которые обычно используются для размещения информации о сайте, компании или чего-то еще.
    3. Медиафайлы – картинки, видео и т. д.

    Как вы можете видеть, по умолчанию отмечен вариант “Записи”. Можно так и оставить, потому как обычные статичные страницы чаще всего не нуждаются в “облегчении”.

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

    Чтобы посмотреть облегченную версию записи, вы должны добавить в конец URL приписку /amp/. То есть выглядеть это будет так:

    • site.ru/запись-с-текстом – стандартный адрес.
    • site.ru/запись-с-текстом/amp/ – облегченный вариант.

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

    Плагин AMP для WP – Ускоренные мобильные страницы

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

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

    Установить этот плагин можно прямо из админки – процедура та же: перейти в соответствующий раздел, ввести название и кликнуть по кнопкам “Установить” и “Активировать”.

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

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

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

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

    Другие плагины

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

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

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

    Чтобы проверить, правильно ли вы настроили облегченные страницы, вам необходимо перейти в официальный сервис от Гугла. Там все достаточно просто: вводите адрес AMP-страницы и получаете результат.

    Не забывайте, что нужно вводить именно адрес AMP-варианта. То есть на конце ссылки должно быть /amp/.

    Если все хорошо, сервис выдаст вам соответствующее уведомление. При каких-то проблемах сервис сразу вам их покажет.

    Как добавить AMP в поисковую выдачу

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

    Заключение

    Как видите, чтобы включить AMP на WordPress, достаточно установить плагин и добавить сайт и XML Sitemap в Google Search Console. Это не так сложно, учитывая, что большинство вебмастеров сразу после создания сайта добавляют его в панели вебмастеров.

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

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

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

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

    Руководство по Google Tag Manager

    В статье:

    Для чего нужен Google Tag Manager

    Веб-мастера настраивают аналитику, ретаргетинг, авторассылку, a/b тесты и другие дополнительные функции на сайте с помощью скриптов. Фрагменты кода, которые отвечают за определенную функциональность на сайте или в приложении, называются тегами. Когда тегов много, работать с ними в коде становится сложно. Теги не должны мешать друг другу, их нужно настраивать по отдельности. Для удобной работы с тегами Google разработали Менеджер.


    Google Tag Manager (GTM) — это бесплатный инструмент для управления тегами на сайте или в мобильном приложении. Веб-мастер может один раз установить код Диспетчера на сайт и далее без вмешательства в код добавлять и настраивать теги других служб для настройки ремаркетинга, анализа трафика, поведения пользователей и конверсии: Google Analytics, Яндекс.Метрики, AdWords и других.

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

    Что можно делать с помощью Менеджера тегов:

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

    Скорее всего, вам не нужен менеджер тегов, если вы используете одну-две сторонних службы, хорошо ориентируетесь в коде и вам и так удобно работать. Для упрощения работы с большим количеством тегов лучше поставить Google Tag Manager — работать с ним бесплатно и просто.

    Установка и настройка Google Tag Manager

    Зарегистрируйте аккаунт на сайте GTM. Обычно для управления всеми тегами на сайте достаточно одного аккаунта.

    При регистрации задайте ему имя, введите адрес сайта и выберите контейнер для управления разными типами ресурсов — это может быть обычная или облегченная AMP-страница сайта, iOS или Android. Контейнером называется управляющий JavaScript-код.

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

    Код вставки Диспетчера на сайт

    Не страшно, если вы закроете окно, не скопировав код. Он сохранится в разделе «Администрирование» — «Установить диспетчер тегов Google».

    Код для установки Диспетчера тегов

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

    Вызов списка контейнеров

    Проверить, верно ли вставили код на сайт, поможет плагин Google Tag Assistant Recordings для Google Chrome. Бесплатно установите расширение Google Tag Assistant, нажмите на его значок на своем сайте, и он покажет, какие теги установлены.

    Результаты анализа расширением

    Все операции в Google Tag Manager проводят через Рабочую область. Слева на ней есть пять вкладок:

    • Обзор — общая информация о контейнере.
    • Теги — настройка информации для отправки.
    • Триггеры — условия для срабатывания тега, должно быть хотя бы одно.
    • Переменные — параметры для отслеживания.
    • Папки — группировка тегов, триггеров и переменных.
    Топ-пост этого месяца:  Зеркальные изображения

    Как устроены Теги

    Доступно до 50 тегов с разными целями. Вы создаете тег, указываете для него триггеры и переменные, и помещаете его в контейнер. С помощью Google Tag Manager можно работать со своими тегами или выбрать подходящие из предложенных сервисов Google.

    Для создания нового тега выберите раздел Теги в левом меню или нажмите «Новый тег» из Обзора. Дальше вам нужно настроить его, сохранить изменения и поместить в контейнер для публикации. Если все заполнено корректно, он появится в панели Google Tag Manager на сайте. Ниже разберем подробнее создание нескольких популярных тегов.

    Как работают Триггеры

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

    В Google Tag Manager доступно несколько типов триггеров:

    • Просмотр страницы
      Есть три варианта активации: когда объектная модель документа будет готова, когда загрузятся все элементы или во время просмотра страницы сразу после перехода.
    • Клик
      Может активироваться по двум типам сигналов: пользователь нажал на любой кликабельный элемент или конкретно на ссылку.
    • Взаимодействие пользователей
      Активация по сигналам поведения пользователя на сайте: реагирует на просмотры видео, глубину прокрутки, доступность конкретного элемента или на отправленную форму обратной связи.
    • Другие типы
      Реагирует на изменение истории, ошибки JavaScript, пользовательское событие или по таймеру.

    Окно выбора типа триггера

    Не забудьте сохранить триггер после его настройки.

    Зачем нужны Переменные

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

    Включите ее в разделе Переменные, чтобы она стала доступна в при создании триггера.

    В Google Tag Manager есть встроенные переменные разных типов: страницы, утилиты, ошибки, клики, формы, история, видео, прокрутка и видимость. Можно настроить свои. К примеру, для отслеживания переходов по одной ссылке для триггера выберите переменную Click URL и укажите конкретный адрес страницы. Можно выбрать несколько переменных: Click Text содержит текст, а Click URL — URL, триггер активизируется, если пользователь кликнет по указанному URL или тексту.

    Окно конфигураций переменных

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

    Как подключить Google Analytics через Google Tag Manager

    Понадобится индикатор отслеживания Google Analytics. Если вы уже пользовались Google Analytics и размещали его код на сайте, то после подключения сервиса через Менеджер тегов его можно убрать.

    Где найти код отслеживания в Google Analytics

    Выберите создание нового тега, кликните на конфигурацию — выйдет список предложенных тегов. Выберите из них Google Analytics. Появится окно настроек. Выберите нужный тип отслеживания, настройте переменную и переходите к Триггерам. Сейчас в области триггеров стандартное правило «All Pages», оно означает, что тег будет срабатывать на всех страницах сайта.

    Настройка тега Google Analytics

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

    Как подключить Яндекс.Метрику через Google Tag Manager

    Понадобится код счетчика Метрики, его можно найти в настройках Яндекс.Метрики на вашем сайте. Также, как и с кодом Google Analytics, если вы уже пользовались Яндекс.Метрикой и устанавливали код на сайт, после установки кода через Google Tag Manager его можно удалить.

    Яндекс.Метрики нет в списке предложенных сервисов, поэтому создайте новый тег и выберите в списке Пользовательский HTML.

    Где найти тип тега

    Настройка тега: задайте название, вставьте в поле HTML код счетчика метрики и выберите триггер «All Pages» для всех страниц.

    Настройка тега Яндекс.Метрики

    После настройки сохраните тег и проверьте с помощью предварительного просмотра.

    Таким же способом можно подключить другие службы, к примеру, добавить в аналитику ускоренные страницы AMP. Для этого настройте отслеживание с Google Tag Manager в разделе аналитики: введите ID контейнера, который указан в его настройках, тип аналитики и ID Google Analytics.

    Как внедрить разметку с помощью Google Tag Manager

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

    Настройка тега для разметки

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

    Сохраните тег, проверьте его и опубликуйте в контейнере.

    Как настроить отслеживание отказов по таймеру в Google Tag Manager

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

    Допустим, вы выбрали показатель отказа, который вас устроит — визит меньше 15 секунд. В начале создайте триггер с типом Таймер.

    Создайте новый триггер, выберите тип Таймер и настройте: укажите нужное время в миллисекундах, максимальное количество активаций события, «Page URL», «соответствующее регулярному выражению» и «.*», чтобы таймер работал на всех страницах сайта.

    Настройка триггера с таймером

    Сохраните триггер. Дальше для него нужно создать тег.

    Допустим, решили отслеживать показатели отказов через Google Analytics. Для этого создайте тег Google Analytics и свяжите его с новым триггером. Выберите тип «Событие», настройте время, выберите переменную и добавьте триггер Таймер. В графе «Не взаимодействие» устанавливаем «False», тогда события повлияют на показатель отказов. Если нужно наоборот, укажите «True».

    Настройка тега с таймером

    После сохранения тега можно проверить его установку предварительным просмотром. Информация по настроенным событиям появится в Google Analytics в разделе «Поведение» — «События».

    Как настроить отслеживание переходов по внешним ссылкам в Google Tag Manager

    Настройте свою переменную с именем хоста: выберите создание пользовательской переменной, тип компонента — «Имя хоста», маркер «убрать www», «Click URL» в графе источника.

    Настройка переменной для внешних ссылок

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

    Настройка триггера для внешних ссылок

    Можно отследить переходы не по всем внешним ссылкам, а по какой-то определенной. Процесс такой же, но в настройках триггера выберите «Click URL», «содержит» и укажите нужную ссылку.

    Настройка триггера для конкретных ссылок

    Дальше заполните тег, выберите созданный триггер.

    Настройка тега для отслеживания внешних ссылок

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

    Как настроить отслеживание внутренних переходов в Google Tag Manager

    Для отслеживания внутренних переходов на сайте удобно использовать Google Tag Manager. Сначала настройте переменную: установите нужные маркеры на графах Клики и Формы.

    Установка конфигураций переменных

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

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

    Настройка триггера на клик по целевой странице

    Также можно отследить клики по элементу с определенным текстом. Это полезно, к примеру, если нужно протестировать кнопки с разными призывами и определить самый кликабельный элемент. Отслеживание настраивают точно также, но в переменных выбирают «Click Text», в триггере указывают не «Click URL», a «Click Text» и содержание текста.

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

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

    Таким способом можно настроить отслеживание любого элемента, указав в переменных его идентификатор — ID, class или URL.

    Как настроить отслеживание кликов по элементам без идентификатора

    Если у элемента нет идентификатора, отслеживать клики по нему можно с помощью селекторов CSS — описаний элемента, к которым применяется правило стиля. Селекторы также выручают, если несколько элементов используют одинаковый Click Classes, а нужно отследить какой-то конкретный элемент.

    Как узнать селектор CSS

    Перейдите на страницу с нужным элементом, кликните «Посмотреть код», найдите там элемент и скопируйте селектор.

    Создайте триггер, выберите тип кликов «Все элементы» и в настройках укажите «соответствует селектору CSS».

    Настройка триггера, соответствующего селектору

    Дальше создайте тег и укажите для него этот триггер.

    Как отследить заполнение формы и клики на социальные кнопки в Google Tag Manager

    Для отслеживания событий с формами и социальными кнопками понадобится Form ».

    В переменных поставьте маркер у стандартного значения Form Classes для формы или Click Classes для социальных кнопок.

    Дальше нужно создать триггер типа «Отправка формы», выбрать «Form Classes», «содержит» и указать атрибут class нужной формы. Если у вас есть ID формы, выберите графу Form ID.

    Заполнение триггера для формы

    Для социальных кнопок аналогично, но нужно выбрать триггер «Клик — все элементы» и настройку «Click Classes».

    Дальше создайте тег с этим триггером для отслеживания с помощью Universal Analytics или Яндекс.Метрики, сохраните его, проверьте с помощью предварительного просмотра и опубликуйте в контейнере.

    Как установить код ретаргетинга или ремаркетинга с помощью Google Tag Manager

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

    Создайте новый тег типа «Пользовательский HTML», вставьте в поле код и задайте триггер «All Pages», чтобы он сработал на всех страницах.

    Настройка тега для ретаргетинга

    Если код нужен не на всех страницах, создайте свой триггер «Просмотр страницы» и укажите нужные URL.

    Google Tag Manager нужен для удобного управления множеством тегов с одной платформы. Если вам нужно подробное отслеживание кликов на страницы, конкретные элементы или формы, анализ данных ремаркетинга, внедрение авторазметки и другие действия, то Диспетчер тегов поможет не запутаться в скриптах, быстро их настраивать и контролировать изменения.

    Google запустил AMP Stories

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

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

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

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

    Напомним, Google анонсировал AMP Stories в декабре 2020 года.

    Google запускает AMP Stories

    Google предоставила мобильным сайтам новый способ поделиться контентом с запуском AMP Stories. Описанный поисковой системой как «визуально богатая форма повествования», инструмент будет ответом многим платформам распространения контента – Snapchat, Instagram и Facebook.

    AMP Stories, который только что был запущен в демо-режиме для разработчиков, будет полноэкранным отображением контента для мобильных пользователей. Формат будет отображаться в результатах поиска Google. С новым инструментом уже ознакомились The Washington Post, CNN, Mic, Conde Nast, Wired, People и Mashable.

    Очевидно, что новые “сториз” от Google, как и весь алгоритм AMP (Accelerated Mobile Page), направлены на возвращение аудитории на мобильные сайты, а не использование приложений. Пока же разработчики обещают поведать о новых деталях в течение нескольких недель.


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

    Я вырастил грибыыы … А нее, стопэ! 🙂 Я подключил AMP страницы, и это оказалось не так уж и сложно! Пришлось повозиться, но уже есть что рассказать, и чем поделиться.

    А началось все с того, что в Google-аналитике мне перестал давать покоя пункт «Ускоренные мобильные страницы (AMP)». Вроде бы вот он раздел, мне не мешает, но почему там пусто? Почитал мельком информацию, посмотрел видео, подумал, что вещь вроде бы неплохая, но работы много, и отложил подключение. Но пустой раздел в аналитике покоя не давал, не давал, не давал (привет, Баден-Баден!).

    Итак, что такое AMP и зачем оно нужно?

    AMP (Accelerated Mobile Pages) – переводится с английского как ускоренные страницы для мобильных устройств. Иными словами, HTML-код таких страниц отличается от общепринятого, и оптимизирован для отображения на мобильных устройствах.

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

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

    Человек прямо в поиске увидит картинку/логотип вашей статьи, заголовок, часть текста, а если заинтересуется, то и все содержимое вашей страницы будет ему отображено в считанные секунды, и всё это без захода на ваш сайт! В принципе, ситуация Win-Win, как говорится – мне не надо отдавать лишние деньги за ресурсы хостинга, пользователю не нужно ждать, пока страница сформируется, загрузится и отрисуется. Да, предвосхищаю ваш самый главный вопрос – на такие страницы можно вставлять как рекламу, так и счетчики посещаемости.

    Как сделать AMP страницу и какие тонкости и риски просто необходимо учесть.

    Как уже говорилось, AMP страницы должны соответствовать определенному стандарту, и на них накладываются определенные ограничения. Стандарт описан на английском языке на официальном сайте проекта — https://www.ampproject.org, но я проведу вас через примеры с сайта и опишу всё, что узнал, на русском.

    Итак, «обыкновенная» AMP страница, выглядит, по мнению авторов, вот так:

    Специально вставляю картинку, что бы апеллировать к номерам строк (слева). Сам HTML вы можете взять с официального сайта по этой ссылке.

    Итак, вы видите структуру документа. В 6й строке вы должны вставить свой заголовок, а строку 23 заменить содержимым своей статьи (вместе с картинками и прочим), и подбить служебные поля. Если вы все сделаете правильно, создание AMP страницы будет окончено, и вам останется только скормить её в Google.

    Но вот с этим «сделать всё правильно» как раз начинается самая тонкая работа 🙂

    Не забудьте научить ПС не считать AMP страницу и оригинал дублями.

    У меня теперь есть два вида записей блога – обычная страница, и, теперь, AMP, с одинаковым содержимым. Для себя я наметил, что отличаться они будут вставкой дополнительного текста «blog_amp» в URL (адрес) страницы.

    Так, например, обычная статья имеет адрес «https://bablofil.ru/kak-torgovat-na-birje/», а её аналог – «https://bablofil.ru/blog_amp/kak-torgovat-na-birje/». Если хотите, откройте обе в браузере – и обе откройте с мобильного телефона, сравните. И сразу да – AMP может выглядеть намного красивее, не так как у меня, но я еще до этого доберусь 😉

    Так вот, есть у меня теперь две разные страницы с одинаковым содержанием. Они немного отличаются по внешнему виду, но статья то одна и та же! С точки зрения Яндекса – это дубль страницы, и раньше это расстреливали пессемизировали страницу в поиске.

    Для решения такой проблемы предусморены специальные заголовки в разделе «head» как основной страницы, так и её AMP-собрата (строка 7 на рисунке выше).

    На «ускоренной» странице вы ссылаетесь на главную, указывая параметр rel=”canonical” и href=”адрес основной страницы”

    rel= «canonical» href= «http://main_page.html» />

    А на главной указываете ссылку на «ускоренную», указывая параметр rel=”amphtml” и href=”адрес страницы AMP”.

    rel= «amphtml» href= «https://www.example.com/url/to/amp/document.html» >

    Продолжая свой пример, у меня на странице https://bablofil.ru/kak-torgovat-na-birje/ указан путь к её amp-версии

    , а на amp-версии указан путь к оригиналу

    Тут у меня указаны относительные пути, без полного указания https://bablofil.ru/. , и по заверениям гугла, тут это допускается. Но в некоторых других частях документа придется использовать полный путь, так что вам, может быть, будет удобнее использовать полный URL везде.

    Этих заголовков, говорят Яндекс с Гуглом, должно хватить, что бы всё было хорошо.. Но мы то живем в реальном мире! Поэтому многие мастера вносят в robots.txt строки, запрещающие индексацию amp страниц для Яндекса. В моём случае, можно было бы внести в robots.txt строку вида Disallow: /*blog_amp*, но я этого не делаю, потому что мне интересно, как Яндекс себя поведет. Такой вот мини-эксперимент.

    Приведите содержимое статей в соответствие с ограничениями

    Звучит как что-то абстрактное, но, на самом деле, все очень предметно. Некоторые WYSIWYG редакторы (те штуки, в которых вы набираете текст в админке, где можно выделять жирным, ставить заголовки и всё такое) любят вставлять всякое лишнее в тело статей. Например, мой редактор вставляет в загружаемые картинки атрибут style=”height:400px; width: 600px”, а так же иногда вставляет атрибут style в теги span и div.

    Но это не поддерживается AMP, и гугл при проверке такой страницы будет ругаться и не хотеть её добавлять. Так же не поддерживается тег img – его надо заменять на тег amp-img.

    Что сделал я в такой ситуации – несколько шагов, они больше программные. У меня сайт сделан на языке программирования Python, но те же самые техники вполнеможно приспособить и для PHP, особенно для таких движков как WordPress и Drupal.

    Изображения и прочее.

    Изображения должны быть указаны в тегах amp-img, и обязательно иметь следующие атрибуты:

    layoutresponsive» (для адаптивного масштабирования)
    w > height=”400” – любое целое число в пикселях.

    Да-да, изображение будет масштабироваться, а пропорции будут браться из отношения width к height. Все эти поля обязательны, и, если вы их не укажете, изображения показываться не будут, и тем более Google не будет работать с этой страницей.

    У себя я решил вопрос относительно просто: перед тем, как построить и скинуть в кэш amp страницу, отрабатывает автозамена – все вхождения на , и все вхождения style=”любой текст” просто вырезаются из всех тэгов – все равно они не работают на amp.

    Код простой, выглядит вот так:

    article — в моем случае, всё содержимое статьи. При использовании PHP надо будет заменить article.replace на str_replace и, возможно, переставить аргументы местами, а re.sub заменить на preg_replace.

    Так же очень важным для меня стал вопрос, где брать исходные данные по изображениям – длину и высоту. Тут мне повезло, хотя, думаю, и у вас похожая история. В общем, когда я вставляю картинку в текст, код выглядит таким образом:

    Внутри кавычек в аттрибутах alt, class, src и style текст каждый раз меняется, но их позиция всегда остается неизменной. Таким образом, мне нужно из поля style взять цифры (в этом примере, 53 и 553), и подставить их же в эту же строку, но как отдельные атрибуты. Строка после этого будет выглядеть вот так:

    Потом, как я уже писал выше, для amp страниц style=”…” полностью срежется, а теги заменятся, и итоговый код для изображения на ускоренной странице будет выглядеть так:

    А само решение делается в одну строку кода:

    Опять же, в PHP re.sub надо будет заменить на preg_replace и, возможно, поменять аргументы местами.

    Это регулярное выражение находит в html-коде статьи текст, похожий на

    После того, как я внес эти изменения – подгонка изображений под стандарт и вырезание style=’…’ из тэгов, больше с текстом статей я не работал – текст стал валиден, осталось дооформить страницу.

    Свои стили

    Текст-то может и стал валиден, но пропали стили – подключать внешний CSS в AMP страницу нельзя, и в теги прописывать через style тоже нельзя. Выход – внедрять CSS в head страницы, но в строго отведенном месте — в теге style amp-custom. Вот как выглядит это у меня в шаблоне страницы.

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

    Проставьте правильное описание страницы

    Помните тот рисунок в начале статьи, где от разработчиков показывался пример правильной AMP страницы? Так вот, с точки зрения Google он НЕ правильный, пока вы не пропишете все нужные поля в описание script type=»application/ld+json» .

    Вот как выглядит это у меня.

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

    Пара замечаний по заполнению: Для изображений тут не подходят относительные пути – всё надо вбивать полностью, и важны размеры. Вот эти поля: width:600 и height: 60, а так же height:2000 и width: 800 я взял полностью из примера. Я пытался подогнать их под себя – но потерпел поражение. Google ругался то на высоту, то на ширину, а через поиск нашел только то, что размеры могут быть любыми. В общем, оставил их пока как есть, если появится новая информация, сообщу. И да, если у вас есть такая информация, поделитесь, пожалуйста, в комментариях.

    А, и еще на предмет поля mainEntityOfPage – по описанию, это поле должно указывать на товар, который вы описываете, или на персону, или на организацию и так далее. Про статьи ничего не сказано, но, раз уж это поле обязательно для Google, я в нём указал путь к такой же, но не ускоренной странице (канонической). Прав я или нет – время покажет. Но гуглу понравилось, вроде 😉

    Добавьте меню

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

    Топ-пост этого месяца:  Как использовать url_decode

    Делай раз – указал скрипт в разделе head – он для всех одинаковый

    Делай два – добавил кнопку, при нажатии на которую будет показываться сайдбар

    Делай три – добавил сам сайт-бар

    Тут надо отметить, что аттрибуты role и tabindex обязательны для Google, так что вписал их – на официальном сайте про это упоминания я не нашел.

    В общем-то всё, сайд бар открывается при нажатии на кнопку-гамбургер, и закрывается при нажатии на строку «Закрыть меню». Выглядит не так круто, как хотелось бы, но это дорабатывается стилями.

    Добавьте рекламу

    Тут принцип тот же – добавляем в head нужный скрипт:

    И добавляем сам рекламный блок в тэге

    Тут такой же принцип, как и с изображениями – реклама будет адаптивно подстраиваться, но в нужных пропорциях. Пример выше использует рекламу AdSense, данные для полей data-ad-client и data-ad-slot вы можете получить в консоли Google AdSense при создании баннера.

    Добавьте аналитику

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

    Добавляем скрипт в head:

    Добавляем код для счетчиков:

    Вот их можно вставлять сколько угодно — по крайней мере, у меня указаны оба этих блока. Желтым цветом выделены идентификаторы, которые вы должны заменить на свои – код для Google вы можете получить в Google Analytics, код для Яндекса – в Яндекс.Метрике.

    Добавьте что-нибудь еще

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

    А так есть хороший сайт, где собраны примеры всяких фишек и их реализации https://ampbyexample.com/ – с примерами кодов, с визуализацией и прочим – просто скрольте страницу вниз, смотрите примеры, и самые вкусные утаскивайте себе в копилки.

    Вместо заключения

    После того, как я сделал AMP страницы, на все статьи моего блога автоматически проставляется ссылка на AMP аналоги. Но я решил, что лишним не будет так же добавить эти страницы в sitemap.xml – и добавил.

    Кроме того, когда я тестировал и подгонял AMP код, я пользовался проверкой от Google (ссылка выше), и там, при проверке, есть кнопка «Добавить страницу» — и я нажимал добавить для трех страниц.

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

    Так что теперь я просто жду, когда Google их сам найдет, а так же мне интересно, что будет делать с ними Яндекс после обнаружения. Если будет информация – сообщу.

    Лучший сервис для массовых рассылок

    Удобный инструмент для быстрых первых и повторных продаж

    Почему email-маркетинг

    • Email-маркетинг в 4 раза прибыльнее других маркетинговых каналов
    • По ссылке в письме перейдёт в 5 раз больше людей, чем в посте на Facebook
    • Читатели рассылки проведут на вашем сайте на 80% больше времени, чем те, кто её не получали

    Увеличивайте продажи с помощью рассылок:

    Соберите базу контактов

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

    Отправьте первое письмо

    Настройте первую рассылку, реанимируйте неактивных пользователей, а после – удерживайте их имиджевыми письмами. Дизайн письма можно создать с нуля в вашем фирменном стиле или использовать один из 100 наших бесплатных шаблонов

    Улучшайте результаты

    Отправляйте персонализированные письма разным сегментам аудитории, выбирайте лучшие варианты с помощью А/Б-тестирования писем и оценивайте результаты отправки из подробных аналитических отчетов

    Забудьте про скучную работу

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

    Каждый клиент UniSender получает

    Готовую стратегию
    email-маркетинга
    для вашего бизнеса

    Круглосуточную
    консультацию от
    наших специалистов

    Доступ ко всему
    функционалу сервиса

    700 000 компаний уже выбрали нас

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

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

    Мы активно используем сервис «Юнисендер» для проведения массовых рассылок писем с 2020 года. При работе с сервисом не возникало проблем: интерфейс удобный, понятный даже начинающему пользователю. Нам удалось автоматизировать ряд процессов и улучшить качество писем в части дизайна и статистических показателей (открываемость, прочтение). В сервисе доступная аналитика и гибкая система тарифов. Стоит отметить блог Юнисендера и службу поддержки клиентов. Я всегда оперативно находила ответы на любые вопросы с помощью данных ресурсов, а также узнала много полезной информации по трендам email-маркетинга.

    Email маркетингом занимаюсь занимаюсь 7 лет и за это время был опыт работы в 5 сервисах рассылок. После положительного опыта работы с Unisender, внедрила этот сервис в 3 компаниях.

    Основными причинами моего выбора в пользу Unisender было удобство сервиса, грамотный UX сайта и редактора писем, прозрачная статистика, связь с тех поддержкой 24/7.

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

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

    Мы сотрудничаем с сервисом Unisender более трех лет. За это время мы неоднократно убедились в профессионализме команды, ответственном подходе к решению любых задач. Отдельно хотим отметить готовность идти навстречу! Нерешаемых вопросов просто нет. Всем желаем таких партнеров!

    Для одного из клиентов нашего агентства мы заработали 15000$ за 1,5 месяца объединив социальные сети и email-рассылки. А по другому получили рекордный ROMI 9700% и сделали продажи на сумму 12000000 рублей. На уровне пользователя нравится простота в использовании и хорошая тех.поддержка. На уровне партнёра мы очень ценим дружеские взаимоотношения, открытость к новым идеям и возможность участия во всевозможных мероприятиях

    Пользуемся UniSender 6 лет. На мой взгляд, по соотношению цена-возможности-качество, это лучший сервис для рассылок. Из преимуществ: развитой API, высокая скорость работы, надёжность и широкие возможности автоматизации.

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

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

    Время чтения: 24 минуты Нет времени читать? Нет времени?

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    PageSpeed Insights от Google

    62 балла для мобильных, 77 баллов для десктопов.

    88 баллов для мобильных, 94 балла для десктопов.

    Инструмент проверки скорости загрузки от Pingdom

    Время загрузки 5,94 секунды, размер страницы 3,5 Мбайт.

    Время загрузки 2,46 секунды, размер страницы 381,4 Кбайт.

    Инструмент проверки скорости загрузки от GTmetrix

    Скорость загрузки 18,6 секунды, размер страницы 3,49 Мбайт.

    Время загрузки 3,4 секунды, размер страницы 314 Кбайт.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Топ-пост этого месяца:  Carbon - простой и функциональный инструмент PHP для работы с датой и временем

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

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

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

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

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

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

    AMP для Drupal

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

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

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

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

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

    AMP для Joomla!

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

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

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

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

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

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

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

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

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

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

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

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

    AMP для OpenCart

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

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

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

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

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

    AMP для Magento

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

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


    AMP для PrestaShop

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

    Возможности модуля можно оценить на тестовом сайте.

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

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

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

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

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

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

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

    AMP-страницы

    AMP-страницы – это технология Google для отображения контента сайтов на мобильных устройствах, позволяющая максимально ускорить загрузку (меньше одной секунды) и сократить объем данных в 10 раз. Название составлено из первых букв английской фразы accelerated mobile pages, то есть «ускоренные мобильные страницы». В выдаче поисковика отмечаются особым значком.

    История

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

    AMP – платформа с открытым кодом, которую может бесплатно использовать любой желающий. Технология активно поддерживается WordPress.com, Twitter, Pinterest, Tumblr, LinkedIn и другими интернет-гигантами. Социальные сети ссылаются на ускоренные мобильные страницы AMP в своих приложениях. Другие поисковые системы (Bing, Baidu, Yahoo Japan и т. д.) поддерживают контент такого формата и добавляют ссылки в мобильную выдачу.

    Технология

    AMP-страницы создаются с помощью специальных тегов (некоторые стандартные запрещены) и собственной библиотеки асинхронных скриптов.

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

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

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

    Чтобы документ попал в Top stories Google, необходимо наличие структурированных данных:

    • сведений о статье;
    • информации об авторе и издателе;
    • даты публикации и изменения;
    • логотипа компании.

    При клике по ссылке в выдаче открывается контент, но видно, что нет перехода на сам сайт: в адресной строке отображается Google.

    Формат «карусели» сохраняется. Можно переходить на другие документы, не возвращаясь на поиск, а пользуясь горизонтальной прокруткой.

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

    Статистика

    Даже если пользователь посетил только AMP-версию страницу, но не перешел на сам сайт, можно отслеживать статистику.

    Для сбора статистики есть два варианта:

    • тег amp-pixel, отслеживающий просмотры с помощью GET-запросов;
    • Amp-analytics – расширенный компонент, позволяющий подключить Google Analytics.

    Данные для монетизации трафика за счет рекламных блоков сохраняются.

    Преимущества и недостатки AMP

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

    Но в то же время:

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

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

    Кому подключать AMP

    AMP-страницы используются в первую очередь новостными и информационными сайтами. Но в зарубежном сегменте отмечают, что внедрение технологии для E-commerce не только возможно, но и необходимо, приводит к реальному повышению конверсии. Например, для сайта AliExpress была увеличена конверсия на 4 %. Коммерческий гигант eBay также отмечает преимущества применения Accelerated Mobile Pages. В российском сегменте пока не наблюдается кейсов об успешном применении в E-commerce.

    Как реализовать AMP

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

  • , а на ускоренной
  • .

    Генерацию документов по шаблону можно сделать автоматической, доработав используемую CMS.

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

    • WordPress – плагин и надстройка;
    • Joomla – плагин wbAMP или JAmp;
    • Drupal – модуль (для него нужны плагины Token и Chaos Tools), тема, библиотека;
    • OpenCart – модуль;
    • Magento – плагин;
    • PrestaShop – модуль.

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

    AMP сайты — о чем нужно знать в 2020-ом

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

    Оглавление

    Что такое AMP-страницы

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

    В октябре того же года Google анонсировал проект ускоренных мобильных страниц AMP (Accelerated Mobile Pages). AMP — мгновенно загружаемые на мобильных устройствах страницы, позволяющие не тратить время на ожидание долгой загрузки сайта, что особенно актуально при медленном интернете.

    Мгновенная загрузка страниц стала возможной благодаря новой технологии, включающей 3 компонента:

    1. Формат разметки AMP HTML . Это привычная HTML разметка, но с некоторыми ограничениями, позволяющими улучшить представление сайта.
    2. Библиотека скриптов AMP JS . Новая библиотека помогает ускорить отрисовку amp-страниц.
    3. Кэш AMP . Гугл поддерживает загрузку AMP-страниц из собственного кэша, что ускоряет отображение страницы на экране пользователя.

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

    Чем сайт AMP отличается от остальных

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

    1. Скорость загрузки первых.
    2. Более мощный функционал вторых.
    3. Приоритет AMP-вебсайтов в мобильной выдаче Гугла перед обычными страницами.
    4. Способность AMP страниц быстро решать задачу пользователей.

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

    Скришот сервиса PageSpeed Insight

    А время загрузки первой части контента составляет 1,6 сек на недорогом смартфоне в сети 4G с медленным подключением к интернету. Сам по себе результат просто фантастический.

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

    Примеры AMP сайтов

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

    Зачем Google создал AMP

    Согласно исследованию Kissmetrics , 47% пользователей не готовы ждать загрузки сайта более 2 секунд, 40% посетителей покидают сайт, если загрузка длится более 3 секунд.

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

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

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

    Люди предпочитают контролировать свою жизнь сами, а не отдавать ее на произвол компьютерам. В своей книге “Проектирование юзабилити” Якоб Нильсен (тот самый, чью методику юзабилити мы раскрывали в статье 2015-ого года — Чек-лист юзабилити ) рассказывает о 3 важнейших ограничениях во времени, которые происходят в интервале между действием пользователя и ответом на него машины.

    • 0,1 сек . Если компьютер отвечает на запрос пользователя незамедлительно, то возникает иллюзия прямой манипуляции. Это заставляет пользователя думать, что результат получен самим пользователем, а не сгенерирован машиной. Феномен прямой манипуляции — отличный ключ к росту вовлечения пользователя.
    • 1 сек . Если время ответа занимает одну секунду, пользователь заметит этот промежуток и будет чувствовать, как машина генерирует результат вместо человека. Однако пользователь по-прежнему сконцентрирован на собственном ходу мыслей, и спустя секунду пользователь по-прежнему сохраняет чувство контроля. Страница должна загружаться не более одной секунды, чтобы у пользователя не пропадало чувство свободного перемещения в онлайне.
    • 10 сек . Спустя десять секунд пользователь заметил задержку и больше не ощущает свободы в своих действиях. Пользователь уже “заблудился” и покинет сайт с куда большей вероятностью. Если приложение загружается более 10 секунд, важно обозначить время ожидание визуально: индикатором загрузки или линейкой прогресса. Так пользователи смогут понять, сколько им остается ждать.

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

    Зависимость конверсии (ось y) от времени загрузки страницы (ось x)

    Примечательно, что каждая последующая задержка загрузки на одну секунду является причиной падения конверсии на 7%.

    Похожие исследования проводил Amazon: каждая задержка в 100 миллисекунд снижает конверсию на 1%.

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

    Очевидно, что сайт с хорошей скоростью загрузки влияет на положительное впечатление от пользования поиском самого Гугла и служит фактором лояльности к Гуглу. Учитывая экспансию американского поисковика в Азии и в бывшем СССР, не кажется удивительным устремления Гугла увеличить аудиторию и повысить вовлеченность западной аудитории.

    Как выглядит AMP в поисковой выдаче

    AMP-страницы имеют приоритетный значок (“молния”) в поисковой выдаче для мобильных устройств:

    Вид сниппета сайта с версией AMP и обычного сайта

    В 2020-ом году, портал 9to5Google проводил опрос, результаты которого показали, что больше половины пользователей предпочтут кликнуть по ссылке с иконкой молнии, нежели на обычный сайт.

    Итоги опроса по кликабельности сниппета

    Какие результаты дает внедрение AMP

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

    Компания Stone Temple Consulting провела исследование , изучив выборку из 10 сайтов различного формата, в которых были внедрены AMP-страницы.

    На примере медийного сайта компании Thrillist (в формат AMP переведены 90% страниц) зафиксирован рост трафика из поисковиков на 70% — половина этого роста приходится на AMP.

    Другой пример, на этот раз анонимная компания, крупный медиа-проект, у которого в AMP переведены 95% страниц, заметили рост трафика из органики на 67% по одному сайту и 30% по другому. В обоих случаях рассматривался период 4 недели. В отношении медийного сайта AMP явно сказались в лучшую сторону.

    Что касается коммерческих сайтов, то на примере интернет-магазина Myntra (аналог Ламоды в Индии) получен результат в виде падения отказов на 40% и увеличения общих показателей эффективности (автор исследования не указывает конкретные данные). Надо сказать, что от внедрения до получения первых результатов прошло всего 11 дней.

    Другой успешный кейс, проведенный той же компанией, — сервис по типу российского Билетера — Event Ticket Center . Они перевели 99,9% всех страниц в формат AMP и получили сногсшибательные результаты. 100% увеличение конверсии в электронной торговле! Показатели вовлеченности скромнее, но тоже демонстрируют рост:

    1. падение отказов на 10%;
    2. увеличение просмотров страниц на 6%;
    3. увеличение продолжительности посещения на 13%.

    Больше информации по этому кейсу в исследовании на английском языке. Мы же можем сделать вывод, повторив уже сказанное командой Event Ticket Center “Big win” (“Большая победа”).

    Будущее AMP — какое оно?

    По заявлению представителя Гугла Ричарда Жангра, AMP — “это не про новости или статьи, мы видим внедрение формата по всему спектру веб-приложений, от интернет-магазинов до посадочных страниц для рекламы”.

    По крайней мере, AMP станут “будущим для SEO”, как выразился Дэниел Бордман, руководитель отдела SEO в компании Hoppa. Дальше можно ожидать, что Google будет активнее продвигать свой формат мобильных страниц. И если есть, чему поучиться из всей истории Гугла, то это тому, что нужно следовать за предложениями поискового гиганта, нежели оставаться за линией кильватера без позиций и трафика.

    Критика AMP

    Из проблем AMP-страниц, выделяемых вебмастерами, чаще всего приводят:

    1. пропадающие ссылки (и доход от рекламы);
    2. меньше возможностей для аналитики и больше работы;
    3. меньше контроля над своим контентом и дизайном.

    Как справедливо отмечает Дэн Бюбен , Google продвигает формат AMP под лозунгом “Сайты на AMP будут ранжироваться выше”, и в это же время заключает сделку с WordPress, что создает основу для появления миллионов вебмастеров, на чьих сайтах автоматически появляется AMP-версия.

    Вывод

    Подытожим сказанное выше:

    1. Мобильный трафик сегодня как никогда важен , и не требует доказательств идея о том, чтобы быть ближе к мобильным пользователям.
    2. AMP — это способ привлечь и удержать мобильных пользователей , в том числе с медленным интернетом. Скорость загрузки сайта в приоритете.
    3. AMP действительно дает преимущества в продвижении сайтов . Как минимум, пока есть возможность подвинуть из топа сайты с AMP-версией.
    4. AMP — не идеальная штука , хотя бы потому что, что сайт станет зависимым от гугловских серверов, а вам потребуется периодически дорабатывать сайт к меняющимся требованиям AMP.
    5. AMP становится все популярнее , охватывая не только медийные порталы, но и интернет-магазины и нишевые сайты.
    6. AMP — новый способ сделать жизнь пользователей проще и понятнее.

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

    Постскриптум

    Сториз

    В начале 2020-ого года Google представил дополнительный формат для AMP-страниц, именно: популярный в соцсетях показ кратких историй Stories. В дальнейшем можно ожидать больше форматов типа “rich content” от Гугла. Больше информации в минутном промо-ролике:

    Турбо-страницы

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

    Полтора года назад мы уже писали, что Яндекс начал терять преимущество как поисковик. А турбо-страницы — это возможность удержать пользователей внутри сети Яндекса с собственной рекламой. На сегодня ограничения турбо-страниц позволяют поставить блок только рекламной сети Яндекса и AdFox, система гугловской рекламы Adsense ожидаемо оказалась за бортом.

    Разработка AMP страниц в Вебсимке

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

    Подписывайся на обновления

    Узнай первым самое важное из области интернета

  • Добавить комментарий