Jak dodać znaczniki menu nawigacyjnego | Centrum wyszukiwarki Google | Dokumentacja

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

Menu nawigacyjne wyświetlane na stronie internetowej — **Uwaga:** rzeczywisty wygląd w wynikach wyszukiwania może być inny. Podgląd większości funkcji można wyświetlić w ramach Testu wyników z elementami rozszerzonymi.

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. Szczegółowe instrukcje dodawania uporządkowanych danych do strony internetowej znajdziesz w ćwiczeniach z programowania poświęconych uporządkowanym danym.

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.
Korzystasz z systemu CMS? Być może łatwiej będzie użyć zintegrowanej z nim wtyczki.
Korzystasz z JavaScriptu? Dowiedz się, jak generować uporządkowane dane za pomocą kodu JavaScript.
Przestrzegaj wskazówek.
Zweryfikuj kod za pomocą testu wyników z elementami rozszerzonymi.
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.
Uwaga: ponowne skanowanie i indeksowanie może trochę potrwać. Pamiętaj, że gdy opublikujesz stronę, Google może potrzebować kilku dni na jej znalezienie i zindeksowanie.
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 ancillaryjustice.html może wyświetlić te ścieżki menu nawigacyjnego zależnie od kontekstu wyszukiwania.

Jedna ścieżka menu nawigacyjnego

Zapytanie o nagrodę przyznaną w danym roku w określonej kategorii, np. „2014 Nebula Award best novel”, może spowodować wygenerowanie takiego menu nawigacyjnego:

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

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">
 Books</a>
 <meta property="position" content="1">
 </li>
 ›
 <li property="itemListElement" typeof="ListItem">
 <a property="item" typeof="WebPage"
 href="https://example.com/books/sciencefiction">
 Science Fiction</a>
 <meta property="position" content="2">
 </li>
 ›
 <li property="itemListElement" typeof="ListItem">
 <a property="item" typeof="WebPage"
 href="https://example.com/books/sciencefiction/awardwinners">
 Award Winners</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">
 Literature</a>
 <meta property="position" content="1">
 </li>
 ›
 <li property="itemListElement" typeof="ListItem">
 Award Winners
 <meta property="position" content="2">
 </li>
 </ol>
 </body>
</html>

<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">
 Books</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">
 Science Fiction</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">
 Award Winners</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">
 Literature</a>
 <meta itemprop="position" content="1" />
 </li>
 ›
 <li itemprop="itemListElement" itemscope
 itemtype="https://schema.org/ListItem">
 Award Winners
 <meta itemprop="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

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

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. Niektóre elementy ścieżki adresu URL nie pomagają użytkownikom w zrozumieniu, gdzie w witrynie znajduje się dana strona. Na przykład w adresie URL https://example.com/pages/books/catcher_in_the_rye.html fragment pages o niczym nie informuje, podobnie jak element najwyższego poziomu example.com.

Definicje typów uporządkowanych danych

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

`BreadcrumbList`

BreadcrumbList to kontener na wszystkie elementy listy. Pełną definicję znaczników BreadcrumbList znajdziesz na schema.org/BreadcrumbList.

Właściwości wymagane

Właściwości wymagane
`itemListElement`	`ListItem` Tablica menu nawigacyjnych w określonej kolejności. Określ każde menu nawigacyjne za pomocą `ListItem`, np.: { "@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" }] }

itemListElement

ListItem

Tablica menu nawigacyjnych w określonej kolejności. Określ każde menu nawigacyjne za pomocą ListItem, np.:


{
"@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 wymagane

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 dwa sposoby: `URL`: podaj URL strony, np.: "item": "https://example.com/books" `Thing`: użyj identyfikatora, by 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.

item

URL lub podtyp obiektu Thing

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

URL: podaj URL strony, np.:
```
"item": "https://example.com/books"
```
Thing: użyj identyfikatora, by 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:

po pierwszym wdrożeniu uporządkowanych danych,
po opublikowaniu nowych szablonów lub zaktualizowaniu kodu,
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 prawidłowych stron, a liczba błędów i ostrzeżeń nie powinna się zwiększyć. Jeśli zauważysz problemy w uporządkowanych danych:

Popraw błędy.
Sprawdź opublikowany adres URL, by zobaczyć, czy problem nadal występuje.
Poproś o weryfikację, korzystając z raportu o stanie.

Po opublikowaniu nowych szablonów lub zaktualizowaniu kodu

Po wprowadzeniu istotnych zmian w witrynie monitoruj liczbę błędów i ostrzeżeń dotyczących uporządkowanych danych.

Możesz zauważyć większą liczbę błędów, 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 błędów się nie zwiększyła), być może na swoich stronach nie umieszczasz już uporządkowanych danych. Aby dowiedzieć się, co jest przyczyną problemu, użyj narzędzia do sprawdzania adresów URL.

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.

Rozwiązywanie problemów

Jeśli masz problem z zastosowaniem lub debugowaniem uporządkowanych danych, skorzystaj z tych rozwiązań:

Jeśli korzystasz z systemu zarządzania treścią (CMS) lub ktoś inny zajmuje się Twoją witryną, poproś odpowiednią osobę o pomoc. Pamiętaj, aby przekazać tej osobie wszystkie wiadomości z Search Console, które zawierają szczegółowe informacje o problemie.
Google nie gwarantuje, że funkcje wykorzystujące uporządkowane dane pojawią się w wynikach wyszukiwania. Listę typowych powodów, dla których Google może nie wyświetlać Twoich treści w wyniku z elementami rozszerzonymi, znajdziesz w Ogólnych wytycznych dotyczących uporządkowanych danych.
Możliwe, że w uporządkowanych danych wystąpił błąd. Sprawdź listę błędów uporządkowanych danych.
Jeśli wobec Twojej strony zostały podjęte ręczne działania dotyczące uporządkowanych danych, dane te zostaną zignorowane (mimo że strona nadal może się pojawiać w wynikach wyszukiwania Google). Aby rozwiązać problemy z uporządkowanymi danymi, użyj raportu Ręczne działania.
Przejrzyj jeszcze raz wytyczne, aby sprawdzić, czy Twoje treści ich nie naruszają. Przyczyną problemu mogą być treści spamerskie lub użycie spamerskich znaczników. Jeśli jednak problem nie jest związany ze składnią, test wyników z elementami rozszerzonymi go nie wykryje.
Rozwiązywanie problemów z brakującymi wynikami z elementami rozszerzonymi lub ze spadkiem całkowitej liczby wyników z elementami rozszerzonymi
Poczekaj na ponowne zindeksowanie strony. Pamiętaj, że gdy opublikujesz stronę, Google może potrzebować kilku dni na jej znalezienie i zindeksowanie. Odpowiedzi na ogólne pytania dotyczące skanowania i indeksowania znajdziesz w artykule Najczęstsze pytania o indeksowanie i skanowanie w wyszukiwarce Google.
Zadaj pytanie na forum Centrum wyszukiwarki Google.

Menu nawigacyjne

Dodawanie uporządkowanych danych

Przykłady

Jedna ścieżka menu nawigacyjnego

JSON-LD

RDFa

Mikrodane

HTML

Wiele ścieżek menu nawigacyjnego

JSON-LD

RDFa

Mikrodane

HTML

Wytyczne

Definicje typów uporządkowanych danych

BreadcrumbList

ListItem

Monitorowanie wyników z elementami rozszerzonymi w Search Console

Po pierwszym wdrożeniu uporządkowanych danych

Po opublikowaniu nowych szablonów lub zaktualizowaniu kodu

Okresowe analizowanie ruchu

Rozwiązywanie problemów

`BreadcrumbList`

`ListItem`