Czym jest nawigacja okruszkowa (breadcrumbs) i jak wpływa na SEO i UX?

Na stronie internetowej niczym w labiryncie – bez odpowiedniej nawigacji łatwo się zgubić. Niektórzy deweloperzy niczym Ariadna oferują nam nić, po której możemy wydostać się do upragnionego punktu wyjścia. Ratunkiem może być zarówno kategoria, podkategoria jak i strona główna odwiedzanej witryny. I choć nazwa „breadcrumbs” nawiązuje bardziej do baśni o Jasiu i Małgosi, którzy używali owych okruszków chleba w celu odnalezienia drogi powrotnej, tak zasada w obydwu przypadkach jest taka sama. Nie ważne więc czy jesteśmy Tezeuszem, czy bajkowym duetem – breadcrumbs prezentują nam ścieżkę od strony głównej do aktualnie przeglądanej podstrony, co pozwala na powrót do wyższego poziomu hierarchii w każdym dogodnym momencie.

Breadcrumbs – co to jest i jak działa?

Nawigacja okruszkowa jest stosunkowo starym elementem UI¹. Znana jest dobrze zarówno ze sprzętu działającego na systemie Windows, jak i MacOS. To nic innego jak „mapa drogowa” pokazująca trasę, dzięki której użytkownik dotarł do punktu, w którym się znajduje.

Na witrynach internetowych działa to analogicznie do odpowiednika offline. Każdy element breadcrumbs jest hiperłączem, które prowadzi użytkownika do wybranej sekcji, bez potrzeby wielokrotnego używania przycisku „wstecz” w przeglądarce. Jest to niejako odpowiednik naturalnego sposobu myślenia o złożonych witrynach. Zamiast postrzegać serwis jako zbiór niepowiązanych ze sobą stron, internauci widzą go jako hierarchicznie zorganizowaną sieć.

Rodzaje nawigacji okruszkowej

Droga okruszkowa może przybierać różne formy w zależności od rodzaju serwisu i potrzeb użytkowników. Każdy typ breadcrumbs pełni zasadniczo tę samą funkcję – pomaga poruszać się po stronie. Ich dokładny sposób działania może się jednak różnić.

Location-based breadcrumbs

Ten rodzaj okruszków jest zdecydowanie najczęściej stosowany. Breadcrumbs oparte na lokalizacji prezentują ścieżkę użytkownika według hierarchicznej struktury serwisu. Odzwierciedlają układ kategorii i podkategorii, pokazując użytkownikowi, gdzie znajduje się w całej sieci. Ułatwiają one szybki powrót do wcześniejszych podstron, co niezwykle przydatne staje się np. w przypadku sklepów internetowych z rozbudowaną strukturą kategorii i produktów. Breadcrumbs lokalizacyjne będą prezentować się w następujący sposób:

Strona główna > Produkty > Środki ochrony roślin

Attribute-based breadcrumbs

Kolejny rodzaj okruszków prezentuje zestaw atrybutów obrazujących wybory, jakich dokonał użytkownik. Są one szczególnie przydatne w przypadku, gdy konsumenci filtrują produkty według określonych cech, takich jak kolor, rozmiar, marka czy przedział cenowy. Nie zawsze pokazują one ścieżkę w hierarchii, ale wskazują cały zestaw atrybutów opisujących produkty. Pozwalają także modyfikować pewne parametry filtrów bez konieczności rozpoczynania od początku. Przykładem będzie:

Strona główna > Odzież > Sukienki > Kolor: Czerwony > Rozmiar: M

Path-based breadcrumbs

Breadcrumbs ścieżkowe to typ nawigacji oparty na faktycznej drodze użytkownika, jaką przebył w obrębie witryny, uwzględniając każdą podstronę, na którą wszedł, zanim dotarł do punktu finalnego. Ten rodzaj nie bierze pod uwagę hierarchii serwisu, a jedynie kolejność odwiedzanych stron. Odzwierciedlają one unikalną podróż internauty, i choć mogą być mylące w serwisach z dużą liczbą podstron, tak dobrze sprawdzają się w przypadku danej witryny, gdzie nietypowa kolejność przeglądania jest ważna. Mogą więc wyglądać następująco:

Strona główna > Oferty specjalne > Elektronika > Smartfony > Smartfon XYZ

Porównanie rodzajów breadcrumbs

Typ breadcrumbs	Odzwierciedlona struktura witryny?	Historia przeglądania?	Zastosowania główne
Lokalizacyjne	Tak	Nie	Nawigacja hierarchiczna
Atrybutowe	Nie	Częściowo	Filtrowanie produktów
Ścieżkowe	Nie	Tak	Nawigacja historyczna

Breadcrumbs a SEO – czy Google to widzi?

SEO to nie tylko słowa kluczowe. Odpowiednie zastosowanie breadcrumbs również pozwala poprawić widoczność witryny w wynikach wyszukiwania. Przejrzysta struktura to cecha, dzięki której algorytmom łatwiej zrozumieć zasady działania strony, co wpływa pośrednio na poprawę jej pozycji.

Udoskonalenie linkowania wewnętrznego i optymalizacja indeksacji

Oprócz faktu, iż breadcrumbs realnie wpływa na komfort korzystania z witryny, to ich odpowiednia implementacja jest dodatkowo sposobem na tworzenie strukturalnego linkowania wewnętrznego, które łączy poszczególne podstrony w logiczną sieć. Taka praktyka to ważny dla SEO proces, dzięki któremu polepsza się pozycja serwisu w wyszukiwarce. Odpowiedni system ułatwia robotom Google indeksowanie serwisu – okruszki tworzą sieć powiązanych linków, które pozwalają botom łatwo przemieszczać się między stronami, w rezultacie czego zrozumieć także ich powiązania. Nie jest tajemnicą, że wyszukiwarki preferują witryny z dobrze zorganizowaną hierarchią. Co więcej, dzięki zastosowaniu znaczników strukturalnych² breadcrumbs mogą być lepiej interpretowane przez wyszukiwarki, co sprawi, że w miejsce tradycyjnego URL zacznie wyświetlać się ścieżka nawigacyjna, co zwiększa potencjalną klikalność strony (CTR).

Obniżenie współczynnika odrzuceń

Breadcrumbs i SEO mają ze sobą więcej wspólnego, niż mogłoby się wydawać na pierwszy rzut oka. Okruszki wpływają także na zmniejszenie współczynnika odrzuceń (bounce rate), czyli liczby użytkowników opuszczających serwis bez podjęcia jakiejkolwiek interakcji. Jeśli internauta nie znalazł odpowiedzi na swoje zapytanie, to dzięki owej nawigacji może przejść do innych podstron (kategorii czy podkategorii), które bardziej odpowiadają jego potrzebom. Zmniejszony współczynnik odrzuceń i zwiększony czas przebywania na stronie to dwie statystyki, które realnie wpływają na wyniki oraz pozycjonowanie naszego serwisu.

SEO i breadcrumbs to więc bardzo dopasowani partnerzy. Przy poprawnej optymalizacji obydwóch czynników, roboty Google mogą lepiej zrozumieć strukturę strony, co wpływa na efektywność indeksowania i pozycje w wynikach wyszukiwania. Okruszki to więc przyjemna nawigacja z pożytecznym skutkiem.

Znaczenie nawigacji okruszkowej dla UX

Oprócz realnego wpływu na SEO, breadcrumbs poprawia także UX³, czyli doświadczenia użytkownika przebywającego na stronie. Dzięki odpowiedniej implementacji okruszków internauta może łatwiej poruszać się w obrębie serwisu. Użytkownik zawsze ma pod ręką „mapę drogową”, która zmniejsza jego frustrację i zniechęcenie, szczególnie na stronach o skomplikowanej strukturze. Dzięki breadcrumbs osoba odwiedzająca witrynę praktycznie nie musi korzystać z przycisku „wstecz”. Im prostsza obsługa strony – tym lepiej dla użytkownika. Dużym plusem okruszków jest także to, że oferują funkcjonalność pożądaną przez użytkowników urządzeń mobilnych. Łatwy dostęp do innych produktów z kategorii to brak potrzeby korzystania z rozwijanego menu, które źle zoptymalizowanie, potrafi być irytujące.

Jak wdrożyć breadcrumbs na stronie internetowej?

Wdrażanie okruszków jest obarczone pewnym ryzykiem błędu. To techniczna implementacja, która powinna być odpowiednio zakodowana w źródłowych plikach strony. Jedną z najważniejszych czynności, jaką trzeba wykonać przed samym wprowadzeniem systemu, jest zrozumienie całej struktury witryny. Należy ustalić, jakie sekcje, kategorie i podkategorie tworzą stronę i w jaki sposób się ze sobą łączą. Następnie warto pochylić się nad dostosowaniem odpowiedniego rodzaju nawigacji okruszkowej do celu, jaki ma pełnić.

Implementacja techniczna

Breadcrumbs można zaimplementować w kodzie HTML strony jako listę uporządkowaną (<ol>), która zawiera odnośniki (<a>) prowadzące do poszczególnych sekcji witryny. Ponadto, aby wdrożyć breadcrumbs w sposób pozwalający robotom Google odpowiednio rozpoznać system i zaimplementować go w wynikach wyszukiwania należy wzbogacić kod o znaczniki schema.org. Pozwalają one algorytmom lepiej zrozumieć strukturę okruszków. Po dodaniu znaczników warto przetestować ich działanie np. za pośrednictwem strony dostarczanej przez samego Google.

Wdrożenie breadcrumbs w systemach CMS

Wiele systemów zarządzania treścią (ang. content management system, CMS) oferuje możliwość instalowania pluginów – w tym takich, które odpowiedzialne są za implementacje breadcrumbs. Dobrze sprawdzą się:

• Yoast SEO
• Breadcrumb NavXT
• Elementor

Owe narzędzia automatyzują proces wdrażania breadcrumbs, ale także pozwalają w jakimś stopniu spersonalizować ich wygląd i funkcjonalność na potrzeby strony. Umożliwiają wprowadzenie menu okruszkowego bez konieczności posiadania jakiejkolwiek wiedzy programistycznej – wszystko, co trzeba wiedzieć, znajduje się w instrukcjach.

Najlepsze praktyki implementacji breadcrumbs

Nawet najbardziej przydatne elementy UI i UX mogą stać się bezużyteczne jeśli nie zostaną wprowadzone poprawnie – tak samo jest w przypadku breadcrumbs. Co to dokładnie znaczy? Aby implementacja się udała i była dobrze odbierana przez użytkowników, warto trzymać się pewnych zasad:

• Jasna separacja elementów – wizualne znaki w postaci „>” lub „/” rozdzielają poszczególne podstrony i poprawiają klarowność sekcji.
• Widoczność – breadcrumbs powinny być umieszczane na górze strony, najlepiej zaraz nad głównym nagłówkiem (H1).
• Dostosowanie do urządzeń mobilnych – pamiętajmy o użytkownikach smartfonów. Breadcrumbs muszą być czytelne i klikalne na mniejszych ekranach.

Okruszki chleba to jednak nie bułka z masłem. Użyteczność dodatkowego narzędzia nawigacyjnego jest niezaprzeczalna, ale warto więc mieć na uwadzę najlepsze praktyki jego wdrażania.

Najczęstsze błędy w implementacji menu okruszkowego

Mimo że breadcrumbs z zewnątrz to dość proste menu nawigacyjne, jego niewłaściwe wdrożenie może skutkować zarówno złym feedbackiem od użytkowników, jak i zupełnym niewykrywaniem okruszków przez roboty Google. Co może być więc problematyczne?

• Brak logicznej struktury – niespójności pomiędzy elementami hierarchii a faktyczną strukturą witryny często wprowadzają użytkownika w błąd.

Unikaj	Strona główna > Promocje > Produkty tygodnia > Artykuły promocyjne > Produkt
Stosuj	Strona główna > Promocje tygodnia > Produkt

• Zbyt długa ścieżka – stosowanie breadcrumbs o zbyt wielu poziomach mogą być nieczytelnie i przytłaczające.

Unikaj	Strona Główna > Elektronika > Telefony > Smartfony > Smartfony z systemem XYZ > Marka > Marka seria 1 > Marka seria 1 model > Marka seria 1 model 128 GB
Stosuj	Strona Główna > Smartfony > Marka seria 1 > Marka seria 1 model 128 GB

• Brak danych strukturalnych – nawet jeśli nawigacja jest widoczna dla użytkownika, nie znaczy to, że jest ona odpowiednio zaimplementowana dla robotów Google. Powierz to zadanie specjaliście lub dokładnie zapoznaj się ze szczegółową dokumentacją techniczną.
• Nieklikalne elementy – brak możliwości szybkiego przejścia do innych podstron. Nawigacja okruszkowa traci w tym przypadku fundament swojej funkcjonalności.

Warto więc stale testować wprowadzane na stronie zmiany. Ciągłe doskonalenie i optymalizacja zwiększą atrakcyjność witryny i poprawią doświadczenia użytkowników. Dobrze jest więc mieć świadomość, jakich błędów unikać przede wszystkim, aby zapewnić internautom odpowiednią funkcjonalność.

Małe okruszki, wielka różnica

Breadcrumbs to mały, ale potężny element witryny, który niekiedy jest niestety przez deweloperów pomijany. Dzięki nim strona zyskuje na intuicyjności, jest bardziej uporządkowana i przede wszystkim lepiej zoptymalizowana pod względem SEO. Wdrożenie tego rozwiązania to proste korzyści zarówno dla właścicieli serwisów, jak i użytkowników – szczególnie jeśli strona jest np. dość rozbudowaną witryną e-commerce, gdzie owy element faktycznie może przyczynić się do konwersji. Aby odpowiednio wdrożyć rozwiązania, warto zasięgnąć porady specjalisty lub zgłosić się do agencji marketingowej, która zajmie się wprowadzeniem breadcrumbs, ale także zoptymalizuje resztę treści zarówno pod kątem SEO, jak i UX.

FAQ

Czy breadcrumbs dobrze sprawdzą się w każdym przypadku?

Zdecydowanie nie, na witrynach składających się z tylko jednej strony (tzw. single-page), nawigacja okruszkowa nie ma sensu.

Czy warto stosować taką nawigację na blogach

Tak, szczególnie na takich z dużą liczbą kategorii i podkategorii, aby ułatwić użytkownikom korzystanie ze strony.

Czy do zaimplementowania breadcrumbs potrzebna jest pomoc programisty?

Wdrażanie nawigacji okruszkowej jest znacznie łatwiejsze w przypadku instalacji wtyczki (np. Yoast SEO) do CMS (np. WordPress). Sprawa komplikuje się, gdy próbujemy zaimplementować rozwiązanie bezpośrednio w kodzie strony – w tym przypadku zachęcamy do kontaktu z ekspertem.

Czy można wdrożyć breadcrumbs bez użycia znaczników schema.org?Tak, aczkolwiek nie wpłyną wtedy na lepsze pozycjonowanie strony w wyszukiwarce.

Tak, aczkolwiek nie wpłyną wtedy na lepsze pozycjonowanie strony w wyszukiwarce.

Czy breadcrumbs są widoczne w wynikach wyszukiwania Google?

Tak, poprawnie wdrożone zastępują standardowy URL.

• ¹User Interface
• ²Element kodu, który wykorzystuje standardy opisowe do dostarczania dodatkowych informacji o treści strony internetowej w sposób zrozumiały dla wyszukiwarek i robotów indeksujących.
• ³User Experience