Po co są okruszki nawigacyjne (breadcrumbs)?
Okruszki pokazują hierarchię witryny: Strona główna → Sekcja → Podstrona → Bieżąca strona. Pomagają użytkownikowi wrócić poziom wyżej, a wyszukiwarkom – zrozumieć strukturę serwisu. W wynikach Google mogą pojawiać się jako ścieżka, zwiększając CTR.
Gdzie je umieścić i jak powinny wyglądać
- Położenie: pod nagłówkiem strony, nad H1 i treścią główną.
- Ostatni element: nie jest linkiem; dodaj
aria-current="page"dla dostępności. - Separator: np.
/lub›; stosuj spójny styl. - Mobile: jedna linia z przycięciem (
text-overflow: ellipsis); nie dubluj okruszków.
Wdrożenie w WordPress (uniwersalne)
1) Wtyczka SEO (Rank Math lub Yoast)
- Rank Math: shortcode
lub widżet. Włącz Schema (BreadcrumbList) w ustawieniach. - Yoast SEO: funkcja
yoast_breadcrumb()(PHP) lub blok/widżet. Upewnij się, że Schema jest aktywne. - Ważne: używaj jednego mechanizmu (SEO albo motyw) – unikniesz duplikacji.
2) Motyw (np. Kadence)
- W Customizer → General → Breadcrumbs włącz okruszki i ustaw pozycję: Before Content lub w obszarze tytułu strony.
- Gdy używasz okruszków z motywu, nie dodawaj ich ponownie przez wtyczkę SEO/builder.
3) Builder (np. Elementor / Elementor Pro)
- Dodaj widżet okruszków (z wtyczki SEO) lub HTML z shortcode.
- W szablonach archiwów/pojedynczych wpisów umieść blok nad H1. Zachowaj spójny styling.
Schema.org (BreadcrumbList)
Zapewnij poprawne dane strukturalne. Każdy element ma position, name i item (URL). Większość wtyczek SEO generuje JSON-LD automatycznie; po publikacji sprawdź adres w Rich Results Test.
Kontrola jakości i testy
- Na wpisie blogowym: Główna → Kategoria → Wpis (ostatni bez linku).
- Na stronie statycznej: Główna → Strona (dla podstron – dochodzi rodzic).
- W WooCommerce: Główna → Sklep → Kategoria → Produkt.
- Tylko jedne okruszki w DOM; brak „martwych” linków.
Najczęstsze błędy
- Duplikacja: włączone jednocześnie w motywie i wtyczce SEO.
- Zła kolejność: „Wpis → Kategoria” zamiast „Kategoria → Wpis”.
- Brak Schema: brak JSON-LD lub błędne
position. - UX mobile: łamanie w dwóch liniach; brak przycięcia lub zbyt mały kontrast linków.
Wskazówki stylistyczne (CSS skrót)
Minimalny CSS dla mobile:
.breadcrumbs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.875rem;margin:.5rem 0}
.breadcrumbs a{text-decoration:none}
Wielojęzyczność (WPML/Polylang)
- Upewnij się, że nazwy kategorii/stron w ścieżce są w języku bieżącej wersji.
- Linki w okruszkach muszą prowadzić do odpowiadających wersji językowych.
Checklist „gotowe do publikacji”
- Pozycja nad H1, jeden mechanizm okruszków, ostatni element bez linku.
- Schema BreadcrumbList działa i przechodzi testy.
- Mobile czytelne, desktop spójny ze stylem motywu.