T13 Stacja 13 z 14

Wszystko, co powinieneś wiedzieć o breadcrumbs na stronie internetowej

breadcrumbs

Breadcrumbs, czyli nawigacja okruszkowa, to ścieżka pokazująca, w którym miejscu struktury serwisu jest użytkownik, np. Strona główna > Blog > Techniczne SEO > Breadcrumbs. Każdy element (poza ostatnim) jest linkiem do strony wyższego poziomu. Ułatwia powrót w górę struktury, wzmacnia linkowanie wewnętrzne i pozwala Google pokazać ścieżkę strony w wynikach wyszukiwania. Poniżej: rodzaje okruszków, ich wpływ na SEO, poprawne oznaczenie w JSON-LD i typowe błędy.

Co to są breadcrumbs i jak działają?

Nazwa pochodzi od baśni o Jasiu i Małgosi, którzy znaczyli drogę okruszkami chleba. Na stronie okruszki to zwykle jedna linia tekstu nad nagłówkiem H1, w której kolejne elementy odzwierciedlają hierarchię: strona główna, kategoria, podkategoria, bieżąca strona.

Dla użytkownika to szybki sposób na wejście poziom wyżej bez cofania przeglądarką i orientacja, gdzie jest. Dla SEO to dodatkowe linki wewnętrzne z czytelnym anchorem (nazwą kategorii) na każdej podstronie oraz sygnał o strukturze serwisu, który Google może wykorzystać w wynikach wyszukiwania.

Rodzaje breadcrumbs i ich zastosowanie

  1. Okruszki hierarchiczne (lokalizacyjne): pokazują pozycję strony w drzewie serwisu, np. Strona główna > Blog > Kategoria > Tytuł wpisu. To standard w blogach, serwisach usługowych i sklepach, i jedyny rodzaj, który ma sens w SEO.
  2. Okruszki oparte na atrybutach: pokazują cechy produktu, np. Strona główna > Buty > Damskie > Rozmiar 38. Stosowane w sklepach, ale łatwo tworzą wiele ścieżek do tej samej strony i problemy z duplikacją, więc w SEO używaj hierarchii kategorii.
  3. Okruszki oparte na historii: pokazują strony odwiedzone przez konkretnego użytkownika, jak przycisk „Wstecz”. Dziś rzadko spotykane i bez wartości dla SEO, bo ścieżka zależy od zachowania użytkownika, a nie od struktury serwisu.

Okruszki mają sens przy serwisach z wieloma poziomami (sklepy, bazy wiedzy, duże blogi, serwisy ogłoszeniowe). Nie zastępują menu głównego, tylko je uzupełniają. Na jednostronicowych witrynach i prostych stronach docelowych nie są potrzebne.

Zalety korzystania z breadcrumbs

  • Lepsza nawigacja: jedno kliknięcie wystarcza, żeby wrócić do kategorii lub strony nadrzędnej.
  • Linkowanie wewnętrzne: każda podstrona linkuje do swoich kategorii nadrzędnych, co pomaga robotom odkrywać strony i rozumieć hierarchię.
  • Czytelniejszy wynik w Google: poprawnie oznaczona ścieżka może zastąpić w wyniku wyszukiwania na komputerze zwykły adres URL. Według dokumentacji Google ta funkcja jest dostępna w wersji desktopowej, więc nie licz na nią w wynikach mobilnych.
  • Dłuższa wizyta: łatwiej przejść do pokrewnych treści z tej samej kategorii. Nie ma jednak danych, że Google traktuje to jako czynnik rankingowy.

Okruszki same nie podnoszą pozycji strony. Ich wartość to nawigacja, linkowanie wewnętrzne i sposób prezentacji wyniku.

Jak dodać breadcrumbs do swojej strony internetowej?

W WordPressie okruszki generuje większość wtyczek SEO (Yoast SEO, Rank Math, All in One SEO) oraz motywy WooCommerce. Włącza się je w ustawieniach wtyczki, a następnie wstawia blokiem lub fragmentem kodu w szablonie. W innych CMS-ach (Joomla, Drupal, PrestaShop, Shopify) zwykle są dostępne wbudowane opcje lub moduły, a przy własnych stronach trzeba ją wdrożyć ręcznie.

Poprawny HTML to lista linków w elemencie <nav aria-label="Breadcrumb">. Do tego dodaj dane strukturalne w formacie JSON-LD. Przykład dla strony „Breadcrumbs”:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type": "ListItem", "position": 1, "name": "Strona główna", "item": "https://example.com/"},
    {"@type": "ListItem", "position": 2, "name": "Techniczne SEO", "item": "https://example.com/techniczne-seo/"},
    {"@type": "ListItem", "position": 3, "name": "Breadcrumbs"}
  ]
}
</script>

Wymagane są co najmniej dwie pozycje; każda ma position i name. Pole item (adres) jest obowiązkowe dla wszystkich elementów poza ostatnim, który reprezentuje bieżącą stronę. Źródło: dokumentacja Google o danych strukturalnych breadcrumb. Wtyczki SEO generują ten kod automatycznie, więc nie dodawaj go drugi raz ręcznie.

Dane strukturalne nie są wymagane, żeby Google rozumiał ścieżkę, ale umożliwiają pokazanie jej w wyniku zamiast adresu URL. Co sprawdzić:

  • W Google Search Console w sekcji „Ulepszenia” pojawia się raport „Ścieżka nawigacyjna” (Breadcrumbs), jeśli Google wykryje na stronie oznaczenie. Pokazuje błędy i ostrzeżenia, np. brak pola name lub item.
  • Pojedynczą stronę przetestujesz w narzędziu „Test wyników rozszerzonych” Google.
  • Ścieżka w danych strukturalnych powinna odpowiadać widocznej na stronie.
  • Linki w okruszkach powinny prowadzić do adresów kanonicznych, bez przekierowań (zob. linki kanoniczne).

Najczęstsze błędy związane z używaniem breadcrumbs

  • Okruszki jako powtórzenie menu. Mają pokazywać położenie strony w hierarchii, nie dublować głównej nawigacji.
  • Niespójna hierarchia. Produkt przypisany do kilku kategorii pokazuje raz jedną, raz drugą ścieżkę. Wybierz jedną kategorię główną i trzymaj ją w okruszkach oraz w danych strukturalnych.
  • Brak linku w elementach pośrednich lub link do ostatniego elementu (bieżąca strona nie musi być klikalna).
  • Dane strukturalne niezgodne z widoczną ścieżką albo wygenerowane dwa razy (przez motyw i wtyczkę).
  • Okruszki oparte na historii lub parametrach filtrów zamiast na hierarchii serwisu.
  • Zbędne okruszki na prostej stronie, gdzie nie ma żadnej hierarchii.
Jak SSL wpływa na SEO i bezpieczeństwo twojej strony T14następna stacja