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, 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, 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.