Design drobečkové navigace je archetypální. Její pozice na stránce je zdánlivě zřejmá. Již léta prokazuje svou hodnotu pro SEO. Přesto s přechodem na indexaci podle mobilních zařízení mnoho webů používá drobečkovou navigaci špatně nebo ji nemá vůbec.
To je chyba.
Drobečková navigace je přínosná pro SEO a použitelnost, pokud je optimálně implementována pro mobilní zařízení. Zde je vše, co potřebujete vědět, abyste ji používali správně.
Co je drobečková navigace?
Drobečková navigace je obvykle řada kontextových odkazů, které ukazují, kde se uživatel na webu nachází. Jsou formou sekundární navigace, která umožňuje uživatelům sledovat jejich cestu v hierarchii webu.
Kdy byste měli drobečkovou navigaci použít?
Drobečková navigace se nehodí pro všechny webové stránky. Není nutná pro weby, které:
- Neobsahují mnoho vnořených navigačních úrovní.
- Nemají žádnou logickou hierarchii nebo seskupení.
- Jsou navrženy jako lineární.
Pro takové webové stránky s plochou strukturou, kde se většina obsahu pohodlně nachází na stejné úrovni, by drobečkové navigace neměly velkou hodnotu, protože by neobsahovaly více než dvě úrovně.
To může platit i pro rozsáhlé webové stránky. Například web s obchodními zprávami může nabízet mnoho témat a tisíce článků, ale nepotřebuje více úrovní navigace.
Na druhou stranu pro weby založené na složitých hierarchických strukturách jsou drobečkové navigace nezbytné. Klasickým příkladem je elektronický obchod, ale jejich použití je mnohem širší.
Otázkou je, jak zajistit, aby drobečkové navigace byly užitečné jak pro uživatele, tak pro Google. To je umění samo o sobě.
3 typy drobečkových navigací
Většina odborníků na UX rozeznává tři typy:
- Drobečkové stopy založené na cestě (tzv. historie).
- Drobečky založené na atributech.
- Drobečkové stopy založené na hierarchii (tzv. location-based)
Pro SEO by měla existovat pouze jedna: drobečková navigace založená na hierarchii.
Drobečkové trasy založené na cestě zobrazují jedinečné kroky uživatele vedoucí k jeho aktuální stránce. Zobrazování předchozí cesty uživatele po kliknutí není nejlepší postup pro SEO ani pro použitelnost.
- Kopíruje funkci, kterou nabízí tlačítko zpět v prohlížeči.
- Pro uživatele, kteří se dostanou na stránku hluboko v rámci webu, je nepoužitelná.
- Často je dlouhá, opakující se a v konečném důsledku pro uživatele matoucí.
- Vzhledem k tomu, že drobečková navigace je dynamická a jedinečná pro každou relaci, vyhledávače interní odkazy nezpracovávají.
Drobečky by měly zobrazovat hierarchii, nikoli historii.
Drobečkové navigace založené na atributech jsou vhodné v případě, že obsah na konkrétní stránce patří do více kategorií a atributů. Například bota může být černá kotníková bota s podpatkem.
Pro tyto vlastnosti neexistuje žádná logická hierarchie. Vzniká tedy otázka, v jakém pořadí drobečky zobrazovat. Měla by cesta drobečků vypadat takto:
Domů > Boty > Podpatky > Černé > Kotníčková délka
Nebo
Domů > Podpatky > Boty > Délka ke kotníkům > Černá
Nebo nějaká jiná kombinace?
Viděl jsem doporučení, aby se primární cesta určovala na základě používání atributů nebo objemu dotazů. Nebo přizpůsobit drobečkovou cestu tak, aby odrážela individuální cestu každého uživatele v rámci hierarchie webu. Oba přístupy jsou špatné.
Než se snažit vnutit lineární strukturu drobečkové navigace něčemu vrozeně polyhierarchickému, raději zobrazte atributy ve formátu vhodném pro jejich povahu jako možnosti filtrů.
Zůstane nám hierarchická drobečková navigace. Ty vizualizují hloubku architektury webu, začínají nejširší kategorií nejvyšší úrovně a postupují dolů přes specifičtější vnořené podkategorie, než se dostanou na aktuální stránku.
Hierarchické drobečkové navigace jsou nejčastěji používané, nejintuitivněji pochopitelné a velmi účinné pro SEO. Jako takové budou ve zbytku tohoto článku jediným uvažovaným typem.
Výhody drobečkové navigace a strukturovaných dat pro SEO
Drobečková navigace je základním prvkem pro podporu hledání cesty - orientuje uživatele a nabízí přístup na relevantní stránky vyšší úrovně jedním kliknutím. To je důležité zejména tehdy, když návštěvník přistane na stránce hluboko v hierarchii webu. Například na stránce produktu po kliknutí na výsledek vyhledávání Google s dlouhým dotazem.
►Jde však o víc než jen o použitelnost webových stránek. Drobečky podporují každý krok procesu SEO.
1. Více procházení
Interní odkazy generované drobečky pomáhají odhalit všechny úrovně hierarchie vyhledávačům. To je důležité zejména pro nižší úrovně, které bez těchto signálů nemusí být dosaženy, nebo když jsou dosaženy, nemusí dosáhnout dostatečně vysoké priority ve frontě procházení Google.
Přínosy lze měřit snížením počtu vyloučení "discovered - currently not indexed" v Google Search Console a zvýšenou frekvencí procházení.
2. Lepší indexování
Hierarchické odkazy pomáhají společnosti Google kontextualizovat obsah a správně přiřadit stránky ve struktuře webu. Pokud Google vidí URL adresy pouze prostřednictvím souboru mapy stránek, nechápe, jak spolu URL adresy souvisejí.
To způsobuje potíže, když se Google snaží pochopit, jak relevantní je daná stránka v kontextu webu. Drobečkové odkazy podporují vytváření tematických sil, které jsou při indexování zaměřeném na entity stále důležitější.
►Přínosy lze měřit zvýšením počtu platných adres URL v nástroji Google Search Console a vyšší rychlostí indexování.
3. Vyšší hodnocení, kliknutí v SERP a organické relace
Drobečková navigace podporuje řazení dvěma způsoby:
- Posiluje architekturu interních odkazů: Umožňují tok odkazů mezi tematicky příbuznými stránkami.
- Přirozený způsob, jak zahrnout klíčová slova nad ohybem stránky: Je nepravděpodobné, že by to mělo vliv na vysoce konkurenční dotazy, ale může to mít význam u longtailových klíčových slov.
Přínos lze měřit v měřením průměrné pozice i zvýšení počtu zobrazení v Google Search Console. Zvýšená pozice samozřejmě zvýší počet kliknutí, a tím i organických relací.
Drobečky na webu vs. drobečky ve značkách schématu
Drobečky zobrazené na stránce a značení breadcrumb schema jsou oddělené věci. To, že jsou na stránce zobrazeny drobečky, neznamená, že jsou na stránce strukturovaná data breadcrumb schema.
Nejrychlejší způsob, jak zjistit, zda má váš web platnou značku breadcrumb schema, je zkontrolovat hlášení breadcrumbs v Google Search Console. Pokud vidíte chyby, zkontrolujte strukturovaná data BreadcrumbList.
►Pro optimální dopad je nejlepší, aby obě tyto informace nejen existovaly, ale aby si navzájem potvrzovaly zprávu o struktuře webu. To dále podpoří Google při kontextualizaci obsahu, což opět povede k lepšímu indexování.
Strukturovaná data drobečkové navigace mohou také pomoci organickému výkonu tím, že v úryvku SERP změní cestu URL na drobečkovou cestu. Ačkoli Google může zobrazit drobečkovou cestu i bez drobečkové značky.
Naopak, stejně jako u většiny značek, pouhá přítomnost značek schématu nezaručuje změnu a někdy může vést k neoptimálním výsledkům drobečkové cesty, často v závislosti na délce. Proto pečlivě sledujte dopad. Pro většinu webů jsou však strukturovaná data drobečkové navigace osvědčeným postupem.
Nejlepší praxe drobečkové navigace
Drobečková navigace byla dříve stabilně konzistentní součástí rozhraní. Pravděpodobně kvůli jejich relativní jednoduchosti.
Existují hierarchické odkazy a jsou odděleny nějakým oddělovačem. Pak ale přišel systém mobile-first a vše se zkomplikovalo. Historické osvědčené postupy bylo třeba upravit pro menší obrazovku.
Jaké jsou tedy osvědčené postupy pro drobečkovou navigaci v rámci UX pro mobilní zařízení?
Klíčové osvědčené postupy pro uživatelské prostředí jsou následující:
- Konzistentně dostupné: Drobečky by měly být přítomny na každé relevantní stránce. Relevantní znamená, že přidávají významnou hodnotu pro hledání cesty, která stojí za přední umístění.
- Logické umístění: Umístění drobečků: Umístěte drobečky přímo pod primární navigační nabídku a nad H1. To je místo, kde je uživatelé očekávají. Umístěním kamkoli jinam nevyužijete všech výhod použitelnosti, a pokud budou nízko na stránce, snížíte jejich sílu vnitřního propojení.
- Jasný začátek a konec: Drobečky by měly ukazovat cestu z domovské stránky na aktuální stránku. Domovská stránka funguje jako kotva, která dává uživatelům silný pocit orientace. Zobrazení poslední položky jako neklikatelného a jako takového vizuálně výrazného prvku potvrzuje uživateli, na jaké stránce se právě nachází.
- Symbolický oddělovač: Optimálním oddělovačem pro oddělování hypertextových odkazů v drobečkové navigaci zůstává symbol "větší než" (>), protože je výstižný a zároveň naznačuje vztah mezi stránkami. Ostatní možnosti, jako jsou lomítka (/) nebo roury (|), neoznačují hierarchii. Zatímco možnosti jako " a -> zabírají zbytečně mnoho místa.
- Velikost je tak akorát: Drobečkové odkazy: Udržujte jednoduchý a nenápadný design drobečkových odkazů pomocí malého písma, které je však dostatečně velké, aby se na něj dalo klepnout, a to ve stylu, který je konzistentní s textovými odkazy na ostatních webových stránkách. Nezahlcujte řádek zbytečným textem, například "Nacházíte se zde" nebo "Navigace".
A jaké jsou osvědčené postupy pro breadcrumb SEO pro indexaci mobile-first?
Je to samozřejmost, ale spousta webů to dělá špatně. Mějte drobečkové navigace viditelné na mobilních zařízeních ve stejném designu jako na počítačích.
Jako každý kritický prvek SEO musí být vykresleny na straně serveru a musí být možné je procházet bez zapnutého JavaScriptu.
Zahrňte úplnou navigační cestu v hierarchii až k aktuální stránce. Propojte všechny tyto stránky, kromě poslední položky, aby nedocházelo ke zmatkům při opětovném načítání stránky samonaváděcím odkazem. Nezkracujte drobečkové navigace vynecháním kroků nebo zkracováním mezikroků pomocí "..." nebo zahrnutím pouze posledních úrovní. Všechny tyto způsoby negují sílu drobečkové navigace pro SEO.
Otázkou tedy je, jak zahrnout všechny odkazy, aniž by se drobečková navigace na mobilních zařízeních rozbalila na více řádků. Nejen proto, že víceřádková drobečková stopa dobře neilustruje strukturu řetězce. Ale hlavně proto, že na malé obrazovce zabírá drahocenný prostor.
Chcete-li dosáhnout jednořádkové drobečkové navigace, aniž byste obětovali design nebo použitelnost, využijte přetečení. To umožňuje uživatelům přejetím zobrazit celou stopu, což lze podpořit začleněním asistenta přejetí nebo horizontálního posuvníku. Je však nutné, aby byl overflow implementován pomocí CSS, aby zůstal šetrný k SEO.
Nemějte pocit, že musíte v drobečkové navigaci zrcadlit nadpis stránky. Je hezké je mít, ale ne na úkor toho, aby byly dlouhé nebo se opakovaly.
Například na portálu o nemovitostech, pokud budete vycházet z názvu, můžete skončit u drobečků:
Domů > Nemovitosti na prodej > Byty na prodej > Byty na prodej v Brně > Byty na prodej v Žabovřeskách > Garsoniéry na prodej v Žabovřeskách
Mnohem lepší bude drobečková navigace v podobě:
Domů > Prodej > Byty > Byty v Brně > Žabovřesky > Garsoniéry
Drobečky jsou nezbytné
Drobečky jsou nezbytnou formou sekundární navigace pro hierarchicky složité weby. Podporují hledání cesty a zlepšují použitelnost.
Kromě toho zlepšují SEO díky usnadnění procházení, kontextualizaci obsahu pro indexaci a poskytování interních odkazů. Archetypální styl s mobilním nádechem, kdy se celá drobečková cesta vejde na jediný řádek díky přetečení CSS, ukáže plnou sílu drobečkových cest.
Zdroj: marketingland.com, facebook.com, cpcstrategy.com
Autor: Vlastimil Malík
Foto zdroj: pixabay.com
