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

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 stronę się na niej nie zgubił. Do wprowadzenia lepszej czytelności, nawet rozbudowanego portalu, stosuje się ścieżkę nawigacji metodą breadcrumbs.

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.

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

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.

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.

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:

W przypadku SEO jest to:

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. Przede wszystkim to rozwiązanie przynosi korzyści tylko w przypadku stron, które mają głęboką architekturę witryny. Oznacza to, że podzielona jest na wiele kategorii oraz podkategorii. Doskonałym przykładem tego typu strony są duże brandy e-commerce np. Allegro czy Zalando.

Breadcrumbs nie mają również racji bytu w przypadku witryn, których struktura jest jednopoziomowa, czyli gdy od strony głównej do pozostałych stron dzieli Cię tylko jedno kliknięcie. Wtedy „okruszki” są zbędne, ponieważ nie dadzą użytkownikowi żadnej wartości nawigacyjnej.

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:

WordPress to jeden z najpopularniejszych CMS-ów na świecie. W związku z tym przyjrzyjmy się, w jaki sposób dodać nawigację okruszkową właśnie w tym systemie zarządzania treścią. NIektóre motywy WordPressa obsługują breadcrumbsy zaraz po zaimplementowaniu. Jeśli jednak u Ciebie nie ma takiej możliwości, możesz użyć wtyczki Yoast SEO.

W panelu WordPressa przejdź do sekcji „Wtyczki”, a następnie „Dodaj nową”. Znajdź Yoast SEO i zainstaluj ją. Po zakończeniu pobierania i instalacji, wybierz opcję „Aktywuj”.

Przed wprowadzeniem breadcrumbs musisz dodać fragment kodu do sekcji pliku header,php w swoim motywie WordPressa. Wygląda on następująco:

Ten kod możesz również wpisać w sekcji single.php lub page.php nad tytułem strony.

W niektórych motywach kod można umieścić w plikach single.php lub page.php. Po jego dodaniu i aktualizacji pliku możesz przejść do ustawień Yoast SEO i włączyć obsługę breadcrumbs. Z poziomu wtyczki możesz kontrolować strukturę okruszków, separatory oraz znaczniki.

Na koniec pamiętaj, aby włączyć opcję „Włącz breadcrumbs dla swojego motywu”. Po wdrożeniu breadcrumbs możesz monitorować, czy wszystko jest w porządku za pomocą narzędzi np. Semrusha. Narzędzie do audytu witryny pozwalaj zidentyfikować oraz rozwiązać problemy z nawigacją okruszkową.

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

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.

Pamiętaj jednak o kilku ważnych zasadach. Breadcrumbs to dodatkowa funkcja nawigacyjna. Nie powinna więc zastępować głównego menu. Pomyśl o „okruszkach” jako alternatywnym sposobie, w jaki użytkownicy mogą poruszać się po Twojej witrynie. Zachowaj również prostotę projektu. Powinien być on prosty i dyskretny, aby był jednocześnie użyteczny, ale i nie odwracał uwagi czytelnika oraz faktycznej zawartości danej strony. Oczywiście możesz w nich umieścić również emoji. Ten mały element z pewnością będzie ciekawym urozmaiceniem.

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.