Строка навигации

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

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

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

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

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

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

Примеры

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

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

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

Вариант строки навигации для поискового запроса "Премия "Небьюла" за лучший роман 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="http://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="http://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="http://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="http://www.example.com/books/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
    <ol>
      <li>
        <a href="http://www.example.com/literature">Literature</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

Правила

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

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

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

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

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

BreadcrumbList

Массив звеньев строки навигации, перечисленных в определенном порядке. Каждое звено следует указывать с типом 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.

Обязательные свойства
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 указывает на то, что звено находится в начале строки навигации.

Сбор статистики по расширенным результатам в Search Console

С помощью Search Console вы можете собирать данные об эффективности страниц вашего ресурса в Google Поиске. Вам не обязательно регистрироваться в этом сервисе, чтобы ваши страницы попали в результаты поиска. Однако это позволит узнать, как роботы Google воспринимают сайт, и оптимизировать его. Рекомендуем проверять информацию в Search Console в следующих случаях:

  1. После первого размещения структурированных данных
  2. После выпуска новых шаблонов или обновления кода
  3. При регулярном анализе трафика

После первого размещения структурированных данных

Когда ваши страницы будут проиндексированы, проверьте их на наличие ошибок с помощью отчета о статусе расширенных результатов. В идеальном случае количество правильных страниц должно вырасти, а число ошибок и предупреждений – нет. Если в структурированных данных будут обнаружены ошибки, примите следующие меры:

  1. Внесите исправления.
  2. Проверьте страницу на сайте и выясните, есть ли на ней обнаруженные ошибки.
  3. Запросите проверку ресурса, используя отчет о статусе расширенных результатов.

После выпуска новых шаблонов или обновления кода

Если вы внесли значительные изменения на сайт, проверьте, не увеличилось ли число ошибок и предупреждений, связанных со структурированными данными.
  • Увеличилось число ошибок? Возможно, вы создали шаблон, с которым что-то не так, или имеющийся шаблон используется некорректно.
  • Уменьшилось число действительных элементов, но не увеличилось количество ошибок? Возможно, на ваших страницах не размещены структурированные данные. Выяснить, с чем связаны ошибки, можно при помощи инструмента проверки URL.
  • При регулярном анализе трафика

    Анализировать трафик сайта из Google Поиска можно с помощью отчета об эффективности. Из этого отчета вы узнаете, как часто страница появляется в Поиске в виде расширенного результата, с какой регулярностью пользователи нажимают на нее и какова ее средняя позиция в результатах поиска. Эти сведения также можно автоматически получать с помощью Search Console API.

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

    Если у вас возникли трудности в работе со структурированными данными, устранить неполадки помогут ресурсы и сведения, доступные по ссылкам: