Breadcrumbs: nawigacja okruszkowa i BreadcrumbList
Breadcrumbs, czyli nawigacja okruszkowa, to ciąg linków od początku serwisu do bieżącej podstrony, który pokazuje jej miejsce w strukturze witryny. Czytelnikowi pozwalają wrócić poziom wyżej jednym kliknięciem, wyszukiwarce dają zwykłe linki do stron nadrzędnych, a dane strukturalne BreadcrumbList opisują tę samą ścieżkę w kodzie. Google pokazuje ją w wynikach tylko na komputerach: od stycznia 2025 roku wyniki mobilne mają w tym miejscu samą domenę. Dobra ścieżka okruszków odpowiada typowej drodze użytkownika do strony i jest identyczna w nawigacji widocznej i w danych strukturalnych.
Czym są breadcrumbs i skąd ta nazwa
Breadcrumbs to po angielsku okruszki chleba, a nazwa pochodzi z baśni o Jasiu i Małgosi, którzy znaczyli nimi drogę powrotną przez las. Na stronie internetowej to wąski pasek nad treścią, zwykle w formie „Strona główna › Blog › Tytuł wpisu”, w którym każdy poziom poza ostatnim jest linkiem. Po polsku mówi się nawigacja okruszkowa albo ścieżka okruszków. W tym tekście oba określenia oznaczają to samo.
Wzorzec breadcrumbs w przewodniku W3C opisuje taką ścieżkę jako listę linków do stron nadrzędnych bieżącej strony, ułożonych w kolejności hierarchii, która pomaga użytkownikowi odnaleźć się w serwisie. Zwykle stoi poziomo przed główną treścią strony. Google ujmuje to podobnie: w dokumentacji danych BreadcrumbList pisze, że ścieżka okruszków wskazuje pozycję strony w hierarchii witryny, a użytkownik może przejść od ostatniego okruszka w górę, poziom po poziomie.
Breadcrumbs nie zastępują menu. Menu pokazuje, co jest w serwisie, a okruszki pokazują, gdzie w nim jesteśmy. Najwięcej dają tam, gdzie struktura ma kilka poziomów: w sklepach z kategoriami i podkategoriami, w bazach wiedzy, w serwisach z usługami podzielonymi na branże czy miasta. Na stronie z pięcioma podstronami na jednym poziomie ścieżka „Strona główna › Kontakt” niewiele dodaje.
Rodzaje ścieżek okruszków
Spotyka się trzy rodzaje ścieżek. Najczęstsza jest ścieżka hierarchiczna, oparta na położeniu strony w strukturze: strona główna, kategoria, podkategoria, produkt albo artykuł. Taka ścieżka jest dla danej podstrony zawsze taka sama, niezależnie od tego, skąd przyszedł czytelnik, i właśnie ją opisują dane strukturalne.
Drugi rodzaj to ścieżka atrybutowa, typowa dla sklepów z filtrami: „Buty › Damskie › Rozmiar 38 › Czarne”. Pokazuje wybrane cechy zamiast miejsca w drzewie kategorii. Przydaje się w nawigacji po wynikach filtrowania, ale adresy z filtrami często nie są stronami, które serwis chce pokazywać w wyszukiwarce, więc przed oznaczeniem ich danymi BreadcrumbList warto ustalić, które kombinacje mają być w ogóle indeksowane.
Trzeci rodzaj to ścieżka historii, czyli lista stron odwiedzonych przez użytkownika w tej sesji. Działa jak przycisk „wstecz” z kilkoma krokami i dla każdej osoby wygląda inaczej. Z punktu widzenia SEO jest najmniej przydatna, bo nie mówi niczego stałego o miejscu strony w serwisie, a ta sama podstrona miałaby przy każdej wizycie inną ścieżkę. Jeśli serwis potrzebuje takiej funkcji, lepiej zrobić ją osobno, a jako breadcrumbs pokazywać ścieżkę hierarchiczną.
Co breadcrumbs dają czytelnikowi i robotom
Dla czytelnika okruszki są skrótem. Kto trafił na artykuł albo produkt prosto z wyszukiwarki, widzi od razu, w jakiej sekcji serwisu jest, i jednym kliknięciem przechodzi do kategorii, zamiast szukać jej w menu. Szczególnie dobrze widać to na telefonach, gdzie menu jest schowane pod ikoną, a pasek okruszków stoi na wierzchu.
Dla robota wyszukiwarki każdy okruszek to zwykły link wewnętrzny do strony nadrzędnej. Google w dokumentacji o linkach, które da się zindeksować, pisze, że zasadniczo potrafi przejść tylko po linku zapisanym jako element <a> z atrybutem href. Okruszki zrobione z takich elementów dokładają więc do każdej podstrony linki do kategorii, a kategorie, do których prowadzą okruszki z wielu stron, dostają ich dużo. To część linkowania wewnętrznego, które serwis buduje przy okazji, bez pisania osobnych zdań z linkami. Okruszki zrobione jako przyciski albo elementy obsługiwane wyłącznie skryptem takiej korzyści nie dają.
Jest też warstwa dostępności. Według wzorca W3C ścieżka jest osadzona w obszarze nawigacji opisanym atrybutem aria-label albo aria-labelledby. Link do bieżącej strony ma mieć aria-current="page", a jeśli ostatni element nie jest linkiem, ten atrybut jest opcjonalny. Dzięki temu czytnik ekranu ogłasza okruszki jako osobną nawigację i pozwala do niej przeskoczyć.
Breadcrumbs w wynikach wyszukiwania Google
Google używa danych o ścieżce okruszków, żeby przypisać stronie kategorię w wynikach wyszukiwania. Dokumentacja tłumaczy to na przykładzie: na tę samą stronę można trafić z bardzo różnych zapytań, a ścieżka okruszków ustawia jej treść w kontekście danego wyszukiwania. W wyniku widać to w miejscu adresu: zamiast pełnego URL-a pojawia się domena i ścieżka, na przykład nazwa sekcji serwisu.
Ta prezentacja dotyczy dziś tylko komputerów. We wpisie z 23 stycznia 2025 roku Google ogłosił, że przestaje pokazywać breadcrumbs w wynikach mobilnych we wszystkich językach i regionach, bo na małych ekranach ścieżka była ucinana i mniej przydatna. Widoczny adres w wynikach na telefonie składa się od tego czasu z samej domeny. Na komputerach nadal ma dwie części, domenę i ścieżkę. Strona dokumentacji BreadcrumbList podaje to samo: funkcja jest dostępna na komputerach we wszystkich regionach i językach, w których działa wyszukiwarka.
Google zaznaczył przy tym, że właściciele stron z danymi BreadcrumbList nie muszą niczego zmieniać. Oznaczenie jest nadal obsługiwane, raport ścieżek okruszków w Search Console działa dalej, a dane można testować w narzędziu do testowania wyników z elementami rozszerzonymi (Rich Results Test). Zmiana z 2025 roku odebrała okruszkom część widoczności w wynikach, ale nie zmieniła ich roli na samej stronie.
BreadcrumbList: dane strukturalne ścieżki okruszków
Ścieżkę okruszków opisuje typ BreadcrumbList ze słownika schema.org, najczęściej zapisany w formacie JSON-LD. Google wymaga w nim listy itemListElement z co najmniej dwoma elementami ListItem. Każdy element ma trzy właściwości: name, czyli tekst okruszka widoczny dla użytkownika, position, czyli numer w ścieżce liczony od 1, oraz item, czyli adres strony, którą okruszek reprezentuje. Ostatni element może nie mieć item. Wtedy Google przyjmuje adres strony, na której są dane.
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Blog", "item": "https://example.pl/blog" },
{ "@type": "ListItem", "position": 2, "name": "SEO techniczne", "item": "https://example.pl/blog/seo-techniczne" },
{ "@type": "ListItem", "position": 3, "name": "Tytuł artykułu" }
]
}
W zasadach Google są dwie rzeczy, które często zaskakują. Po pierwsze, ścieżka nie musi kopiować struktury adresów: dokumentacja zaleca okruszki odpowiadające typowej drodze użytkownika do strony, a nie odwzorowanie URL-a. Po drugie, w ścieżce nie trzeba umieszczać ani samej domeny, ani bieżącej strony. Jeden dokument może mieć też kilka ścieżek. Dokumentacja pokazuje na przykładzie stronę dostępną z dwóch różnych kategorii, z dwiema listami BreadcrumbList w danych. Ogólna zasada dla wszystkich danych strukturalnych obowiązuje i tutaj: oznaczenie opisuje to, co widać na stronie. Szerzej o tej zasadzie i o tym, które typy dają dziś wyniki rozszerzone, piszemy w artykule o znacznikach HTML ważnych dla SEO.
Ścieżka widoczna i dane strukturalne z jednego źródła
Najczęstszy problem z breadcrumbs nie polega na błędzie składni, tylko na rozjechaniu się dwóch opisów tej samej ścieżki. Nawigacja widoczna powstaje w szablonie strony, dane BreadcrumbList często dokłada wtyczka albo osobny moduł. Po zmianie nazwy kategorii albo przeniesieniu sekcji jedno się aktualizuje, a drugie nie, i strona ma w kodzie inną ścieżkę niż na ekranie.
Na tym blogu ścieżka ma trzy poziomy: „Strona główna”, „Baza wiedzy” i tytuł wpisu. Pasek widoczny nad artykułem i dane BreadcrumbList powstają w tym samym szablonie wpisu, z tych samych trzech nazw i adresów. Pasek jest osadzony w obszarze nawigacji z opisem aria-label, a ostatni poziom jest zwykłym tekstem, nie linkiem, tak jak dopuszcza wzorzec W3C. W danych strukturalnych ostatni element ma adres wpisu, co Google akceptuje, choć go nie wymaga. Obie listy są jednak zapisane w szablonie dwa razy, obok siebie, więc ich zgodność zależy dziś od dyscypliny przy edycji, a nie od kodu. Pewniejszy wariant to jedna tablica okruszków przekazana do komponentu nawigacji i do funkcji budującej dane strukturalne.
Ta sama zasada przydaje się w każdym serwisie: ścieżka okruszków powinna mieć jedno źródło danych, z którego powstaje zarówno nawigacja widoczna, jak i BreadcrumbList. Wtedy zmiana nazwy kategorii zmienia oba opisy naraz, a test danych strukturalnych sprawdza przy okazji także to, co widzi użytkownik.
Czego szukamy w audycie breadcrumbs
W audytach regularnie widzimy dane BreadcrumbList dodane przez wtyczkę, które opisują inną ścieżkę niż nawigacja na ekranie, na przykład inną nazwę kategorii albo dodatkowy poziom, którego na stronie nie ma. Widzimy też okruszki zrobione skryptem z elementów bez href, które wyglądają jak linki, ale dla robota linkami nie są. Dlatego przegląd ścieżki okruszków zaczynamy od porównania trzech rzeczy: tego, co widać na stronie, tego, co jest w danych strukturalnych, i tego, co pokazuje narzędzie do sprawdzania URL-a w Search Console po wyrenderowaniu strony.
Czy każdy okruszek poza ostatnim jest linkiem <a href>. Sprawdzamy w wyrenderowanym HTML, a nie na zrzucie ekranu, bo przycisk z obsługą kliknięcia wygląda tak samo jak link.
Czy ścieżka w danych jest taka jak na ekranie. Nazwy i kolejność poziomów porównujemy wprost, a adresy w polu item otwieramy: okruszek prowadzący do przekierowania albo do strony z błędem to częsty ślad po przebudowie serwisu.
Czy ścieżka odpowiada drodze użytkownika. Szukamy ścieżek, które powtarzają segmenty adresu bez względu na to, czy pod nimi stoi jakakolwiek strona, oraz kategorii, do których okruszek prowadzi, a których nie ma w menu.
Co mówi raport w Search Console po zmianie szablonu. Google zaleca zaglądać do raportu wyników rozszerzonych po pierwszym wdrożeniu danych i po każdej istotnej zmianie szablonu. Wzrost liczby nieprawidłowych elementów zwykle oznacza wadliwy nowy szablon, a spadek liczby prawidłowych bez wzrostu błędów to znak, że dane zniknęły ze stron.
Podsumowanie
Breadcrumbs to prosta ścieżka linków do stron nadrzędnych, która pomaga czytelnikowi zorientować się w serwisie i dokłada robotom zwykłe linki wewnętrzne do kategorii. Dane BreadcrumbList opisują tę samą ścieżkę w kodzie i pozwalają Google pokazać ją w wynikach na komputerach. Na telefonach od stycznia 2025 roku wynik ma w tym miejscu samą domenę. Według dokumentacji ścieżka ma odpowiadać typowej drodze użytkownika, a nie kopiować adres, i być zgodna z tym, co widać na stronie.
W praktyce najwięcej kłopotów sprawiają nie same dane, tylko dwa niezależne opisy jednej ścieżki i okruszki, które nie są prawdziwymi linkami. Przegląd nawigacji, danych strukturalnych i linkowania wewnętrznego robimy w ramach audytów SEO. Jeśli chcesz, żeby ścieżki okruszków w Twoim serwisie przeszły taki przegląd, poproś o wycenę.