Czym są okruszki (breadcrumbs) na stronie internetowej?

Okruszki na stronie

Czym są okruszki na stronie? Kreator znaczników i schema | We.Inc

Czym jest nawigacja okruszkowa (breadcrumbs), dostępny wzorzec HTML z aria-current, reguły BreadcrumbList Google i kreator, który napisze oba za Ciebie.

Okruszki to krótki ciąg linków u góry strony, na przykład Strona główna > Buty > Buty do biegania, który pokazuje, gdzie strona znajduje się w serwisie. Odwiedzający używają go, by cofnąć się o poziom wyżej. Oznaczony danymi strukturalnymi BreadcrumbList pomaga też Google zrozumieć hierarchię Twojej witryny.

Trzy rodzaje okruszków

Rodzaj
Przykład
Najlepsze do

Lokalizacja (hierarchia)
Strona główna > Buty > Buty do biegania
Sklepów, blogów i większości stron

Atrybut
Buty > Rozmiar 9 > Niebieskie
Pokazywania filtrów wybranych na liście produktów

Ścieżka (historia)
Strony, przez które przeklikał się ten odwiedzający
Rzadko przydatne; przycisk Wstecz w przeglądarce już to robi

Nazwa pochodzi z baśni o ścieżce z okruszków chleba. Na stronie internetowej to menu pomocnicze, więc nigdy nie zastępuje głównej nawigacji. Poniżej znajdziesz dostępny wzorzec HTML od W3C, dane strukturalne, które czyta Google, oraz kreator, który napisze oba na podstawie Twojej ścieżki.

Wpisz swoją ścieżkę w kreatorze, jeden poziom na linię, od strony głównej do bieżącej strony.
Po każdej nazwie dodaj pełny adres, oddzielony pionową kreską. Ostatnia linia może go pominąć.
Skopiuj HTML do szablonu strony, a JSON-LD do sekcji head.
Przetestuj stronę w Rich Results Test od Google, zanim wdrożysz to w całym serwisie.

Pokazuj miejsce strony w strukturze serwisu, a nie trasę, którą przeszedł odwiedzający.
Każdy okruszek powinien być linkiem, z wyjątkiem bieżącej strony, która ma aria-current="page".
Widoczne okruszki i dane strukturalne powinny być identyczne, aby znaczniki opisywały to, co ludzie faktycznie widzą.
Rysuj separatory w CSS, tak jak w przykładzie W3C, aby czytniki ekranu nie odczytywały rzędu strzałek.
Na małych ekranach pozwól ścieżce zawinąć się do dwóch linii zamiast przewijać ją w bok.

Najczęściej zadawane pytania

Czy okruszki pomagają w SEO?

Dokumentacja Google o okruszkach mówi, że używa znaczników okruszków w treści strony do kategoryzowania zawartych na niej informacji. Dają też crawlerom więcej linków wewnętrznych w górę hierarchii. Same w sobie nie są skrótem do wyższych pozycji.

Czego Google wymaga w BreadcrumbList?

Tablicy itemListElement z co najmniej dwoma wpisami ListItem. Każdy potrzebuje name, position zaczynającego się od 1 oraz item z adresem URL strony. Ostatni okruszek może pominąć item, a wtedy Google używa adresu URL strony, na której się znajduje.

Czy okruszki powinny zawierać bieżącą stronę?

Wzorzec W3C ją zawiera jako ostatni link, oznaczony aria-current ustawionym na page. Wiele stron pokazuje ją zamiast tego jako zwykły tekst. Oba sposoby są w porządku, o ile użytkownicy czytników ekranu wiedzą, który element jest bieżący.

Jaki element powinien otaczać okruszki?

Element nav z etykietą, na przykład aria-label="Breadcrumb", a w nim lista uporządkowana. Przykład W3C używa właśnie tego, bo kolejność linków ma znaczenie.

Czy strona może mieć więcej niż jedną ścieżkę okruszków?

Tak. Strona Google pokazuje przykład z dwoma elementami BreadcrumbList dla strony dostępnej przez dwie kategorie. Pokaż obie ścieżki także odwiedzającym, aby znaczniki odpowiadały stronie.

Dostępne znaczniki okruszków

Wzorzec z WAI-ARIA Authoring Practices ma trzy wymagania: umieść ścieżkę w punkcie orientacyjnym nawigacji, oznacz go przez aria-label lub aria-labelledby i ustaw aria-current na page w linku do bieżącej strony. MDN opisuje wartość page atrybutu aria-current jako link do bieżącego dokumentu w okruszkach.
Przykład W3C układa linki jako listę uporządkowaną i rysuje separatory obramowaniami CSS, więc technologie wspomagające odczytują tylko nazwy stron.

Pasujące dane strukturalne

Schema.org wyjaśnia, że właściwość position służy do odtworzenia kolejności elementów, od najniższych numerów. Zacznij od 1 na szczycie ścieżki, zwykle przy stronie głównej lub głównej kategorii.
JSON-LD, czyli blok danych strukturalnych w znaczniku script, to najłatwiejszy format do dodania, bo istnieje niezależnie od widocznego HTML. Poniższy kreator tworzy go z tej samej listy, która napędza widoczną ścieżkę.

Styl separatorów

Ten CSS rysuje małą strzałkę przed każdym okruszkiem poza pierwszym, więc separatory nigdy nie trafiają do tekstu odczytywanego przez czytnik ekranu.

Okruszki z separatorami w CSS

Zmień nazwy, aby wypróbować. Strzałki pochodzą z reguły ::before, a nie ze znaków w HTML.

Kreator okruszków

Twoja ścieżka, jeden poziom na linię: Nazwa | pełny adres

Podgląd

HTML

Dane strukturalne JSON-LD

Kopiuj

Skopiowano

Google wymaga co najmniej dwóch elementów w BreadcrumbList. Dodaj kolejny poziom.