Позвоните нам
8 800 555-23-46
звонок по Роcсии бесплатный
+7 (495) 580 30 45 Москва
+7 (8442) 78 18 90 Волгоград
+ 7 (917) 338 51 54
Все контакты и офисы
Напишите нам: info@onvolga.ru

Спросить онлайн

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

В современном мире уже тяжело представляется жизнь без смартфона. Просто потому, что это очень удобно - в твоём кармане находится почти всё, что нужно - звонки, смс, e-mail, часы, календарь, будильник, калькулятор, соц. сети, интернет-банкинг, новости, музыка, фильмы ... Отдельно можно выделить интернет-сёрфинг - практически весь этот список можно сделать через интернет - достаточно вбить в строку браузера то, что тебе нужно - пару кликов и твоя задача решена.

Для ускорения чтения новостей, блогов и прочей информации Яндекс уже почти год успешно использует инструмент турбо-страницы. Что же такое турбо-страницы и зачем они нужны? Если объяснять простым языком, турбо-страница - это страница, на которой нет ничего лишнего - только то, за чем Вы на неё и пришли. Например, Вы читаете новости на каком-то сайте. Помимо самой новости, обычно пользователь увидит - меню, боковые панели, футеры, хэдеры, баннеры, рекламу и много все прочего. Особенно неудобно, если сайт ещё и не адаптивный - приходится увеличивать, вертеть телефон, рассматривать, вглядываться, пока дойдешь до текста новости уже передумаешь читать саму новость.

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

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

С преимуществами разобрались, теперь давайте разберемся, как их подключить. Если Вы используете популярную CMS - за Вас уже всё придумали. Яндекс предлагает установить плагины, которые всё сделают за Вас - для различных систем управления они могут быть платными или бесплатными. Со списком плагинов можно ознакомиться на странице https:/tech.yandex.ru/turbo/. Вам останется только установить плагин на сайт, настроить его, и выполнить настройки в веб-мастере Яндекса.

Если же Вы не готовы платить деньги за готовые плагины, Вы, зная программирование, можете доработать Вашу RSS-ленту сами (но если Вы не готовы платить за плагин и Вы не можете разобраться в коде генерации RSS-ленты - увы, но заплатить все же придется - программистам).

Что же менять?

  1. Необходимо удостовериться, что корневой элемент вашей ленты - rss, а также в атрибут version установлено значение ”2.0”;
  2. В элемент rss необходимо вложить элемент chanell;
  3. В элемент chanell необходимо вложить элементы item с атрибутом content с установленным в нём значением true
  4. Два обязательных элемента в атрибуте item - link, в значении которого необходимо вставить ссылку на страницу, и элемент turbo:content - в нём мы и будем размещать турбо-контент для нашей страницы. Примечание - контент для турбо-страницы необходимо обернуть в тег ;
  5. Далее сам контент - обозначим шапку для нашей турбо-страницы. Обернём её в тег 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>
  6. Картинки добавляем стандартно, при помощи тега img с атрибутом src. (Если хотите добавить картинку с подписью - удобно использовать тег figure, внутри которого размещаем картинку и подпись, обёрнутую в тег figcaption);
  7. Если необходимо добавить в турбо-страницу видео, используем iframe;
  8. Если Вы используете веб-аналитику, то для того, чтобы её подключить, необходимо добавить пустой элемент 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>
  9. Если Вы являетесь партнёром рекламной сети Яндекса - можете добавить рекламу. Для этого в элемент 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>);
  10. Если Вы хотите добавить блок «поделиться»: в контенте Вашей турбо-страницы добавляем пустой элемент 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>. Если атрибут не будет указан - в блоке будут отображаться все социальные сети;
  11. Цитаты в тексте оформляются с помощью тега blockquote
  12. На турбо-странице можно отобразить меню. Для этого в элемент 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-ленту, кликаем «добавить».

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

 Ваш запрос или вопрос по теме:

Интернет-агентство сегодня:

ТОП20 веб-студий России по разработке интернет-магазинов по доступной цене в рейтинге CMSMagazine, 1 место в ЮФО и ТОП10 Центрального ФО.

ТОП100 веб-студий Партнеров Битрикса по созданию интернет-магазинов и 11 место среди разработчиков интернет-магазинов на Битриксе по низким ценам в рейтинге РейтингРунета-2016.

ТОП10 разработчиков интернет-магазинов Москвы по доступной цене в рейтинге РейтингРунета.

ТОП120 SEO-компаний России, специализирующихся на поисковом продвижении интернет-магазинов по версии РейтингРунета.

Золотой Сертифицированный Партнер 1С-Битрикс.

Государственная аккредитация в области информационных технологий (№5291 Министерства связи РФ).

ПОЛУЧИТЕ БЕСПЛАТНУЮ КОНСУЛЬТАЦИЮ или ОТПРАВЬТЕ ЗАПРОС

Задайте вопрос о веб-разработке, обслуживании или продвижении сайта или отправьте запрос по работам. Мы стараемся отвечать на Ваши запросы в течение 24 часов.