Что такое Яндекс турбо страницы? Как их установить на сайт

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

По данным 2017 года более половины пользователи мобильных устройств находятся в зоне 3g и ниже.

Кроме того, теперь можно сравнить результаты и показатели вашей мобильной версии сайта, если конечно она у вас есть, с показателями турбо страниц от yandex с помощью инструмента сегментов в метрике. Так же можно подключить к страницам счетчики Google, Rambler, Mail, LiveInternet b др. У вас предоставляет способ монетизации ваших быстрых страниц с помощью баннерной рекламы, что тоже является приятным бонусом, если вы имеете большой трафик на ресурс.

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

Преимущества турбо страниц

Давайте разберем, что вы получите, подключив новый инструмент от компании Яндекс:

Особое обозначение - при использовании данной технологии на сайте, в поисковой выдаче сайт будет иметь особое обозначение в виде ракеты, что позволит привлечь внимание пользователя и увеличит конверсию посещения вашего ресурса в сети
Увеличивает охват - сейчас 66 миллионов россиян пользуются интернетом на уровне пользователей домашнего пк, а 20 миллионов заходят в сеть только с мобильных устройств, даже не имея мобильной версии сайта, вы можете охватить данную аудиторию и обработать её для продажи ваших услуг или продукта
Скорость загрузки - по данным компании Яндекс, турбо страницы загружаются быстрее, по сравнению с обычной мобильной версией сайта, примерно в 15 раз. Чем быстрее клиент получит информацию об вашей услуге или продукту, тем больше вероятности что он у вас это купит.
Ранжирование - не секрет, что чем быстрее сайт загружается, тем меньше мы имеем отказов от пользователей, первая компания, кто внедрил статус ранжирование от времени посещения является компания Google, но наши тоже не отстают, и с внедрением этой технологии, можно смело утверждать, что теперь Яндекс официально рассматривает скорость загрузку страниц в своем поисковом алгоритме.
Монетизация - компания Яндекс позволяет монетизировать ваши турбо страницы с помощью баннерной рекламы, поэтому если вы владеете информационным ресурсом, с большим количеством трафика, советую использовать данный способ
Уменьшает потери - когда пользователь переходит на вашу страницу с баннеркой, то у вас уменьшаются отказы с устройств мобильной связи и увеличивается число показов рекламы.

Как сделать страницы на Modx revo и evo

В качестве примера по установке турбо страниц мы рассмотрим популярную систему управления сайтами MODX.

Подключение турбо страниц MODX evolution

1) Нужно либо создать пустой шаблон, и потом реализовать код на странице (нужно поставить тип страницы XML), либо создать новый шаблон с низанием, например, turboyandex.

2) Затем нужно применить сниппет Ditto, надеюсь что он у вас уже и применить такой код:

<?xml version="1.0" encoding="utf-8"?>
<rss xmlns:yandex="http://news.yandex.ru" xmlns:media="http://search.yahoo.com/mrss/" xmlns:turbo="http://turbo.yandex.ru" version="2.0">
<channel>
<title>[(site_name)]</title>
<link>[(site_url)]</link>
<description>[*desc*]</description>
[[!modxCode?&source=`[[Ditto?  
&tpl=`tpl_turborss` 
&filter=`id,225,2|id,6,2`
&startID=`0`
&summarize=`300` 
&depth=`5` 
&hideFolders=`0`  
&date=`%a, %d %b %Y %H:%M:%S +0300`
&language=`english`	
 ]]	`]]
</channel>
</rss>

[(site_name)] - выводит название вашего сайта
[(site_url)] - выводит адрес сайта
[*desc*] - это вывод TV параметра, он у меня отвечает за мета тег description
&tpl=`tpl_turborss` - указание названия шаблона для вывода rss отдельной страницы
&filter=`id,225,2| - фильтр, который удаляет ненужные страницыv
&startID=`0` - указывает ресурс для вывода дочерних страниц
&summarize=`300` - количество выводимых документов
&depth=`5` - глубина вложенности
&hideFolders=`0` - отображать документы контейнеры
&date=`%a, %d %b %Y %H:%M:%S +0300` - формат даты
&language=`english`- указание явыка вывода даты

3) Далее необходимо содать сам шаблон для вывода наших страниц, для этого создаем новый чанк с названием tpl_turborss и помещаем в него тагкой код:

[[!modxCode?&source=`<item turbo="true"> <link>[(site_url)][~[+id+]~]</link>
<title>[+longtitle+]</title>
<pubDate>[+createdon:date=`%a, %d %b %Y %H:%M:%S +0300`+]</pubDate>
<turbo:content>
<-![CDATA[
<header>
<figure> <img src="[+image-post+]" /> 
</figure>
<h1>[+pagetitle+]
</header>
<description>
[+content+]]
</description>
</turbo:content>
</item>`]]

[(site_url)][~[+id+]~] - URL страницы
[+longtitle+] - в моем случае это мета тег
[+content+] - контент страницы
[+image-post+] - TV параметр отвечающий за вывод картинки

4)После этого необходимо в панеле Вебмастера яндекса добавить ссылку на ваш RSS

Подключение турбо страниц MODX revolution

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

2) На новой странице или в шаблоне помещаем данный код:

<?xml version="1.0" encoding="utf-8"?>
<rss xmlns:yandex="http://news.yandex.ru" xmlns:media="http://search.yahoo.com/mrss/" xmlns:turbo="http://turbo.yandex.ru" version="2.0">
<channel>
<title>Unect</title>
<link>https://unect.net/</link>
<description></description>
[[!pdoResources?
&tpl=`tpl_turborss`
&limit=`100`
&depth=`3`
&parents=`0` 
&resources=`-22,-28,-16,-13,-12,-11,-12,-10,-14,-17,-19,-21,-42,-1`
&includeTVs=`image`
&processTVs=`1`
&includeContent=`1`
]]
</channel>
</rss>

Здесь мы используем для вылвода сниппет pdoResources, для этого предварительно нужно установить из репозитория дополнение pdoTools.

&tpl=`tpl_turborss` - подключение чанка с шаблоном вывода страницы
&limit=`100` - сколько нужно вывести ресурсов
&depth=`3` - уровень вложенности
&parents=`0` - указывает ресурс для вывода дочерних страниц
&resources=`-22,-28`- исключаем ненужные страницы сайта
&includeTVs=`image`- перечисляем список TV параметров, которые нам нужны, в нашем случае это картинка страницы
&processTVs=`1` - ключаем обработку всех TV параметров
&includeContent=`1` - включаем поле «content» в выборку.

3) Содздаем новый чанк с наименованием tpl_turborss и копируем туда такую конструкцию:

[[!modxCode?&source=`<item turbo="true"> <link>https://url сайта/[[~]]</link>
<title>[[+longtitle]]</title>
<pubDate>[[+publishedon:date=`%a, %d %b %Y %H:%M:%S +0300`]]</pubDate>
<turbo:content>
<-![CDATA[
<header>
<figure> <img src="[[+tv.image]]" /> 
</figure>
<h1>[[+pagetitle]]</h1>
</header>
<description>
[+content]]
</description>
</turbo:content>
</item>`]]

Как мы видим, код аналогичен предыдущему примеру, разница только в специфике тегов, расписыать их не имеет смысла.

Если у вас возникли трудности с установкой, пишите, попробуем помочь в данном вопросе.

Комментарии (2)

Soval Lngro 24 апреля 2019, 11:26(Комментарий был изменён) # ↓ 0

<img src="[[+tv.image]]" /> <!—-картинка Турбостраницы —->

— не подходит, так как при этом идет относительная ссылка на картинку примерного вида

<img src="assets/images/img.jpg" /> <!—-картинка Турбостраницы —->

Для нормального отображения надо сделать вот такую ссылку:

<img src="{$_modx->config.site_url ~ $id | resource : 'image' | phpthumbon : 'w=640' | replace : '/assets' : 'assets'}" />

Далее,

<description>
[+content]]
</description>

Не совсем верно, так как опять же картинки будут по относительным ссылкам, надо сделать сниппет
rssCDATA

<?php
if(empty($cnt)) return '';
$output = preg_replace( '/<a\s.*class="pseudo".*>(.+)<\/a>/U', '$1', $cnt );
$output = preg_replace( '/<a\s.*><\/a>/', '', $output );
return $output;

и вместо этого текста добавить следующую конструкцию:

{'!rssCDATA' | snippet : [ 'cnt' => ( $id | resource : 'content' | replace : '"assets/' : ('"' ~ $_modx->config.site_url ~ 'assets/') ) ]}

ответить

Alliny Studior 17 сентября 2019, 11:34 # ↑ ↓ 0

Я сделалъ это, в итоге чанк рсс выглядит вот так:

<item turbo="true">
    <link>[[~[[+id]]? &scheme=`full`]]</link>
    <title>[[+pagetitle]]</title>
    <turbo:source>[[~[[+id]]? &scheme=`full`]]</turbo:source>
    <turbo:topic>[[+pagetitle]]</turbo:topic>
    <pubDate>[[!ShowDate_en? &val=`[[+publishedon]]`]] +0600</pubDate>
    <author>Автор</author>
    <turbo:content>
    <![CDATA[
        <header>
            <h1>[[+pagetitle]]</h1>
            <figure>
                <img src="[[phpthumbon? &input=`assets/images/[[+tv.preview]]` &options=`w=420&h=380&zc=1`]]">
            </figure>
        </header>
        <description>
            {'!rssCDATA' | snippet : [ 'cnt' => ( $id | resource : 'content' | replace : '"assets/' : ('"' ~ $_modx->config.site_url ~ 'assets/') ) ]}
        </description>
    ]]>
    </turbo:content>
</item>

И у меня две проблемы:

1) вместо картинки турбостраницы выводится:

<img src="/assets/cache_image/noimage_420x380_447.jpg">

2) новости лежат в site.ru/novosti/, сами материалы имеют урл вида site.ru/novosti/novost-1, site.ru/novosti/novost-2 и т.д. Так вот, в материалах указаны относительные ссылки на другие страницы сайта (например, site.ru/katalog/usluga) в которые в турбо превращаются в site.ru/novosti/katalog/usluga
Как избавиться от добавления novosti в относительные урлы?