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
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/breadcrumbZalety 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.