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

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

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

Содержание

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

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

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

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

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

<title>Актуальные статьи</title>

<link>https://d-element.ru/about/about/blog/</link>

<description>О жизни компании и всяком таком остальном прочем</description>

<language>ru</language>

<turbo:analytics type="Yandex" id="номер_счетчика"></turbo:analytics>

<turbo:adNetwork type="Yandex" id="идентификатор_блока" turbo-ad-id="идентификатор_рекламы"></turbo:adNetwork>

<pubDate>Tue, 18 Aug 2020 00:00:00 +0500</pubDate>

<item turbo="true">...</item>

<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/"></yadex></metrics>

<meta itemscope="" itemprop="mainEntityOfPage" itemtype="https://schema.org/WebPage" itemid="/about/blog/bazovaya-optimizatsiya/">

<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 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>
   <![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

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

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

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

1. Рейтинг

<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.

Также стоит отметить, что события 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 для Wordpress;
• AMP для фремворка Next.js;
• AMP для PHP;
• AMP для Python.

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

Вы можете предварительно просмотреть страницу 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="https://www.example.com/url/to/document.html" />

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

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

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