Drobečková navigace: Co to je a jak ji implementovat

Co jsou breadcrumbs?

Breadcrumbs jsou funkce, jejíž účelem je zlepšit uživatelskou navigaci a jasně naznačit, jak vyhledávačům, tak uživatelům, hierarchii stránek. Tímto způsobem může uživatel rychle navštívit jak finální stránku, tak kategorie, do kterých tato stránka patří.

Způsoby implementace drobečkové navigace

Z hlediska implementace máme v současnosti dvě možnosti: viditelnou pro uživatele a kódovou. Ve skutečnosti by měly být obě vždy implementovány společně, ne odděleně.

Viditelná

Ve viditelné možnosti web implementuje drobečkovou navigaci nahoře každé stránky, aby uživatel navštěvující stránku přesně věděl, kde se nachází. Pokud například koukáme na produktovou stránku e-shopu (počítač HP Envy), v drobečkové navigaci uvidíme následující:

Domů > Počítače > HP > Envy Tímto způsobem uživateli říkáme, že produkt, který si prohlíží, spadá do kategorie počítačů a patří také do rodiny počítačů HP. Z hlediska navigace je tato funkce velmi důležitá, protože pokud by uživatel chtěl vidět víc modelů HP nebo pokračovat v procházení počítačů, byl by od toho jen kliknutí daleko.

Bez této funkce se navigace stává mnohem obtížnější a šance, že uživatel web opustí, jsou mnohem vyšší.

Kód

Zatímco předchozí možnost nám umožnila přidat drobečkovou navigaci pro uživatele, tato možnost říká vyhledávačům, jak je náš obsah kategorizován. Je velmi důležité, aby tato implementace byla provedena správně, protože Google nerozumí breadcrumbs, které jsou pouze viditelné.

Níže si můžete prohlédnout příklad implementace breadcrumbs pomocí fragmentu skriptu JSON-LD.

<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Books", "item": "https://example.com/books" },{ "@type": "ListItem", "position": 2, "name": "Authors", "item": "https://example.com/books/authors" },{ "@type": "ListItem", "position": 3, "name": "Ann Leckie", "item": "https://example.com/books/authors/annleckie" },{ "@type": "ListItem", "position": 4, "name": "Ancillary Justice", "item": "https://example.com/books/authors/ancillaryjustice" }] } </script> Výše uvedený kód nám říká, že knihu „Ancillary Justice" napsala autorka Ann Leckie a jde o knihu.

Books > Authors > Ann Leckie > Ancillary Justice

Pokud jsme náš web postavili pomocí vlastního vývoje nebo některého z hlavních jazyků, budeme muset provést implementaci ručně. Pokud však používáme WordPress, máme k dispozici několik pluginů, které nám s touto implementací pomohou:

• ›Rank Math
• ›Yoast SEO

Ověření implementace

Jakmile je implementace hotová, nejdůležitější bude ověřit, že byla provedena správně. Zatímco ověření „viditelné" implementace bude velmi jednoduché, protože stačí zkontrolovat, že jsou všechny prvky správně propojené a fungují dobře, k ověření kódové implementace budeme potřebovat trochu víc úsilí.

I tak máme k dispozici nástroj Googlu a Chrome rozšíření, které nám výrazně usnadní život.

Nástroj pro strukturovaná data Googlu:

Pomocí nástroje Googlu můžeme validovat naše strukturovaná data buď přes URL, nebo na úrovni kódu, pokud zadáme fragment přímo.

Nástroj pro strukturovaná data Googlu

Pokud zadáme URL, Google vrátí analýzu se všemi strukturovanými daty, která detekoval.

Příklad analýzy URL v nástroji pro strukturovaná data Googlu.

Pokud naopak chceme nejprve otestovat JSON-LD kód breadcrumbu před implementací, můžeme použít nástroj „fragment kódu", který nám dá následující výsledek:

Validační nástroj fragmentu kódu pro strukturovaná data.

Structured Data Testing Tool (rozšíření Google Chrome)

Pokud místo návštěvy nástroje Googlu chceme validovat strukturovaná data breadcrumb (a další) přímo z prohlížeče, můžeme použít rozšíření „Structured Data Testing Tool", které nám zobrazí všechna detekovaná strukturovaná data a také případné chyby.

Chrome rozšíření pro validaci strukturovaných dat s příkladem článku ze SEOcrawl.

Sledování breadcrumbs v Google Search Console

Konečně, jakmile jsme provedli implementaci a ověření, zbývá jen sledovat aktivitu v Google Search Console, což nám umožní sledovat ji denně a detekovat případné anomálie.

Vizualizace reportu breadcrumbs v Search Console (spuštěno v září 2019).

Na závěr bychom se vás chtěli zeptat: jaké byly nejčastější chyby, na které jste při jejich implementaci narazili?

Rádi bychom sestavili sbírku a publikovali ji v tomto článku, abychom pomohli ostatním SEO profesionálům.

Děkujeme moc a nezapomeňte se s námi podělit o své komentáře!

Reference

• ›Dokumentace Googlu o Breadcrumbs