Breadcrumbs, czyli menu okruszkowe w kontekście SEO

O okruszkach chleba słyszeliśmy bardzo dawno, jeśli nie na początku przyjaźni SEO z największą wyszukiwarką świata – Google. W 2010 roku o breadcrumbs było już na tyle głośno, że wszyscy zaczęli optymalizować pod tym kątem swoje witryny. Obecnie trudno sobie wyobrazić dobre SEO bez menu okruszkowego.
Ponad 18700 portali, 12200 influencerów, 260 dziennikarzy. Jedna platforma.
Załóż konto

Breadcrumbs, nazywane powszechnie okruszkami, to nic innego jak ścieżka menu dodana do standardowej mapy strony. Kolejne części oddzielone są separatorami i zawsze klikalne, aby szybko przenieść użytkownika w dowolną lokalizację. Zwykle breadcrumbs znajdują się na górze witryny, w miejscu łatwym do zlokalizowania dla użytkownika. Wszystkie okruszki chleba rozpoczynają się od strony głównej i kończą np. na najbardziej zagnieżdżonej kategorii lub produkcie. Doskonałym przykładem na solidnie zoptymalizowany breadcrumbs jest chociażby ten, który można znaleźć w dużych serwisach e-commerce.

Źródło: https://www.castorama.pl/

 

Źródło: https://www.douglas.pl/

 

Korzyści z zastosowania menu okruszkowego czerpią tak naprawdę wszyscy:

  • Roboty wyszukiwarek otrzymują jasny sygnał dotyczący tematyki serwisu, podziału na kategorie i zasoby; łatwiej mogą analizować stronę, wyciągać słowa kluczowe i kwalifikować do grup tematycznych serwisów; dobrze zoptymalizowane breadcrumbs świadczą o prawidłowo wykonanej hierarchii strony i właściwym uporządkowaniu danych.
  • Użytkownik nie czuje się zagubiony na żadnym z etapów poszukiwań produktu lub zagadnienia; szybko otrzymuje precyzyjną informację o lokalizacji, może w każdej chwili zmienić położenie w witrynie, przenieść się na początek wyszukiwania lub do poprzedniej kategorii, przechodząc do jednego z linków zamieszczonych w menu okruszkowym.

Breadcrumbs to ścieżka, którą użytkownik i robot przemierzają w witrynie w celu rozwiązania swojego problemu. Potencjalny klient chce kupić idealną kurtkę na zimę, więc przedziera się przez kategorię główną, a potem przez kolejne ścieżki. Pokonana przez niego droga może wyglądać następująco:

Strona główna > Mężczyźni > Kurtki > Kurtki na zimę > Kurtka puchowa Adidas XL

Jeśli wybrany model mu się nie spodoba, zawsze może zrobić krok w tył szybko i bez zamykania obecnej karty, a co za tym idzie – bez niepotrzebnie wzrastającego współczynnika odrzuceń, z którym niekiedy trudno sobie poradzić, gdy założona strategia nie jest słuszna.


Breadcrumbs są bardzo użyteczne z perspektywy użytkownika strony – wskazują, w którym miejscu serwisu się znajduje i jaką drogę przeszedł, żeby tam dotrzeć. Zlokalizowane u góry strony (oraz w wynikach wyszukiwania) są dobrze widoczne i dostępne dla usera. Dzięki nim łatwiej odnajduje się on na stronie i bez problemów po niej nawiguje. Załóżmy, że użytkownik przez wyszukiwarkę wszedł na stronę naszego produktu. Nawigacja w formie „okruszków” pomoże mu zorientować się, w jakiej sekcji się znalazł i z łatwością poprowadzi go do innych produktów z danej kategorii 

 

Warto spojrzeć na okruszki chleba również z perspektywy SEO. Linkujemy do kategorii i podkategorii w obrębie strony, prezentując robotom wyszukiwarek strukturę naszego serwisu. W Domodi ściśle dopasowujemy breadcrumbs do adresów URL, np. user znajdujący się w zakładce z sukienkami na sylwestra zobaczy ścieżkę wyglądającą następująco: Strona główna > Odzież > Odzież damska > Sukienki > Sukienki sylwestrowe. Większość filtrów w naszym katalogu utożsamiamy z kategoriami, tworzymy im przyjazne adresy URL i budujemy pod nie breadcrumbs. Wszystkie zawierają frazy kluczowe opisujące daną podstronę. Linkujemy wszystkie poziomy oprócz ostatniego, na którym aktualnie znajduje się użytkownik. Breadcrumbs tworzymy zgodnie z zasadami SEO, ale też z uwzględnieniem potrzeb użytkownika.Warto pamiętać, by odpowiednio oznaczyć je w danych strukturalnych serwisu – stanowią dodatkową informację dla robotów wyszukiwarki. 

 

Jakub Urbanek, Specjalista SEO w Grupie Domodi


Wybór odpowiedniego separatora dla breadcrumbs

Breadcrumbs można rozpoznać bardzo szybko, zwłaszcza gdy są prawidłowo zoptymalizowane i zlokalizowane w witrynie. W tworzeniu tej ścieżki nawigacyjnej nie ma większej filozofii. Najczęściej do oddzielania poszczególnych pięter zagnieżdżenia kategorii witryny służą znaki typu: > lub >> albo //. Bardzo czytelnie prezentują dane i ścieżkę, jaką przebył użytkownik w celu realizacji swojej potrzeby, czy też – jak określają niektórzy – ścieżkę zakupową.

Oczywiście, stosując różnego rodzaju wtyczki, możemy wykorzystać inne, graficznie urozmaicone separatory, w tym na bazie HTML, dzięki czemu otrzymamy ciekawy, wyróżniający się projekt strony WWW.

Czy breadcrumbs powinny rzucać się w oczy? Zdecydowanie tak. Pamiętajmy, że mają pomóc w nawigacji i szybko przenosić w określone miejsce na stronie. Mogą zatem dominować w górnej nawigacji, ponieważ jeśli pokazują prawidłowe dane, to będzie przynosiło wyłącznie korzyści.

Przykładowe znaczniki breadcrumbs, jakie można wykorzystać, zebrano w tym miejscu.

Podział znaczników breadcrumbs

Jak każdy element optymalizacyjny strony WWW, również okruszki można podzielić na określone rodzaje. Choć najchętniej wykorzystywanym i swoją drogą najlepszym rozwiązaniem są breadcrumbs lokalizacyjne, to wciąż zastosowanie znajdują okruszki oparte na atrybutach czy historii.

Breadcrumbs jako menu lokalizacyjne pozwala w bardzo szybki sposób wskazać użytkownikowi miejsce, w którym obecnie przebywa. Warto pamiętać, że ścieżka prowadząca do wymarzonych butów, szczególnie w dużej multiwyszukiwarce produktów, może być wyjątkowo długa. Przy tworzeniu ścieżki wyboru można szybko skierować klienta do poprzedniej, obszerniejszej kategorii produktowej. Dzięki temu zyskuje się większe prawdopodobieństwo konwersji, a zarazem mniejszy współczynnik odrzuceń.

Inny rodzaj okruszków chleba, oparty na atrybutach, to również bardzo pomocna forma nawigacji w dużych serwisach e-commerce z rozbudowanym drzewem kategorii produktowych. Przydaje się przy wieloaspektowym filtrowaniu produktów, np. po rozmiarze, kolorze, rodzaju.

I wreszcie, najrzadziej i prawdopodobnie najmniej chętnie stosowane breadcrumbs historyczne. To nic innego jak odzwierciedlenie ścieżki użytkownika, jaką musiał przebyć, by dotrzeć do celu swoich poszukiwań. Niestety w tym modelu zapisują się wszystkie odwiedzone podstrony, więc finalnie może nastąpić pewnego rodzaju chaos informacyjny zarówno u użytkownika, jak i robotów. Ten rodzaj okruszków wystarczy zastąpić przyciskiem „Powrót”.


Breadcrumbs możemy podzielić na trzy rodzaje:

  • Hierarchiczne (based on hierarchy)
    Najczęściej używane; są to statyczne odnośniki przedstawiające strukturę strony.
    Przykład: strona główna > kategoria > podkategoria > produkt
  • Historyczne (based on history)
    Najrzadziej używane, pokazują dokładną drogę, jaką przebył użytkownik, by znaleźć się na danej podstronie. Nie określają czysto struktury strony. Są tworzone bardziej pod użytkownika niż pod SEO.
    Przykład: strona główna > poprzednia strona > poprzednia strona > poprzednia strona > aktualna strona
  • Atrybutowe (based on attribute)
    Najczęściej spotykane w sklepach internetowych. Pokazują listę atrybutów wybranych przez użytkownika, które nie są kategorią nadrzędną.
    Przykład: strona główna > kategoria > podkategoria > atrybut 1 (np. kolor) > atrybut 2 (np. rozmiar) > produkt

Jakub Urbanek, Specjalista SEO w Grupie Domodi


Zalety zastosowania breadcrumbs

Trudno wyobrazić sobie funkcjonowanie i sprawną nawigację po dużej witrynie z mocno rozbudowaną gałęzią kategorii bez wdrożonych breadcrumbs. Obecnie ma je większość sklepów internetowych, portale, a nawet strony firmowe.

Ścieżka w okruszkach musi być jednak zaprojektowana w sposób czytelny, funkcjonalny i jasny dla użytkownika. Nie może być to kopia menu głównego, ale unikalne ścieżki opracowane w celu odpowiedzi na zapytania usera.

Za największą zaletę breadcrumbs uznaje się szybkie wskazanie miejsca przebywania użytkownika w momencie, gdy trafia on na konkretną podstronę bezpośrednio z wyszukiwarki. Gdy otwiera stronę, widzi, gdzie się znajduje i w każdym momencie może szybko przejść na link z wyższego poziomu. Wówczas, o ile mamy do czynienia z e-commerce, dotarcie do pozostałych przedmiotów z kategorii przebiega natychmiastowo. Tak właśnie zmniejsza się współczynnik odrzuceń, najczęściej dotyczący tych stron, na które użytkownik, w wyniku zadania określonych zapytań, trafia bezpośrednio z przeglądarki.


Z punktu widzenia SEO breadcrumbs są pomocne w kilku przypadkach.

Aspekty usability nawigacji pośrednio wpływają także na SEO – dzięki zmniejszeniu współczynnika odrzuceń poprawiamy jakość wizyt z wyszukiwarek, zapobiegając powrotowi użytkownika na stronę wyników wyszukiwania (co może zostać odczytane jako negatywny sygnał).

W kontekście natężenia słów kluczowych, zawierając w ostatnim elemencie breadcrumbs tytuł strony, na której się znajdujemy, zwiększamy nacisk na frazy wyszukiwane przez użytkowników, związane ze stroną docelową.

Użycie „danych uporządkowanych” w elementach breadcrumbs zgodnie ze standardami Schema.org, poprawią także zrozumienie hierarchii strony i zwiększą szansę na wyświetlenie jej w wynikach wyszukiwania (screen poniżej).

Źródło: wyszukiwarka Google

 

Poza aspektami związanymi z UX nawigacja breadcrumbs pozwala w prosty sposób poprawić linkowanie wewnętrzne w serwisach o złożonej architekturze. Każdy link zawarty w nawigacji ułatwia dotarcie robotom (i użytkownikom) wyszukiwarek w głąb strony, szczególnie do tych obszarów, które nie znajdują się w globalnej nawigacji.

Przykład nawigacji breadcrumbs wykorzystanej do zapytań i ofert w ograniczonej lokalizacji stosowany przez olx.pl:

Źródło: https://www.olx.pl/

 

W przypadku wersji mobilnej, w której musimy unikać złożonych breadcrumbs z wieloma elementami, możemy zastosować skróconą wersję nawigacji, zawierającą dwa ostatnie elementy. Coraz częściej jednak zauważa się sytuację, w której odchodzi się od tego typu nawigacji na stronach mobilnych.

Wojciech Skąpski, Co-founder IF.PL


Breadcrumbs nie są ani trudne do wdrożenia, ani też czasochłonne w projektowaniu. Właściwie zajmują tak mało miejsca, że spokojnie można je zaadaptować do dowolnej wersji mobilnej, bez obawy, że zaburzy to koncepcję strony i widoczność poszczególnych jej segmentów.

Menu okruszkowe docenia również Google, ponieważ wskazuje je w bezpośrednim widoku wyników wyszukiwania. Dla użytkownika taki wygląd wyników jest atrakcyjny i intuicyjny. Należy jednak pamiętać, aby nie przesadzać z liczbą słów kluczowych i anchor textów. Ścieżka breadcrumbs powinna zawsze wyglądać naturalnie dla użytkownika i robotów Google’a. Nie ma sensu tworzyć okruszków dla stron, które nie mają w hierarchii trzech lub więcej poziomów.


Jedną z funkcji nawigacji okruszkowej jest wzmocnienie linkowania wewnętrznego witryny. Wiele witryn z płaską strukturą ma wdrożone okruszki chleba, gdzie jedyny link wewnętrzny z wprowadzonej nawigacji wskazuje stronę główną. Dodając do tego link z logo strony, treści, menu głównego czy stopki (częste praktyki), mamy kilka linków prowadzących na stronę główną.

Przy małych witrynach zalecam również zwracać uwagę na przepływ „mocy SEO” i z głową budować ich strukturę, jednocześnie pamiętając o wygodzie użytkownika. Nie należy zapominać także o zasadzie First Link Count, która wciąż działa i ma się dobrze.

O ile nawigacja okruszkowa w większym serwisie spełnia więcej funkcji, takich jak pomoc w nawigacji użytkownika czy lepsze indeksowanie dla robotów Google’a, tak dla mniejszych stron nie przeceniałbym jej roli.

Wojciech Kamiński, Specjalista ds. SEO w Netim


Przydatne wskazówki:

  • Jeśli optymalizujesz lub projektujesz serwis e-commerce, to breadcrumbs są obowiązkowym elementem nawigacyjnym.
  • Stosuj breadcrumbs w celu polepszenia linkowania wewnętrznego witryny – twórz ścieżki, na których wskazaniu Ci zależy.
  • Nie twórz okruszków dla prostych stron wizytówek, na których nie ma przynajmniej 2-3 pięter zagnieżdżenia kategorii.
  • Twórz breadcrumbs według zasady: od lewej strona główna i kolejno coraz bardziej zagnieżdżone kategorie.
  • Nie powielaj okruszków w menu głównym.

Więcej ciekawych informacji na temat pozycjonowania oraz SEO przeczytasz w naszych eksperskich artykułach w Bazie Wiedzy.

  • Autor: Dominik Olszewski

    Copywriter

    Copywriter, korektor i specjalista od content marketingu. Ekspert od tworzenia treści zgodnej z językiem polskim, zasadami user experience i preferencjami wyszukiwarek. Prywatnie fan minifutbolu, Sandu Ciorby i klapek Kubota.

  • Autor: Natalia Nowaczyk

    Content Manager

    www.contentsolutions.pl

    Content Manager w Content Solutions. Pasjonatka efektywnych rozwiązań dotyczących optymalizacji SEO, content marketingu i dystrybucji treści. Jako jedna z nielicznych potrafi dogadać się z każdym wydawcą i influencerem. Poza tym uwielbia górskie wycieczki i kota Zenka.

Wasze komentarze (1)
Redakcja WhitePress zastrzega sobie prawo usuwania komentarzy obraźliwych dla innych osób, zawierających słowa wulgarne lub nie odnoszących się merytorycznie do tematu obiektu.
Administratorem danych osobowych jest WhitePress sp. z o.o. z siedzibą w Bielsku-Białej, ul. Legionów 26/28, Państwa dane osobowe przetwarzane są w celu marketingowym WhitePress sp. z o.o. oraz podmiotów zainteresowanych marketingiem własnych towarów lub usług. Cel marketingowy partnerów handlowych WhitePress sp. z o.o. obejmuje m.in. informacje handlową o konferencjach i szkoleniach związanych z treściami publikowanymi w zakładce Baza Wiedzy.

Podstawą prawną przetwarzania Państwa danych osobowych jest prawnie uzasadniony cel realizowany przez Administratora oraz jego partnerów (art. 6 ust. 1 lit. f RODO).

Użytkownikom przysługują następujące prawa: prawo żądania dostępu do swoich danych, prawo do ich sprostowania, prawo do usunięcia danych, prawo do ograniczenia przetwarzania oraz prawo do przenoszenia danych. Więcej informacji na temat przetwarzania Państwa danych osobowych, w tym przysługujących Państwu uprawnień, znajdziecie Państwo w naszej Polityce prywatności.
Czytaj całość
  • Semgence

    Menu jest tez rozpraszaczem, i rzadko ale jednak zdarza się, umieszcza się takowe w innym miejscu aby użytkownicy nie klikali.

    semgence.pl

    2019-12-21, 07:47
Polecane artykuły
Site Explorer od Majestic – praktyczny poradnik
Praktyczny przewodnik po Site Explorer od Majestic

Majestic jako niezależne narzędzie, które analizuje i zbiera dane pochodzące z Internetu, dodatkowo ułatwia analizę profilu linków prowadzących do witryny. Jego szerokie możliwości skanujące pozwalają przefiltrować ponad miliard adresów URL, badając powiązania między nimi. Zebrane dane są przedstawione w czytelny sposób za pomocą raportów i zestawień, co umożliwa dokładną analizę konkurencji i badanie trendów.