Breadcrumbs – co to jest i dlaczego jest ważne dla SEO?

Breadcrumbs, czyli ścieżka nawigacji

Metoda “okruszków chleba” ma na celu usprawnienie nawigacji na stronie. Polega na wstawieniu ścieżki przebytej przez użytkownika. Jest to jeden z elementów układu nawigacyjnego i wpływa w dużej mierze na użyteczność strony internetowej.  Strukturę nawigacji tej metody można porównać do przeglądania folderów w systemie operacyjnym. Każdy jeden folder zawiera w sobie podfolder, w którym są przechowywane kolejne. Otwierając je po kolei otrzymujemy właśnie ścieżkę, którą przebyliśmy. Ścieżkę nawigacji metodą “okruszków chleba: można przedstawić w następujący sposób:

Strona główna  → Kategoria → Podkategoria → Produkt

Dobrze zbudowany i przemyślany układ witryny pozwala na szybkie odnalezienie informacji przez użytkownika. Pojawianie się coraz bardziej rozbudowanych i złożonych stron internetowych musi pociągać za sobą usprawnienia w użyteczności, aby odwiedzający strone się na niej nie zgubił. Do wprowadzenia lepszej czytelności, nawet rozbudowanego portalu, stosuje się ścieżkę nawigacji metodą breadcrumbs.

Jak działają “okruszki chleba”?

Znaczniki breadcrumbs, znajdujące się w treści strony internetowej, pozwalają wyszukiwarce na łatwiejsze dopasowanie uzyskanych informacji z witryny do wyników wyszukiwania. Ten element układu nawigacyjnego umożliwia kliknięcie w każdy poziom poza adresem strony. Jednak należy pamiętać, że breadcrumbs nie będą wyświetlały dla każdego zapytania oraz wszystkich podstron serwisu. Wyszukiwarka internetowa sama dostosowuje wyświetlanie ścieżki nawigacyjnej do charakteru zapytania użytkownika.

Rodzaje breadcrumbs

Możemy wyróżnić trzy typy “okruszków chleba”:

• oparte na lokalizacji – najczęściej stosowany typ wskazujący aktualne miejsce, w którym jest użytkownik. Na poziomym pasku nawigacji przeglądający otrzymuje linki do stron i podstron mających wyższy poziom od strony, na której się aktualnie znajduje.
  
• oparte na atrybucie – typ używany w sklepach internetowych. Pokazuje się po zastosowaniu filtrów na stronie. Dziękie temu typowi breadcrumbs użytkownik może określić, w którym miejscu na stronie znajduje się dany produkt. Najłatwiej pokazać to na przykładzie strony z aukcjami samochodowymi.
  
• oparte na ścieżce – najrzadziej stosowany typ nawigacji na stronie. Pokazuje jaką drogę przebył użytkownik aby dotrzeć do docelowej strony. Ścieżka będzie zawierała linki do stron, które zostały już wcześniej odwiedzone. Ten typ nie jest popularny ponieważ powiela przyciski strzałek przewijania do przodu i do tyłu.

Ważne informacje na temat breadcrumbs

Przy wprowadzeniu ścieżki nawigacji warto pamiętać o kilku rzeczach. Podczas wyświetlania nawigacji okruszkowej użyj krótszych nazw dla ścieżki, zamiast długich nazw linków zawierających słowa kluczowe. Użytkownik może kliknąć w każdy poziom nawigacji za wyjątkiem adresu strony. Gdy ścieżka prowadząca do danej podstrony zawiera zbyt dużo zagłębień kategorii i będzie wykraczać poza wyznaczone miejsce wyświetlania, jej fragment zostanie zastąpiony w wyszukiwarce wielokropkiem.

Nawigacja okruszkowa i jej znaczenie dla SEO

Głównym zadaniem tego typu nawigacji jest pokazanie, które elementy na stronie następują po sobie. Ponadto każdy z nich jest klikalny przez użytkownika, dzięki czemu może on z łatwością poruszać się po stronie. To element, który pojawia się zarówno na stronie internetowej oraz w wynikach wyszukiwania.

Breadcrumbs wskazują słowa kluczowe, które opisują witrynę. Dzięki temu pomagamy wyszukiwarce na połączenie ze sobą różnych podstron w obrębie jednej strony internetowej. Umożliwia to także odnalezienie naszej strony przez użytkownika na wiele różnych typów zapytań.

Zastosowanie breadcrumbs jest świetnym narzędziem do linkowania wewnętrznego w obrębie witryny. Stosując ten rodzaj nawigacji wzmacniamy oraz ulepszamy strukturę linków witryny. Nawigacja okruszkowa może także przyczynić się do zmniejszenia współczynnika odrzuceń. Użytkownik trafiający do naszego sklepu na daną stronę produktu, w przypadku gdy oferta nie spełni jego oczekiwań może wykorzystać tę nawigację do zobaczenia także innych produktów w obrębie witryny zamiast powrotu do wyszukiwarki.

Separatory i znaczniki HTML w nawigacji okruszkowej

Najczęściej wykorzystywanymi i spotykanymi w wyszukiwarce znakami oddzielającymi linki są “>” lub “>>”.Zazwyczaj znaki te pokazują jak uporządkowana jest hierarchia na stronie. Korzystając z wtyczek do danego CMS’a możemy wykorzystać także różne graficzne separatory. Również wykorzystanie HTML’a to bardzo dobre źródło symboli, które można zastosować do urozmaicenia projektu strony internetowej.

Wybór odpowiedniego separatora powinien być podyktowany estetyką witryny oraz rodzajem używanego menu nawigacyjnego. Rozmiar znaku oddzielającego w ścieżce nawigacyjnej powinien być mniejszy lub mniej widoczny niż główne menu nawigacji. Jest to element pomocniczy dla użytkowników, dlatego też dobrze jeżeli nie będzie dominował na stronie. Dobrą zasadą przy tworzeniu ścieżki nawigacyjnej jest to, że nie powinna być ona pierwszym elementem, który rzuca się w oczy odwiedzającego witrynę. Przykładowe znaczniki jakie możemy wykorzystać tworząc breadcrumbs oraz ich działanie znajdziemy na stronie: https://schema.org/BreadcrumbList.

Co ważne nawet bez danych strukturalnych można łatwo wstawić breadcrumbs jako element wizualnego projektu poprzez zwykłe listowanie w HTML za pomocą <li>: https://developers.google.com/search/docs/data-types/breadcrumb

Zalety stosowania breadcrumbs dla użytkownika

• ułatwienie i przyspieszenie poruszania się po stronie internetowej,
• prawidłowe rozpoznawanie sekcji strony (strona główna>kategoria >podkategoria>produkt),
• przechodzenie pomiędzy sekcjami strony używając jednego kliknięcia,
• zwiększenie rozpoznawalności i utrwalenie nazwy brandu ( Nazwa strony>Kategoria>Podkategoria).

Zalety stosowania breadcrumbs dla SEO

• wspomaganie linkowania wewnętrznego w obrębie witryny,
• lepszy wpływ na optymalizację pod kątem SEO – Google definiuje breadcrumbs jako narzędzie wspomagające, które może mieć wpływ na pozycje podstrony,
• łatwiejsze odczytanie struktury strony,
• wyższa sprawność indeksowania strony internetowej.

Najczęstsze błędy podczas wprowadzenia nawigacji okruszkowej

Jednym z częstych błędów, popełnianych podczas wprowadzania breadcrumbs, jest brak określonej hierarchii na stronie. Ścieżka nawigacyjna powinna określać odpowiednią hierarchię witryny, a nie historię użytkownika. Również zdarza się, że zastosowanie nawigacji okruszkowej zastępuje główną nawigację. Nie jest to dobre rozwiązanie, ponieważ element ten ma być dobrym uzupełnieniem, najczęściej nie sprawdzi się prawidłowo występując samodzielnie. Breadcrumbs również nie powinno powielać przycisku wstecz w przeglądarce użytkownika. Wykorzystanie ścieżki nawigacji ma na celu przechodzenie pomiędzy ściśle powiązanymi ze sobą stronami, które zawierają więcej poziomów w danej kategorii.

Nie wszystkie witryny internetowe wymagają stosowania breadcrumbs, ponieważ zdarza się, że menu główne wraz z podstawową nawigacją zapewniają użytkownikowi opcje niezbędne do wskazania drogi.

Wykorzystanie breadcrumbs w danych strukturalnych

Dane strukturalne to specjalne znaczniki, które oznaczają różne typy treści zamieszczonej na naszej stronie internetowej. Wpływają na prawidłowe odczytanie i interpretację przez roboty Google, jaki rodzaj treści znajduje się w danym miejscu podstrony. Wiele elementów witryny można wskazać w formie danych strukturalnych za pomocą odpowiednich znaczników przy pomocy markera danych, który znajdziemy w Google Search Console np. ceny produktów, ich dostępność, oceny użytkowników. Wykorzystując to rozwiązanie algorytm nie musi przeanalizować całej strony w celu połączenia powiązanych elementów, tylko rozpozna je na podstawie wskazanych danych strukturalnych. Dlatego warto skupić się na słowniku mikrodanych schema.org, który jest interpretowany przez Google. Poniżej znajduje się przykład zastąpienia adresu podstrony przy wykorzystaniu “nawigacji okruszkowej”. Jest to także informacja o hierarchii danej podstrony.

Jednym z przydatnych narzędzi do sprawdzenia czy breadcrumbs zostały poprawnie wprowadzone na naszej witrynie jest: https://search.google.com/structured-data/testing-tool/u/0/?hl=pl. Poniżej przykład analizy strony forum.optymalizacja.com gdzie widać  jakie dane strukturalne zostały użyte:

Dlaczego warto stosować breadcrumbs?

Niewątpliwą zaletą breadcrumbs są małe wymagania. Jest to krótki tekst napisany zwykłą czcionką, dzięki czemu nie zajmuje dużo miejsca na stronie. Małej wielkości ścieżka nawigacyjna umożliwia stworzenie dodatkowego miejsca na treść. Nie ma także wpływu na spowolnienie komputera i przeglądarki użytkownika. Nawigacja okruszkowa może zostać wprowadzona niskimi kosztami i nakładem czasowym, a jest bardzo efektywnym narzędziem, które zachęca użytkownika do poruszania się po ważnych dla nas obszarach witryny. Dzięki czemu rośnie nam ilość odwiedzonych stron na jedną sesję użytkownika oraz zaangażowanie użytkowników – co zmniejsza nam bounce rate i daje do Google mocny sygnał, że dane podstrony są godne uwagi (i wyższych pozycji ;). Dlatego stosowanie breadcrumbs może w znacznym stopniu przyczynić się do poprawy efektywności działań SEO i zdecydowanie wpływać na konwersję.

Breadcrumbs a SEO i UX

Wykorzystanie breadcrumbs na stronie internetowej nie tylko ułatwia odwiedzającemu poruszanie się po stronie, ale także pomaga w tworzeniu pozytywnych wrażeń użytkowników (UX), którzy pojawiają się po raz pierwszy. Ścieżka nawigacji zachęca do odkrywania nowych obszarów witryny, a w przypadku orientacji pomagają odnaleźć drogę powrotną. Jest to element nie tylko popularny wśród użytkowników, ale i wyszukiwarka Google go docenia. Google definiuje “nawigacje okruszkową” jako jeden z elementów, który może wpłynąć na poprawę pozycji witryny internetowej. Dla niektórych zapytań (np. przepisów) Google dodało strony zawierające breadcrumbs wraz z obrazami na górę w wynikach wyszukiwania. Może mieć to związek z rozwojem mobilnych wersji stron internetowych. Należy pamiętać, że podstawową funkcją breadcrumbs jest poprawa UX.

Breadcrumbs dla urządzeń mobilnych

Mobilna wersja strony internetowej powinna być zaprojektowana, aby użytkownik odnalazł na niej szybko potrzebne informacje. Może być tak, że strona posiada za dużo funkcji i jest zbyt skomplikowana dla użytkownika. Rozwiązaniem problemu będzie usprawnienie złożoności, tak aby breadcrumbs nie były potrzebne lub ograniczyły się do jednego linku z powrotem. Często jednak witryny mobilne korzystają z wyświetlania małej ścieżki nawigacyjnej gdy główny pasek jest ukryty.

Ścieżka nawigacji na twojej stronie jest elementem, który zapewni odwiedzającym łatwe poruszanie się po witrynie. Pozwala użytkownikowi na zrozumienie struktury strony. Mając te rzeczy na uwadze wprowadzenie breadcrumbs zapewni pozytywny komfort korzystania ze strony internetowej w celu zmniejszenia współczynnika odrzuceń oraz wydłużeniu czasu spędzonego przez użytkownika na stronie.