Co to jest breadcrumb i jak okruszki chleba wpływają na UX i SEO?

Breadcrumb to dodatkowy element nawigacji pokazujący użytkownikowi jego aktualne położenie w strukturze strony internetowej.

Najczęściej ma formę krótkiej ścieżki znajdującej się nad właściwą treścią strony, na przykład:

Strona główna → Sklep → Obuwie → Buty trekkingowe

Każdy wcześniejszy element ścieżki może być linkiem prowadzącym do nadrzędnej części serwisu.

Dzięki temu użytkownik nie musi wracać do menu głównego ani korzystać z przycisku Wstecz w przeglądarce, żeby przejść o poziom wyżej.

Breadcrumb jest szczególnie użyteczny w rozbudowanych stronach, sklepach internetowych, portalach, dokumentacjach oraz serwisach posiadających wielopoziomową hierarchię kategorii.

Co oznacza breadcrumb?

Słowo breadcrumb oznacza dosłownie okruszek chleba.

Nazwa nawiązuje do motywu pozostawiania za sobą śladu pozwalającego odnaleźć drogę powrotną.

W świecie stron internetowych breadcrumb pełni podobną funkcję.

Pokazuje użytkownikowi, w którym miejscu struktury serwisu się znajduje i jakie poziomy prowadziły do aktualnej strony.

Dlatego w języku polskim można spotkać określenia:

• okruszki chleba,
• ścieżka nawigacyjna,
• nawigacja okruszkowa,
• breadcrumb navigation.

W praktyce najczęściej używane jest po prostu angielskie określenie breadcrumb.

Jak działa breadcrumb?

Breadcrumb odwzorowuje określoną relację pomiędzy aktualną stroną a jej nadrzędnymi elementami.

Jeżeli użytkownik znajduje się na karcie produktu, ścieżka może prowadzić od strony głównej przez sklep i kategorię aż do konkretnego produktu.

Przykładowo:

Strona główna → Sklep → Elektronika → Słuchawki → Słuchawki bezprzewodowe XYZ

Jeżeli użytkownik chce zobaczyć inne słuchawki, może kliknąć poziom Słuchawki zamiast rozpoczynać nawigację od początku.

To szczególnie ważne wtedy, gdy użytkownik trafił na stronę bezpośrednio z Google.

Nie widział wtedy strony głównej ani menu kategorii po drodze.

Breadcrumb natychmiast pokazuje mu kontekst.

Breadcrumb nie zastępuje głównego menu

Breadcrumb powinien być traktowany jako nawigacja pomocnicza.

Nie zastępuje głównego menu, wyszukiwarki ani innych podstawowych elementów nawigacyjnych.

Menu odpowiada przede wszystkim na pytanie:

Dokąd mogę przejść?

Breadcrumb odpowiada natomiast głównie na pytanie:

Gdzie jestem?

Oba mechanizmy mogą więc funkcjonować równolegle i rozwiązywać inne problemy użytkownika.

Gdzie najczęściej stosuje się breadcrumbs?

Okruszki chleba mają największy sens w serwisach posiadających wyraźną hierarchię treści.

Typowe zastosowania to:

• sklepy internetowe,
• portale informacyjne,
• blogi z wieloma kategoriami,
• serwisy katalogowe,
• dokumentacje techniczne,
• bazy wiedzy,
• strony firmowe z rozbudowaną ofertą,
• platformy edukacyjne.

Na bardzo małej stronie posiadającej kilka podstron i prostą strukturę breadcrumb może nie wnosić praktycznie żadnej wartości.

Najpopularniejszy rodzaj breadcrumb: hierarchiczny

Najczęściej spotykany breadcrumb pokazuje hierarchię strony.

Przykład:

Strona główna → Oferta → Strony internetowe → Strony statyczne

Ścieżka pokazuje kolejne poziomy struktury informacji.

To najbezpieczniejszy i najbardziej przewidywalny model.

Działa niezależnie od tego, w jaki sposób użytkownik dotarł do danej podstrony.

Jeżeli wszedł bezpośrednio z wyszukiwarki, nadal zobaczy logiczną strukturę serwisu.

Breadcrumb oparty na historii użytkownika

Istnieją również breadcrumbs próbujące odwzorowywać rzeczywistą drogę użytkownika.

Mogłyby wyglądać na przykład tak:

Wyniki wyszukiwania → Produkty promocyjne → Produkt XYZ

Taki model jest znacznie bardziej problematyczny.

Historia użytkownika może być przypadkowa i nie musi odzwierciedlać architektury strony.

Ścieżka zmienia się również zależnie od sposobu wejścia do serwisu.

Z punktu widzenia SEO i przewidywalności interfejsu zazwyczaj lepsza jest stabilna hierarchia strony.

Breadcrumb oparty na atrybutach

W sklepach internetowych można spotkać breadcrumbs oparte częściowo na cechach produktu lub filtrach.

Przykład:

Buty → Męskie → Trekkingowe → Czarne

Takie rozwiązanie może wyglądać logicznie dla użytkownika, ale technicznie potrafi być znacznie bardziej skomplikowane.

Atrybuty nie zawsze tworzą prawdziwą hierarchię.

Produkt może być jednocześnie:

• czarny,
• wodoodporny,
• męski,
• trekkingowy,
• z membraną.

Nie oznacza to, że każda z tych cech powinna tworzyć kolejny poziom struktury URL lub breadcrumb.

Dlatego w sklepach warto bardzo dokładnie rozróżnić kategorię produktu od jego atrybutów.

Breadcrumb w sklepie internetowym

W e-commerce breadcrumb jest szczególnie wartościowy ze względu na rozbudowane katalogi.

Sklep może posiadać setki kategorii i tysiące produktów.

Użytkownik trafiający bezpośrednio na kartę produktu powinien szybko zrozumieć, do jakiej części oferty należy dany produkt.

Przykład:

Strona główna → Narzędzia → Elektronarzędzia → Wiertarki → Produkt XYZ

Użytkownik może kliknąć Wiertarki i przejść do podobnych produktów.

To bardzo naturalny sposób eksplorowania katalogu.

Breadcrumb w WooCommerce

WooCommerce obsługuje breadcrumbs, ale ich ostateczny wygląd i logika mogą zależeć od motywu, wtyczek SEO oraz indywidualnych modyfikacji.

Najważniejsze nie jest samo wyświetlenie ścieżki.

Trzeba jeszcze sprawdzić, czy pokazuje właściwą strukturę.

Produkt może należeć jednocześnie do kilku kategorii.

Przykładowo kurtka może znajdować się w:

• Odzież,
• Kurtki,
• Nowości,
• Promocje,
• Kolekcja jesienna.

Jeżeli system przypadkowo wybierze jako główną kategorię Promocje, breadcrumb może wyglądać tak:

Strona główna → Promocje → Produkt

Technicznie działa, ale nie pokazuje właściwego miejsca produktu w głównej strukturze katalogu.

Przy tworzeniu sklepów WooCommerce zwracam dlatego uwagę nie tylko na wygląd kategorii, ale również na relacje pomiędzy produktami, kategoriami i sposobem generowania nawigacji.

Kategoria główna produktu

Jeżeli produkt należy do kilku kategorii, warto określić, która z nich jest jego podstawową ścieżką logiczną.

Przykład:

Strona główna → Obuwie → Buty trekkingowe → Produkt

To znacznie bardziej użyteczna hierarchia niż:

Strona główna → Bestseller → Produkt

Kategorie marketingowe takie jak:

• Promocje,
• Nowości,
• Bestsellery,
• Polecane,

zazwyczaj nie powinny zastępować podstawowej struktury produktowej.

Breadcrumb na stronie kategorii

Breadcrumb jest równie przydatny na stronach kategorii.

Jeżeli katalog posiada kilka poziomów, użytkownik powinien wiedzieć, czy znajduje się w kategorii nadrzędnej czy w bardzo szczegółowym podzbiorze.

Przykład:

Sklep → Dom i ogród → Ogród → Narzędzia ogrodowe → Sekatory

Użytkownik może wtedy łatwo rozszerzyć zakres i przejść na przykład z Sekatorów do całej kategorii Narzędzia ogrodowe.

Breadcrumb na blogu

Na blogu ścieżka może wyglądać następująco:

Strona główna → Blog → SEO → Tytuł artykułu

Ma to sens, jeżeli kategorie blogowe są rzeczywiście uporządkowane i używane do organizacji treści.

Jeżeli wpis posiada kilkanaście przypadkowych kategorii lub tagów, tworzenie breadcrumb na ich podstawie może prowadzić do chaosu.

Breadcrumb a UX

UX, czyli doświadczenie użytkownika, jest jednym z głównych powodów stosowania breadcrumbs.

Dobrze zaprojektowana ścieżka pomaga użytkownikowi:

• zrozumieć strukturę strony,
• zorientować się, gdzie się znajduje,
• przejść do kategorii nadrzędnej,
• odkrywać podobne treści lub produkty,
• ograniczyć liczbę kroków potrzebnych do nawigacji.

Największą wartość widać na podstronach, na które użytkownik trafia bezpośrednio z zewnętrznego źródła.

Dlaczego breadcrumb pomaga użytkownikowi z Google?

Użytkownik nie zawsze rozpoczyna wizytę od strony głównej.

Może wejść bezpośrednio na:

• kartę produktu,
• artykuł,
• kategorię,
• podstronę usługi.

W takim przypadku nie zna wcześniejszego kontekstu.

Breadcrumb pokazuje mu go natychmiast.

Jeżeli wyszukał konkretny model butów i trafił bezpośrednio na produkt, może zobaczyć, że znajduje się w dziale butów trekkingowych i jednym kliknięciem przejść do całej kategorii.

Breadcrumb a linkowanie wewnętrzne

Breadcrumb tworzy dodatkowe linki pomiędzy podstronami.

Karta produktu linkuje do kategorii, kategoria podrzędna do nadrzędnej, a kolejne poziomy do wyższych części struktury.

To naturalny sposób wzmacniania linkowania wewnętrznego.

Nie należy jednak traktować breadcrumb jako sztuczki SEO polegającej na dodaniu jak największej liczby linków.

Jego główną funkcją nadal pozostaje nawigacja.

Korzyść SEO wynika z prawidłowo zaprojektowanej struktury, a nie z samego faktu istnienia linków.

Breadcrumb a SEO

Breadcrumb może wspierać SEO na kilka sposobów.

Po pierwsze pomaga wyszukiwarkom zrozumieć strukturę serwisu.

Po drugie tworzy logiczne linkowanie pomiędzy stronami podrzędnymi i nadrzędnymi.

Po trzecie może zostać opisany za pomocą danych strukturalnych.

Nie oznacza to jednak, że samo dodanie breadcrumb automatycznie poprawi pozycje strony w Google.

Jeżeli struktura kategorii jest chaotyczna, breadcrumb może jedynie ujawnić ten chaos.

Breadcrumb a architektura informacji

Dobrze działający breadcrumb jest zazwyczaj efektem dobrej architektury informacji.

Jeżeli nie wiadomo, co powinno znaleźć się w ścieżce, często problem nie leży w samym komponencie, ale w strukturze serwisu.

Przykładowo jeżeli jedna usługa pasuje jednocześnie do pięciu różnych działów i nie wiadomo, który z nich jest nadrzędny, warto najpierw uporządkować hierarchię.

Breadcrumb powinien odwzorowywać logiczną strukturę, a nie próbować ją wymyślać.

Czy breadcrumb powinien odpowiadać strukturze URL?

Najczęściej warto, żeby oba elementy były logicznie spójne, ale nie muszą być identyczne znak po znaku.

Przykład adresu:

/sklep/obuwie/buty-trekkingowe/produkt-x/

Breadcrumb:

Strona główna → Obuwie → Buty trekkingowe → Produkt X

Taka relacja jest czytelna.

Nie zawsze jednak struktura techniczna URL dokładnie odwzorowuje hierarchię treści.

Nie należy przebudowywać dobrych adresów wyłącznie po to, żeby były identyczne z breadcrumb.

Breadcrumb a płaska struktura adresów URL

Strona może posiadać płaskie adresy, na przykład:

/produkt-x/

a jednocześnie logiczną ścieżkę:

Strona główna → Obuwie → Trekking → Produkt X

Jest to możliwe.

Adres URL i architektura informacji są ze sobą powiązane, ale nie są tym samym.

Najważniejsza jest spójność dla użytkownika i wyszukiwarki.

Breadcrumb a dane strukturalne

Breadcrumb może być dodatkowo opisany za pomocą danych strukturalnych.

W tym celu wykorzystywany jest typ BreadcrumbList.

Dane strukturalne informują wyszukiwarkę, że kolejne elementy reprezentują hierarchiczną ścieżkę strony.

Typowa struktura opisuje:

• pozycję elementu,
• jego nazwę,
• adres URL.

Dane strukturalne nie zastępują jednak widocznego breadcrumb.

Najlepiej, gdy oznaczenia odpowiadają rzeczywistej nawigacji widocznej dla użytkownika.

BreadcrumbList i Schema.org

BreadcrumbList jest typem danych strukturalnych zdefiniowanym w Schema.org.

Każdy element ścieżki jest zwykle reprezentowany jako ListItem.

System może dzięki temu opisać kolejność:

1. Strona główna,
2. Kategoria,
3. Podkategoria,
4. Aktualna strona.

Nie należy jednak tworzyć danych strukturalnych przedstawiających inną hierarchię niż ta, którą faktycznie posiada strona.

Czy Google pokazuje breadcrumbs w wynikach wyszukiwania?

Wyszukiwarki mogą wykorzystywać informacje o strukturze strony podczas prezentowania wyniku.

Nie oznacza to jednak, że właściciel strony ma pełną kontrolę nad ostatecznym wyglądem wyniku wyszukiwania.

Dane strukturalne są wskazówką, a nie poleceniem.

Google może wykorzystać je w sposób, który uzna za odpowiedni.

Breadcrumb a anchor text

Tekst linku w breadcrumb powinien być przede wszystkim czytelny dla użytkownika.

Nie ma potrzeby sztucznego upychania słów kluczowych.

Jeżeli kategoria nazywa się:

Buty trekkingowe

nie warto zamieniać jej na:

Najlepsze tanie buty trekkingowe męskie sklep online

Taki anchor wygląda nienaturalnie, psuje interfejs i może wprowadzać chaos w strukturze treści.

Czy breadcrumb powinien zawierać stronę główną?

Najczęściej tak.

Pierwszy element ścieżki może mieć nazwę:

Strona główna

albo krótszą formę:

Home

Możliwe jest również zastosowanie ikony domu, ale tekst bywa bardziej jednoznaczny i dostępny.

Wybór zależy od projektu interfejsu.

Czy aktualna strona powinna być linkiem?

Najczęściej ostatni element breadcrumb reprezentujący aktualną stronę nie musi być linkiem.

Użytkownik już się na niej znajduje.

Kliknięcie prowadzące dokładnie do tej samej strony nie daje mu dodatkowej wartości.

Ostatni element może więc być zwykłym tekstem.

Czy tytuł produktu powinien znajdować się w breadcrumb?

Zależy to od projektu.

W sklepie ścieżka:

Strona główna → Telewizory → OLED → Bardzo długa nazwa konkretnego telewizora

może zajmować dużo miejsca.

Na komputerze nie musi to być problemem, ale na telefonie długa nazwa potrafi rozbić breadcrumb na kilka wierszy.

Można wtedy rozważyć:

• skrócenie prezentowanej nazwy,
• pominięcie aktualnego elementu,
• odpowiednie zachowanie responsywne.

Nie powinno się jednak usuwać z breadcrumb najważniejszych poziomów struktury tylko dlatego, że brakuje miejsca.

Breadcrumb na urządzeniach mobilnych

Na małym ekranie bardzo długa ścieżka może stać się nieczytelna.

Problem występuje szczególnie w katalogach posiadających wiele poziomów.

Przykład:

Strona główna → Dom → Ogród → Narzędzia → Narzędzia ręczne → Sekatory → Produkt

Na telefonie trzeba zdecydować, jak zaprezentować taki element bez zajmowania połowy ekranu.

Możliwe rozwiązania to:

• zawijanie ścieżki,
• przewijanie poziome,
• ukrywanie części pośrednich poziomów,
• wyświetlanie przede wszystkim bezpośredniego rodzica.

Każde z nich ma zalety i wady.

Nie warto usuwać breadcrumb tylko na mobile

Czasami breadcrumb jest po prostu ukrywany na urządzeniach mobilnych, ponieważ projektant uznaje go za zbędny.

Nie zawsze jest to dobra decyzja.

Użytkownik mobilny również może trafić bezpośrednio na głęboką podstronę z Google i potrzebować informacji o jej kontekście.

Lepiej zoptymalizować sposób prezentacji niż automatycznie usuwać cały element.

Breadcrumb a dostępność

Nawigacja okruszkowa powinna być czytelna również dla użytkowników korzystających z technologii wspomagających.

Ważne jest, aby kolejność elementów była logiczna i nie opierała się wyłącznie na dekoracyjnych znakach.

Separator pomiędzy elementami powinien pełnić funkcję wizualną, a nie zmieniać znaczenie tekstu.

Sam breadcrumb powinien być możliwy do obsłużenia za pomocą klawiatury, jeżeli zawiera linki.

Jakiego separatora używać?

Najczęściej można spotkać:

• strzałkę,
• znak większości,
• ukośnik,
• szewron.

Przykładowo:

Strona główna → Oferta → SEO

albo:

Strona główna / Oferta / SEO

Rodzaj separatora ma mniejsze znaczenie niż czytelność całej ścieżki.

Gdzie umieścić breadcrumb?

Najczęściej umieszcza się go:

• pod głównym nagłówkiem strony,
• nad nagłówkiem,
• bezpośrednio pod headerem.

Najważniejsze jest zachowanie spójności w całym serwisie.

Jeżeli na jednej podstronie breadcrumb znajduje się pod nagłówkiem, a na innej w zupełnie innym miejscu, użytkownikowi trudniej wypracować nawyk korzystania z niego.

Breadcrumb nie powinien dominować wizualnie

Jest to element pomocniczy, dlatego zazwyczaj powinien mieć mniejszą wagę wizualną niż:

• tytuł strony,
• opis produktu,
• główne CTA,
• najważniejsze elementy nawigacji.

Nie oznacza to jednak, że tekst może być mikroskopijny lub posiadać zbyt słaby kontrast.

Breadcrumb nadal powinien być czytelny i możliwy do kliknięcia.

Najczęstszy błąd: breadcrumb nie odpowiada strukturze strony

To jeden z najpoważniejszych problemów.

Przykład:

Strona główna → Promocje → Produkt

mimo że podstawowa lokalizacja produktu to:

Strona główna → Elektronika → Słuchawki → Produkt

Jeżeli Promocje są wyłącznie czasową kategorią marketingową, ścieżka przestaje opisywać rzeczywistą architekturę.

Zbyt wiele poziomów

Breadcrumb może również ujawnić, że struktura strony jest zbyt głęboka.

Przykład:

Home → Sklep → Dom → Wyposażenie domu → Kuchnia → Akcesoria kuchenne → Narzędzia → Noże → Noże kuchenne → Produkt

Jeżeli użytkownik musi przejść przez dziewięć poziomów, warto zastanowić się, czy katalog nie został nadmiernie rozdrobniony.

Nie należy skracać samego breadcrumb wyłącznie po to, aby ukryć problem struktury.

Zbyt płytka struktura

Przeciwnym problemem jest brak logicznych relacji.

Jeżeli tysiące produktów znajdują się bezpośrednio pod stroną Sklep, breadcrumb nie będzie miał czego pokazać.

To również może wskazywać na problem z architekturą informacji.

Breadcrumb a kategorie i tagi

Kategorie i tagi pełnią inne role.

Kategoria zazwyczaj opisuje miejsce treści w hierarchii.

Tag jest etykietą łączącą treści o podobnej cesze.

Dlatego tagi rzadko powinny być traktowane jako poziomy breadcrumb.

Artykuł może mieć tagi:

• WordPress,
• SEO,
• wydajność,

ale nie oznacza to hierarchii:

WordPress → SEO → Wydajność → Artykuł.

Breadcrumb a filtry w sklepie

Filtry są jeszcze bardziej problematyczne.

Użytkownik może wybrać:

• markę,
• kolor,
• rozmiar,
• zakres ceny,
• materiał.

Te cechy niekoniecznie tworzą kolejne poziomy hierarchiczne.

Jeżeli każdy filtr zacznie być dodawany do breadcrumb, ścieżka może szybko stać się absurdalnie długa.

Trzeba rozdzielić informację o aktywnych filtrach od nawigacji hierarchicznej.

Breadcrumb a paginacja

Strony paginacji zwykle nie powinny tworzyć kolejnych poziomów struktury.

Adres typu:

/kategoria/page/2/

nie oznacza, że Strona 2 jest osobną kategorią.

Breadcrumb może nadal wskazywać kategorię, a numer strony można potraktować jako element stanu widoku.

Breadcrumb a canonical

Breadcrumb i adres canonical rozwiązują inne problemy.

Breadcrumb określa ścieżkę nawigacji i hierarchię.

Canonical wskazuje preferowany adres dokumentu w sytuacji, gdy podobna lub ta sama treść może być dostępna pod różnymi URL.

Nie należy więc oczekiwać, że poprawny breadcrumb naprawi problemy z duplikacją adresów.

Breadcrumb a menu mega

Rozbudowane mega menu może zawierać dziesiątki lub setki linków.

Breadcrumb działa inaczej.

Nie pokazuje wszystkich możliwych kierunków, tylko konkretną ścieżkę aktualnej strony.

Oba mechanizmy mogą się więc dobrze uzupełniać.

Mega menu pozwala eksplorować ofertę, a breadcrumb pozwala zrozumieć aktualne położenie.

Breadcrumb a wyszukiwarka wewnętrzna

Użytkownik korzystający z wyszukiwarki może trafić bezpośrednio do produktu lub artykułu bez przechodzenia przez kategorię.

Breadcrumb nadal powinien pokazywać stabilną hierarchię strony, a nie frazę wpisaną wcześniej w wyszukiwarkę.

Historia wyszukiwania nie jest strukturą informacji.

Czy breadcrumb powinien być indeksowany?

Sam breadcrumb jest częścią strony i zazwyczaj nie istnieje jako oddzielny dokument.

Linki w nim powinny prowadzić do normalnych, właściwych stron kategorii lub sekcji.

Problem pojawia się dopiero wtedy, gdy ścieżka generuje linki do technicznych lub niepotrzebnych adresów.

Breadcrumb i nieindeksowane kategorie

Jeżeli breadcrumb prowadzi do kategorii oznaczonej jako noindex, warto sprawdzić, czy taki układ ma logiczny sens.

Noindex sam w sobie nie oznacza, że strona nie może być linkowana.

Może jednak wskazywać na niespójną decyzję architektoniczną.

Jeżeli dana kategoria jest ważnym poziomem nawigacji dla użytkownika, warto zastanowić się, dlaczego jednocześnie została całkowicie wyłączona z indeksowania.

Breadcrumb a techniczne SEO

W ramach audytu technicznego sprawdzam breadcrumb jako część większej struktury serwisu.

Analizuję między innymi:

• czy odpowiada rzeczywistej hierarchii,
• czy linkuje do prawidłowych adresów,
• czy nie tworzy przypadkowych ścieżek,
• czy dane strukturalne są zgodne z widokiem,
• czy struktura kategorii nie jest zbyt głęboka,
• czy produkty mają logiczne kategorie nadrzędne.

Breadcrumb jest więc małym elementem wizualnym, ale często ujawnia znacznie większe problemy architektury serwisu. Więcej takich elementów analizuję w ramach SEO technicznego.

Jak sprawdzić, czy breadcrumb działa poprawnie?

Najprostszy test można wykonać ręcznie.

1. Otwórz głęboką podstronę bez korzystania wcześniej z menu.
2. Sprawdź, czy breadcrumb natychmiast wyjaśnia jej położenie.
3. Kliknij każdy wcześniejszy poziom.
4. Sprawdź, czy prowadzi do logicznego rodzica.
5. Powtórz test na urządzeniu mobilnym.

Jeżeli któryś element prowadzi do strony niezwiązanej z rzeczywistą hierarchią, warto przeanalizować sposób generowania ścieżki.

Test breadcrumb w sklepie

W sklepie warto sprawdzić różne rodzaje produktów.

Szczególnie:

• produkt należący do jednej kategorii,
• produkt należący do kilku kategorii,
• produkt promocyjny,
• produkt będący nowością,
• produkt z bardzo długą nazwą,
• produkt z głębokiej podkategorii.

To właśnie przy produktach należących do wielu kategorii najczęściej wychodzą problemy z wyborem niewłaściwej ścieżki.

Zmiana breadcrumb a migracja strony

Podczas przebudowy serwisu może zmienić się cała hierarchia treści.

Jeżeli wcześniej strona znajdowała się w:

Oferta → Marketing → SEO

a po przebudowie trafia do:

Oferta → Widoczność → SEO techniczne

breadcrumb również powinien zostać dostosowany.

Przy większej migracji trzeba równocześnie sprawdzić:

• adresy URL,
• przekierowania,
• menu,
• linkowanie wewnętrzne,
• dane strukturalne,
• breadcrumbs.

Zmiana jednego elementu bez pozostałych może prowadzić do niespójności.

Breadcrumb generowany automatycznie

Wiele CMS-ów i wtyczek generuje breadcrumb automatycznie.

To wygodne, ale automatyzacja opiera się na określonych regułach.

Jeżeli struktura danych jest chaotyczna, automatyczny system również wygeneruje chaotyczny wynik.

Automatyczne nie oznacza więc automatycznie poprawne.

Breadcrumb tworzony ręcznie

Ręczne tworzenie ścieżki może dać pełną kontrolę, ale przy dużym serwisie jest trudne do utrzymania.

Każda zmiana kategorii wymagałaby aktualizacji wielu stron.

Dlatego najlepiej, gdy breadcrumb jest generowany dynamicznie na podstawie dobrze zaprojektowanej architektury.

Co zrobić, gdy strona należy do kilku działów?

Nie zawsze istnieje tylko jedna oczywista hierarchia.

Przykładowo artykuł może dotyczyć jednocześnie:

• SEO,
• WordPressa,
• wydajności.

Wtedy trzeba zdecydować, jaka jest jego podstawowa lokalizacja w strukturze.

Nie warto próbować umieścić wszystkich możliwych ścieżek w jednym breadcrumb.

Jedna stabilna ścieżka jest zazwyczaj bardziej czytelna niż kilka alternatywnych.

Czy breadcrumb może mieć kilka poziomów kategorii?

Tak, jeśli odpowiada to rzeczywistej strukturze.

Przykład:

Sklep → Sport → Turystyka → Plecaki trekkingowe → Produkt

Nie ma nic złego w kilku poziomach, jeżeli każdy z nich ma sens dla użytkownika.

Problemem jest dopiero sztuczne mnożenie kategorii bez wartości nawigacyjnej.

Breadcrumb a silosy tematyczne

Dobrze uporządkowana ścieżka może wspierać logiczne grupowanie treści.

Artykuły dotyczące jednego obszaru mogą prowadzić do wspólnej kategorii nadrzędnej.

Nie powinno się jednak budować sztucznych silosów wyłącznie pod SEO.

Hierarchia powinna przede wszystkim pomagać użytkownikowi znaleźć właściwe informacje.

Breadcrumb i orphan pages

Orphan page to strona posiadająca bardzo mało lub żadnych wewnętrznych linków prowadzących do niej.

Breadcrumb sam nie rozwiąże całego problemu, ponieważ linkuje głównie z aktualnej strony do jej rodziców, a nie odwrotnie.

Może jednak być elementem spójnego systemu nawigacji, w którym podstrony nie funkcjonują jako izolowane wyspy.

Czy każda strona powinna mieć breadcrumb?

Nie.

Nie ma sensu dodawać go mechanicznie wszędzie.

Na stronie głównej breadcrumb jest zwykle zbędny.

Na prostym landing page również może nie wnosić żadnej wartości.

Najbardziej przydaje się tam, gdzie istnieje hierarchia.

Breadcrumb na landing page

Landing page często jest projektowany jako samodzielna ścieżka konwersji.

Jeżeli użytkownik ma skupić się na jednym konkretnym celu, dodatkowa nawigacja może wręcz odciągać uwagę.

Nie oznacza to, że breadcrumb jest zawsze błędem na landing page.

Trzeba po prostu ocenić, czy rzeczywiście pomaga w danym projekcie.

Breadcrumb w serwisie jednostronicowym

Na klasycznym one-page breadcrumb praktycznie nie ma zastosowania.

Nie istnieje tam wielopoziomowa hierarchia podstron, którą trzeba użytkownikowi wyjaśniać.

Lepszym mechanizmem są linki prowadzące do konkretnych sekcji.

Breadcrumb a strona 404

Strona błędu 404 może posiadać uproszczony breadcrumb prowadzący do strony głównej lub określonego działu, ale nie jest to obowiązkowe.

Znacznie ważniejsze jest zaoferowanie użytkownikowi sensownej drogi wyjścia:

• powrotu do strony głównej,
• wyszukiwarki,
• ważnych kategorii,
• popularnych treści.

Czy breadcrumb poprawia konwersję?

Nie da się stwierdzić, że samo dodanie breadcrumb automatycznie zwiększy sprzedaż.

Może jednak ograniczyć frustrację i pomóc użytkownikowi znaleźć alternatywny produkt lub kategorię.

Jeżeli klient trafia na produkt, który mu nie odpowiada, ma dwie możliwości:

• opuścić sklep,
• przejść poziom wyżej i szukać dalej.

Breadcrumb ułatwia drugą opcję.

Czy breadcrumb może zaszkodzić?

Tak, jeżeli został wdrożony źle.

Może powodować problemy, gdy:

• pokazuje błędną kategorię,
• prowadzi do stron technicznych,
• tworzy nielogiczną hierarchię,
• nie odpowiada danym strukturalnym,
• jest zbyt długi,
• na mobile zasłania ważną treść,
• korzysta z przypadkowych tagów lub filtrów.

Dlatego breadcrumb nie powinien być wdrażany wyłącznie dlatego, że „SEO mówi, że trzeba”.

Jak zaprojektować dobry breadcrumb?

Dobra ścieżka powinna spełniać kilka prostych zasad.

• pokazywać prawdziwą hierarchię strony,
• prowadzić od ogółu do szczegółu,
• być krótka i czytelna,
• posiadać działające linki do poziomów nadrzędnych,
• nie opierać się na przypadkowej historii użytkownika,
• działać poprawnie na urządzeniach mobilnych,
• być spójna z danymi strukturalnymi.

Najważniejsze pytanie: czy ścieżka pomaga zrozumieć stronę?

Najprostszy sposób oceny breadcrumb nie wymaga żadnego narzędzia SEO.

Wystarczy otworzyć konkretną podstronę i wyobrazić sobie, że widzi się ją po raz pierwszy.

Czy ścieżka od razu odpowiada na pytania:

• gdzie jestem,
• do jakiego działu należy ta strona,
• jak mogę przejść poziom wyżej?

Jeżeli tak, breadcrumb spełnia swoją podstawową funkcję.

Jeżeli natomiast pokazuje przypadkowe kategorie, promocje, tagi albo techniczne elementy systemu, warto poprawić nie tylko sam komponent, ale często również strukturę serwisu.

Co warto zapamiętać o breadcrumb?

Breadcrumb jest niewielkim elementem interfejsu, ale potrafi bardzo dobrze pokazać jakość całej architektury strony.

Dobrze zaprojektowany pomaga użytkownikowi odnaleźć się w serwisie, przejść do kategorii nadrzędnej i odkrywać powiązane treści lub produkty.

Jednocześnie wspiera logiczne linkowanie wewnętrzne i może być opisany za pomocą danych strukturalnych BreadcrumbList.

Największym błędem jest traktowanie breadcrumbs jako dekoracji albo automatycznego dodatku SEO.

Ścieżka powinna wynikać z realnej hierarchii informacji.

Jeżeli trudno zdecydować, co powinno znaleźć się pomiędzy stroną główną a aktualną podstroną, bardzo często oznacza to, że najpierw trzeba uporządkować samą strukturę serwisu.