.animate-view{opacity: 1 !important;}

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

8min.

Komentarze:0

Breadcrumbs – co to jest i dlaczego jest ważne dla SEO?
09 października 2023
Breadcrumbs, po polsku “okruszki chleba”, czyli nawigacja okruszkowa to ścieżka strony internetowej umożliwiająca użytkownikowi łatwiejszą orientację. Breadcrumbs pokazują osobie na stronie, w którym miejscu się aktualnie znajduje, a także umożliwiają szybki powrót do poprzednio przeglądanych podstron. “Okruszki chleba” najczęściej zlokalizowane są poziomo na górze strony, którą odwiedzamy. Co ważne znajdują one zastosowanie jedynie w przypadku stron, które mają uporządkowaną hierarchię.

8min.

Komentarze:0

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

Breadcrumbs w wynikach wyszukiwania

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.

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

Breadcrumbs blok html

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

W przypadku SEO jest to:

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

Kiedy warto zastosować breadcrumbs?

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.

Złożona architektura strony
Źródło: https://www.semrush.com/blog/breadcrumbs-for-websites/

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.

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.

Okruszki chleba w serp

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:

Jak sprawdzić czy breadcrumbs są poprawnie zaimplementowane?

Jak wdrożyć breadcrumbs w WordPressie?

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

wdrożenie breadcrumbs w WordPressie
Źródło: https://www.semrush.com/blog/breadcrumbs-for-websites/

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.

wdrożenie breadcrumbs w WordPressie
Źródło: https://www.semrush.com/blog/breadcrumbs-for-websites/

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.

wdrożenie breadcrumbs w WordPressie
Źródło: https://www.semrush.com/blog/breadcrumbs-for-websites/

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

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.

Okruszki chleba i ich wpływ na SEO i 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.

emoji w breadcrumbs

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.

Mobilna nawigacja okruszkowa

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

Ten wpis jest aktualizacją treści z 28 maja 2020 roku.

Autor
Przemek Jaskierski SEO Delante
Autor
Przemek Jaskierski

Senior SEO Specialist

Doświadczenie zdobyte w e-commerce przekłada na pozycjonowanie. W 2014 roku rozpoczął swoją przygodę z marketingiem internetowym, która trwa po dzień dzisiejszy. Wolny czas spędza na siłowni, grając w planszówki oraz oglądając seriale.

Zostaw komentarz

FAQ

Breadcrumbs — co to jest?

„Okruszki chleba” w nawigacji na stronie, czyli breadcrumbs, to ścieżka umożliwiająca użytkownikowi łatwiejszą orientację na stronie internetowej. Pokazują, w którym miejscu się aktualnie znajduje użytkownik, a także pozwalają na szybki powrót do poprzednio przeglądanych podstron.

Czy breadcrumbs wpływa na SEO?

Zdecydowanie tak! Breadcumbs przede wszystkim wspomagają linkowanie wewnętrzne, dzięki czemu nie tylko użytkownicy, ale i roboty Google dobrze wiedzą, w jakim miejscu strony się znajdują. Dzięki temu struktura strony jest dla nich łatwiejsza do rozszyfrowania, lepiej wiedzą, które strony są ważniejsze w jej hierarchii. Breadcrumbsy ułatwiają też indeksowanie strony. Dodatkowo mogą one wyświetlić się w SERP co może wpłynąć na zwiększenie CTR. Innymi słowy, więcej osób kliknie wynik wyszukiwania w Google.

Jakie są rodzaje breadcrumbs?

Możemy wyróżnić trzy główne rodzaje breadcrumbs:

  • Oparte na lokalizacji – wskazują aktualne miejsce użytkownika.
  • Oparte na atrybucie – stosowane w sklepach internetowych, pomagają określić po zastosowaniu filtrów, gdzie znajduje się dany produkt.
  • Oparte na ścieżce – pokazują drogę, którą użytkownik przeszedł, aby dotrzeć do docelowej strony.

Uzyskaj bezpłatną wycenę

Nagrody

Nagroda - Deloitte 2021 Nagroda - IPMA Nagroda - US Search Awards 2021 Nagroda - European eCommerce Awards 2022 Nagroda - Global Agency Awards 2022 Nagroda - European Search Awards 2022

Porozmawiajmy o Twoim SEO i SEM