Uporządkowane dane menu nawigacyjnego (BreadcrumbList)

Menu nawigacyjne w wynikach wyszukiwania

Ścieżka menu nawigacyjnego na stronie wskazuje pozycję strony w hierarchii witryny, pomaga zorientować się w strukturze witryny i ułatwia poruszanie się po witrynie. Użytkownik może przejść po kolejnych poziomach na samą górę hierarchii witryny, rozpoczynając od ostatniego elementu menu nawigacyjnego w ścieżce.

Dostępność funkcji

Ta funkcja jest dostępna na komputerach we wszystkich regionach i językach, w których działa wyszukiwarka Google.

Dodawanie uporządkowanych danych

Uporządkowane dane to standardowy format udostępniania informacji o stronie i klasyfikowania jej zawartości. Jeśli dopiero zaczynasz, dowiedz się, jak działają uporządkowane dane.

Poniżej omawiamy sposób tworzenia, testowania i udostępniania uporządkowanych danych.

  1. Dodaj wymagane właściwości. Dowiedz się, w którym miejscu na stronie umieścić uporządkowane dane w zależności od używanego formatu.
  2. Przestrzegaj wskazówek.
  3. Zweryfikuj kod za pomocą testu wyników z elementami rozszerzonymi i napraw błędy krytyczne. Rozważ też usunięcie niekrytycznych problemów, które mogą zostać zgłoszone w narzędziu – to może poprawić jakość uporządkowanych danych (ale nie jest to konieczne, aby witryna kwalifikowała się do wyników z elementami rozszerzonymi).
  4. Możesz wdrożyć kilka stron z uporządkowanymi danymi i dzięki narzędziu do sprawdzania adresów URL zobaczyć, jak Google je odczytuje. Upewnij się, że Twoja strona jest dostępna dla Google i nie jest blokowana przez plik robots.txt lub tag noindex ani nie wymaga logowania. Jeśli strona wygląda dobrze, możesz poprosić Google o ponowne zindeksowanie adresów URL.
  5. Aby na bieżąco informować Google o przyszłych zmianach, prześlij mapę witryny. Możesz zautomatyzować ten proces za pomocą interfejsu Search Console Sitemap API.

Przykłady

Wyszukiwarka Google używa znaczników menu nawigacyjnego zawartych w treści strony internetowej do podziału na kategorie pochodzących z tej strony informacji, które są wyświetlane w wynikach wyszukiwania. Często użytkownicy mogą docierać do strony z różnego rodzaju zapytań, jak pokazano w poniższych przykładach. Chociaż każde wyszukiwanie może zwrócić tę samą stronę internetową, menu nawigacyjne dzieli treści na kategorie w obrębie kontekstu zapytania w wyszukiwarce Google. Strona z informacjami o zwycięzcach fikcyjnej nagrody literackiej może zawierać te ścieżki menu nawigacyjnego:

Jedna ścieżka menu nawigacyjnego

Jeśli do strony prowadzi tylko 1 ścieżka menu nawigacyjnego, strona może zawierać taką ścieżkę:

Książki Science Fiction Laureaci

JSON-LD

Oto przykładowy kod JSON-LD, który obsługuje to menu nawigacyjne:


<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

Oto przykładowy kod RDFa, który obsługuje to menu nawigacyjne:


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

Mikrodane

Oto przykładowy kod w formacie mikrodanych, który obsługuje to menu nawigacyjne:


<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

Oto przykładowy blok menu nawigacyjnego HTML w treści strony, odpowiednio wkomponowany w jej układ.

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

Wiele ścieżek menu nawigacyjnego

Jeśli jest wiele sposobów dotarcia do strony w witrynie, możesz określić wiele ścieżek menu nawigacyjnego dla jednej strony. Oto jedna ścieżka menu nawigacyjnego, która prowadzi do strony z książkami laureatów:

Książki Science Fiction Laureaci

Inna ścieżka menu nawigacyjnego, która prowadzi do tej samej strony:

Literatura  Laureaci

JSON-LD

Oto przykładowy kod JSON-LD, który obsługuje wiele ścieżek menu nawigacyjnego:


<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

Oto przykładowy kod RDFa, który obsługuje wiele ścieżek menu nawigacyjnego:


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

Mikrodane

Oto przykładowy kod w formacie mikrodanych, który obsługuje wiele ścieżek menu nawigacyjnego:


<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

Oto przykładowy blok menu nawigacyjnego HTML w treści strony, odpowiednio wkomponowany w jej układ.

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

Wytyczne

Aby Twoje treści mogły się wyświetlać w wyszukiwarce Google z menu nawigacyjnym, musisz przestrzegać tych wytycznych.

Zalecamy podawanie elementów menu nawigacyjnego, które obrazują typową ścieżkę dojścia do strony, a nie są tylko kopią struktury adresu URL. Nie musisz uwzględniać elementu nawigacji ListItem na ścieżce najwyższego poziomu (w domenie lub nazwie hosta Twojej witryny) ani na samej stronie.

Definicje typów uporządkowanych danych

Aby określić menu nawigacyjne, zdefiniuj właściwość BreadcrumbList, która zawiera co najmniej 2 elementy ListItems. Aby treści mogły się wyświetlać z menu nawigacyjnym, musisz dołączyć do nich wymagane właściwości.

BreadcrumbList to kontener na wszystkie elementy listy. Pełną definicję znaczników BreadcrumbList znajdziesz na schema.org/BreadcrumbList. Właściwości obsługiwane przez Google:

Właściwości wymagane
itemListElement

ListItem

Tablica menu nawigacyjnych w określonej kolejności. Określ każde menu nawigacyjne za pomocą ListItem. Na przykład:

{
"@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 zawiera szczegółowe informacje o jednym z elementów listy. Pełną definicję znaczników ListItem znajdziesz na schema.org/ListItem. Właściwości obsługiwane przez Google:

Właściwości wymagane
item

URL lub podtyp obiektu Thing

Adres URL strony internetowej, która reprezentuje menu nawigacyjne. Właściwość item można określić na 2 sposoby:

  • URL: podaj URL strony, Na przykład:
    "item": "https://example.com/books"
  • Thing: użyj identyfikatora, aby określić URL na podstawie używanego formatu znaczników:
    • JSON-LD: użyj @id, by określić URL.
    • Mikrodane: aby określić URL, możesz użyć href lub itemid.
    • RDFa: aby określić URL, możesz użyć about, href lub resource.

Znacznik item nie jest wymagany w przypadku ostatniego elementu menu nawigacyjnego na ścieżce tego menu. Jeśli do ostatniego elementu nie dodasz znacznika item, Google użyje adresu URL strony.

name

Text

Nazwa menu nawigacyjnego wyświetlana użytkownikowi. Jeśli do określenia elementu item używasz właściwości Thing z właściwością name zamiast URL, właściwość name nie jest wymagana.

position

Integer

Położenie elementu menu nawigacyjnego na ścieżce tego menu. Pozycja 1 oznacza początek ścieżki.

Monitorowanie wyników z elementami rozszerzonymi w Search Console

Search Console to narzędzie, które pomaga monitorować skuteczność stron w wyszukiwarce Google. Aby Twoja witryna mogła pojawiać się w wynikach wyszukiwania Google, nie musisz rejestrować jej w Search Console. Jeśli jednak to zrobisz, lepiej zrozumiesz, jak robot Google widzi Twoją witrynę i jak możesz mu ułatwić jej skanowanie. Zalecamy sprawdzenie danych w Search Console w tych przypadkach:

  1. po pierwszym wdrożeniu uporządkowanych danych,
  2. po opublikowaniu nowych szablonów lub zaktualizowaniu kodu,
  3. podczas okresowego analizowania ruchu.

Po pierwszym wdrożeniu uporządkowanych danych

Gdy Google zindeksuje Twoje strony, poszukaj problemów w odpowiednim raporcie o stanie wyników z elementami rozszerzonymi. W idealnej sytuacji powinno się pojawić więcej elementów prawidłowych, a liczba elementów nieprawidłowych nie powinna się zwiększyć. Jeśli zauważysz problemy w uporządkowanych danych:

  1. Napraw nieprawidłowe elementy
  2. Sprawdź opublikowany adres URL, by zobaczyć, czy problem nadal występuje.
  3. Poproś o weryfikację, korzystając z raportu o stanie.

Po opublikowaniu nowych szablonów lub zaktualizowaniu kodu

Po wprowadzeniu istotnych zmian w witrynie monitoruj wzrost liczby nieprawidłowych elementów w uporządkowanych danych.
  • Możesz zauważyć większą liczbę elementów nieprawidłowych, jeśli wprowadzisz nowy szablon, który nie działa, lub jeśli Twoja witryna wykorzystuje istniejący szablon w nowy i nieprawidłowy sposób.
  • Jeśli okaże się, że jest mniej prawidłowych elementów (ale liczba nieprawidłowych elementów się nie zwiększyła), być może na swoich stronach nie umieszczasz już uporządkowanych danych. Użyj narzędzia do sprawdzania adresów URL, by dowiedzieć się, co jest przyczyną problemu.

Okresowe analizowanie ruchu

Analizuj ruch w wyszukiwarce Google za pomocą raportu skuteczności. Zawarte w nim dane pokazują, jak często Twoja strona wyświetla się w wyszukiwarce jako wynik z elementami rozszerzonymi, jak często użytkownicy ją klikają i jaka jest jej średnia pozycja w wynikach wyszukiwania. Możesz też pobrać te wyniki automatycznie za pomocą interfejsu Search Console API.

问题排查

如果您在实施或调试结构化数据时遇到问题,请查看下面列出的一些实用资源。

  • 如果您使用了内容管理系统 (CMS) 或其他人负责管理您的网站,请向其寻求帮助。请务必向其转发列明问题细节的任何 Search Console 消息。
  • Google 不能保证使用结构化数据的功能一定会显示在搜索结果中。如需查看导致 Google 无法将您的内容显示为富媒体搜索结果的各种常见原因,请参阅结构化数据常规指南
  • 您的结构化数据可能存在错误。请参阅结构化数据错误列表
  • 如果您的网页受到结构化数据手动操作的影响,其中的结构化数据将会被忽略(但该网页仍可能会出现在 Google 搜索结果中)。如需修正结构化数据问题,请使用“人工处置措施”报告
  • 再次查看相关指南,确认您的内容是否未遵循指南。问题可能是因为出现垃圾内容或使用垃圾标记导致的。不过,问题可能不是语法问题,因此富媒体搜索结果测试无法识别这些问题。
  • 针对富媒体搜索结果缺失/富媒体搜索结果总数下降进行问题排查
  • 请等待一段时间,以便 Google 重新抓取您的网页并重新将其编入索引。请注意,网页发布后,Google 可能需要几天时间才会找到和抓取该网页。有关抓取和索引编制的常见问题,请参阅 Google 搜索抓取和索引编制常见问题解答
  • Google 搜索中心论坛中发帖提问。