Турбо-страницы - разбираемся, что к чему
В современном мире уже тяжело представляется жизнь без смартфона. Просто потому, что это очень удобно - в твоём кармане находится почти всё, что нужно - звонки, смс, e-mail, часы, календарь, будильник, калькулятор, соц. сети, интернет-банкинг, новости, музыка, фильмы ... Отдельно можно выделить интернет-сёрфинг - практически весь этот список можно сделать через интернет - достаточно вбить в строку браузера то, что тебе нужно - пару кликов и твоя задача решена.
Для ускорения чтения новостей, блогов и прочей информации Яндекс уже почти год успешно использует инструмент турбо-страницы. Что же такое турбо-страницы и зачем они нужны? Если объяснять простым языком, турбо-страница - это страница, на которой нет ничего лишнего - только то, за чем Вы на неё и пришли. Например, Вы читаете новости на каком-то сайте. Помимо самой новости, обычно пользователь увидит - меню, боковые панели, футеры, хэдеры, баннеры, рекламу и много все прочего. Особенно неудобно, если сайт ещё и не адаптивный - приходится увеличивать, вертеть телефон, рассматривать, вглядываться, пока дойдешь до текста новости уже передумаешь читать саму новость.
Но если сайт использует технологию турбо-страниц, то всё, что Вы увидите на ней - это текст новости с заголовком и датой публикации. И картинки с подписями. И иногда видео, если они там есть. Ну, и куда же без рекламы. Загрузка подобной страницы, по заверениям Яндекса, требует в 10 раз меньше трафика. И так оно и есть! Если страница сайта использует эту технологию, яндекс отмечает её специальным значком .
Помимо быстрой загрузки, экономии трафика пользователей и удобства восприятия информации, Яндекс будет в том же ритме собирать для Вас статистику при помощи большинства частоиспользуемых систем веб-аналитики. Ну и бонусом, Вы сами можете разместить место под рекламу и начать получать с этого дополнительный доход.
С преимуществами разобрались, теперь давайте разберемся, как их подключить. Если Вы используете популярную CMS - за Вас уже всё придумали. Яндекс предлагает установить плагины, которые всё сделают за Вас - для различных систем управления они могут быть платными или бесплатными. Со списком плагинов можно ознакомиться на странице https:/tech.yandex.ru/turbo/. Вам останется только установить плагин на сайт, настроить его, и выполнить настройки в веб-мастере Яндекса.
Если же Вы не готовы платить деньги за готовые плагины, Вы, зная программирование, можете доработать Вашу RSS-ленту сами (но если Вы не готовы платить за плагин и Вы не можете разобраться в коде генерации RSS-ленты - увы, но заплатить все же придется - программистам).
Что же менять?
- Необходимо удостовериться, что корневой элемент вашей ленты -
rss
, а также в атрибутversion
установлено значение”2.0”
; - В элемент
rss
необходимо вложить элементchanell
; - В элемент
chanell
необходимо вложить элементыitem
с атрибутомcontent
с установленным в нём значениемtrue
- Два обязательных элемента в атрибуте
item
-link
, в значении которого необходимо вставить ссылку на страницу, и элементturbo:content
- в нём мы и будем размещать турбо-контент для нашей страницы. Примечание - контент для турбо-страницы необходимо обернуть в тег;
- Далее сам контент - обозначим шапку для нашей турбо-страницы. Обернём её в тег
header
, в который добавим заголовок в тегеh1
. Контент формируем при помощи тегов, обозначенных на данной странице;
<rss version=”2.0”>
<chanell>
…
<item turbo=”true”>
<title>Заголовок</title>
<link>Ссылка</link>
<turbo:content>
<![CDATA[
<header>
<h1>Заголовок<h1>
…
</header>
]]>
</turbo:content>
</item>
</chanell>
</rss> - Картинки добавляем стандартно, при помощи тега
img
с атрибутомsrc
. (Если хотите добавить картинку с подписью - удобно использовать тегfigure
, внутри которого размещаем картинку и подпись, обёрнутую в тегfigcaption
); - Если необходимо добавить в турбо-страницу видео, используем
iframe
; - Если Вы используете веб-аналитику, то для того, чтобы её подключить, необходимо добавить пустой элемент
turbo:analytics
, в который добавляем атрибуты следующим образом:- Яндекс.Метрика - атрибуты
type=”Yandex”
иid=”<Номер_счётчика>”
. Необязательный атрибут params принимает значение параметров визитов; - LiveInternet - атрибут
type=”LiveInternet”
. Если счетчик используется для нескольких хостов, добавьте необязательный атрибут params с названием счётчика; - Google Analytics - атрибуты
type=”Google”
,id=”<Идентификатор_отслеживания>”
; - Рейтинг Mail.RU - атрибуты
type=”MailRu”
,id=”<Идентификатор_счетчика>”
; - Rambler Топ-100 - атрибуты
type=”Rambler”
,id=”<Идентификатор_счетчика>”
; - Mediascope (TNS) - атрибуты
type=”Mediascope”
,id=”<Номер_счетчика>”
.
<turbo:analytics type=”Yandex” id=”1234567”></turbo:analytics>
- Яндекс.Метрика - атрибуты
- Если Вы являетесь партнёром рекламной сети Яндекса - можете добавить рекламу. Для этого в элемент
chanell
, рядом с элементамиitem
добавляем пустой элементturbo:adNetwork
с атрибутамиtype=”Yandex”
,id=”[например]first_id”
,turbo-ad-id=”[например]first_place”
. (Можно добавить несколько, но не рекомендуется добавлять слишком много). После этого, в тегеturbo:content
добавляем тегfigure
с атрибутомdata-turbo-ad-id
и установленным в него значением, которое уже было написано в тегеturbo:adNetwork
(в данном случае мы бы написали так:<figure data-turbo-ad-id=”[например]first_place”></figure>
); - Если Вы хотите добавить блок «поделиться»: в контенте Вашей турбо-страницы добавляем пустой элемент
div
, в который добавим атрибуты -data-block=”share”
(обязательный), а такжеdata-network
, значением которого могут быть одни из следующих социальных сетей - facebook, google, odnoklassniki, telegram, twitter, vkontakte - если нужна одна социальная сеть, то так и пишем -<div data-block=”share” data-network=”twitter”></div>
, если нужно несколько - перечисляем через запятую<div data-block=”share” data-network=”twitter,google,facebook”></div>
. Если атрибут не будет указан - в блоке будут отображаться все социальные сети; - Цитаты в тексте оформляются с помощью тега
blockquote
- На турбо-странице можно отобразить меню. Для этого в элемент
header
, в котором сейчас у нас находится заголовок, добавляем элементmenu
, в который размещаем ссылки с помощью тега a и атрибутаhref
. Примечание. Можно добавить не более 10 ссылок.
<header>
…
<menu>
<a href=”http://www.onvolga.ru/”>Главная</a>
<a href=”http://www.onvolga.ru/office/kontakt.html”>Контакты</a>
<a href=”http://www.onvolga.ru/uslugi-sozd.html”>Создание сайтов</a>
<a href=”http://www.onvolga.ru/uslugi-prodv.html”>Продвижение сайтов</a>
<a href=”http://www.onvolga.ru/uslugi-poddergka.html”>Обслуживание сайтов</a>
</menu>
</header>
Вот и всё! Теперь отправляем RSS-ленту на проверку: заходим в Яндекс.Вебмастер, выбираем наш проект, в меню ищем Турбо-страницы -> Источники. В форму вставляем ссылку на нашу RSS-ленту, кликаем «добавить».
Пока лента будет проверяться на ошибки (а если Вы сделали все правильно, то их быть не должно), успеем добавить настройки. Переходим на страницу Турбо-страницы -> Настроить. Описывать действия на той страницы думаю, не нужно - «Яндекс» позаботился о том, чтобы Вы поняли, что, куда и как нужно вводить.