Breadcrumbs (okruszki) w sklepie internetowym – co to jest, jak działają i jak wpływają na SEO?

Przewiń w dół

Breadcrumbs, czyli tzw. okruszki nawigacyjne, to element nawigacji wewnętrznej, który pokazuje użytkownikowi, gdzie aktualnie znajduje się w strukturze strony. W sklepach internetowych są szczególnie istotne – poprawiają użyteczność (UX), ułatwiają poruszanie się po kategoriach oraz wspierają optymalizację SEO. Mimo że są drobnym dodatkiem, dobrze wdrożone breadcrumbs potrafią znacząco wpłynąć na widoczność strony w Google oraz doświadczenie użytkownika.

Co to są breadcrumbs?

Breadcrumbs (z ang. „okruszki chleba”) to pozioma ścieżka nawigacyjna, najczęściej umieszczana na górze strony – zazwyczaj pod paskiem menu głównego. Pokazuje, jak użytkownik dotarł do aktualnej podstrony i umożliwia szybki powrót do wyższych poziomów struktury witryny.

Przykład breadcrumbs w sklepie internetowym:

Strona główna > Elektronika > Laptopy > Laptop Dell XPS 13

Każdy element ścieżki jest klikalny i przenosi użytkownika do odpowiadającej mu kategorii lub strony nadrzędnej.

Rodzaje breadcrumbs

W e-commerce najczęściej stosuje się jeden z trzech typów breadcrumbs:

1. Hierarchiczne (location-based)

Najpopularniejsze – pokazują ścieżkę opartą o strukturę kategorii i podkategorii.

2. Atrybutowe (attribute-based)

Pokazują wybrane cechy produktu (np. kolor, marka, rozmiar) – wykorzystywane głównie przy filtrowaniu.

3. Ścieżkowe (history-based)

Odzwierciedlają faktyczną ścieżkę kliknięć użytkownika na stronie – rzadziej spotykane, bardziej dynamiczne.

Jak breadcrumbs wpływają na SEO?

Breadcrumbs mają pozytywny wpływ na optymalizację SEO z kilku powodów:

Poprawiają linkowanie wewnętrzne – dzięki nim Google lepiej rozumie strukturę strony i zależności między podstronami.
Zwiększają dostępność kategorii i podkategorii – ułatwiają indeksację oraz przyspieszają crawlowanie przez roboty wyszukiwarki.
Zmniejszają współczynnik odrzuceń (bounce rate) – użytkownik może łatwo wrócić do kategorii nadrzędnej zamiast opuszczać stronę.
Umożliwiają wyświetlanie dodatkowych linków w wynikach wyszukiwania – po wdrożeniu danych strukturalnych (schema.org).
Wzmacniają kontekst słów kluczowych – linki z anchorami typu „Laptopy”, „Elektronika” wspierają widoczność tych fraz.

Breadcrumbs w Google – dane strukturalne (schema.org)

Aby breadcrumbs były widoczne w wynikach wyszukiwania Google (tzw. rich snippets), należy wdrożyć odpowiednie dane strukturalne w formacie schema.org. Oto kilka zasad:

Używaj znaczników BreadcrumbList oraz ListItem,
Każdy poziom ścieżki powinien zawierać nazwę (name) i link (item),
Elementy breadcrumbs powinny być zagnieżdżone we właściwej kolejności (z position),
Dane strukturalne można wdrożyć w formacie JSON-LD (zalecane), Microdata lub RDFa.

Przykład fragmentu kodu JSON-LD:

jsonKopiujEdytuj{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Strona główna",
      "item": "https://twojsklep.pl/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Laptopy",
      "item": "https://twojsklep.pl/laptopy"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Dell XPS 13",
      "item": "https://twojsklep.pl/laptopy/dell-xps-13"
    }
  ]
}

Po wdrożeniu danych strukturalnych, Google może wyświetlać „okruszki” bezpośrednio pod adresem URL w wynikach wyszukiwania.

Jak wdrożyć breadcrumbs w PrestaShop?

W systemie PrestaShop breadcrumbs są domyślnie wbudowane w szablon (np. Classic), ale warto sprawdzić kilka kluczowych kwestii:

Czy breadcrumbs działają poprawnie dla produktów, kategorii i CMS?
Czy struktura breadcrumbs odpowiada strukturze kategorii (a nie ścieżce kliknięć)?
Czy linki są klikalne i prowadzą do poprawnych stron?
Czy zostały wdrożone dane strukturalne?

Można też skorzystać z dedykowanych modułów do breadcrumbs lub ręcznie rozszerzyć plik breadcrumb.tpl i dodać znaczniki schema.org w szablonie.