Турбо-страницы - разбираемся, что к чему

В современном мире уже тяжело представляется жизнь без смартфона. Просто потому, что это очень удобно - в твоём кармане находится почти всё, что нужно - звонки, смс, 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”>&lt/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-ленту, кликаем «добавить».

Пока лента будет проверяться на ошибки (а если Вы сделали все правильно, то их быть не должно), успеем добавить настройки. Переходим на страницу Турбо-страницы -> Настроить. Описывать действия на той страницы думаю, не нужно - «Яндекс» позаботился о том, чтобы Вы поняли, что, куда и как нужно вводить.