Drobečková navigace: Pravidla hierarchie a schématu

Drobečková navigace je seřazená cesta odkazů, která ukazuje, kde se aktuální stránka nachází v informační architektuře webu neboli IA: systému rodičovských, dceřiných a sourozeneckých vztahů, které organizují obsah. Umožňuje čtenáři pohybovat se nahoru, aniž by musel znovu začínat z hlavní navigace, a zároveň poskytuje crawlerům a odpověďovým systémům explicitní, strojově čitelný záznam stejné hierarchie.

Tato vykreslená cesta je záměrně doslovná. Identifikuje tři skutečné předky, pojmenovává aktuální stránku a odkazuje pouze nahoru. Nevkládá frázi „SEO navigace“ ani jiný výraz jen proto, že by toto znění mohlo přitahovat vyhledávání.

Proč na tomto prvku záleží

Čtenáři přicházejí na hluboké stránky z výsledků vyhledávání, sdílených odkazů, e-mailů a AI odpovědí. Často si nepamatují cestu, kterou od nich nabídky webu očekávají. Drobečková navigace tuto nejistotu odstraní na první pohled: „Čtu stránku prvku uvnitř SEO playbooku a mohu se vrátit do obou kolekcí.“ Tento kontext snižuje náklady na prozkoumávání webu, aniž by čtenář musel otevřít menu, upravovat URL nebo používat tlačítko Zpět.

Psychologie je o orientaci, ne o dekoraci. Jasná cesta dává čtenáři stabilní pocit místa a zřejmou únikovou cestu. To je nejdůležitější na velkých webech, kde podobné názvy stránek mohou žít v různých sekcích – například produktová kategorie s názvem „Analytika“ a dokumentační sekce se stejným názvem. Předci stránku rozlišují ještě dříve, než čtenář začne interpretovat její detaily.

Stroje potřebují stejný vztah vyjádřený bez spoléhání se na vizuální mezery nebo šipky. Strojová extrahovatelnost znamená, že software může získat význam a pořadí jednotky z HTML nebo strukturovaných dat. Sémantický <nav>, seřazený seznam, běžné odkazy, aria-current a odpovídající data BreadcrumbList odhalují sekvenci entit s explicitními pozicemi. Řada stylovaných <span> prvků může vypadat stejně, ale neposkytuje spolehlivý navigační landmark ani pořadí seznamu.

Viditelná cesta a strukturovaný výstup musí vyprávět jeden příběh. Pokud je stránka viditelně pod „Elements“, ale schéma označuje za jejího rodiče „SEO nástroje“, systém přijímá dvě konkurenční hierarchie. Tato nekonzistence je horší než vynechání schématu, protože činí vztahy entit webu méně důvěryhodnými.

Při výběru této komponenty se řiďte pravidly pro psaní prvků . Platí zde jejich pravidlo priority: pokud je účelem pasáže komunikovat hierarchii a navigaci nahoru, použijte typový prvek drobečkové navigace. Nenapodobujte ho volným textem, podnadpisem odděleným lomítkem nebo propojenými klíčovými slovy.

Kdy jej použít

Použijte drobečkovou navigaci, když stránka patří do stabilní hierarchie s alespoň jedním smysluplným rodičem kromě domovské stránky. Velké redakční weby, e‑commerce katalogy, knihovny dokumentace, struktury servisních oblastí, adresáře a víceúrovňové produktové weby z toho těží nejvíce, protože návštěvníci běžně vstupují pod nejvyšší úroveň.

Používejte je konzistentně napříč sekcí. Cesta objevující se pouze na některých produktových stránkách vede čtenáře k otázce, zda chybějící stránky patří jinam, a činí automatizovanou interpretaci závislou na náhodách šablon. Obsahový model nebo trasa by měly poskytovat hierarchii; autoři by ji neměli rekonstruovat nezávisle na každé stránce.

Nepoužívejte drobečkovou navigaci, když není co vyjádřit. Jednostránková kampaň, mělký web, kde je každá stránka přímo pod domovskou stránkou, nebo dočasný stav aplikace z ní nemusí získat užitečnou cestu. Přidání „Home › Aktuální stránka“ na každou mělkou stránku může vytvořit vizuální šum, aniž by odhalilo nový kontext.

Mezi časté téměř zásahy patří:

• Cesta podle historie prohlížeče. „Vyhledávání › Produkt › Košík“ zaznamenává relaci, nikoli hierarchii obsahu. Různí návštěvníci by pro stejnou stránku obdrželi různé rodiče, takže vztah není kanonický.
• Cesta podle klíčových slov. „Nejlepší CRM › Levné CRM › CRM pro startupy“ může umístit cílové fráze do zobrazení, ale vytváří fiktivní předky, kteří nemusí existovat jako navigovatelné stránky. Popisky drobečkové navigace pojmenovávají skutečné uzly; nejsou dalším titulek tagem.
• Cesta podle filtrů. „Boty › Modré › Velikost 9“ popisuje vybrané aspekty. Patří do ovládacích prvků filtrů, pokud není každý krok stabilní, indexovatelnou vstupní stránkou se záměrným rodičovským vztahem.
• Indikátor průběhu. „Detaily › Platba › Potvrzení“ komunikuje kroky v transakci. Potřebuje sémantiku krokování a stav, nikoli markup BreadcrumbList.
• Obsah. Sekční odkazy se pohybují v rámci aktuálního dokumentu; drobečková navigace se pohybuje mezi dokumenty v hierarchii webu.
• Řetězec tagů. Tagy popisují vztahy mnoho k mnoha, zatímco drobečková navigace vyžaduje jednu seřazenou primární cestu. Stránka může mít několik tagů, ale neměla by v jedné cestě odhalovat několik konkurenčních rodičů.

Když se stránka legitimně objevuje v několika kolekcích, vyberte jednu primární kanonickou hierarchii pro drobečkovou navigaci. Ostatní cesty objevování zachovejte prostřednictvím kontextových odkazů nebo stránek kolekcí. Více cest drobečkové navigace nutí čtenáře i spotřebitele schématu rozhodovat se, který rodič je autoritativní.

Kam ji umístit

Orientace funguje pouze tehdy, když dorazí dříve, než stránka vyžaduje interpretaci, proto umístěte cestu za globální hlavičku webu a před H1 nebo hero obsah stránky. Měla by to být první navigační oblast specifická pro stránku. Udržujte stejnou pozici na desktopových i mobilních rozvrženích, i když se cesta zalamuje jinak.

Neumísťujte drobečkovou navigaci vedle obsahu, sdíleného panelu nástrojů, kategorií účtu nebo propagačního odznaku. Tyto prvky odpovídají na různé otázky a způsobují, že úzká orientační linka vypadá jako univerzální panel nástrojů. Neumísťujte reklamu ani inline výzvu k akci mezi cestu a H1. Pokud hero obsahuje obojí, naskládejte drobečkovou navigaci nad titulek a propagační obsah oddělte pod úvodní kopii.

Anatomie

1. Navigační landmark: <nav> s přístupným názvem „Breadcrumb“ odlišuje tuto cestu od globální a lokální navigace.
2. Seřazený seznam: pořadí nese význam od nejširšího předka k aktuální stránce, proto je <ol> vyžadován, i když jsou vizuální značky seznamu odstraněny.
3. Položky předků: každý předek používá svůj kanonický lidsky čitelný popisek a procházený odkaz na skutečnou rodičovskou stránku.
4. Oddělovač: šipka nebo lomítko odděluje položky vizuálně. Je dekorativní a skrytý před asistenčními technologiemi.
5. Aktuální položka: poslední položka pojmenovává aktuální stránku, nemá odkaz a používá aria-current="page".
6. Vztah dokumentu: cesta je umístěna nad H1. Snímek obrazovky tuto pozici popisuje, ale umístění je řízeno šablonou, nikoli autorovaným obsahem.

Příklady designu

Varianty mění hustotu a responzivní chování, nikdy ne základní hierarchii.

Výchozí: zobrazte celou cestu, když se vejde dva až pět stručných položek. Toto je preferovaná varianta, protože není skryt žádný kontext.

Dlouhá cesta: povolte cestu o šesti nebo sedmi položkách pouze tehdy, když každá úroveň představuje skutečného navigovatelného předka. Zalamujte na hranicích položek; nikdy nezmenšujte text, dokud není obtížně čitelný.

Sbaleno na mobilu: když se skutečná cesta nemůže přijatelně zalomit, zachovejte Home, přímého rodiče a aktuální stránku. Zaostřitelný ovládací prvek s elipsou může odhalit skryté prostřední předky. Úplná cesta musí zůstat v DOM nebo být dostupná prostřednictvím tohoto ovládacího prvku a strukturovaná data musí zachovat každou skutečnou položku.

Tmavý hero: barvy a indikátory zaostření se přizpůsobují pozadí, ale popisky, pořadí, chování odkazů a přístupný název zůstávají identické s výchozím nastavením.

Parametry

Prvek je strukturovaný seznam, protože paralelní pole popisků a URL lze snadno špatně zarovnat. Pořadí položek je hierarchie a stejné položky napájejí viditelné HTML i schéma.

První nadpis nemá v tomto prvku mapování. Drobečková navigace je navigační landmark, nikoli sekce s titulkem obsahu, a umístění nadpisu do položky by vytvořilo falešnou hierarchii dokumentu. Poslední položka ve výchozím nastavení vynechává url v autorovaném zdroji; renderer může použít kanonickou URL stránky pro výstup BreadcrumbList, aniž by změnil viditelnou aktuální položku na odkaz na sebe sama.

Dvě položky znamenají jednoho předka plus aktuální stránku. Pět je běžný horní rozsah. Sedm je tvrdé maximum, protože hlubší cesty se obtížně skenují a obvykle odhalují problém s IA, který by měl být opraven u zdroje, nikoli skryt stylováním.

Syntaxe a příklady kódu

Kanonický název komponenty je breadcrumbs. Pořadí jejích položek musí pocházet z revidovaných hierarchických dat webu, i když příklady ukazují hodnoty inline.

Přenosná Markdown direktiva

:::breadcrumbs{ariaLabel="Breadcrumb" schema=true collapse=mobile}
::item{label="Home" url="/"}
::item{label="SEO playbook" url="/seo-playbook/"}
::item{label="Elements" url="/seo-playbook/elements/"}
::item{label="Breadcrumbs" current=true}
:::

Hugo shortcode

{{< breadcrumbs ariaLabel="Breadcrumb" schema="true" collapse="mobile" >}}
  {{< breadcrumb-item label="Home" url="/" />}}
  {{< breadcrumb-item label="SEO playbook" url="/seo-playbook/" />}}
  {{< breadcrumb-item label="Elements" url="/seo-playbook/elements/" />}}
  {{< breadcrumb-item label="Breadcrumbs" current="true" />}}
{{< /breadcrumbs >}}

Toto je smlouva o přenosném adaptéru, nikoli pokyn k přidání nového shortcodu do tohoto repozitáře. Hugo implementace by měla normálně odvozovat položky z předků stránky a metadat sekce, aby editor nemohl publikovat cestu, která je v rozporu s routováním.

WordPress blok

<!-- wp:amicited/breadcrumbs {"ariaLabel":"Breadcrumb","schema":true,"collapse":"mobile"} -->
<!-- wp:amicited/breadcrumb-item {"label":"Home","url":"/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"SEO playbook","url":"/seo-playbook/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"Elements","url":"/seo-playbook/elements/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"Breadcrumbs","current":true} /-->
<!-- /wp:amicited/breadcrumbs -->

WordPress by měl blok naplnit z primárního řetězce rodičů stránky a kanonických URL. Ruční přepsání vyžaduje redakční kontrolu, protože změna jednoho popisku může jinak způsobit nesoulad mezi navigací, schématem a architekturou webu.

Příklady

Dobrý: skutečná, navigovatelná hierarchie

Home › Documentation › Audits › Freshness audit

Toto je dobré, když Documentation, Audits a Freshness audit jsou skutečné kanonické stránky v tomto rodičovsko-dceřiném pořadí. Každý předek předpovídá svůj cíl a aktuální popisek je dostatečně stručný k potvrzení polohy, aniž by opakoval celý H1.

Špatný: klíčová slova vydávající se za hierarchii

Home › Best AI SEO Tool › Affordable AI Visibility Platform › Breadcrumbs

Toto je špatné, když dva prostřední popisky nejsou skutečné rodičovské stránky. Cesta dává sliby, které její odkazy nemohou splnit, opakuje propagační fráze místo pojmenování sekcí a vytváří falešný řetězec entit pro crawlery. Nahraďte ji nejkratší skutečnou cestou předků. Pokud si požadované koncepty zaslouží stránky, vytvořte je a nejprve je integrujte do IA; nepředvádějte imaginární architekturu v drobečkové navigaci.

Schema markup a přístupnost

Drobečková navigace může napájet Schema.org BreadcrumbList, seřazený seznam, jehož záznamy jsou objekty ListItem. Použijte celočíselné hodnoty position založené na jedničce a udržujte name a item v souladu s viditelným popiskem a kanonickým cílem. Generujte JSON-LD a HTML z jednoho datového objektu, aby přejmenování, přesun nebo kanonická změna aktualizovaly oba výstupy současně.

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type":"ListItem","position":1,"name":"Home","item":"https://amicited.com/"},
    {"@type":"ListItem","position":2,"name":"SEO playbook","item":"https://amicited.com/seo-playbook/"},
    {"@type":"ListItem","position":3,"name":"Elements","item":"https://amicited.com/seo-playbook/elements/"},
    {"@type":"ListItem","position":4,"name":"Breadcrumbs","item":"https://amicited.com/seo-playbook/elements/breadcrumbs/"}
  ]
}

Schéma popisuje viditelnou hierarchii; neopravňuje k druhé, optimalizované cestě. Nezahrnujte přesměrování, parametry sledování, nekanonické varianty protokolu či hostitele, výsledky vyhledávání na webu, stavy relace nebo skryté kategorie klíčových slov. Nepublikujte dva objekty BreadcrumbList pro dvě možné taxonomie. Vyberte primární cestu v obsahovém modelu a používejte ji všude.

Přístupnost začíná u <nav aria-label="Breadcrumb"> a seřazeného seznamu. Přístupný popisek odlišuje tuto navigační oblast bez potřeby viditelného nadpisu. Skryjte dekorativní oddělovače pomocí aria-hidden="true" nebo je vytvořte v CSS, aby screen readery neohlášovaly „větší než“ mezi každou položkou. Označte pouze poslední položku aria-current="page" a neodkazujte ji na sebe sama.

Každý odkaz na předka potřebuje viditelný indikátor zaostření a cíl dostatečně velký pro aktivaci na dotykové obrazovce. Dlouhé cesty se musí zalomit nebo sbalit pomocí ovládacího prvku ovladatelného klávesnicí; horizontální rolování, které skrývá aktuální pozici, není přijatelným výchozím stavem. Zkrácení může zkrátit vizuální popisek pouze tehdy, když zůstane k dispozici plný přístupný název a zkrácený text je stále rozlišitelný. Nikdy se nespoléhejte pouze na barvu pro oddělení prokliknutelných předků od aktuální položky.

Pravidla psaní

Popisky drobečkové navigace jsou názvy umístění, proto je pište jako navigaci, nikoli jako miniaturní titulky. Použijte oficiální, nejkratší jednoznačný název každé sekce nebo stránky. „Dokumentace“ funguje lépe než „Prozkoumat veškerou produktovou dokumentaci“, protože cíl poskytuje kontext a cesta musí zůstat skenovatelná.

• Použijte jedno až šest slov a maximálně 60 znaků na popisek. Krátké popisky zpřístupňují hierarchii před zalomením; nejsou povolením ke zkracování neznámých termínů.
• Použijte běžně dvě až pět položek včetně aktuální stránky. Povolte šest nebo sedm pouze tehdy, když je každá úroveň strukturálně nezbytná.
• Seřaďte položky od nejširšího předka k aktuální stránce. Nikdy cestu neobracejte ani neumísťujte sourozence do sekvence.
• Používejte větná velká písmena, pokud značka, produkt nebo akronym nemá schválený způsob psaní.
• Udržujte popisky stabilní napříč stránkami. Stejný rodič nemůže být v jedné cestě „Docs“ a v druhé „Dokumentace“, pokud se navigační systém nezmění globálně.
• Zajistěte, aby popisky předků odpovídaly nebo se úzce shodovaly s viditelným názvem cíle. Stručný navigační popisek je přijatelný; jiný cílový klíčový výraz nikoli.
• Pojmenujte aktuální stránku stručně. Může zkrátit dlouhý H1, ale stále musí identifikovat stejný dokument.
• Použijte neutrální tón. Drobečková navigace orientuje; neprodává, negratuluje, nevaruje ani neinstruuje.

Nikdy nevkládejte do popisku drobečkové navigace výzvy k akci, ceny, stav skladu, data, jména autorů, hodnocení, emodži, ikony s nezávislým významem, propagační tvrzení, sledovací kódy nebo parametry dotazu. Nikdy nepřidávejte jako položku „Zpět“, „Předchozí“ nebo „Další“, protože tyto ovládací prvky vyjadřují historii nebo sekvenci, nikoli předky. Oddělovače jsou vlastnictvím rendereru a nejsou součástí žádného popisku.

Typy příspěvků, které jej používají

Frontmatter postTypes zaznamenává podporované způsoby připojení. Tabulka převádí tyto způsoby na pravidla použití a umístění; není to tvrzení, že každá instance potřebuje ručně autorovanou cestu.

„Obvykle“ znamená, že prvek použijte, když má web pojmenovaného stabilního rodiče, a vynechejte ho u skutečně mělké implementace, místo abyste vymýšleli další úroveň. „Vždy“ předpokládá, že uvedená vnořená struktura existuje. Šablony by měly vlastnit vykreslování; typ příspěvku definuje očekávaný zdroj hierarchie a redakční výjimky.

QA kontrolní seznam

• Skutečná hierarchie: Každý předek je skutečným, záměrným rodičem v primární IA webu, nikoli klíčové slovo, tag, filtr nebo předchozí návštěva.
• Správná pozice: Cesta se objevuje za globální hlavičkou a před H1, bez vložené propagace nebo nesouvisejícího panelu nástrojů mezi nimi.
• Jedna cesta: Stránka vystavuje jednu viditelnou drobečkovou navigaci a jeden odpovídající BreadcrumbList, nikoli konkurenční cesty.
• Úplné pořadí: Položky jdou od nejširšího předka k aktuální stránce, bez chybějící strukturální úrovně nebo přidaného sourozence.
• Kanonické odkazy: Každý předek vede přímo na svou kanonickou, indexovatelnou URL bez parametrů sledování nebo zbytečných přesměrování.
• Aktuální stav: Poslední viditelná položka pojmenovává aktuální stránku, není prokliknutelná a má aria-current="page".
• Stručné popisky: Každý popisek používá oficiální nejkratší jednoznačný název, dodržuje větná velká písmena a zůstává v rámci redakčního limitu.
• Sémantické HTML: Komponenta používá popsaný navigační landmark a seřazený seznam; není to řada generických spanů.
• Dekorativní oddělovače: Oddělovače jsou skryté před asistenčními technologiemi a neobjevují se uvnitř přístupných názvů odkazů.
• Responzivní chování: Aktuální pozice zůstává dostupná na úzkých obrazovkách; zalamování, odhalování, pořadí zaostření a dotykové cíle fungují bez skrytého horizontálního obsahu.
• Paralela schématu: Názvy BreadcrumbList, kanonické URL, pořadí, počet položek a pozice odpovídají úplné viditelné hierarchii v podstatě.
• Jeden zdroj dat: HTML a JSON-LD jsou generovány ze stejné revidované hierarchie, nikoli udržovány jako samostatné kopie.
• Přenosná paralela: Markdown, Hugo a WordPress reprezentace zachovávají identické pořadí položek, popisky, cíle a aktuální stav.
• Stav snímků obrazovky: Komentáře k zachycení zůstávají nevykreslujícími instrukcemi, dokud neexistují skutečné assety; žádný neexistující snímek není odkazován jako obrázek.

FAQ

Akademická šablona vykresluje pět revidovaných otázek uložených ve frontmatter. Pokrývají URL cesty, aktuální položku, strukturovaná data, nestabilní filtrační stránky a praktické limity hloubky.