15 минут на чтение
432

В последнее время все больше вебмастеров хотят увеличить скорость загрузки сайта. Одна их немногих технологий для ускорения получения контента пользователем — использование турбо-страниц для Яндекса или AMP страниц для Google.

В этой статье мы разберем настройку RSS канала для турбо-страниц Яндекса и настройку AMP для Google.

Содержание

  1. Настройка турбо-страниц для Яндекса
  2. Простой шаблон RSS
  3. Кодировка символов для RSS
  4. Ограничения RSS
  5. Кастомизация RSS
  6. Пример оформленного RSS
  7. Удаление турбо-страниц
  1. Настройка AMP для Google
  2. Простой шаблон AMP страницы
  3. Требования к AMP
  4. Cпецификация тегов AMP
  5. Автогенерация страниц AMP
  6. Предварительный просмотр и проверка AMP
  7. Как сообщить Google о AMP страницах

Турбо-страницы для Яндекса

Турбо-страницы Яндекса используют файл RSS для выгрузки данных.

RSS — это файл формата XML, который используется для быстрой передачи информации в интернете. RSS технологию применяют для получения какой-либо информации с одного или нескольких источников (RSS файлов), не заходя на сами сайты.

Например, RSS файл может хранит данные новостей, статей, а другой сайт может получить эти данные (заголовок, содержание), просто обратившись к этому файлу.

Турбо-страницы Яндекса работают по такому же принципу. Вы формируете RSS файл на сайте и подключаете его в Яндекс.Вебмастере. Также в Яндексе есть возможность подключить турбо-страницы через API, без использования RSS.

Настройка RSS

RSS для турбо-страниц Яндекса формируется с небольшими изменениями от стандартного RSS-канала. Файл RSS может содержать только информационный контент: статьи, публикации, новости, пресс-релизы и пр.

Для формирования коммерческих турбо-страниц необходим YML файл вместо RSS. О нем мы расскажем чуть позже, в отдельной статье.

Простой шаблон RSS

<?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[
                         <!-- Содержимое 1 страницы -->
                    ]]>
              </turbo:content>
          </item>
     </channel>
</rss>

Описание тегов RSS

Тег Описание Пример
Заголовок RSS канала
<title>* Название RSS канала. Может дублировать мета-тег из раздела, откуда собираются данные.
<title>Актуальные статьи</title>
<link>* Полная ссылка на раздел, соответствующий данному каналу.
<link>https://d-element.ru/about/about/blog/</link>
<description>* Краткое описание RSS канала. Может дублировать мета-тег из раздела, откуда собираются данные.
<description>О жизни компании и всяком таком остальном прочем</description>
<language> Язык, на котором написано содержание канала.
<language>ru</language>
<turbo:analytics> Счетчик Яндекс.Метрики для учета посещений турбо-страниц.

Важно! Настройку счетчика метрики можно задать внутри Яндекс.Вебмастер. Если в RSS канале есть блоки аналитики (), то настройки в вебмастере будут игнорироваться.
<turbo:analytics type="Yandex" id="номер_счетчика"></turbo:analytics>
<turbo:adNetwork> Рекламный блок для турбо-страниц. Таких блоков может быть несколько. Атрибут type=”Yandex” – для РСЯ, type="AdFox” – для сторонней рекламы через AdFox. Те или другие рекламные блоки позволяют монетизировать турбо-страницы.

Важно! Настройку всех рекламных блоков можно задать внутри Яндекс.Вебмастер. Если в RSS канале есть блоки рекламы (), то настройки в вебмастере будут игнорироваться.

Примечание. Разметку рекламных объявлений через RSS канал Яндекс считает уже устаревшей, поэтому рекомендует делать их настройку исключительно через Вебмастер.
<turbo:adNetwork type="Yandex" id="идентификатор_блока" turbo-ad-id="идентификатор_рекламы"></turbo:adNetwork>
<pubDate> Дата публикации канала или дата последнего обновления в формате RFC 822.
<pubDate>Tue, 18 Aug 2020 00:00:00 +0500</pubDate>
Элементы (статья, публикация, новость и пр.)
<item>* Начало разметки элемента канала. Должен иметь атрибут turbo="true" для формирование турбо-страниц.
<item turbo="true">...</item>
<link>* Полная ссылка на элемент.
<link>https://d-element.ru/about/blog/bazovaya-optimizatsiya/</link>
<turbo:source> URL страницы-источника, который можно передавать в Яндекс.Метрику.
<turbo:source>https://d-element.ru/about/blog/bazovaya-optimizatsiya/</turbo:source>
<turbo:topic> Заголовок страницы, который можно передать в Яндекс.Метрику.
<turbo:topic>Базовая оптимизация сайта</turbo:topic>
<author> Автор элемента.
<author>Иван Иванов</author>
<metrics> Общий тег метрических данных. Используется в случае необходимости передачи отчета по контенту в метрику.
В качестве атрибута schema_identifier указывается идентификатор из schema.org на странице. Идентификатор может содержать любые символы, поэтому в нем часто используют ссылку на материал, чтобы он точно был уникальным.
<metrics><yandex schema_identifier="/about/blog/bazovaya-optimizatsiya/"></yadex></metrics>

Сама страница должна содержать идентификатор:

<meta itemscope="" itemprop="mainEntityOfPage" itemtype="https://schema.org/WebPage" itemid="/about/blog/bazovaya-optimizatsiya/">
<breadcrumblist> Вложенный тег в "yandex". Используется только для идентификации рубрики. Аналог schema.org breadcrumbs.
<metrics>
   <yandex schema_identifier="/about/blog/bazovaya-optimizatsiya/">
      <breadcrumblist>
          <breadcrumb url="https://d-element.ru/" text="Главная"/>
          <breadcrumb url="https://d-element.ru/about/" text="О нас"/>
          <breadcrumb url="https://d-element.ru/about/blog/" text="Блог"/>
          <breadcrumb url="https://d-element.ru/about/blog/internet-marketing/" text="Интернет-маркетинг"/>
          <breadcrumb url="https://d-element.ru/about/blog/bazovaya-optimizatsiya/" text="Базовая оптимизация сайта"/>
       </breadcrumblist>
   </yadex>
</metrics>
<yandex:related> Лента рекомендаций. Бесконечную ленту можно сформировать только из статей, для которых уже сформированы Турбо‑страницы. Они могут как частью <item>, так и общего <channel>. Важно! Настройку всех рекомендуемых материалов можно задать внутри Яндекс.Вебмастер. Если в RSS канале есть блоки рекламы (<yandex:related>), то настройки в вебмастере будут игнорироваться.
<yandex:related type="infinity">
   <link url="http://www.example.com/page.html"></link>
   <link url="http://www.example.com/page2.html"></link>
</yandex:related>

С добавлением изображения:

<yandex:related type="infinity">
   <link url="http://www.example.com/page.html" img="http://www.example.com/image.png">Текст ссылки</link>
</yandex:related>
<turbo:content>* Содержимое элемента. Содержимое обязательно должно содержать шапку (тег <header&rt;), в которой должен быть тег <h1&rt; и контентную часть (текст, картинки и пр.).
<turbo:content>
   <![CDATA[
     <header>
        <h1>Заголовок страницы</h1>
     </header>
     <!-- Содержимое страницы -->
     //далее контентная часть
   ]]>
</turbo:content>

* — обязательные теги.

Кодировка символов RSS канала

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

Символ Код замены
& &amp;
> &gt;
< &lt;
&quot;
&apos;

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

Ограничения RSS

Количество символов в элементах title, h1, author 240
Общее количество картинок в RSS 5000
Количество картинок в одном item, включая картинки, указанные в элементе yandex:related 50
Количество ссылок на другие ресурсы в элементе yandex:related 30
Количество элементов item 1000
Размер RSS макс. 15 МБ

Кастомизация турбо-страниц

Чтобы добавить в турбо-страницы дополнительные элементы, используйте дополнительные блоки оформления контента. Подробнее об этом читайте в справке Яндекса.

Из всех возможных дополнительных блоков мы рекомендуем использовать:

1. Рейтинг

Эмодзи в поиске Google

Блок «Рейтинг» в турбо-странице
<div itemscope itemtype="http://schema.org/Rating">
   <meta itemprop="ratingValue" content="5">
<meta itemprop="bestRating" content="10"> </div>

Реализуется такое отображение с помощью микроразметки schema.org (Article) в статьях внутри RSS.

2. Поделиться

Блок «Поделиться» в турбо-странице

Блок «Поделиться» в турбо-странице
<div data-block="share" data-network="facebook, odnoklassniki, telegram, twitter, vkontakte"></div>

Реализуется такое отображение с помощью обычного «дивного» (div) блока. Атрибут data-network хранит список возможных соц. сетей для шаринга.

3. Кнопка действия

Кнопка действия в турбо-странице

Кнопка действия в турбо-странице
<button formaction="tel:+78001234567" data-background-color="#eee" data-color="white"  data-primary="true" >8 800 123-45-67</button>

Реализуется такое отображение с помощью атрибута <button>.

  • data-primary — выделение жирным
  • data-background-color — цвет фона
  • data-color — цвет текста
  • data-turbo — при переходе открыть турбо-страницу (если она сформирована)
  • formaction — обязательно значение, заменяет обычный атрибут href.

Все перечисленные блоки можно внедрить по шаблону в содержимое <item> и не требуют дополнительных манипуляций с RSS.

Пример оформленного RSS канала

Пример оформленного RSS канала для d-element.ru:

<?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>Блог</title>
    <link>https://d-element.ru/about/about/blog/</link>
    <description>О жизни компании и всяком таком остальном прочем</description>
    <language>ru</language>
    <item turbo="true">
       <link>https://d-element.ru/about/blog/bazovaya-optimizatsiya/</link>
       <turbo:source>https://d-element.ru/about/blog/bazovaya-optimizatsiya/</turbo:source>
       <turbo:topic>Базовая оптимизация сайта</turbo:topic>
       <author>Константин К.</author>
       <metrics>
          <yandex schema_identifier="/about/blog/bazovaya-optimizatsiya/">
             <breadcrumblist>
                <breadcrumb url="https://d-element.ru/" text="Главная"/>
                <breadcrumb url="https://d-element.ru/about/" text="О нас"/>
                <breadcrumb url="https://d-element.ru/about/blog/" text="Блог"/>
                <breadcrumb url="https://d-element.ru/about/blog/internet-marketing/" text="Интернет-маркетинг"/>
                <breadcrumb url="https://d-element.ru/about/blog/bazovaya-optimizatsiya/" text="Базовая оптимизация сайта" />
             </breadcrumblist>
          </yandex>
       </metrics>
       <category>Интернет-маркетинг</category>
       <pubDate>Tue, 18 Aug 2020 00:00:00 +0500</pubDate>
       <turbo:content>
          <![CDATA[
              <header>
                 <h1>Базовая оптимизация сайта</h1>
                 <figure>
                    <img src="https://d-element.ru/upload/iblock/2cc/bazovoe_seo.png">
                 </figure>
              </header>
              <div itemscope itemtype="http://schema.org/Rating">
                 <meta itemprop="ratingValue" content="5">
                 <meta itemprop="bestRating" content="5">
              </div>
              <p>Многие при разработке нового сайта хотят получить красивый и оптимизированный сайт. И часто это звучит так: «Нам нужен современный сайт с базовой SEO оптимизацией». При этом, мало кто из них понимает, что такое базовая оптимизация и какие работы в неё входят.</p>
              <p><strong>Базовая оптимизация сайта</strong> — это первичные обязательные работы по сайту для оптимизации сайта под поисковые системы Яндекс, Google и пр. Базовое SEO нужно для корректной индексации и показа сайта в поисковой выдаче.</p>
              ...
              <div data-block="share" data-network="facebook, twitter, vkontakte"></div>
          ]]>
       </turbo:content>
    </item>
  </channel>
</rss>

Также можно посмотреть наш полный RSS файл.

Отключение и удаление турбо-страниц

Удаление RSS канала из вебмастера не удалит турбо-страницы из поисковой выдачи. Для того, чтобы турбо-страницы ушли из поисковой выдачи, следует указать <item turbo="false">.

AMP страницы для Google

AMP страницы — это отдельные HTML страницы, которые соответствуют формату AMP. В отличии от турбо-страниц Яндекса они являются полноценными HTML страницами, но с небольшими изменениями. Разница в том, что готовая страница AMP хранится на стороне сайта в отличии от турбо-страниц Яндекса, которые формируются только на серверах Яндекса.

Для создания AMP страниц предусмотрена документация. В данной статье описаны все действия для создания AMP сжато, только самое нужное. Также в статье переведены некоторые части документации, которые в оригинале есть только на английском языке.

Простой шаблон AMP страницы

<!DOCTYPE HTML>
<html amp lang="ru">
   <head>
      <meta charset="utf-8">
      <title>Title</title>
      <link rel="canonical" href="ссылка_на_обычную_html_страницу">
      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
      <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
      <noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
      <script async src="https://cdn.ampproject.org/v0.js"></script>
   </head>
   <body>
       <h1>Заголовок AMP страницы</h1>
   </body>
</html>

По сути, это вся страница, которая будет загружается пользователю в виде AMP страницы. Меняется лишь её содержание.

Требования к AMP страницам

Документ AMP HTML должен:

  • Начинаться с типа документа <!DOCTYPE HTML>;
  • Содержать тег верхнего уровня <html amp>;
  • Содержать теги <head> и <body> (необязательные в разметке HTML).
  • Содержать внутри <head> тег <link rel="canonical" href="ссылка_на_обычную_страницу">, который указывает на обычную HTML-версию документа AMP HTML или на сам исходный документ, если такой версии не существует;
  • Содержать тег <meta charset="UTF-8"> (допускается только UTF-8) в качестве первого дочернего элемента тега <head>;
  • Содержать в теге <head> тег <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">. Также рекомендуется включить в него значение initial-scale=1. Тег нужен для мобильных устройств;
  • Содержать в качестве последнего элемента <head> тег <script async src="https://cdn.ampproject.org/v0.js"></script>;
  • Содержать в теге <head> следующий код стилей:

    <style>
    amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes
      -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
      -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
      -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
      -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
      -amp-start{from{visibility:hidden}to{visibility:visible}}
    </style>
    <noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    

Cпецификация тегов AMP

К сожалению, не все HTML теги, которые используются на обычной HTML странице, могут использоваться на странице AMP. В данном случае, AMP теги можно рассматривать как доработку стандартного HTML.

Тег Использование в AMP версии
<script>

Запрещено, если тип не является «application/ld+json», «application/json» или «text/plain».
Исключение — это обязательный тег сценария для загрузки среды выполнения AMP и теги сценария для загрузки расширенных компонентов. Например, при разметке компонентов с помощью schema.org.

<noscript>

Разрешено. Можно использовать в любом месте страницы. Содержимое внутри элемента <noscript&rt; отображается, если JavaScript отключен пользователем.

<style>

Обязательный тег стиля для amp-шаблона <style amp-boilerplate>. Разрешен еще один тег <style> с атрибутом amp-custom: <style amp-custom></style> в единственной экземпляре.

<base>

Запрещено.

<img>

Запрещено. Требуется заменить на <amp-img>.

Обратите внимание: <img> является одинарным элементом согласно HTML5, поэтому у него нет закрывающего тега. Однако у <amp-img> должен быть закрывающий тег </amp-img>.

Для адаптивности изображения требуется добавить атрибут layout="responsive".

<picture>

Запрещено.

<video>

Запрещено. Требуется заменить на <amp-video>

<audio>

Запрещено. Требуется заменить на <amp-audio>

<iframe>

Запрещено. Требуется заменить на <amp-iframe>

<frame>

Запрещено.

<frameset>

Запрещено.

<object>

Запрещено.

<param>

Запрещено.

<applet>

Запрещено.

<embed>

Запрещено.

<form>

Запрещено. Требуется заменить на <amp-form>.

<input>

Разрешено, кроме типов: <input type="button">, <button type="image">. Также разрешены связанные теги: <fieldset> и <label>.

<button>

Разрешено.

<link>

Допускаются значения c атрибутом «rel», зарегистрированные на microformats.org. Значения preconnect, prerender и prefetch, которые имеют побочные эффекты в браузере, запрещены.

<meta>

Допустимые значения для <meta>: charset, viewport, http-equiv, stylesheet и др.

все теги можно увидеть в спецификации валидатора AMP. Просто выполните поиск по "meta".

<svg>

Разрешено.

<a>

Значение атрибута href не должно начинаться с «javascript:». Все остальные конструкции разрешены.

<!-- -->

Комментарии в AMP запрещены.

Также стоит отметить, что события onclick, onmounseover и др. запрещены в AMP. Атрибуты, связанные с XML, такие как xmlns, xml:lang, xml:base и xml:space, запрещены в AMP HTML.

При этом, в стилях разрешены конструкции: @font-face, @keyframes, @media, @page, @supports. Запрещены: @import, !important.

Требования к AMP страницам — специфичные и требуют значительных изменений на сайте, если их необходимо добавить.

Автоматическая генерация AMP страниц

Для автоматической генерации AMP страниц созданы специальные плагины/библиотеки. Доступные плагины и библиотеки для разработки AMP:

Предварительный просмотр и проверка

Вы можете предварительно просмотреть страницу AMP так же, как и любой другой сайт со статическими страницами HTML. Для этого не требуются дополнительные операции.

Для проверки нужно:

  1. Откройте AMP страницу через свой браузер. Страница должна нормально отображаться, при этом допускаются ошибки XMLHttpRequests запросов в консоле браузера из-за ошибок отображения некоторых элементов.
  2. Затем следует убедиться, что страница AMP действительно имеет допустимую разметку AMP, в противном случае она не будет отображаться в Google Поиске. Для проверки соответствия разметки нужно:
    1. откройте страницу AMP в браузере
    2. добавьте к адресу URL «#development=1», например, d-element.ru/#development=1
    3. откройте консоль браузера и проверьте наличие ошибок.

Консоль браузера

Консоль браузера

Как сообщить Google, что у вас появилась AMP страница

На обычную страницу следует добавить следующий код:

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html" />

На AMP-странице нужно разместить такой код:

<link rel="canonical" href="ссылка_на_оригинальную_страницу_HTML" />

Чтобы AMP страницы начали появляться в Google Поиске, их также следует добавить в sitemap.xml и отправить файл на переобход в Google Search Console. Добавление в sitemap.xml является опциональным действием, лишь ускоряя индексацию таких страниц.

На этом настройка AMP страниц заканчивается.

Надеемся, что статья была для вас интересной и познавательной. Пожалуйста, оцените статью!

Россия, Челябинская область, Челябинск, ул. Энтузиастов, 2, оф. 200
Телефон: +7 (351) 220-45-35

Заявка

для консультации
или подготовки
предложения
Ваши заявки принимает
Надежда
Надежда
Коммерческий директор
Заполните все поля и опишите вашу задачу как можно подробнее
Золотой партнер<br>1С-Битрикс
Золотой партнер
1С-Битрикс
Сертифицированное агентство <br>Яндекс.Директ
Сертифицированное агентство
Яндекс.Директ
Сертифицированное агентство <br>Google.AdWords
Сертифицированное агентство
Google.AdWords
Региональный партнер <br>Ru-center
Региональный партнер
Ru-center
Золотой партнер  <br>Битрикс24
Золотой партнер
Битрикс24