Создание простой Турбо-страницы

Настройка и подключение Турбо-страниц.

Посмотреть видео

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

Ниже представлен минимальный набор элементов, с помощью которых вы можете сформировать Турбо-страницу для отображения в результатах поиска Яндекса. Полный список элементов см. в разделе Описание элементов RSS 2.0.

Примечание. Для создания RSS-канала вы можете использовать специальный плагин. Плагины разработаны для систем 1С-Битрикс, Drupal, Joomla, WordPress и OpenCart.

Данные для Турбо-страниц экспортируются в XML-based формате RSS 2.0.

  1. Шаг 1. Укажите корневой элемент RSS-файла
  2. Шаг 2. Добавьте информацию о странице
  3. Шаг 3. Добавьте содержимое страницы
  4. Шаг 4. Передайте информацию в Яндекс
  5. Символы и кодировки
  6. Пример RSS-канала

Шаг 1. Укажите корневой элемент RSS-файла

Корневым элементом RSS-файла является rss, атрибут version которого должен иметь значение 2.0.

<rss
    xmlns:yandex="http://news.yandex.ru"
    xmlns:media="http://search.yahoo.com/mrss/"
    xmlns:turbo="http://turbo.yandex.ru"
    version="2.0">
    ...
</rss>

Шаг 2. Добавьте информацию о странице

  1. Укажите элемент channel с вложенным в него элементом item.

    ЭлементОписание
    item

    Информация о странице и ее содержимом.

    Чтобы использовать формат Турбо-страниц, добавьте атрибут turbo со значением true. Один элемент item описывает одну страницу.

    <rss
        xmlns:yandex="http://news.yandex.ru"
        xmlns:media="http://search.yahoo.com/mrss/"
        xmlns:turbo="http://turbo.yandex.ru"
        version="2.0"
    >
        <channel>
            <item turbo="true">
               ... 
            </item>
        </channel>
    </rss>
  2. В элементе item укажите обязательные элементы:

    ЭлементОписание
    link

    URL страницы-источника.

    Требования:
    • ссылка должна содержать схему HTTP или HTTPS;
    • домен, указанный в ссылке, должен соответствовать домену сайта-источника;
    • максимальная длина URL — 243 ASCII-символа;
    • по одному URL должна быть доступна одна статья.

    При переходе по ссылке заголовок и начало текста должны быть видны на первом экране при разрешении 1024 × 768.

    turbo:content

    Содержимое страницы.

<rss
    xmlns:yandex="http://news.yandex.ru"
    xmlns:media="http://search.yahoo.com/mrss/"
    xmlns:turbo="http://turbo.yandex.ru"
    version="2.0"
>
    <channel>
        <item turbo="true">
            <link>http://www.example.com/page1.html</link>
            <turbo:content>
                ...
            </turbo:content>
        </item>
    </channel>
</rss>

Шаг 3. Добавьте содержимое страницы

Контент для Турбо-страницы передается с помощью элемента turbo:content. Содержимое необходимо обернуть в тег <![CDATA[]]>.

  1. Оформите шапку (верхнюю часть страницы)
  2. Разметьте текст
  3. Добавьте картинки
  4. Добавьте видео материалы

Оформите шапку (верхнюю часть страницы)

  1. Укажите элемент header.
  2. Текст заголовка оберните в элемент h1.
<rss
    xmlns:yandex="http://news.yandex.ru"
    xmlns:media="http://search.yahoo.com/mrss/"
    xmlns:turbo="http://turbo.yandex.ru"
    version="2.0"
>
    <channel>
        <item turbo="true">
            <link>http://www.example.com/page1.html</link>
            <turbo:content>
                <![CDATA[
                    <header>
                        <h1>Заголовок страницы</h1>
                    </header>
                    ...
                ]]>
            </turbo:content>
        </item>
    </channel>
</rss>

Разметьте текст

Для оформления текста Яндекс поддерживает большинство стандартных HTML-элементов. Полный список элементов см. в разделе rss-elements.html#turbo-content-details__html-elements.

ЭлементОписание
p
Параграф.
<p>Параграф текста</p>
ul
Маркированный список.
<ul>
    <li>первый пункт списка</li>
</ul>
ol
Нумерованный список.
<ol>
    <li>первый пункт списка</li>
</ol>
aСсылка в тексте. Атрибут href содержит URL.
<a href="https://www.example.com/page2.html">Текст ссылки</a>
<rss
    xmlns:yandex="http://news.yandex.ru"
    xmlns:media="http://search.yahoo.com/mrss/"
    xmlns:turbo="http://turbo.yandex.ru"
    version="2.0"
>
    <channel>
        <item turbo="true">
           <link>http://www.example.com/page1.html</link>
           <turbo:content>
               <![CDATA[
                   <header>
                       <h1>Заголовок страницы</h1>
                   </header>
                   <p>Текст.</p>
                   <h2>Заголовок второго уровня</h2>
                   <p>Текст с <b>выделением</b> и списком:</p>
                   <ul>
                       <li>пункт 1;</li>
                       <li>пункт 2.</li>
                   </ul>
               ]]>
           </turbo:content>
        </item>
    </channel>
</rss>

Добавьте картинки

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

...
    <img src="http://example.com/img.jpg" />
...
Примечание. GIF проигрывается автоматически, если размер изображения меньше 128 пикселей. Если размер изображения больше, содержимое воспроизводится по клику.
Чтобы разместить картинку с подписью, используйте элемент figure, который может содержать:
ЭлементОписание
figcaptionВидимая подпись картинки.
 ...
    <figure>
        <img src="http://example.com/img.jpg" />
        <figcaption>Подпись</figcaption>
    </figure>
...
<rss
    xmlns:yandex="http://news.yandex.ru"
    xmlns:media="http://search.yahoo.com/mrss/"
    xmlns:turbo="http://turbo.yandex.ru"
    version="2.0"
>
    <channel>
        <item turbo="true">
           <link>http://www.example.com/page1.html</link>
           <turbo:content>
               <![CDATA[
                   <header>
                       <h1>Заголовок страницы</h1>
                   </header>
                   <p>Текст с <b>выделением</b> и списком:</p>
                   <ul>
                       <li>пункт 1;</li>
                       <li>пункт 2.</li>
                  </ul>
                  <figure>
                      <img src="http://example.com/img.jpg" />
                      <figcaption>Подпись</figcaption>
                  </figure>
               ]]>
           </turbo:content>
        </item>
    </channel>
</rss>

Добавьте видео материалы

Чтобы разместить видео со сторонних ресурсов, используйте код для встраивания этих ресурсов. Как правило, для для этого используется элемент iframe. Также вы можете размещать видеоматериалы Facebook и Одноклассники.ru с помощью SDK JavaScript и ссылки соответственно.

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

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

<rss
    xmlns:yandex="http://news.yandex.ru"
    xmlns:media="http://search.yahoo.com/mrss/"
    xmlns:turbo="http://turbo.yandex.ru"
    version="2.0"
>
    <channel>
        <item turbo="true">
           <link>http://www.example.com/page1.html</link>
           <turbo:content>
               <![CDATA[
                   <header>
                       <h1>Заголовок страницы</h1>
                   </header>
                   <p>Текст с <b>выделением</b> и списком:</p>
                   <img src="http://example.com/img.jpg" />
                   <ul>
                       <li>пункт 1;</li>
                       <li>пункт 2.</li>
                   </ul>
                   <iframe
                    width="560"
                    height="315"
                    src=
                     "https://www.youtube.com/embed/<уникальный набор символов>" 
                    frameborder="0" 
                    allowfullscreen
                   </iframe>
                ]]>
           </turbo:content>
       </item>
    </channel>
</rss>

Описание всех доступных элементов для оформления Турбо-страниц.

Шаг 4. Передайте информацию в Яндекс

Когда RSS-канал будет готов:

  1. Разместите RSS-файл на сервере вашего сайта и убедитесь, что файл разрешен для робота Яндекса.
  2. Загрузите файл в Яндекс.Вебмастер.
  3. Добавьте логотип сайта, если это необходимо.
  4. Запустите обработку RSS-канала.
Примечание. Для изменения содержимого страниц используйте RSS-канал. Подробно см. в разделе Обновление RSS-канала.

Символы и кодировки

В экспортном файле укажите кодировку, отдаваемую вашим сервером. Наиболее часто используются: UTF-8, Windows-1251, KOI8-R.

Во всех элементах RSS-файла, кроме содержимого тега <![CDATA[]]>, необходимо кодировать следующие символы:

СимволНазваниеКод замены
&Амперсанд&amp;
>Правая угловая скобка&gt;
<Левая угловая скобка&lt;
"Кавычки&quot;
'Апостроф&apos;

Например, ссылка http://example.com/?id=1&page=10 должна быть приведена к виду http://example.com/?id=1&amp;page=10.

Пример RSS-канала

<rss
    xmlns:yandex="http://news.yandex.ru"
    xmlns:media="http://search.yahoo.com/mrss/"
    xmlns:turbo="http://turbo.yandex.ru"
    version="2.0"
>
    <channel>
        <item turbo="true">
            <link>http://www.example.com/page1.html</link>
            <turbo:content>
                <![CDATA[
                    <header>
                        <figure>
                            <img src="http://example.com/img.jpg" />
                        </figure>
                        <h1>Заголовок страницы</h1>
                    </header>
                    <h2>Заголовок страницы</h2>
                    <p>Текст с <b>выделением</b> и списком:</p>
                    <ul>
                        <li>пункт 1;</li>
                        <li>пункт 2.</li>
                    </ul>
                    <figure>
                        <img src="http://example.com/img-for-video.jpg" />
                        <figcaption>Подпись к картинке</figcaption>
                    </figure>
                    <iframe
                         width="560"
                         height="315"
                         src=
                          "https://www.youtube.com/embed/<уникальный набор символов>" 
                         frameborder="0" 
                         allowfullscreen
                    </iframe>
                ]]>
            </turbo:content>
        </item>
    </channel>
</rss>