Co je breadcrumb navigace?
Breadcrumb navigace (česky drobečková navigace) je sekundární typ navigace, který zobrazuje cestu uživatele v rámci struktury webu.
Zjednodušeně ukazuje, kde se návštěvník nachází, a umožňuje mu rychlý návrat do nadřazených sekcí.
Příklad:
CopyEditDomů > Blog > UX design > Tvorba formulářů
Proč používat breadcrumb navigaci?
✅ Lepší orientace na webu
Uživatel ví, kde je a kam se může vrátit – zejména důležité u větších webů, e-shopů nebo magazínů.
✅ Zlepšuje strukturu a vnitřní propojení webu
Breadcrumby tvoří přirozené interní odkazy, které vyhledávače oceňují.
✅ Přínos pro SEO
- Pomáhá vyhledávačům pochopit hierarchii webu
- Může se zobrazit přímo ve výsledcích vyhledávání jako tzv. structured snippets
✅ Snižuje míru opuštění
Uživatel snadno najde vyšší úroveň obsahu a nezavře web.
Kde a jak breadcrumb navigaci zobrazovat?
- Obvykle nahoře pod hlavním menu, ale nad H1
- Použít jednoduchý formát: php-templateCopyEdit
<nav aria-label="breadcrumb"> <ol> <li><a href="/">Domů</a></li> <li><a href="/blog">Blog</a></li> <li>UX design</li> </ol> </nav> - Používej šípky (›) nebo „větší než“ znak (
>) pro vizuální oddělení
Typy breadcrumb navigace
| Typ | Popis | Příklad |
|---|---|---|
| Hierarchická | Zobrazuje umístění v rámci struktury webu | Domů > Kategorie > Produkt |
| Dynamická | Sleduje cestu uživatele (méně časté) | Domů > Hledání > Výsledek |
| Atributová (filtry) | Používá se v e-shopech s filtry | Běhání > Boty > Pánské > Nike |
SEO doporučení pro breadcrumbs
- ✅ Používej značení pomocí schema.org htmlCopyEdit
<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Domů", "item": "https://www.example.com/" }, { "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://www.example.com/blog" }, { "@type": "ListItem", "position": 3, "name": "UX design" } ] } </script> - ✅ Nepřeháněj délku – max. 3–4 úrovně
- ✅ Odkazuj jen na reálné kategorie
- ✅ Zajisti responzivní zobrazení na mobilech
- ✅ Zachovej konzistenci napříč celým webem
Kdy breadcrumb navigace není nutná?
- U jednoduchých jednostránkových webů (one-page)
- Pokud struktura webu nemá žádnou hierarchii
- V případech, kdy breadcrumby duplikují hlavní navigaci bez přidané hodnoty
FAQ – často kladené otázky
Je breadcrumb navigace povinná?
Ne, ale u webů s hlubší strukturou (blog, e-shop, znalostní báze) ji Google i uživatelé velmi ocení.
Má breadcrumb vliv na SEO?
Ano – zlepšuje strukturu webu, interní odkazy a může se zobrazovat ve výsledcích vyhledávání.
Musí být breadcrumbs viditelné i na mobilu?
Ano, ale můžeš je na menších obrazovkách stylovat kompaktně (např. skrýt první úroveň).