Okruszki w sklepie internetowym: ścieżka nawigacji i dane BreadcrumbList

Czym są okruszki w sklepie internetowym

Okruszki to krótki rząd odnośników, który pokazuje drogę od najwyższego poziomu sklepu do aktualnie oglądanej strony, na przykład: Strona główna, Meble ogrodowe, Krzesła ogrodowe, Krzesło składane z akacji. Polska nazwa nawiązuje do angielskiego słowa breadcrumbs, czyli okruszków chleba zostawianych po drodze, aby dało się wrócić tą samą trasą. W dokumentacji Google ten sam element nazywany jest menu nawigacyjnym albo ścieżką menu nawigacyjnego.

Wzorzec opisany przez konsorcjum W3C określa ścieżkę jako listę odnośników do stron nadrzędnych bieżącej strony, ułożoną hierarchicznie, która pomaga użytkownikowi zorientować się, gdzie jest w serwisie. Zgodnie z tym opisem ścieżka zwykle biegnie poziomo i znajduje się przed główną treścią strony. Szczegóły zawiera wzorzec Breadcrumb w przewodniku W3C.

W sklepie ścieżka spełnia dwa zadania jednocześnie. Klientowi, który trafił z wyszukiwarki prosto na kartę produktu, pozwala jednym kliknięciem przejść do całej podkategorii i porównać podobne towary. Wyszukiwarce podpowiada, do której gałęzi asortymentu należy strona. W materiale o strukturze witryny e-commerce Google wyjaśnia, że zależności między stronami odczytuje przede wszystkim z odnośników wewnętrznych, a nie z samego wzoru adresów, oraz że znaczenie strony zależy między innymi od liczby prowadzących do niej linków i liczby kliknięć potrzebnych, aby do niej dotrzeć. Okruszki umieszczone na każdej karcie produktu stale kierują odnośniki w górę drzewa, do podkategorii i kategorii, czyli do stron, na których sklepowi zwykle najbardziej zależy.

Jak zbudować ścieżkę zgodną z drzewem kategorii

Ścieżka powinna powtarzać kolejne poziomy drzewa kategorii w takiej kolejności, w jakiej klient przechodzi przez nie w menu sklepu: dział, kategoria, podkategoria, produkt. Każdy poziom poza ostatnim jest odnośnikiem do istniejącej, dostępnej strony, a nazwy w ścieżce brzmią tak samo jak nazwy kategorii w menu i w nagłówkach.

Punktem wyjścia jest zatem samo drzewo. Jeśli sklep z wyposażeniem ogrodu ma kategorię Meble ogrodowe, a w niej podkategorie Krzesła ogrodowe, Stoły ogrodowe i Leżaki, to ścieżka krzesła składa się z trzech lub czterech pozycji i każda z nich odpowiada stronie, którą klient mógłby odwiedzić po drodze. Zasady porządkowania poziomów i nagłówków na listach produktów omawiamy osobno we wpisie o budowie stron kategorii w sklepie.

Droga użytkownika, a nie kopia adresu

Wytyczne Google mówią wprost, że ścieżka ma przedstawiać typową drogę użytkownika do strony, a nie powielać strukturę adresu URL. Ma to duże znaczenie w sklepach, w których adresy produktów są płaskie, na przykład kończą się samą nazwą towaru, bez katalogów kategorii. Taki adres nie mówi nic o miejscu produktu w asortymencie, a ścieżka nadal może i powinna pokazywać pełną hierarchię. Odwrotna sytuacja także się zdarza: adres zawiera techniczne katalogi, których nie ma sensu pokazywać klientowi jako poziomów nawigacji. O samych adresach piszemy szerzej w tekście o strukturze adresów URL.

Te same wytyczne zaznaczają, że element najwyższego poziomu, czyli domena lub strona główna, nie musi być uwzględniany w danych strukturalnych jako osobna pozycja. W widocznej ścieżce odnośnik do strony głównej jest jednak wygodny dla klientów i w praktyce prawie zawsze się go zostawia.

Czego w ścieżce nie umieszczać

Ścieżka opisuje położenie strony w hierarchii, a nie historię kliknięć konkretnej osoby. Dlatego nie powinny do niej trafiać wybrane filtry, sposób sortowania, numer strony listy ani wyszukiwane hasło. Jeżeli klient zawęził listę krzeseł do koloru szarego i przeszedł do produktu, ścieżka na karcie nadal powinna prowadzić do podkategorii Krzesła ogrodowe, a nie do adresu z parametrami. W przeciwnym razie każdy produkt zaczyna kierować odnośniki do wielu kombinacji, o których piszemy we wpisie o filtrach w sklepie a indeksowaniu.

Jak powinien wyglądać kod HTML widocznej ścieżki

Widoczna ścieżka to uporządkowana lista zwykłych odnośników, zamknięta w obszarze nawigacji z własną etykietą. Taki zapis jest czytelny dla robota wyszukiwarki, dla czytnika ekranu i dla klienta, który korzysta wyłącznie z klawiatury.

Wzorzec W3C wymaga trzech rzeczy. Ścieżka ma znajdować się w obszarze nawigacji, czyli w znaczniku nav. Obszar ten powinien mieć etykietę nadaną atrybutem aria-label albo aria-labelledby, aby odróżniał się od menu głównego. Odnośnik do bieżącej strony otrzymuje atrybut aria-current o wartości page, natomiast jeśli ostatnia pozycja nie jest odnośnikiem, atrybut ten jest opcjonalny.

<nav aria-label="Ścieżka nawigacji">
  <ol>
    <li><a href="https://www.example.com/">Strona główna</a></li>
    <li><a href="https://www.example.com/meble-ogrodowe/">Meble ogrodowe</a></li>
    <li><a href="https://www.example.com/meble-ogrodowe/krzesla/">Krzesła ogrodowe</a></li>
    <li aria-current="page">Krzesło składane z akacji</li>
  </ol>
</nav>

W materiałach dla sklepów Google przypomina, że do nawigacji należy używać zwykłych znaczników odnośnika z atrybutem href, a nie zdarzeń JavaScript podpiętych do innych elementów strony. Okruszki zbudowane z elementów, które reagują na kliknięcie tylko dzięki skryptowi, wyglądają dla klienta identycznie, lecz robot może nie odczytać z nich żadnego odnośnika. Wtedy przepada cała korzyść opisana w poprzedniej sekcji.

Na telefonach długie ścieżki bywają skracane, na przykład do jednego odnośnika prowadzącego do nadrzędnej podkategorii. Jest to poprawne pod warunkiem, że dane strukturalne opisują to, co faktycznie znajduje się na stronie. Ogólne wytyczne Google wymagają bowiem, aby oznaczenia opisywały treść dostępną dla użytkownika.

Jak oznaczyć ścieżkę danymi BreadcrumbList

Ścieżkę opisuje się obiektem typu BreadcrumbList, który we właściwości itemListElement zawiera kolejne elementy ListItem, po jednym na każdy poziom. Google przyjmuje ten opis w trzech formatach: JSON-LD, mikrodanych i RDFa, przy czym w ogólnych wytycznych zalecany jest JSON-LD, czyli osobny blok kodu umieszczany w źródle strony.

Wymagania są nieliczne, ale ścisłe. Według dokumentacji znaczników menu nawigacyjnego lista musi zawierać co najmniej dwa elementy ListItem ułożone we właściwej kolejności, a każdy element potrzebuje trzech właściwości zebranych w tabeli poniżej.

Słownik schema.org dopowiada, dlaczego pozycja jest potrzebna: sama kolejność znaczników w kodzie nie wystarcza do odtworzenia kolejności poziomów, dlatego każdy element niesie własny numer. Przyjęta konwencja zakłada porządek rosnący, w którym pierwsze elementy odpowiadają początkowi ścieżki.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Meble ogrodowe",
      "item": "https://www.example.com/meble-ogrodowe/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Krzesła ogrodowe",
      "item": "https://www.example.com/meble-ogrodowe/krzesla/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Krzesło składane z akacji"
    }
  ]
}
</script>

W przykładzie pominięto stronę główną, na co wytyczne pozwalają, oraz adres w ostatnim elemencie. Adresy w polu item powinny być pełne, z protokołem i domeną, i prowadzić do tych samych stron co odnośniki w widocznej ścieżce.

Ten sam blok trafia nie tylko na karty produktów. Strona podkategorii także ma swoją ścieżkę, krótszą o jeden poziom. Na stronie kategorii najwyższego poziomu, przy pominięciu strony głównej, zostałby tylko jeden element, a to mniej niż wymagane dwa. W takim przypadku do listy dopisuje się stronę główną jako pierwszą pozycję albo rezygnuje z oznaczenia na tym jednym poziomie.

W popularnych systemach sklepowych, takich jak WooCommerce, PrestaShop czy Shopify, okruszki i ich oznaczenia generuje zazwyczaj szablon albo wtyczka. Nie zwalnia to z kontroli. Zdarza się, że ścieżkę opisują równocześnie dwa mechanizmy, na przykład motyw w mikrodanych i wtyczka w JSON-LD, a każdy z nich podaje inną kategorię. Porządkowanie takich podwójnych oznaczeń wchodzi w zakres prac, które prowadzimy w ramach SEO technicznego.

Jeśli chcą Państwo zamówić SEO techniczne, zachęcamy do kontaktu: tel. 222 500 844 lub mailowo: biuro@pozycjonowaniestron.pl

Co zrobić, gdy produkt jest przypisany do kilku kategorii

Produkt widoczny w kilku kategoriach powinien mieć jeden adres i jedną ścieżkę główną, a pozostałe drogi dojścia można opisać dodatkowymi listami BreadcrumbList. Dokumentacja Google wprost przewiduje taki przypadek: jeżeli do strony prowadzi kilka dróg, w danych strukturalnych można podać kilka ścieżek, każdą jako osobny obiekt.

Przykład hipotetyczny: sklep z Poznania sprzedaje krzesło składane, które pasuje zarówno do kategorii Meble ogrodowe, jak i do kategorii Meble balkonowe, a w sezonie trafia jeszcze do działu Wyprzedaż. Klient może dojść do tej samej karty trzema drogami.

Jeden adres produktu

Najwięcej kłopotów sprawiają sklepy, w których adres produktu zawiera nazwę kategorii i zmienia się w zależności od drogi dojścia. Ta sama karta jest wtedy dostępna pod kilkoma adresami, a więc powstają duplikaty. Google opisuje sposób postępowania w materiale o określaniu kanonicznego adresu URL: wersję preferowaną wskazuje się przekierowaniem, znacznikiem rel="canonical" albo, jako słabszy sygnał, obecnością adresu w mapie witryny. Ten sam materiał zaleca, aby odnośniki wewnętrzne prowadziły do adresu kanonicznego, a nie do duplikatów.

Dla okruszków wynika z tego prosta reguła. Niezależnie od tego, którą ścieżkę widzi klient, odnośniki do produktu na listach kategorii powinny prowadzić do jednego, kanonicznego adresu karty. Najbezpieczniej jest, gdy adres produktu w ogóle nie zależy od kategorii albo gdy w panelu sklepu wyznaczono kategorię główną, z której adres jest budowany na stałe.

Ścieżka główna i ścieżki dodatkowe

Na stronie najczęściej pokazuje się jedną ścieżkę, zbudowaną z kategorii głównej. Kategorią główną powinna być ta, która najlepiej opisuje, czym produkt jest, a nie ta, która opisuje jego chwilowy stan. Działy takie jak Wyprzedaż, Nowości czy Polecane są z natury tymczasowe, więc ścieżka oparta na nich przestaje być prawdziwa po zakończeniu akcji. W opisanym przykładzie rozsądnym wyborem jest gałąź Meble ogrodowe, Krzesła ogrodowe.

Drugą drogę, przez Meble balkonowe, można dopisać w danych strukturalnych jako kolejną listę. W formacie JSON-LD obie listy umieszcza się w jednej tablicy.

<script type="application/ld+json">
[{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type": "ListItem", "position": 1, "name": "Meble ogrodowe",
     "item": "https://www.example.com/meble-ogrodowe/"},
    {"@type": "ListItem", "position": 2, "name": "Krzesła ogrodowe",
     "item": "https://www.example.com/meble-ogrodowe/krzesla/"},
    {"@type": "ListItem", "position": 3, "name": "Krzesło składane z akacji"}
  ]
},
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type": "ListItem", "position": 1, "name": "Meble balkonowe",
     "item": "https://www.example.com/meble-balkonowe/"},
    {"@type": "ListItem", "position": 2, "name": "Krzesło składane z akacji"}
  ]
}]
</script>

Dodatkowe ścieżki mają sens tylko wtedy, gdy odpowiadają trwałym, rzeczywistym gałęziom asortymentu. Nie warto opisywać w ten sposób każdej kolekcji, tagu i akcji promocyjnej. Kolory i rozmiary, o których piszemy we wpisie o wariantach produktu a SEO, nie tworzą nowych poziomów hierarchii, więc nie powinny pojawiać się w okruszkach.

Jak ścieżka wygląda w wynikach Google

W wyniku wyszukiwania ścieżka pojawia się nad tytułem, w wierszu z adresem strony: po nazwie domeny zamiast ciągu katalogów i parametrów widoczne są kolejne nazwy poziomów.

Galeria elementów wizualnych wyszukiwarki Google opisuje budowę takiego wyniku. Górną część stanowi atrybucja, czyli informacja o źródle, na którą mogą składać się ikona witryny, nazwa witryny i widoczny adres URL. Widoczny adres to adres strony w czytelnej postaci, złożony z dwóch części: domeny oraz menu nawigacyjnego, które pokazuje położenie strony w hierarchii witryny. Galeria wskazuje, że na tę drugą część można wpływać właśnie danymi strukturalnymi menu nawigacyjnego. Pozostałe składniki wyniku omawiamy we wpisie o tym, z czego składa się strona wyników Google.

W dokumentacji znaczników menu nawigacyjnego znajdują się trzy informacje, które warto znać przed oceną efektów. Pierwsza: funkcja jest opisana jako dostępna na komputerach, we wszystkich regionach i językach, w których działa wyszukiwarka. Brak nazw kategorii w wyniku oglądanym na telefonie nie świadczy więc o błędzie wdrożenia. Druga: Google dobiera ścieżkę do kontekstu zapytania, dlatego ta sama strona może przy różnych zapytaniach pokazywać różne ścieżki. Trzecia: wyświetlenie nie jest gwarantowane. Ogólne wytyczne dotyczące uporządkowanych danych mówią, że nawet oznaczenia, które przechodzą test bez zastrzeżeń, nie dają pewności pojawienia się danego elementu w wynikach.

W otwartych przez nas źródłach Google nie przedstawia ścieżki jako czynnika podnoszącego pozycję. Jej rola polega na czytelniejszym przedstawieniu wyniku oraz, po stronie sklepu, na uporządkowaniu linkowania wewnętrznego.

Jak sprawdzić ścieżkę w teście wyników z elementami rozszerzonymi

Test wyników z elementami rozszerzonymi to publiczne narzędzie Google, które pobiera stronę albo wklejony kod i pokazuje, jakie dane strukturalne w nich znalazło oraz czy są poprawne. Nie wymaga logowania i obsługuje formaty JSON-LD, RDFa oraz mikrodane.

Według pomocy Search Console narzędzie ma dwa tryby. W pierwszym podaje się pełny adres strony, przy czym wszystkie jej zasoby muszą być dostępne dla anonimowego użytkownika. W drugim, po przejściu na kartę Kod, wkleja się sam fragment oznaczeń, co jest wygodne przy pracy nad szablonem, który nie został jeszcze opublikowany. Pod polem można wskazać, czy strona ma zostać pobrana jako smartfon, czy jako komputer, a ustawieniem domyślnym jest smartfon.

Badanie warto zacząć od adresu kanonicznego przykładowego produktu. Wynik podaje liczbę elementów prawidłowych, elementów z ostrzeżeniami i elementów nieprawidłowych, a w części o skanowaniu informuje, czy stronę udało się pobrać i czy plik robots.txt na to pozwala. Na liście wykrytych danych powinna znajdować się pozycja dotycząca menu nawigacyjnego. Po jej rozwinięciu widać wszystkie poziomy z nazwą, adresem i pozycją, które należy porównać z odnośnikami widocznymi na stronie. To samo badanie powtarza się dla podkategorii, kategorii głównej oraz produktu przypisanego do kilku kategorii, ponieważ każdy z tych widoków korzysta zwykle z innego szablonu.

Kliknięcie błędu otwiera eksplorator kodu w miejscu, którego błąd dotyczy. Pomoc zaznacza, że eksplorator pokazuje kod wyrenderowany, czyli stan strony po wykonaniu skryptów. Ma to znaczenie w sklepach, w których okruszki powstają dopiero w przeglądarce: narzędzie pokaże to, co faktycznie udało się odczytać po renderowaniu.

Narzędzie ma też ograniczenia. Odwiedza stronę jako Google-InspectionTool, więc reguły w pliku robots.txt mogą je zablokować. Stron ukrytych za hasłem nie da się zbadać po adresie, pozostaje wtedy wklejenie kodu. Test ocenia wyłącznie składnię i komplet właściwości. Nie wykryje, że ścieżka jest poprawna technicznie, ale prowadzi przez niewłaściwą kategorię. Tę część kontroli trzeba wykonać samodzielnie, porównując wynik z drzewem kategorii.

Raport o menu nawigacyjnym w Search Console

Test bada jedną stronę, natomiast obraz całego sklepu daje raport stanu wyników z elementami rozszerzonymi w Search Console. Raporty tego rodzaju znajdują się w menu po lewej stronie, w sekcji Ulepszenia, a raport dla danego typu danych pojawia się dopiero wtedy, gdy Google znajdzie w witrynie przynajmniej jedno prawidłowe oznaczenie tego typu.

Jak wyjaśnia omówienie raportu w pomocy Search Console, liczby dotyczą elementów, a nie stron, a lista przykładów nie jest pełnym spisem. Element prawidłowy nie ma problemów krytycznych i może być wyświetlany w rozszerzonej postaci. Element nieprawidłowy ma co najmniej jeden problem krytyczny, który to uniemożliwia. Strona główna raportu składa się z wykresu elementów prawidłowych i nieprawidłowych w czasie, tabeli z problemami krytycznymi zatytułowanej Dlaczego elementy są nieprawidłowe oraz drugiej tabeli z problemami niekrytycznymi, których usunięcie nie jest wymagane.

Wybranie wiersza w tabeli otwiera szczegóły problemu: jego nazwę, stan weryfikacji, datę pierwszego wykrycia i listę przykładowych adresów. Ikona obok adresu uruchamia narzędzie do sprawdzania adresów URL, które opisujemy we wpisie o sprawdzaniu adresu URL w Search Console.

Co oznaczają typowe komunikaty

Problemy krytyczne w raporcie o menu nawigacyjnym wynikają z wymagań opisanych wcześniej: braku nazwy, braku pozycji, braku adresu w elemencie innym niż ostatni albo listy krótszej niż dwa elementy. Dokładne brzmienie komunikatu zależy od tego, której właściwości brakuje, dlatego najprościej jest otworzyć przykładowy adres i odczytać szczegóły w teście.

Osobną grupę stanowią błędy składni, które trafiają do raportu o uporządkowanych danych niepodlegających analizie. Pomoc wymienia między innymi nieprawidłowy dokument JSON, nieprawidłowy typ wartości, brak dwukropka, przecinka lub klamry zamykającej oraz zduplikowaną unikalną właściwość. W okruszkach przyczyną bywa nazwa kategorii lub produktu zawierająca cudzysłów, na przykład oznaczenie cali w wymiarze, którego szablon nie zabezpieczył przed wstawieniem do kodu.

Jak zgłosić poprawkę

W Search Console nie ma przycisku, który naprawia dane, ponieważ zmiany wprowadza się w kodzie sklepu. Po poprawieniu wszystkich wystąpień problemu na stronie jego szczegółów uruchamia się sprawdzenie poprawki. Search Console bada najpierw kilka stron. Jeśli błąd nadal na nich występuje, weryfikacja kończy się niepowodzeniem, a jeśli nie, sprawdzane są pozostałe znane adresy. Według pomocy całość trwa zwykle do dwóch tygodni, czasem dłużej, a o wyniku informuje wiadomość e-mail.

Typowe błędy w okruszkach sklepu i kolejność napraw

Większość kłopotów z okruszkami nie polega na błędach składni, tylko na rozbieżności między drzewem kategorii, widoczną ścieżką i danymi strukturalnymi. Naprawę warto więc zaczynać od ustalenia, która z tych trzech warstw jest wzorcem, a następnie doprowadzić do niej dwie pozostałe.

Częsta pomyłka to ścieżka składająca się tylko ze strony głównej i nazwy produktu, bez poziomów pośrednich, typowa dla sklepów, w których produkt nie ma wyznaczonej kategorii głównej. Kolejna to poziomy prowadzące do adresów z parametrami filtrów albo do kategorii wyłączonych z indeksowania. Zdarzają się też nazwy w danych strukturalnych inne niż na stronie, na przykład dopełnione słowami kluczowymi, co stoi w sprzeczności z wymogiem zgodności oznaczeń z widoczną treścią, oraz pozycje numerowane od zera albo z powtórzoną liczbą, zwykle po ręcznych przeróbkach szablonu. Ogólne wytyczne przypominają, że oznaczenia naruszające zasady mogą skończyć się ręcznym działaniem, które odbiera stronie możliwość wyświetlania elementów rozszerzonych.

• Każdy produkt ma wyznaczoną kategorię główną i jeden adres kanoniczny.
• Widoczna ścieżka składa się ze zwykłych odnośników z atrybutem href, w znaczniku nav z etykietą.
• Nazwy i adresy w danych BreadcrumbList są takie same jak w widocznej ścieżce.
• Lista ma co najmniej dwa elementy, a pozycje rosną kolejno od 1.
• Żaden poziom nie prowadzi do adresu z filtrem, sortowaniem ani wynikiem wyszukiwarki sklepu.
• Na stronie działa jedno źródło oznaczeń ścieżki, a nie dwa równoległe.
• Po każdej zmianie szablonu sprawdzany jest raport w sekcji Ulepszenia.

Dokumentacja Google zaleca zaglądać do raportu po pierwszym wdrożeniu, po każdej zmianie szablonu oraz okresowo. Nagły wzrost liczby elementów nieprawidłowych wskazuje zwykle na błąd w szablonie, a spadek liczby elementów prawidłowych na to, że oznaczenia zniknęły z części stron. W dużym sklepie porządkowanie okruszków łączy się z przeglądem całej struktury kategorii, dlatego bywa częścią szerszych prac, takich jak audyt SEO lub pozycjonowanie sklepów. Pomoc specjalisty przydaje się zwłaszcza wtedy, gdy zmiana kategorii głównych pociąga za sobą zmianę adresów i wymaga zaplanowania przekierowań.

Jeśli chcą Państwo zamówić SEO techniczne, zachęcamy do kontaktu: tel. 222 500 844 lub mailowo: biuro@pozycjonowaniestron.pl