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

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

Breadcrumbs, czyli tak zwane “okruszki chleba”, 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ę.

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 wyszukiwaniaDobrze 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.
    Breadcrumbs oparte na lokalizacji
  • 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.
    Breadcrumbs oparte na atrybucie
  • 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).

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.

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?

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

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.

FAQ

Zdecydowanie tak! Breadcumbs przede wszystkim wspomagają linkowanie wewnętrzne, dzięku 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. Dodatokowo mogą one wyświetlić się w SERP co może wpłynąć na zwiększenie CTR. Innymi słowy więcej osób kliknie w wynik wyszukiwania w Google.

Na każdej jest to technicznie możliwe, ale nie dla każdej ma to sens. Jeśli Twoja strona jest mała, nie ma katalogów i nie zagłęba się później w produkty lub w ogóle jest one-pagem  – pewnie nie ma sensu. Na każdej stronie która ma złożoną architekturę warto zastosować breadcrumbs. Ważne jest to, aby strona miała jasno określoną strukturę. Najczęstszym błędem przy wdrażaniu breadcrumbsów jest właśnie brak zorganizowanej struktury na stronie.

Zobaczysz to przede wszystkim na Twojej stronie. Sprawdź czy nawigacja dobrze działa, czy breadcrumbsy są dobrze widoczne i prowadzą do właściwych podstron. Aby sprawdzić czy roboty Google dobrze interpretują breadcrumbsy na Twojej stronie użyj narzędzie do testowania danych strukturalnych od Google.

Jeśli nie wiesz jak zaimplementować breadcrumbsy napisz do nas.

(11)
Autor
SEO Specialist - Przemek

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.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ostatnio na naszym blogu

Jesteś ciekawy, jak wygląda pozycjonowanie sklepów internetowych, a może chcesz wejść na rynek szwajcarski i ciekawi Cię, jak wygląda pozycjonowanie zagraniczne? Na naszym blogu znajdziesz odpowiedzi na te pytania i wiele innych porad ważnych dla rozwoju Twojego biznesu

GPT-4 - rewolucja dla Chatu GPT?

GPT-4 - rewolucja dla Chatu GPT?

Wczoraj, 14 marca 2023, OpenAI wypuściło na światło dzienne GPT-4, czyli kolejną iterację ich modelu językowego, na bazie którego działa bijący rekordy popularności ChatGPT. Czy ChatGPT będzie teraz znacznie mądrzejszy?

Czytaj więcej
Jak równolegle poprawiamy SEO i dostępność stron internetowych naszych klientów?

Jak równolegle poprawiamy SEO i dostępność stron internetowych naszych klientów?

Co gdybym Ci powiedział, że 32%* spośród użytkowników odwiedzających Twoją stronę – czyli w zasadzie co trzecia osoba – nie może się po niej poruszać? Jedna na trzy osoby nie może przeczytać dostępnych treści. Co trzecia osoba ma problem z wykonaniem działań, których oczekujesz. Co trzecia osoba opuszcza Twoją witrynę, ponieważ nie może nacisnąć żadnego przycisku.

Czytaj więcej