Breadcrumbs – menu okruszkowe na stronie internetowej

Maciej Orpik,

Człowiek pracujący z laptopem

Breadcrumbs to w dosłownym tłumaczeniu “okruszki chleba”. Choć słowo to w pierwszej kolejności kojarzy nam się z kuchnią (ewentualnie bajką o Jasiu i Małgosi), oznacza też jedną z dostępnych form nawigacji na stronach internetowych. Breadcrumbs ułatwia poruszanie się po witrynie zarówno jej użytkownikom, jak i algorytmom Google, dlatego lepiej nie bagatelizować tematu “okruszków”.

Co to jest breadcrumbs – dokładna definicja

Zacznijmy od przytoczenia definicji pojęcia i wyjaśnijmy jeszcze raz, co to jest breadcrumbs, powołując się na konkretne przykłady.

Breadcrumbs, inaczej nazywane menu okruszkowym, obecnie znajdują się w niemal wszystkich witrynach internetowych. Wskazują one naszą aktualną pozycję w serwisie. Szczególnie przydatne okazują się w dużych serwisach, gdzie odnalezienie konkretnej kategorii może być trudnym zadaniem (szczególnie, gdy mówimy o dużych sklepach internetowych). W większości domen „okruszki chleba” znajdują się na górze witryny, w miejscu widocznym i łatwym do zlokalizowania przez użytkownika.

Przykłady prawidłowo wdrożonych breadcrumbs:

Breadcrumbs przykład

Źródło:https://mediamarkt.pl/

Przykładowe menu okruszkowe
Źródło: https://www.intymna.pl/

Na powyższych przykład idealnie widać, jak kolejne kategorię i podkategorię tworzą ścieżkę, jaką podążał użytkownik. Gdy nie odnajdzie w danej podkategorii tego czego szukał, może jednym kliknięciem wrócić kategorię wyżej lub od razu na stronę główną serwisu.

W tym miejscu należy zaznaczyć, że breadcrumbs są jedynie pożytecznym dodatkiem, natomiast wiodącą rolę w nawigacji powinno odgrywać główne menu serwisu i to właśnie z menu użytkownicy będą korzystać w pierwszej kolejności.

Breadcrumbs w SEO

„Okruszki chleba” są korzystne nie tylko z punktu widzenia użytkownika, ale odgrywają również ważną rolę w pozycjonowaniu strony w Google, w szczególności w przypadku dużych serwisów.

Linkowanie wewnętrzne

Poszczególne kategorie i podkategorie to odnośniki prowadzące w głąb serwisu, do powiązanych ze sobą treści, tym samym wzmacniając linkowanie wewnętrzne. Również dzięki okruszkom możemy jasno i klarownie przedstawić robotom indeksującym strukturę naszego serwisu. Dodatkowo każdy okruszek jako anchor ma ustawione słowo kluczowe (zobacz też artykuł: poprawny dobór fraz kluczowych), tym samym przenosi moc poszczególnych zakładek do innych części naszej witryny. Dobrze zaimplementowane okruszki świadczą o odpowiedniej hierarchii strony oraz właściwym uporządkowaniu danych w obrębie serwisu.

Dane uporządkowane – BreadcrumbList

Menu okruszkowe z definicji ma porządkować i przedstawiać strukturę serwisu w sposób przejrzysty. Mimo, iż roboty indeksujące Google coraz lepiej rozpoznają dane oraz content w serwisie, warto je wspomóc poprzez opisanie ich za pomocą danych uporządkowanych.
Dane uporządkowane - BreadcrumbList

Poprawność wdrożenia możemy sprawdzić za pomocą oficjalnego narzędzia od Google, dostępnego pod adresem: https://search.google.com/structured-data/testing-tool/u/0/?hl=pl Aby mieć pewność, że wszystkie elementy danych uporządkowanych wdrożyliśmy według specyfikacji Google, warto zapoznać się i stosować wytyczne z linku: https://schema.org/BreadcrumbList W przypadku danych strukturalnych BreadcrumbList należy zastosować format Microdata. Format ten jest osadzany bezpośrednio w kodzie HTML strony internetowej. Niezwykle ważny jest fakt, iż format microdata musi zostać użyty w miejscu występowania, a więc osadzony w konkretnym kontenerze, w którym występuje.

Rodzaje breadcrumbs

Breadcrumbs możemy podzielić na określone rodzaje. Choć obecnie najczęściej wykorzystywane są breadcrumbs lokalizacyjne, to w niektórych serwisach możemy odnaleźć okruszki oparte na historii bądź atrybutach (w przypadku sklepów internetowych). Rozdzielamy 3 główne rodzaje breadcrumbs:

    • Atrybutowe – są najczęściej spotykane w sklepach internetowych, występują, gdy ścieżka nawigacyjna generowana jest na podstawie atrybutów produktu (kolor, rozmiar). W przypadku okruszków atrybutowych, elementy zawierają poszczególne etapy, które doprowadziły użytkownika do danego produktu, najczęściej jest to oparte na filtrach:

Strona główna -> Kategoria -> Podkategoria -> Atrybut 1 (np. rozmiar) -> Atrybut 2 (np. kolor) -> Produkt

    • Historyczne – taki typ okruszków jest najrzadziej stosowany. Breadcrumbs historyczny zawiera wszystkie elementy, które odwiedził użytkownik podczas wizyty w serwisie. Takie rozwiązanie jest mało praktyczne, ze względu na często nielogiczną drogę użytkownika po serwisie.

Strona główna -> Poprzednia strona -> Poprzednia strona -> Aktualna strona

    • Hierarchiczne – są one najczęściej spotykane w serwisach internetowych. Wskazuje i porządkuje strukturę serwisu. Wyżej przedstawione przykłady były właśnie oparte o breadcrumbs hierarchiczny.

Strona główna -> Kategoria -> Podkategoria1 -> Podkategoria2 -> Produkt

Najczęstsze błędy w breadcrumbs

    • Wdrażanie okruszków w serwisach tego nie wymagających – w przypadku małych serwisów, z małą ilością zakładek, stosowanie breadcrumbs nie jest konieczne. Dobrze zaprojektowane główne menu powinno wystarczyć, by efektywnie kierować użytkownika oraz roboty Google.
    • Okruszki zastępują główne menu – nawigacja powinna być zaplanowana w taki sposób, aby była klarowna i jasno dzieliła serwis na poszczególne sekcje, menu okruszkowe powinno być tylko dodatkiem, a nie zastępstwem głównego menu.
    • Brak hierarchi w serwisie – przed wdrożeniem menu okruszkowego należy uporządkować strukturę w samym serwisie, aby nie powielać błędów w breadcrumbs. Menu okruszkowe powinno linkować strony powiązane tematycznie i bezpośrednio względem siebie zagnieżdżone.
    • Błędy w danych uporządkowanych – przy wdrażaniu danych strukturalnych warto skorzystać z narzędzia do sprawdzania. W przypadku literówek, użytkownik nie zauważy błędu, ale roboty indeksujące odczytają to w sposób błędny i tym samym breadcrumbs zamiast nam pomagać będzie tylko wprowadzał zamieszanie w odczytywaniu struktury strony przez roboty indeksujące.

Urządzenia mobilne, a Breadcrumbs

Nawet idealnie zaprojektowany widok strony na urządzeniach mobilnych nie pozwala na rezygnację z menu okruszkowego, zwłaszcza w większych serwisach . Trudność w obsłudze menu na urządzeniach mobilnych wynika to z tego, że ekran jest dużo mniejszy, a wywołanie menu jest de facto kolejnym ekranem. W tym wypadku wdrażanie i korzystanie z nawigacji okruszkowej jest dużo wygodniejsze niż ze standardowego menu (w szczególności, gdy jesteśmy na produkcie głęboko zagnieżdżonym w strukturze serwisu).

Breadcrumbs w WordPress – jak wdrożyć?

CMS WordPress jest najpopularniejszym systemem zarządzania treścią. Dodanie w nim breadcrumbs nie powinno stwarzać większych problemów. Dzięki tak dużej popularności WordPress mamy do dyspozycji szereg wtyczek, które w sposób łatwy i klarowny pozwoli wdrożyć menu okruszkowe. Wtyczkę następnie należy odpowiednio skonfigurować. Należy jednak pamiętać o jednej zasadzie, im więcej wtyczek, tym więcej generują kodu, a tym samym spowalniają działanie naszej witryny co bezpośrednio przekłada się na odczucia użytkownika podczas korzystania z naszej strony internetowej. Dodatkowym istotnym problemem, jest fakt, iż każda wtyczka jest potencjalnym zagrożeniem (jest narażona na ataki zewnętrzne poprzez luki w kodzie). Wtyczki, dzięki którym można wdrożyć breadcrumbs w serwisie opartym na WordPress:

    • NavXT Plugin
    • YoastSEO
    • Breadcrumb
    • All in One SEO

Podsumowanie – czy warto wdrażać breadcrumbs

Wszystkie wyżej przedstawione argumenty potwierdzają, że warto wdrażać breadcrumbs w serwisie. Breadcrumbs to skuteczne rozwiązanie, które pomoże skierować użytkowników do innych tematycznie powiązanych zakładek, a także pozytywnie wpłynie na linkowanie wewnętrzne. Poprawia tym samym odczucia użytkownika podczas korzystania z naszej witryny. Menu okruszkowe nie duplikuje menu, ale jest dodatkiem, który usprawnia nawigację w serwisie. W przypadku, gdy Twój serwis posiada dużo zakładek i rozbudowaną strukturę to wdrożenie breadcrumbs będzie idealnym sposobem na usprawnienie poruszania się między kategoriami zarówno dla użytkowników jak i robotów indeksujących.

Wskazówki:

    • Nie duplikuj okruszków z głównym menu.
    • Przy małych serwisach nie ma potrzeby dodawania breadcrumbs.
    • Wykorzystaj breadcrumbs do linkowania wewnętrznego – wskazuj elementy, na których Ci zależy.
    • Przy sklepie internetowym dodanie okruszków jest niezbędne.
    • Stosuje zasadę: od lewej strony breadcrumbs strona główna, a następnie kolejne coraz bardziej zagnieżdżone zakładki.

 

Skontaktuj się z MBridge! Zdjęcie tytułowe: pexels.com



          

          
          
Maciej Orpik

Maciej Orpik

SEO Specialist w MBridge - Marketing Experts. Do działań SEO podchodzi w sposób holistyczny, przede wszystkim stawiając na zadowolenie Klienta. Jest zwolennikiem działań on-site oraz optymalizacji technicznej. Prywatnie fan piłki nożnej.