Co je drobečková navigace? Drobečková navigace je nenápadný řádek odkazů, obvykle pod hlavičkou stránky, který ukazuje, kde na webu právě jste a jak se dostanete o úroveň výš. Anglicky se jí říká breadcrumbs, tedy drobky chleba.
Název pochází z pohádky o Jeníčkovi a Mařence, kteří si cestu lesem značili drobky. Přesně tak funguje i tenhle prvek: nechává za Vámi stopu, po které se vrátíte zpět. Vypadá třeba takto: Úvod, potom Návody, potom Webhosting a nakonec název konkrétní stránky.
K čemu je dobrá:
- Orientace. Návštěvník hned vidí, v jaké sekci se nachází, i když na stránku přišel z vyhledávače a hlavní menu nikdy neviděl.
- Rychlý návrat o úroveň výš jedním kliknutím, bez opakovaného mačkání tlačítka zpět.
- Lepší SEO, protože vyhledávač pochopí strukturu webu a někdy cestu zobrazí i ve výsledcích místo dlouhé adresy.
- Provázání stránek odkazy, což pomáhá indexaci hlubších částí webu.
Jak se drobečková navigace tvoří? Skoro vždy automaticky ze struktury webu. Redakční systém, tedy CMS, ví, do jaké kategorie článek patří, a cestu poskládá sám. Ve WordPressu ji mívá zabudované téma nebo ji doplní plugin pro SEO. U ručně psaného webu ji napíšete přímo do HTML.
Aby z ní měl užitek i vyhledávač, doplňte k ní strukturovaná data, tedy skrytý popis ve formátu JSON, který vyhledávači řekne, že jde právě o drobečkovou navigaci. Ta se pak může zobrazit i ve výsledcích hledání. Výsledek si ověříte v nástroji Google Search Console.
Kdy ji potřebuji? Vždycky, když má web víc úrovní, tedy kategorie a podkategorie. Typicky e-shop, katalog nebo rozsáhlá znalostní báze. Na jednostránkové vizitce nebo landing page nemá smysl, protože není kam se vracet.
Na co si dát pozor: drobečky nemají nahrazovat hlavní menu, jsou jen doplňkem. Poslední položka, tedy aktuální stránka, se běžně nepodtrhává ani neodkazuje sama na sebe. A hlavně musí odpovídat skutečné struktuře, jinak návštěvníka zmatou. Na mobilu ji nechte přehlednou, viz responzivní design.