Структурированные данные для строки навигации (BreadcrumbList)

Строка навигации отражает положение страницы в иерархии сайта. Она помогает пользователям ориентироваться на сайте. Пользователи могут переходить по ссылкам от нижнего уровня сайта к верхнему, вплоть до главной страницы.

Строка навигации на веб-странице

Как добавлять структурированные данные

Структурированные данные – стандартизированный формат, который позволяет предоставлять информацию о странице и классифицировать ее контент. О том, как это работает, рассказывается в другой статье.

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

  1. Добавьте обязательные свойства. Узнайте, в каких частях страницы нужно размещать структурированные данные выбранного вами формата.
  2. Следуйте рекомендациям.
  3. Протестируйте свой код с помощью инструмента проверки расширенных результатов. Если будут обнаружены критические ошибки, устраните их. Мы также рекомендуем устранить некритические ошибки, отмеченные в инструменте. Это может привести к повышению качества структурированных данных, хотя страницы будут подходить для создания расширенных результатов и без этого.
  4. Опубликуйте страницу и с помощью инструмента проверки URL выясните, как она выглядит для робота Googlebot. Убедитесь, что доступ Google к странице не заблокирован файлом robots.txt или метатегом noindex и авторизация на ней не требуется. Если все в порядке, то запросите повторное сканирование ваших URL.
  5. Отправляйте нам файл Sitemap, чтобы информировать нас об изменениях на сайте. Отправку такого файла можно автоматизировать с помощью Search Console Sitemap API.

Примеры

Google Поиск использует разметку строки навигации в теле веб-страницы, чтобы отнести информацию с этой страницы к той или иной категории результатов поиска. Как будет видно из примеров ниже, часто бывает так, что разные поисковые запросы приводят на одну и ту же страницу. В таких случаях строка навигации определяет категорию контента применительно к поисковому запросу. Например, в результате, относящемся к странице ancillaryjustice.html, в зависимости от контекста может появляться одна из приведенных ниже строк навигации.

Одна строка навигации

Вариант строки навигации для поискового запроса "Премия "Небьюла" за лучший роман 2014 года":

Книги › Научная фантастика › Лауреаты премий

JSON-LD

Нажмите кнопку ниже, чтобы увидеть пример кода JSON-LD для этой строки навигации.


<html>
  <head>
    <title>Award Winners</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Science Fiction",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

RDFa

Нажмите кнопку ниже, чтобы увидеть пример кода RDFa для этой строки навигации.


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books">
          <span property="name">Books</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction">
          <span property="name">Science Fiction</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">Award Winners</span>
        <meta property="position" content="3">
      </li>
    </ol>
  </body>
</html>

Микроданные

Нажмите кнопку ниже, чтобы увидеть пример кода микроданных для этой строки навигации.


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award winners</span>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
  </body>
</html>

Код HTML

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

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="https://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="https://www.example.com/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

Несколько строк навигации

Если существует несколько способов перехода к определенной странице сайта, для нее можно задать несколько строк навигации. Ниже представлена строка навигации, которая ведет на страницу, посвященную книгам-лауреатам премий:

Книги › Научная фантастика › Лауреаты премий

Ниже представлена строка навигации, ведущая на ту же страницу:

Литература › Лауреаты премий

JSON-LD

Пример кода JSON-LD, поддерживающего несколько строк навигации:


<html>
  <head>
    <title>Award Winners</title>
    <script type="application/ld+json">
    [{
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Science Fiction",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners"
      }]
    },
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Literature",
        "item": "https://example.com/literature"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Award Winners"
      }]
    }]
    </script>
  </head>
  <body>
  </body>
</html>

RDFa

Пример кода RDFa, поддерживающего несколько строк навигации:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books">
          <span property="name">Books</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction">
          <span property="name">Science Fiction</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction/awardwinners">
          <span property="name">Award Winners</span></a>
        <meta property="position" content="3">
      </li>
    </ol>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/literature">
          <span property="name">Literature</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">Award Winners</span>
        <meta property="position" content="2">
      </li>
    </ol>
  </body>
</html>

Микроданные

Пример кода микроданных, поддерживающего несколько строк навигации:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books/sciencefiction/awardwinners">
          <span itemprop="name">Award Winners</span></a>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/literature">
          <span itemprop="name">Literature</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award Winners</span>
        <meta itemprop="position" content="2" />
      </li>
    </ol>
  </body>
</html>

Код HTML

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

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="https://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="https://www.example.com/books/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
    <ol>
      <li>
        <a href="https://www.example.com/literature">Literature</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

Правила

Чтобы ваша строка навигации появлялась в Google Поиске, следуйте правилам, указанным ниже.

Мы рекомендуем подбирать строки навигации, которые отражают то, как пользователи обычно попадают на страницу, а не дублировать структуру URL. Причина в том, что по некоторым компонентам URL пользователям трудно определить, как страница соотносится с вашим сайтом. Например, часть pages в URL https://example.com/pages/books/catcher_in_the_rye.html не несет в себе дополнительной информации, как и компонент верхнего уровня – example.com.

Типы структурированных данных

Для создания своей строки навигации вам необходимо использовать контейнер BreadcrumbList как минимум с двумя элементами ListItems. Чтобы ваш контент мог показываться в качестве строки навигации, требуется задать все обязательные свойства.

BreadcrumbList – контейнер, в котором содержатся все элементы списка. Полное описание типа BreadcrumbList приведено на странице schema.org/BreadcrumbList. Google поддерживает следующие свойства:

Обязательные свойства
itemListElement

ListItem

Массив строк навигации, перечисленных в определенном порядке. Каждое звено следует указывать с использованием типа ListItem. Пример:

{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Books",
    "item": "https://example.com/books"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Authors",
    "item": "https://example.com/books/authors"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "Ann Leckie",
    "item": "https://example.com/books/authors/annleckie"
  }]
}

ListItem

ListItem содержит сведения об отдельном элементе списка. Полное описание типа ListItem приведено на странице schema.org/ListItem. Google поддерживает следующие свойства:

Обязательные свойства
item

URL или подтип, относящийся к Thing

URL веб-страницы, указанной в строке навигации. Задать свойство item можно двумя описанными ниже способами.

  • URL. Укажите URL страницы. Пример: 
    "item": "https://example.com/books"
  • Thing. Задайте идентификатор, чтобы указать URL с учетом используемого вами формата разметки:
    • JSON-LD. Вы можете указать URL с помощью свойства @id.
    • Микроданные. Вы можете указать URL с помощью атрибута href или itemid.
    • RDFa. Вы можете указать URL с помощью атрибута about, href или resource.

Если звено является последним в строке навигации, можно обойтись без свойства item. Если свойство item для последнего элемента не задано, в системе используется URL содержащей его страницы.

name

Text

Название строки навигации, которое видит пользователь. Если вы используете тип Thing со свойством name вместо URL для указания элемента item, то задавать свойство name не обязательно.
position

Integer

Позиция страницы в иерархии сайта. К примеру, позиция 1 указывает на то, что страница находится ближе к корневому каталогу.

Monitor rich results with Search Console

Search Console is a tool that helps you monitor how your pages perform in Google Search. You don't have to sign up for Search Console to be included in Google Search results, but it can help you understand and improve how Google sees your site. We recommend checking Search Console in the following cases:

  1. After deploying structured data for the first time
  2. After releasing new templates or updating your code
  3. Analyzing traffic periodically

After deploying structured data for the first time

After Google has indexed your pages, look for issues using the relevant Rich result status report. Ideally, there will be an increase of valid items, and no increase in invalid items. If you find issues in your structured data:

  1. Fix the invalid items.
  2. Inspect a live URL to check if the issue persists.
  3. Request validation using the status report.

After releasing new templates or updating your code

When you make significant changes to your website, monitor for increases in structured data invalid items.
  • If you see an increase in invalid items, perhaps you rolled out a new template that doesn't work, or your site interacts with the existing template in a new and bad way.
  • If you see a decrease in valid items (not matched by an increase in invalid items), perhaps you are no longer embedding structured data in your pages. Use the URL Inspection tool to learn what is causing the issue.

Analyzing traffic periodically

Analyze your Google Search traffic using the Performance Report. The data will show you how often your page appears as a rich result in Search, how often users click on it and what is the average position you appear on search results. You can also automatically pull these results with the Search Console API.

Устранение неполадок

Если у вас возникли трудности с добавлением или отладкой структурированных данных, вам помогут ресурсы и сведения, доступные по приведенным ниже ссылкам.