Технические требования

Описание элементов, передающих содержимое Турбо-страницы

Контент для Турбо-страницы передается с помощью элемента turbo:content.

Шапка страницы (верхняя часть страницы)

Используйте элемент header, который может включать в себя:

Элемент	Описание
figure	Содержит элемент img с адресом изображения, которое используется в качестве обложки. Изображение может быть в любом формате. <header> <figure> <img src="http://example.com/img.jpg" /> </figure> ... </header>
h1 *	Заголовок первого уровня. <h1>Текст заголовка</h1>
h2	Заголовок второго уровня. <h2>Текст заголовка</h2>
menu	Элементы меню.

Элемент	Описание
figure	Содержит элемент img с адресом изображения, которое используется в качестве обложки. Изображение может быть в любом формате. <header> <figure> <img src="http://example.com/img.jpg" /> </figure> ... </header>
h1 *	Заголовок первого уровня. <h1>Текст заголовка</h1>
h2	Заголовок второго уровня. <h2>Текст заголовка</h2>
menu	Элементы меню.

Оформление текста

Элемент	Описание
h1	Заголовок первого уровня. <h1>Заголовок страницы</h1> Поддерживаются шесть уровней заголовков.
p	Параграф. <p>Параграф текста</p>
br	Перенос строки без отступа. <br>Текст</br>
ul	Маркированный список. <ul> <li>первый пункт списка</li> </ul>
ol	Нумерованный список. <ol> <li>первый пункт списка</li> </ol>
b	Выделение текста жирным. <b>Текст</b>
strong	Выделение текста. Обычно браузеры отображают его жирным. <strong>Текст</strong>
i	Выделение текста курсивом. <i>Текст</i>
em	Выделение текста. Обычно браузеры отображают его курсивом. <em>Текст</em>
sup	Верхний индекс. 2<sup>3</sup>
sub	Нижний индекс. H<sub>2</sub>O
ins	Выделение текста, который был добавлен в новую версию статьи. Большинство браузеров отображают его подчеркнутым. Основной текст, <ins>новый текст</ins>
del	Выделение текста, который был удален в новой версии статьи. Большинство браузеров отображают его зачеркнутым. Основной текст, <del>удаленный текст</del>
small	Уменьшение размера шрифта на одну условную единицу. <small>Текст</small>
big	Увеличение размера шрифта на одну условную единицу. <big>Текст</big>
pre	Выделение предварительно форматированного текста. <pre>Текст</pre>
abbr	Выделение аббревиатуры в тексте. <abbr title="Пояснение">HTML</abbr>
u	Подчеркивание текста. <u>Текст</u>

Элемент	Описание
h1	Заголовок первого уровня. <h1>Заголовок страницы</h1> Поддерживаются шесть уровней заголовков.
p	Параграф. <p>Параграф текста</p>
br	Перенос строки без отступа. <br>Текст</br>
ul	Маркированный список. <ul> <li>первый пункт списка</li> </ul>
ol	Нумерованный список. <ol> <li>первый пункт списка</li> </ol>
b	Выделение текста жирным. <b>Текст</b>
strong	Выделение текста. Обычно браузеры отображают его жирным. <strong>Текст</strong>
i	Выделение текста курсивом. <i>Текст</i>
em	Выделение текста. Обычно браузеры отображают его курсивом. <em>Текст</em>
sup	Верхний индекс. 2<sup>3</sup>
sub	Нижний индекс. H<sub>2</sub>O
ins	Выделение текста, который был добавлен в новую версию статьи. Большинство браузеров отображают его подчеркнутым. Основной текст, <ins>новый текст</ins>
del	Выделение текста, который был удален в новой версии статьи. Большинство браузеров отображают его зачеркнутым. Основной текст, <del>удаленный текст</del>
small	Уменьшение размера шрифта на одну условную единицу. <small>Текст</small>
big	Увеличение размера шрифта на одну условную единицу. <big>Текст</big>
pre	Выделение предварительно форматированного текста. <pre>Текст</pre>
abbr	Выделение аббревиатуры в тексте. <abbr title="Пояснение">HTML</abbr>
u	Подчеркивание текста. <u>Текст</u>

Ссылка в тексте

Используйте элемент a, атрибут href которого содержит URL.

<a href="https://www.example.com/page2.html">Текст ссылки</a>

Картинка в тексте

Поддерживаются форматы JPEG и PNG. Вы можете разместить картинку внутри абзаца (элемент p) или между абзацами. Для этого используйте элемент img, в атрибуте src укажите URL изображения.

...
    <img src="http://example.com/img.jpg" />
...

Чтобы разместить картинку с подписью, используйте элемент figure , который может содержать:

Элемент	Описание
figcaption	Видимая подпись картинки. ... <figure> <img src="http://example.com/img.jpg" /> <figcaption>Подпись</figcaption> </figure> ...

Элемент	Описание
figcaption	Видимая подпись картинки. ... <figure> <img src="http://example.com/img.jpg" /> <figcaption>Подпись</figcaption> </figure> ...

Галерея картинок в тексте

Поддерживаются форматы JPEG и PNG. Чтобы отобразить в статье галерею картинок, используйте элемент div, атрибут data-block которого принимает значение gallery. Элемент div может содержать:

Элемент	Описание
header	Заголовок, который отображается до галереи.
img *	Содержит атрибут src, в качестве значения которого нужно указать адрес картинки. ... <div data-block="gallery"> <header>Картинки</header> <img src="http://example.com/img1.jpg" /> <img src="http://example.com/img2.jpg" /> <img src="http://example.com/imgN.jpg" /> </div> ...

Элемент	Описание
header	Заголовок, который отображается до галереи.
img *	Содержит атрибут src, в качестве значения которого нужно указать адрес картинки. ... <div data-block="gallery"> <header>Картинки</header> <img src="http://example.com/img1.jpg" /> <img src="http://example.com/img2.jpg" /> <img src="http://example.com/imgN.jpg" /> </div> ...

Видео в тексте

Вы можете добавить на Турбо-страницу видео, размещенные на вашем сайте или на сторонних ресурсах.

• Видео с вашего сайта
• Видео с внешних ресурсов

Поддерживается формат MP4. Используйте элемент figure , который может содержать:

Элемент	Описание
video	Включает в себя элемент source с атрибутами: src — ссылка на видео. Видео должно быть доступно по протоколу HTTPS. type — тип медиаматериала и его формат. ... <figure> <video> <source src="https://example.com/video.mp4" type="video/mp4" /> </video> ... </figure>
img	Превью видео (изображение) в любом формате. ... <figure> <video> <source src="https://example.com/video.mp4" type="video/mp4" /> </video> <img src="http://example.com/img.jpg" /> ... </figure>
figcaption	Подпись к видео. ... <figure> <video> <source src="https://example.com/video.mp4" type="video/mp4" /> </video> <img src="http://example.com/img.jpg" /> <figcaption>Подпись к видео</figcaption> </figure>

Элемент	Описание
video	Включает в себя элемент source с атрибутами: src — ссылка на видео. Видео должно быть доступно по протоколу HTTPS. type — тип медиаматериала и его формат. ... <figure> <video> <source src="https://example.com/video.mp4" type="video/mp4" /> </video> ... </figure>
img	Превью видео (изображение) в любом формате. ... <figure> <video> <source src="https://example.com/video.mp4" type="video/mp4" /> </video> <img src="http://example.com/img.jpg" /> ... </figure>
figcaption	Подпись к видео. ... <figure> <video> <source src="https://example.com/video.mp4" type="video/mp4" /> </video> <img src="http://example.com/img.jpg" /> <figcaption>Подпись к видео</figcaption> </figure>

Чтобы разместить видео со сторонних ресурсов, используйте код для встраивания этих ресурсов. Как правило, для встраивания используется элемент iframe.

Чтобы встроить код в содержимое Турбо-страницы, добавьте элемент iframe с содержимым в тег <![CDATA[]]> в элемент turbo:content.

Пример с кодом вставки YouTube:

...
<turbo:content>
    <![CDATA[
        ...
        <iframe
         width="560"
         height="315"
         src="https://www.youtube.com/embed/<уникальный набор символов>" 
         frameborder="0" 
         allowfullscreen>
        </iframe>
        ...
    ]]>
</turbo:content>

Поддерживаются следующие атрибуты:

Элемент	Описание
src *	Cсылка на видео. Видео должно быть доступно по протоколу HTTPS. Список поддерживаемых ресурсов youtube.com/embed/ youtube-nocookie.com/embed/ vk.com/video_ext.php rutube.ru/play/embed/ rutube.ru/pl/ izlesene.com/embedplayer/ myvi.ru/player/embed/ ok.ru/videoembed/ my.mail.ru/video/embed/ clipiki.ru/embed/ dzenkino.com/embed facebook.com/plugins/post.php player.vimeo.com/video/ dailymotion.com/embed/video/
width	Заданные ширина и высота объекта учитываются для определения пропорций кадра, размер объекта масштабируется с учетом размера экрана мобильного устройства.
height
frameborder	Рамка объекта.
allowfullscreen	Признак полноэкранного режима.
referrerpolicy	Позволяет указать реферрер.
sandbox	Позволяет установить ряд ограничений на встраиваемый контент.

Элемент	Описание
src *	Cсылка на видео. Видео должно быть доступно по протоколу HTTPS. Список поддерживаемых ресурсов youtube.com/embed/ youtube-nocookie.com/embed/ vk.com/video_ext.php rutube.ru/play/embed/ rutube.ru/pl/ izlesene.com/embedplayer/ myvi.ru/player/embed/ ok.ru/videoembed/ my.mail.ru/video/embed/ clipiki.ru/embed/ dzenkino.com/embed facebook.com/plugins/post.php player.vimeo.com/video/ dailymotion.com/embed/video/
width	Заданные ширина и высота объекта учитываются для определения пропорций кадра, размер объекта масштабируется с учетом размера экрана мобильного устройства.
height
frameborder	Рамка объекта.
allowfullscreen	Признак полноэкранного режима.
referrerpolicy	Позволяет указать реферрер.
sandbox	Позволяет установить ряд ограничений на встраиваемый контент.

Кнопка «Поделиться»

Чтобы разместить на Турбо-странице кнопку «Поделиться», используйте элемент div, который может содержать:

Элемент	Описание
data-block *	Принимает значение share.
data-network	Вы можете указать одно или несколько значений через запятую: facebook; google; odnoklassniki; telegram; twitter; vkontakte. Если атрибут data-network не указан, будут подключены все перечисленные выше сервисы. <div data-block="share" data-network="twitter, facebook"></div>

Элемент	Описание
data-block *	Принимает значение share.
data-network	Вы можете указать одно или несколько значений через запятую: facebook; google; odnoklassniki; telegram; twitter; vkontakte. Если атрибут data-network не указан, будут подключены все перечисленные выше сервисы. <div data-block="share" data-network="twitter, facebook"></div>

Цитаты в тексте

Для оформления цитаты в тексте используйте элемент blockquote. Он может содержать поддерживаемые HTML-элементы. Чтобы разместить в цитате картинку, используйте элемент figure .

...
    <blockquote>
        <p>Текст</p>
        <figure>
            <img src="http://example.com/img.jpg"/>
            <figcaption>Подпись</figcaption>
        </figure>
        ...
    </blockquote>
...

Таблицы в тексте

Таблица может содержать:

• текст, оформленный с помощью HTML-элементов;
• ссылку;
• отдельные картинки;
• видео;
• цитаты;
• кнопку «Поделиться».

...
    <table>
      <tr>
        <th>Первый столбец</th>
        <th>Второй столбец</th>
      </tr>
      <tr>
        <td>Первый столбец</td>
        <td>Второй столбец</td>
      </tr>
    </table>
...

Элементы меню

Чтобы разместить на Турбо-странице меню, добавьте элемент menu в  header .

Элемент menu может содержать элемент a, в атрибуте href которого нужно указать в качестве значения ссылку на страницу сайта. В меню можно разместить до 10 ссылок.

На Турбо-странице появится значок . Когда пользователь нажмет на него, элементы навигации отобразятся на Турбо-странице в виде блока ссылок с заголовком Меню.

...
    <menu>
      <a href="http://example.com/page1.html">Текст ссылки</a>
      <a href="http://example.com/page2.html">Текст ссылки</a>
      ...
    </menu>
...

Встраиваемый контент Instagram и Twitter

Чтобы разместить на Турбо-странице контент сторонних ресурсов:

1. Скопируйте код для встраивания ресурса.
2. Добавьте скопированный код в тег <![CDATA[]]> в элементе turbo:content.

Пример:

...
<turbo:content>
    <![CDATA[
        <!--Код для встраивания-->
    ]]>
</turbo:content>
...

Комментарии

Используйте древовидную структуру элемента div. Количество уровней вложенности не ограничено.

Элемент	Описание
data-block *	Принимает значения: comments — блок со списком комментариев; comment — комментарий в списке; content — содержимое комментария.
data-author *	Принимает значение author — имя автора комментария.
data-avatar-url	Ссылка на аватар автора комментария. Картинка должна быть в формате JPG или PNG, не меньше 64 × 64 пикселей.
data-subtitle	Дополнительная строка информации, например дата комментария. Располагается под именем автора.
data-url	Используется только в элементе div верхнего уровня. Ссылка на страницу добавления комментариев.

Элемент	Описание
data-block *	Принимает значения: comments — блок со списком комментариев; comment — комментарий в списке; content — содержимое комментария.
data-author *	Принимает значение author — имя автора комментария.
data-avatar-url	Ссылка на аватар автора комментария. Картинка должна быть в формате JPG или PNG, не меньше 64 × 64 пикселей.
data-subtitle	Дополнительная строка информации, например дата комментария. Располагается под именем автора.
data-url	Используется только в элементе div верхнего уровня. Ссылка на страницу добавления комментариев.

Содержимое комментария:

Элемент	Описание
header	Заголовок комментария. Располагается над текстом комментария.
HTML-элементы	Поддерживаемые HTML-элементы.

Элемент	Описание
header	Заголовок комментария. Располагается над текстом комментария.
HTML-элементы	Поддерживаемые HTML-элементы.

<div data-block="comments" data-url="http://example.com/comments">
  <div
   data-block="comment"
   data-author="author" 
   data-avatar-url="http://example.com/img.png" 
   data-subtitle="2017-12-10"
  >
    <div data-block="content">
      <header>Заголовок первого комментария</header>
      <p>
        <b>Текст</b> комментария
        <a href="https://example.com">Текст ссылки</a>
      </p>
    </div>
    <div data-block="comments"> 
      <div data-block="comment" data-author="author2">
        Ответ на первый комментарий
      </div>
        ... 
    </div>  
  </div>
  <div
   data-block="comment"
   data-author="author"> 
     <div data-block="content">
       Содержимое второго комментария
     </div>
  </div> 
  ... 
</div>

Место размещения рекламы

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

Чтобы указать место на странице, где должен размещаться рекламный блок, используйте элемент figure . Он должен содержать атрибут data-turbo-ad-id со значением, указанным в элементе yandex:adNetwork .

<figure data-turbo-ad-id="first_ad_place"></figure>

Пример использования элемента turbo:content
<turbo:content><![CDATA[
    <header>
        <figure>
            <img src="http://mydomain.com/path/to/img.jpg"/>
        </figure>
        <menu>
          <a href="http://example.com/page1.html">Текст ссылки</a>
          <a href="http://example.com/page2.html">Текст ссылки</a>
          ...
        </menu>
        <h1>Заголовок новости</h1>
        <h2>Подзаголовок новости</h2>
    </header>
    <a href="http://mydomain.com/path/to/newspage_1.shtml">Внешняя ссылка</a>
    <p>Текст новости</p>
    <p>Текст новости</p>
    <figure>
        <img src="http://mydomain.com/path/to/img.jpg"/>
        <figcaption>Подпись к фото</figcaption>
    </figure>
    <figure data-turbo-ad-id="first_ad_place"></figure>
    <p>Текст новости</p>
    <figure data-turbo-ad-id="second_ad_place"></figure>
    <figure>
        <video>
            <source 
               src="https://mysite.ru/video.mp4" 
               type="video/mp4">
            </source>
        </video>
        <img src="http://mysite.ru/path/to/img2.jpg"/>
        <figcaption>Подпись к видео</figcaption>
    </figure>
]]></turbo:content>

Подключение систем веб-аналитики

Подключение поддерживаемых систем веб-аналитики

Вы можете подключить некоторые системы веб-аналитики с помощью специальных значений атрибута type элемента yandex:analytics .

Чтобы трафик на Турбо-страницах учитывался в разных системах статистики, в элемент channel можно добавить сразу несколько элементов yandex:analytics.

Для каждой системы можно указать неограниченное количество счетчиков. Каждый счетчик передается в отдельном элементе yandex:analytics.

Яндекс.Метрика

Элемент	Описание
type *	Принимает значение Yandex.
id *	Номер счетчика Яндекс.Метрики.
params	Используйте для передачи параметров визитов.

Элемент	Описание
type *	Принимает значение Yandex.
id *	Номер счетчика Яндекс.Метрики.
params	Используйте для передачи параметров визитов.

<yandex:analytics
 id="номер счетчика"
 type="Yandex"
 params="{ 'param' : 'val' }">
</yandex:analytics>
  ...
<yandex:analytics
 id="номер другого счетчика"
 type="Yandex"
 params="{ 'param' : 'val' }">
</yandex:analytics>

LiveInternet

Укажите атрибут type со значением LiveInternet.

<yandex:analytics
 type="LiveInternet">
</yandex:analytics>

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

<yandex:analytics
 type="LiveInternet"
 params="Название счетчика">
</yandex:analytics>

Google Analytics

Укажите атрибут type со значением Google и атрибут id с идентификатором отслеживания.

<yandex:analytics
 id="идентификатор отслеживания"
 type="Google">
</yandex:analytics>
  ...
<yandex:analytics
 id="другой идентификатор отслеживания"
 type="Google">
</yandex:analytics>

Рейтинг Mail.RU

Укажите атрибут type со значением MailRu и атрибут id с идентификатором счетчика.

<yandex:analytics
 id="идентификатор счетчика"
 type="MailRu">
</yandex:analytics>

Rambler Топ-100

Укажите атрибут type со значением Rambler и атрибут id с идентификатором счетчика.

<yandex:analytics
 id="идентификатор счетчика"
 type="Rambler">
</yandex:analytics>
  ...
<yandex:analytics
 id="идентификатор другого счетчика"
 type="Rambler">
</yandex:analytics>

Mediascope (TNS)

Укажите атрибут type со значением Mediascope и атрибут id с идентификатором счетчика.

<yandex:analytics
 id="идентификатор tmsec от Mediascope"
 type="Mediascope">
</yandex:analytics>
  ...
<yandex:analytics
 id="другой идентификатор tmsec от Mediascope"
 type="Mediascope">
</yandex:analytics>

Где найти идентификатор или номер счетчика?

Передача в систему веб-аналитики адреса страницы-источника и заголовка Турбо-страницы

Передайте в элементе item элементы turbo:source и turbo:topic .

Примечание. Поддерживается только Яндекс.Метрикой.

Подключение рекламы

РСЯ

1. В партнерском интерфейсе создайте рекламный блок для Турбо-страниц.
2. В RSS-файл добавьте в элемент yandex:adNetwork атрибуты:
   • type со значением Yandex;
   • id с буквенно-числовым идентификатором рекламного блока;
   • turbo-ad-id с произвольным идентификатором, указывающим место размещения рекламы.

...
<yandex:adNetwork
 type="Yandex"
 id="идентификатор блока 1"
 turbo-ad-id="first_ad_place">
</yandex:adNetwork>
...
<yandex:adNetwork
 type="Yandex"
 id="идентификатор блока 2"
 turbo-ad-id="second_ad_place">
</yandex:adNetwork>
...

Сторонние сети и прямые рекламодатели через ADFOX

1. В интерфейсе ADFOX создайте площадку для Турбо-страниц. Вы можете использовать непрерывную ленту статей.
2. В RSS-файл добавьте в элемент yandex:adNetwork :
   • атрибут type со значением AdFox;
   • атрибут turbo-ad-id с произвольным идентификатором, указывающим место размещения рекламы;
   • код блока, обернутый в тег <![CDATA[]]>.

<yandex:adNetwork
 type="AdFox"
 turbo-ad-id="first_ad_place">
    <![CDATA[
        <div id="идентификатор контейнера 1"></div>
        <script>
            window.Ya.adfoxCode.create({
                ownerId: 123456,
                containerId: 'идентификатор контейнера 1',
                params: {
                    pp: 'g',
                    ps: 'cmic',
                    p2: 'fqem'
                }
            });
        </script>
    ]]>
</yandex:adNetwork>
...
<yandex:adNetwork
 type="AdFox"
 turbo-ad-id="second_ad_place">
    <![CDATA[
        <div id="идентификатор контейнера 2"></div>
        <script>
            window.Ya.adfoxCode.create({
                ownerId: 123456,
                containerId: 'идентификатор контейнера 2',
                params: {
                    pp: 'g',
                    ps: 'cmic',
                    p2: 'fqem'
                }
            });
        </script>
    ]]>
</yandex:adNetwork>

Чтобы добавить несколько рекламных блоков, для каждого блока укажите отдельный элемент yandex:adNetwork с уникальным значением атрибута id. Если вы укажете одинаковое значение, отобразится только первый блок.

Чтобы указать место размещения рекламы на странице:

1. Задайте для каждого рекламного блока произвольный идентификатор в качестве значения атрибута turbo-ad-id. Например, first_ad_place, second_ad_place.

   Если атрибут turbo-ad-id не указан, будет отображаться только один блок в конце статьи. Если turbo-ad-id не указан для всех блоков, реклама не будет отображаться на Турбо-странице.

2. Укажите этот идентификатор внутри элемента turbo:content в качестве значения атрибута data_turbo_ad_id в элементе figure. Если идентификаторы в turbo-ad-id и data-turbo-ad-id не совпадают, реклама не будет отображаться на Турбо-странице.

Где найти идентификатор рекламного блока или код вставки?