AMP и Турбо-страницы разработаны независимыми разработчиками при поддержке и активном продвижении поисковыми гигантами Яндекс и Google. Эти технологии предназначены для ускорения загрузки мобильных версий страниц сайтов.
Они не много по разному устроены, но преследуют одну цель. Ведь известно, что среднестатистический пользователь не ждет загрузку сайта больше 3 секунд. А средняя скорость загрузки мобильных версий сайтов сейчас достигает 22 секунды. AMP и Турбо помогает не терять таких посетителей.
Еще не маловажный факт. Быстрая загрузка страницы положительно влияет на пользовательский опыт и конверсию. Посетителю нравится моментальная загрузка и он охотнее кликает по рекламе.
Меня часто спрашивают как работают AMP и Турбо страницы. Как в них вставить рекламу или счетчики. Что бы постоянно не повторяться, решено написать небольшой мануал по настройке.
Что такое AMP от Google
AMP так и переводиться – Ускоренные Мобильные страницы. Html код таких страниц чище и компактнее. И они очищены от лишних скриптов. Помимо оптимизированного кода загружаются они не хостинга сайта, а с кеша самого Google. Что дает не только значительное ускорение, но и снижает нагрузку c сайта.
Создание AMP версий страниц
Для популярных CMS систем есть простые и удобные плагины. Для WordPress есть официальный плагин AMP:
После установки на сайте автоматически создаются AMP-версии страниц. В настройках можно выбрать несколько вариантов: отдельные страницы, дублирование и полный переход на AMP.
Для просмотра AMP-страниц, нужно добавить в конец ссылки ?amp
А в результатах поиска Google такие страницы будут помечаться молнией и, по заявлению поисковика, они ранжируют их выше обычных сайтов.
Установка рекламы Adsense в AMP
Для размещения рекламных блоков Adsense в AMP нужно активировать соотвествующий переключатель в личном кабинете Google Adsense.
И вставить дополнительный код для AMP:
<script async custom-element="amp-auto-ads"
src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
</script>
<amp-auto-ads type="adsense"
data-ad-client="ca-pub-***************">
</amp-auto-ads>Если нужна установка автоматических блоков в AMP, на сайте должны быть включены автоматические блоки для обычной версии сайта.
Установка счетчиков Яндекс Метрики, Analytics и др. в AMP
Обычные коды счетчиков в AMP не работают. Все лишние скрипты просто вырезаются со страницы. И для таких случаев разработали универсальные коды. У них есть много различных параметров, но я приведу максимально простые варианты для Яндекс Метрики, Analytics, Mail.ru и LiveInternet.
У них один принцип, так что любой другой счетчик можно так же установить. Звездочки нужно заменить на id вашего счетчика.
Если у вас нет специального редактора для AMP страниц, то нужно этот код добавить рядом с обычным кодом счетчиков. Друг друга они не заменяют.
Яндекс Метрика
<amp-analytics type="metrika">
<script type="application/json">
{
"vars": {
"counterId": "********"
}
}
</script>
</amp-analytics>Google Analytics
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "UA-********-*",
"config" : {
"UA-********-*": { "groups": "default" }
}
}
}
</script>
</amp-analytics>[email protected]
<amp-analytics type="topmailru" id="topmailru">
<script type="application/json">
{
"vars": {
"id": "*******"
}
}
</script>
</amp-analytics>LiveInternet
<amp-analytics id="analytics_liveinternet">
<script type="application/json">{
"requests": {
"pageview": "https://counter.yadro.ru/hit?u${ampdocUrl};r${documentReferrer};s${screenWidth}*${screenHeight}*32;h${title};${random}"
},
"triggers": {
"track pageview": {
"on": "visible",
"request": "pageview"
}
}
}</script>
</amp-analytics> Что такое Турбо-страницы от Яндекса
«Турбо-страницы» — технология быстрой загрузки мобильных веб-страниц. Работает в мобильном поиске компании «Яндекс». Включает в себя создание и размещение в поисковой выдаче специальных облегченных версий мобильных веб-страниц.
Википедия
Турбо-страницы в поиске помечаются значком ракеты. Что символизирует быстроту загрузки таких сайтов.
Включение Турбо-страницы
Включение Турбо-страниц осуществляется в Яндекс Вебмастер. В качестве источника может послужить rss лента, созданная специальными плагинами (ссылки там же) или через загрузку по API.
Можно настроить как будет выглядеть страницы и включить например бесконечную прокрутку.
Установка RTB блоков Рекламной Сети Яндекса в Турбо-страницы
Там же в Вебмастере в разделе Турбо-страницы можно настроить рекламные блоки.
Создаете RTB блок в Рекламной сети Яндекса и вставляете в желаемое поле. Например блок в контенте. Доступна авторасстановка или ручное расположение, а справа будет превью вашего сайта и установленной рекламой.
Установка счетчиков Метрики и Analytics в Турбо-страницы
Для метрик так же не нужно устанавливать дополнительный код на сайт, все в вебмастере. В разделе веб-аналитика можно добавить номер счетчика Метрики, Analytics и другие популярные.
Турбо-страницы на десктопе
Недавно включили бета-версию статейных Турбо-страниц для персональных компьютеров. Настройки аналогичны с мобильными страницами.