Breadcrumb navigácia je sekundárny navigačný prvok na webe, ktorý používateľovi ukazuje jeho aktuálnu pozíciu v štruktúre stránky. Názov pochádza z rozprávky o Perníkovej chalúpke, kde deti značili cestu omrvinkami. Na webe funguje rovnako, zobrazuje hierarchickú cestu od domovskej stránky až po aktuálnu podstránku, napríklad: Domov > Produkty > Notebooky > Lenovo ThinkPad.
Pre používateľa je breadcrumb navigácia orientačný bod. Vie kde sa nachádza, môže sa jedným klikom vrátiť o úroveň vyššie a nemusí hľadať cestu späť cez hlavné menu. Pre Google je to štrukturálny signál, ktorý pomáha crawlerom pochopiť architektúru webu a zobrazuje sa priamo vo výsledkoch vyhľadávania ako rich snippet. Weby s breadcrumbs majú v priemere o 10-15% vyššiu mieru prekliku z Google vyhľadávania podľa štúdií Backlinko.
Breadcrumbs sa zobrazujú väčšinou horizontálne pod hlavným menu alebo nad nadpisom stránky. Jednotlivé úrovne sú oddelené šípkou (>), lomkou (/) alebo iným vizuálnym separátorom. Každá úroveň okrem poslednej je klikateľný odkaz.
Technicky ide o zoznam odkazov, ktorý reflektuje hierarchiu URL štruktúry webu. Ak má váš e-shop kategóriu Oblečenie, podkategóriu Tričká a produkt Bavlnené tričko biele, breadcrumb bude vyzerať: Domov > Oblečenie > Tričká > Bavlnené tričko biele. Posledná položka je neaktívna, pretože používateľ sa už na tej stránke nachádza.
Z pohľadu kódu sa breadcrumbs najčastejšie implementujú ako neusporiadaný zoznam (ul/li) alebo navigačný element (nav) so štruktúrovanými dátami v JSON-LD formáte. Tie štruktúrované dáta sú to, čo Google potrebuje na zobrazenie breadcrumbs priamo vo výsledkoch vyhľadávania.
Existujú tri základné typy breadcrumbs a každý má svoje využitie podľa typu webu a správania používateľov.
Pre väčšinu webov a e-shopov sú hierarchické breadcrumbs najlepšou voľbou. Sú predvídateľné, ľahko implementovateľné a Google ich vie správne interpretovať.
Breadcrumb navigácia má priamy aj nepriamy vplyv na SEO výkon webu. Google oficiálne potvrdzuje, že breadcrumbs používa na pochopenie štruktúry webu a zobrazuje ich vo výsledkoch vyhľadávania.
Keď Google rozpozná breadcrumb štruktúru na stránke, môže ju zobraziť namiesto holej URL adresy vo výsledkoch. Namiesto www.eshop.sk/kategoria/podkategoria/produkt používateľ vidí prehľadnú cestu Domov > Kategória > Podkategória. Podľa dát od Sistrix to zvyšuje CTR o 10-30% v závislosti od odvetvia, pretože používateľ už pred klikom vie, v akej časti webu sa stránka nachádza.
Breadcrumbs vytvárajú automatické interné odkazy na nadradené kategórie a domovskú stránku. Každá produktová stránka tak odkazuje na svoju kategóriu a každá kategória na domovskú stránku. To distribuuje PageRank a link equity naprieč webom bez toho, aby ste museli manuálne vytvárať interné odkazy. Pri e-shope s 500 produktmi to znamená stovky automatických interných odkazov.
Google crawlery používajú breadcrumbs ako navigačný signál. Vedia, že stránka /produkty/notebooky/lenovo-thinkpad patrí pod /produkty/notebooky/ a tá pod /produkty/. To pomáha pri indexácii rozsiahlejších webov, kde crawler nemusí objaviť všetky stránky cez hlavné menu. Pri rozsiahlom e-shope na mieru s tisíckami produktov je to rozdiel medzi plnou a čiastočnou indexáciou.
SEO benefity sú viditeľné, ale rovnako dôležitý je vplyv na UX. Používatelia nečítajú weby lineárne. Prichádzajú z Google vyhľadávania priamo na produktovú stránku alebo článok a potrebujú sa zorientovať.
Štúdia Baymard Institute ukázala, že 70% používateľov e-shopov používa breadcrumbs na navigáciu namiesto tlačidla Späť v prehliadači alebo hlavného menu. Dôvod je jednoduchý, breadcrumbs sú vždy viditeľné, používateľ nemusí scrollovať hore a vie presne kam klik povedie.
Znižuje sa tým aj bounce rate. Ak používateľ príde na produkt, ktorý ho nezaujíma, breadcrumbs mu ponúknu jednoduchý prechod na kategóriu s podobnými produktmi. Bez breadcrumbs by pravdepodobne odišiel späť do Google vyhľadávania a skúsil konkurenciu.
WordPress nemá breadcrumbs v základnej inštalácii, ale implementácia je pomerne priamočiara. Máte tri hlavné možnosti.
Yoast SEO a Rank Math majú vstavaný breadcrumb modul. V nastaveniach pluginu aktivujete breadcrumbs, nakonfigurujete separátor a texty, a potom vložíte shortcode alebo PHP funkciu do šablóny témy. Výhodou je automatické generovanie JSON-LD štruktúrovaných dát. Pri Yoast SEO stačí vložiť do header.php alebo single.php súboru témy.
Breadcrumb NavXT je najpopulárnejší samostatný plugin pre breadcrumbs. Ponúka viac možností konfigurácie ako SEO pluginy, vlastné taxonomie, hierarchie pre custom post types, rôzne šablóny pre rôzne typy stránok. Vhodný ak potrebujete pokročilú kontrolu alebo ak nepoužívate Yoast/Rank Math.
Prémiové témy ako Astra, GeneratePress alebo Divi majú breadcrumbs zabudované. Aktivujete ich v nastaveniach témy bez potreby dodatočného pluginu. Nevýhoda môže byť limitovaná konfigurácia a závislosť na konkrétnej téme.
Pre WooCommerce e-shopy sú breadcrumbs súčasťou základnej inštalácie. WooCommerce ich automaticky generuje pre produkty a kategórie. Ak potrebujete upraviť ich vzhľad alebo štruktúru, funguje to cez WooCommerce hooky alebo child tému.
Samotné breadcrumbs na stránke nestačia na to, aby sa zobrazili v Google výsledkoch. Potrebujete k nim pridať štruktúrované dáta v Schema.org formáte. Google odporúča JSON-LD formát.
Základná štruktúra vyzerá takto, máte BreadcrumbList, ktorý obsahuje jednotlivé ListItem prvky s pozíciou, názvom a URL. Každý ListItem reprezentuje jednu úroveň v breadcrumb ceste. Google Rich Results Test (search.google.com/test/rich-results) vám overí, či sú dáta správne implementované.
Ak používate Yoast SEO, Rank Math alebo Breadcrumb NavXT, štruktúrované dáta sa generujú automaticky. Pri vlastnej implementácii ich musíte pridať manuálne do head sekcie stránky alebo ako inline script v tele stránky.
Vidíme ich opakovane pri auditoch webov. Väčšina z nich vzniká nepozornosťou alebo nepochopením účelu breadcrumbs.
Breadcrumbs dávajú zmysel pri hierarchických weboch, e-shopy, spravodajské portály, dokumentácie, rozsiahle firemné weby. Pri jednoduchých weboch s plochou štruktúrou môžu byť zbytočné.
Ak máte jednostránkový web alebo landing page, breadcrumbs nemajú čo zobrazovať. Podobne pri webe s 5-10 stránkami bez jasnej hierarchie, hlavné menu zvládne navigáciu lepšie. Pravidlo: ak vaša URL štruktúra nemá aspoň 2 úrovne pod domovskou stránkou, breadcrumbs pravdepodobne nepotrebujete.
Správne implementované breadcrumbs sú súčasťou každého kvalitného UX návrhu webu. Pri e-shope pre krby a krbové vložky, ktorý sme robili pre Gabo Krby, breadcrumbs pomáhajú používateľom orientovať sa v rozsiahalom katalógu produktov s viacerými kategóriami a filtračnými možnosťami.
Implementácia breadcrumb navigácie trvá skúsenému vývojárovi pár hodín vrátane štruktúrovaných dát. Benefity v podobe lepšieho SEO, nižšieho bounce rate a vyššieho CTR z vyhľadávania sa prejavia v priebehu týždňov po tom, čo Google reindexuje stránky. Ak riešite navigáciu na webe alebo e-shope a chcete ju spraviť správne, pozrite si naše projekty alebo nás kontaktujte a prejdeme váš projekt spolu.
