МАРКЕТИНГ

Цифровой Элемент 6 октября 2020

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

13425

Настройка RSS для Яндекс и AMP для Google

Турбо-страницы и AMP страницы помогают увеличить скорость отдачи контента пользователю. Настройку этих технологий читайте в нашей статье.

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

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

Настройка AMP для Google
Простой шаблон AMP страницы
Требования к AMP
Cпецификация тегов AMP
Автогенерация страниц AMP
Предварительный просмотр и проверка AMP
Как сообщить 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>`), в которой должен быть тег `<h1>` и контентную часть (текст, картинки и пр.).	<turbo:content> <![CDATA[ <header> <h1>Заголовок страницы</h1> </header> <!-- Содержимое страницы --> //далее контентная часть ]]> </turbo:content>

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

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

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

Символ	Код замены
`&`	`&`
`>`	`>`
`<`	`<`
`“`	`"`
`‘`	`'`

Например, ссылка example.com/example.com/?id=1&page=10 должна быть приведена к виду example.com/?id=1&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. Для этого не требуются дополнительные операции.

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

Откройте AMP страницу через свой браузер. Страница должна нормально отображаться, при этом допускаются ошибки XMLHttpRequests запросов в консоле браузера из-за ошибок отображения некоторых элементов.
Затем следует убедиться, что страница 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="https://www.example.com/url/to/document.html" />

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

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

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