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

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.
- 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. - 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"> <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="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 | |
---|---|
itemListElement |
Tablica menu nawigacyjnych w określonej kolejności. Określ każde menu nawigacyjne za pomocą { "@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 | |
---|---|
item |
Adres URL strony internetowej, która reprezentuje menu nawigacyjne. Właściwość
Znacznik |
name |
Nazwa menu nawigacyjnego wyświetlana użytkownikowi. Jeśli do określenia elementu |
position |
Położenie elementu menu nawigacyjnego na ścieżce tego menu. Pozycja 1 oznacza początek ścieżki. |
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:
- After deploying structured data for the first time
- After releasing new templates or updating your code
- 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 pages, and no increase in errors or warnings. If you find issues in your structured data:
- Fix the errors.
- Inspect a live URL to check if the issue persists.
- 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 errors and warnings.- If you see an increase in errors, 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 errors), 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.Rozwiązywanie problemów
Jeśli masz problem z zastosowaniem lub debugowaniem uporządkowanych danych, skorzystaj z tych rozwiązań:
- 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ą.
- Rozwiązywanie problemów z brakującymi wynikami z elementami rozszerzonymi lub ze spadkiem całkowitej liczby wyników z elementami rozszerzonymi
- 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 w godzinach pracy Centrum wyszukiwarki Google.
- Zadaj pytanie na forum Centrum wyszukiwarki Google.