Co to są breadcrumbs i dlaczego warto je mieć na stronie?

Breadcrumbs to tak zwane “okruszki chleba”, czyli nawigacja okruszkowa czy też menu nawigacyjne. Wskazuje naszą aktualną lokalizację w serwisie www lub sklepie internetowym. Jest to ścieżka strony internetowej umożliwiająca użytkownikowi łatwiejszą orientację.

Czym są breadcrumbs i jak działają?

Breadcrumbs pokazują użytkownikowi nie tylko to, w którym miejscu aktualnie znajduje się na stronie, ale również umożliwiają szybki powrót do poprzednio przeglądanych podstron. W większości przypadków zlokalizowane są poziomo na górze strony. Menu nawigacyjne działa zazwyczaj w formie odnośników ułożonych zgodnie z hierarchią podstron w serwisie www lub sklepie internetowym. W sklepie online możemy szybko wrócić z karty produktu do kategorii nadrzędnej lub podkategorii, w której odnośnik jest zawarty. Z kolei po przeczytaniu artykułu umieszczonego w portalu internetowym, dzięki breadcrumbs sprawnie powrócimy do poprzedniego działu w serwisie.

Przykład ścieżki breadcrumbs w praktyce

Aby lepiej zrozumieć działanie breadcrumbs, warto zobaczyć je w praktyce. Przykładowa ścieżka w sklepie internetowym może wyglądać tak: Strona główna > Elektronika > Laptopy > Laptop Lenovo IdeaPad 5. Dzięki temu użytkownik w każdej chwili może wrócić do kategorii nadrzędnej, np. „Laptopy”, lub nawet do strony głównej, bez konieczności używania przycisku „wstecz”.

Rodzaje breadcrumbs

Rozróżniamy trzy główne rodzaje breadcrumbs:   

Breadcrumbs oparte na lokalizacji

Ten rodzaj występuje najczęściej. Widoczny jest w większości serwisów internetowych, gdzie wskazuje aktualne miejsce, w którym znajduje się użytkownik. Na poziomym menu nawigacji przeglądający ma do wyboru linki do kolejnych elementów serwisu, czyli do stron i podstron mających wyższą hierarchię od strony, na której znajduje się aktualnie.

źródło: money.pl

Okruszki chleba oparte na atrybucie

W przypadku sklepów internetowych czy serwisów ogłoszeniowych menu nawigacyjne opiera się bardzo często na atrybucie. Widać je zazwyczaj po zastosowaniu filtrów na danej podstronie. Dzięki temu rodzajowi breadcrumbs użytkownik widzi, w którym dokładnie miejscu w sklepie online znajduje się oglądany przez niego produkt. Dobrze widać to np. na Allegro.

źródło: allegro.pl

Nawigacja okruszkowa oparta na ścieżce

Breadcrumbs oparte na ścieżce są stosowane jako typ nawigacji w serwisach www. Pokazują, jaką drogę przez stronę przebył użytkownik, aby dotrzeć do aktualnego miejsca. Taka ścieżka zawiera linki do podstron, które zostały już wcześniej odwiedzone. Ten rodzaj breadcrumbs rozpoznamy po strzałkach do przodu i do tyłu widocznych w menu strony.

Breadcrumbs a współczynnik odrzuceń – jaki mają związek?

Odpowiednio wdrożona nawigacja okruszkowa może przyczynić się do obniżenia współczynnika odrzuceń (bounce rate). Dzieje się tak, ponieważ użytkownik, który nie znajdzie na danej podstronie tego, czego szukał, może szybko przejść do kategorii nadrzędnej lub innej interesującej sekcji, zamiast opuścić stronę. 

W efekcie breadcrumbs zwiększają szansę na dalsze eksplorowanie witryny, co przekłada się na dłuższy czas spędzony na stronie i lepszą efektywność pod kątem konwersji.

Zalety stosowania breadcrumbs z punktu widzenia użytkownika

Menu nawigacyjne pozwala użytkownikowi prawidłowo rozpoznać sekcję strony, na której się znajduje. “Okruszki” wskazują, czy jest to strona główna, kategoria, podkategoria czy może karta produktu. Breadcrumbs ułatwiają przechodzenie pomiędzy poszczególnymi sekcjami serwisu lub sklepu online – wystarczy jedno kliknięcie.

Przeczytaj również: Dane strukturalne – czym są structural data i jaki mają wpływ na SEO?

Nawigacja okruszkowa – zalety stosowania z punktu widzenia SEO

Główną zaletą dla SEO jest poprawienie linkowania wewnętrznego, jak również usprawnienie indeksowania poszczególnych adresów URL w serwisie www lub sklepie internetowym. Menu nawigacyjne pomaga poruszać się po serwisie nie tylko użytkownikom, ale również botom (Googlebot).

Najczęstsze błędy podczas wprowadzenia nawigacji okruszkowej

Pamiętajmy, że nie wszystkie serwisy internetowe potrzebują stosowania breadcrumbs. Często już samo menu główne wraz z rozbudowanym drzewem kategorii pomaga użytkownikowi odnaleźć się w serwisie www.

Jeśli jednak zdecydujemy się na wprowadzenie nawigacji okruszkowej, to warto wystrzegać się kilku dość powszechnych błędów. 

• Brak określonej hierarchii na stronie. Menu nawigacyjne powinno przedstawiać odpowiednio dopasowane hierarchię struktury linków wewnątrz witryny opartej na takich CMS-ach jak WordPress.
• Zastąpienie menu głównego przez breadcrumbs. Takie rozwiązanie jest niekorzystne zarówno dla użytkownika jak i dla optymalizacji serwisu pod kątem SEO. Breadcrumbs mają być uzupełnieniem głównego menu, a nie jego substytutem.
• Powielenie przycisków “do przodu” i “wstecz”. Wykorzystanie breadcrumbs ma ułatwić przechodzenie pomiędzy ściśle powiązanymi ze sobą działami, podkategoriami czy podstronami, które zawierają więcej poziomów w danej kategorii. Buttony “do przodu” i “wstecz”, które są powielone przecież w przeglądarce, sprawią, że użytkownik cofnie się zbyt głęboko lub przejdzie za daleko do przodu. 

Wykorzystanie breadcrumbs w danych strukturalnych

Dane strukturalne, czyli dane uporządkowane (z ang. structural data i ich rozszerzenie tzw. rich snippets), to specjalne znaczniki zamieszczane w serwisach internetowych. Służą one głównie do opisania zawartości witryn i sklepów w formie zrozumiałej dla robotów wyszukiwarek. Dzięki wykorzystaniu danych strukturalnych, boty rozpoznają w dokładny sposób rodzaj treści znajdujących się w określonej części serwisu. W najbardziej popularnej wyszukiwarce Google, dane uporządkowane umożliwiają wyświetlanie w bezpłatnych wynikach wyszukiwania dodatkowych informacji pod postacią tzw. rich snippets (opisów rozszerzonych), a także knowledge graph, czyli grafów wiedzy. 

Dane strukturalne mogą zostać zamieszczone na stronie za pomocą jednego z następujących formatów: 

• mikrodane (schema.org), 
• mikroformaty (hCard), 
• JSON-LD 
• RDFa 

Każdy z wyżej przedstawionych standardów posiada własny zestaw i strukturę znaczników. Ich wdrożenie – niezależnie od użytego formatu – nie wpływa na wygląd serwisu wyświetlanego w przeglądarce internetowej. 

Dane uporządkowane można oznaczyć w narzędziu Google Search Console za pomocą specjalnego markera danych.

Sprawdź również: Jak zaprojektować skuteczną nawigację strony?

Dzięki takiemu rozwiązaniu możemy breadcrumbs website oznaczyć w danych strukturalnych swojej strony czy sklepu internetowego. Algorytm Google nie musi wówczas analizować całej struktury strony aby połączyć powiązane ze sobą elementy. Wówczas przechodzi on tylko na wskazane dane strukturalne. Wykorzystując takie rozwiązanie, w pierwszej kolejności warto skupić się na mikrodanych schema.org, które są interpretowane przez Google Search Console i są jednym z podstawowych elementów optymalizacji pod kątem SEO.

Korzyści z breadcrumbs

Breadcrumbs wspierają różne grupy użytkowników w odmienny sposób:

• Nowi użytkownicy szybciej zorientują się w strukturze strony i łatwiej odnajdą interesujące ich treści.
• Powracający użytkownicy mogą sprawnie przeskakiwać między kategoriami, skracając czas poszukiwań.
• Klienci sklepów internetowych szybciej wracają do listy produktów, co zwiększa szanse na zakup.
• Odbiorcy korzystający z urządzeń mobilnych zyskują prostszy sposób nawigacji, zwłaszcza tam, gdzie główne menu jest ukryte.

W skrócie: breadcrumbs zwiększają przejrzystość serwisu, poprawiają doświadczenie użytkownika (UX), wspierają SEO i redukują ryzyko przedwczesnego opuszczenia strony.

Breadcrumbs – popraw UX oraz optymalizację SEO strony

Struktura breadcrumbs powinna być zgodna zasadą „od ogółu do szczegółu”. Hierarchię należy ustalić więc tak, by kierowała użytkownika od najbardziej ogólnych podstron do szczegółowych informacji na dany temat. W przypadku sklepu internetowego będzie to zatem ścieżka prowadząca od strony głównej po najważniejsze kategorie i podkategorie, aż do poszczególnych produktów.

Pod względem użyteczności serwisu dla użytkownika, breadcrumbs pomagają przede wszystkim w poruszaniu się osobom, które odwiedzają go po raz pierwszy. Co więcej, tworzy też dobre wrażenie na potencjalnym kliencie e-sklepu lub czytelniku serwisu blogowego szukającym konkretnych informacji. 

Nawigacja okruszkowa zachęca do odkrywania nowych obszarów witryny. Warto także stosować breadcrumbs z myślą o odwiedzających serwis lub sklep za pośrednictwem urządzeń mobilnych. W tym przypadku często nie mogą oni skorzystać z głównego drzewa kategorii, zatem breadcrumbs będą zdecydowanie bardziej praktycznym rozwiązaniem, dzięki któremu odnajdą to, czego szukają. 

źródło: onet.pl

Niektóre strony posiadają zbyt dużo funkcji, filtrów lub kategorii i są zbyt skomplikowane dla użytkownika, który pierwszy raz odwiedza witrynę. Rozwiązaniem problemu będzie wdrożenie breadcrumbs tak, aby ograniczyły się do jednego linku czy jednego kliknięcia na smartfonie. W przypadku wersji mobilnej serwisu dobrze jest mieć na uwadze fakt, że podstawową funkcją nawigacji okruszkowej będzie poprawa UX oraz optymalizacja SEO pod roboty wyszukiwarek.

Jeśli zainteresował Cię ten temat, sprawdź również: Na czym polega pozycjonowanie bloga?

FAQ – najczęściej zadawane pytania o breadcrumbs

1. Czy breadcrumbs powinny pojawiać się na każdej podstronie serwisu?

Nie zawsze. Breadcrumbs są szczególnie przydatne w serwisach z rozbudowaną strukturą (np. sklepy internetowe, portale informacyjne). W przypadku prostych stron typu one-page mogą być zbędne.

2. Czy breadcrumbs są widoczne tylko dla użytkowników, czy także dla Google?

Breadcrumbs mają zastosowanie zarówno dla użytkowników, jak i robotów Google. Dzięki danym strukturalnym mogą być prezentowane w wynikach wyszukiwania jako dodatkowa ścieżka nawigacyjna.

3. Czy można stosować więcej niż jeden typ breadcrumbs na stronie?

Zazwyczaj stosuje się jeden typ breadcrumbs (najczęściej oparty na lokalizacji), ale w rozbudowanych systemach można łączyć np. lokalizacyjne i atrybutowe – ważne, by były logiczne i czytelne.

4. Czy breadcrumbs wpływają na pozycję strony w wynikach wyszukiwania?

Same w sobie nie podnoszą pozycji, ale poprawiają strukturę serwisu, ułatwiają indeksację i zwiększają użyteczność, co pośrednio może wpływać na SEO.

5. Czy breadcrumbs mogą zastąpić inne elementy nawigacji?

Nie. Breadcrumbs nie zastępują menu głównego ani wyszukiwarki. Ich rola polega na wskazywaniu hierarchii i lokalizacji, a nie pełnej eksploracji treści.