Co to jest breadcrumbs oraz jak wpływa na SXO?

Breadcrumbs, czyli nawigacja okruszkowa, to element strony internetowej, który pokazuje użytkownikowi, w którym miejscu struktury właśnie jest. Składa się z ciągu linków prowadzących od początku do bieżącej podstrony, na przykład "Start > Usługi > Audyt SEO". Google w polskiej dokumentacji opisuje ją tak: wskazuje pozycję w hierarchii, pomaga zorientować się w układzie treści i pozwala przejść po kolejnych poziomach aż na samą górę. W praktyce to skrót, dzięki któremu wrócisz do kategorii bez przycisku "Wstecz" w przeglądarce.

Rodzaje nawigacji okruszkowej

Breadcrumbs dzielą się na trzy typy: z kategoriami, z wybranymi filtrami i z drogą użytkownika. Każdy odpowiada na inne pytanie: gdzie jestem w układzie treści, co zaznaczyłem albo którędy tu przyszedłem.

Hierarchiczne (strukturalne)

Najczęściej spotkasz właśnie ten rodzaj: pokazuje drogę do bieżącej podstrony w układzie kategorii. Przydaje się przy głębokiej architekturze informacji, czyli w portalach tematycznych, katalogach produktów i sklepach z wieloma działami. Google zaleca, żeby ścieżka obrazowała typową drogę dojścia, a nie była kopią adresu URL. Dopuszcza też kilka wariantów dla tej samej podstrony, jeśli prowadzi do niej więcej niż jedna trasa.

• Strona główna > Kategoria > Podkategoria > Produkt
• Strona główna > Blog > Marketing internetowy > Artykuł

Oparte na atrybutach

Wersję z atrybutami spotkasz przede wszystkim w sklepach internetowych z rozbudowanym wyszukiwaniem po cechach, gdzie użytkownik zawęża listę produktów. Ścieżka pokazuje wtedy wybrane filtry zamiast stałego układu kategorii.

• Start > Buty > Rozmiar: 42 > Kolor: Czarny > Marka: Nike
• Start > Laptopy > Procesor: Intel i7 > RAM: 16 GB

Oparte na historii

Wersja oparta na drodze użytkownika pokazuje podstrony w takiej kolejności, w jakiej je odwiedził, jak lista ostatnio oglądanych kart, tylko w obrębie jednej domeny. Spotyka się ją rzadziej, bo przy krążeniu między działami ścieżka robi się długa i przestaje pokazywać strukturę.

• Strona główna > O nas > Blog > Kategoria > Artykuł

Wpływ breadcrumbs na optymalizację wrażeń użytkownika

Breadcrumbs wpływają na SXO z dwóch stron: Google odczytuje z nich hierarchię treści, a człowiek widzi, gdzie jest i jak wrócić poziom wyżej. SXO (Search Experience Optimization) łączy SEO i UX, więc liczy się zarówno wygląd podstrony w wynikach wyszukiwania, jak i to, co odwiedzający robi po kliknięciu. Jeden rzut oka na ścieżkę zastępuje szukanie kategorii w menu.

Poprawa nawigacji i doświadczenia użytkownika

• Umożliwiają cofanie się do wyższych poziomów struktury bez przycisku "Wstecz" w przeglądarce i bez otwierania menu głównego.
• Skracają drogę do powiązanych treści: przykład z karty produktu "Strona główna > Buty > Sneakersy > Model X" to jedno kliknięcie do listy sneakersów zamiast dwóch albo trzech przez menu.
• Porządkują obraz architektury informacji, co widać zwłaszcza przy czterech i więcej poziomach kategorii.

Lepsza indeksacja w Google

• Breadcrumbs stanowią element technicznego SEO, bo pokazują robotom Google relacje między podstronami.
• Według dokumentacji Google wyszukiwarka używa znaczników menu nawigacyjnego z treści strony do podziału informacji na kategorie widoczne potem w wynikach.
• Znaczniki schema.org BreadcrumbList muszą zawierać co najmniej 2 elementy ListItem, a każdy z nich właściwości item, name i position.

Poprawa współczynnika CTR

• Google pisze, że część URL-i może być pokazywana w wynikach jako menu nawigacyjne, co ułatwia ocenę linku przed kliknięciem.
• Taką ścieżkę Google ustala sam na podstawie słów w adresie URL, a uporządkowane dane dają wpływ na jej kształt; według opisu funkcja działa na komputerach we wszystkich regionach i językach.
• W e-commerce taki zapis pokazuje, do jakiej kategorii należy produkt, a efekt na CTR sprawdzisz w Search Console, w raporcie Wyniki wyszukiwania, porównując okres przed wdrożeniem i po nim.

Zmniejszenie współczynnika odrzuceń

• Współczynnik odrzuceń w GA4 to odsetek sesji bez zaangażowania. Pomoc Google wymienia trzy kryteria: wizyta trwa dłużej niż 10 sekund, zawiera zdarzenie oznaczone jako najważniejsze albo obejmuje co najmniej 2 wyświetlenia strony, a spełnienie jednego wystarcza.
• Użytkownik, który trafił na niewłaściwą podstronę, może cofnąć się do wcześniejszej kategorii, a to druga odsłona w tej samej sesji, więc GA4 zalicza ją do zaangażowanych.
• Breadcrumbs to alternatywna droga nawigacji: gdy menu główne jest schowane, na przykład na telefonie, ścieżka nad treścią zostaje widoczna.

Wdrożenie breadcrumbs w praktyce

Breadcrumbs wdrażasz w trzech warstwach: widoczna ścieżka w HTML, uporządkowane dane BreadcrumbList dla Google i ustawienia systemu CMS, który robi to za Ciebie. Każdą opisujemy niżej z przykładem.

Wykorzystanie HTML i CSS

Podstawową nawigację okruszkową zbudujesz z semantycznego kodu HTML. Tag <nav> z atrybutem aria-label informuje czytniki ekranu, czym jest ten blok, a lista <ul> porządkuje elementy ścieżki.

<nav aria-label="Breadcrumb">
  <ul>
    <li><a href="/">Strona główna</a></li>
    <li><a href="/uslugi/">Usługi</a></li>
    <li>Audyt SEO</li>
  </ul>
</nav>

W CSS dodajesz separator wizualny (np. > lub /) między pozycjami, a ostatni element, czyli bieżąca podstrona, zostaje zwykłym tekstem bez linku, jak w przykładzie.

Wdrożenie schema.org

Google zaleca uporządkowane dane w JSON-LD, bo według jego dokumentacji ten format najłatwiej wdrożyć i utrzymać, a przy dużej skali jest mniej wrażliwy na błędy. Każda pozycja listy ma numer (1 oznacza początek ścieżki), nazwę i link, przy czym ostatnia może go nie mieć: wtedy Google weźmie adres bieżącej podstrony.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Strona główna",
      "item": "https://przyklad.pl/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Usługi",
      "item": "https://przyklad.pl/uslugi/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Audyt SEO"
    }
  ]
}
</script>

Kod sprawdzisz w teście wyników z elementami rozszerzonymi, w którym trzeba naprawić błędy krytyczne, bo blokują pokazanie ścieżki w Google. Podstrona nie może być zablokowana w robots.txt, oznaczona noindex ani wymagać logowania. Po wdrożeniu Google radzi przejrzeć w Search Console raport o stanie wyników z elementami rozszerzonymi i sprawdzić, czy przybywa pozycji prawidłowych.

Użycie CMS

Popularne systemy zarządzania treścią mają gotowe rozwiązania, a Google sam podpowiada, że przy CMS łatwiej użyć zintegrowanej wtyczki. W WordPressie breadcrumbs z obsługą schema.org daje Yoast SEO, w PrestaShop moduł Breadcrumb jest dostępny domyślnie, a Magento ma wbudowaną funkcję z konfiguracją w panelu administracyjnym. We własnym systemie ścieżkę generuje się zwykle na podstawie kategorii przypisanych do treści.

Najlepsze praktyki stosowania nawigacji okruszkowej

Najlepsze praktyki to w dużej części wytyczne Google dla uporządkowanych danych BreadcrumbList:

• Ścieżka powinna obrazować typową drogę do podstrony, a nie powtarzać strukturę adresu URL.
• Nie musisz dodawać pozycji ListItem dla samej domeny ani dla bieżącej podstrony, a lista musi mieć co najmniej 2 elementy.
• Jeden produkt może mieć kilka ścieżek, jeśli trafia się do niego z różnych miejsc, na przykład z dwóch kategorii.
• Znaczniki data-vocabulary.org nie działają już w funkcjach Google, więc stare wdrożenia z nimi trzeba przepisać na schema.org.
• Znaczniki niezgodne z wytycznymi Google mogą skończyć się ręcznymi działaniami, a wtedy uporządkowane dane z tej domeny są ignorowane.
• Po każdej zmianie szablonu albo kodu Google zaleca obserwować w Search Console, czy nie rośnie liczba elementów nieprawidłowych.
• Breadcrumbs pozostają dodatkową formą nawigacji, nie zastępują menu głównego.