Creating a simple Turbo page

Use this guide to create a Turbo page for one of your site pages and see how mobile users respond to it.

The content of the generated Turbo page must repeat the main content of the site page.

  1. Step 1. Copy the RSS feed structure
  2. Step 2. Add information about the page
  3. Step 3. Add the content of the page
  4. Step 4. Upload your RSS feed to Yandex.Webmaster
  5. Example of an RSS feed

Step 1. Copy the RSS feed structure

A simplified example of the RSS feed that contains only mandatory elements:

<?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>
        <item turbo="true">
            <link>http://www.example.com/page1.html</link>
            <turbo:content>
                <![CDATA[
                    <!-- Page content --> 
                ]]>
            </turbo:content>
        </item>
    </channel>
</rss>
channel *
item *
link *

The URL of the site page to generate the Turbo page for.

turbo:content *

Required

Step 2. Add information about the page

Specify the link element.
...
    <link>http://www.example.com/page1.html</link>
...
link *

The URL of the site page to generate the Turbo page for.

Requirements:
  • The link must contain the HTTP or HTTPS scheme prefix.
  • The link domain must be the same as the source site domain.
  • The maximum length of the URL is 243 ASCII characters.
  • Each URL must contain one article.

When the link is clicked, the header and the beginning of the text should fit the first screen at 1024 × 768 resolution.

Required

Step 3. Add the content of the page

Turbo page content is passed in the turbo:content element. It must be wrapped in the <![CDATA[]] > tag.
...
<turbo:content>
    <![CDATA[
        <!-- Page content section -->
        ]]> 
    </turbo:content>
...
The page content must contain the page header and the content part:
...
    <header>
        <h1>Page heading</h1>
        <figure>
            <img src="http://example.com/img.jpg"/>
        </figure>
        <h2>Second level heading</h2>
        <menu>
            <a href="http://example.com/page1.html">Link text</a>
            <a href="http://example.com/page2.html">Link text</a>
        </menu>
    </header>
    <!-- Content part -->
...
header *
h1 *

Page heading.

figure
The element used for generating a preview in the header. Can be used for generating a picture with caption.
img
The src attribute must contain the image URL.
Attention. JPEG, PNG, GIF formats are supported. The SVG format is not supported in Turbo pages.
h2

Level two heading.

menu
Navigation menu.
a

Menu item. The href attribute must contain the site page link.

Required

Example of an RSS feed

<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>Page header</h1>
                    </header>
                    <h2>Page header</h2>
                    <p>Text in <b>bold</b> featuring a list:</p>
                    <ul>
                        <li>пункт 1;</li>
                        <li>пункт 2.</li>
                    </ul>
                    <figure>
                        <img src="http://example.com/img-for-video.jpg" />
                        <figcaption>Caption</figcaption>
                    </figure>
                    <iframe
                         width="560"
                         height="315"
                         src=
                          "https://www.youtube.com/embed/<unique set of characters>" 
                         frameborder="0" 
                         allowfullscreen
                    </iframe>
                ]]>
            </turbo:content>
        </item>
    </channel>
</rss>