Brødsmuler: Hierarki og skjemaregler

Brødsmuler er en ordnet sti med lenker som viser hvor den gjeldende siden befinner seg i nettstedets informasjonsarkitektur, eller IA: systemet av overordnede-, underordnede- og søskenrelasjoner som organiserer innhold. De lar en leser bevege seg oppover uten å starte på nytt fra hovednavigasjonen, samtidig som de gir crawlningsroboter og svarsystemer en eksplisitt, maskinlesbar beskrivelse av samme hierarki.

Den gjengitte stien er med hensikt bokstavelig. Den identifiserer tre reelle overordnede sider, navngir den gjeldende siden og lenker kun oppover. Den setter ikke inn «SEO-navigasjon» eller en annen frase bare fordi ordlyden kan tiltrekke søk.

Hvorfor dette elementet er viktig

Lesere kommer til dype sider fra søkeresultater, delte lenker, e-post og AI-svar. De har ofte ingen erindring av ruten nettstedets menyer forventer at de skal følge. En brødsmule løser denne usikkerheten med ett blikk: «Jeg leser en elementside inne i SEO-playbooken, og jeg kan returnere til begge samlingene.» Denne konteksten reduserer kostnaden ved å utforske et nettsted uten å tvinge leseren til å åpne en meny, redigere en URL eller bruke Tilbake-knappen.

Psykologien handler om orientering, ikke dekorasjon. En tydelig sti gir leseren en stabil stedsfølelse og en åpenbar rømningsvei. Dette er viktigst på store nettsteder hvor like sidetitler kan leve i forskjellige seksjoner—for eksempel en produktkategori kalt «Analyse» og en dokumentasjonsseksjon med samme navn. Overordnede sider tydeliggjør siden før leseren tolker detaljene.

Maskiner trenger det samme forholdet uttrykt uten å stole på visuell avstand eller chevroner. Maskinekstraherbarhet betyr at programvare kan gjenopprette en enhets mening og rekkefølge fra HTML eller strukturerte data. En semantisk <nav>, en ordnet liste, vanlige lenker, aria-current og samsvarende BreadcrumbList-data eksponerer en sekvens av enheter med eksplisitte posisjoner. En rad med stilerte <span>-elementer kan se identisk ut, men gir likevel ingen pålitelig navigasjonsmarkør eller listerekkefølge.

Den synlige stien og strukturerte output må fortelle én historie. Hvis siden synlig er under «Elementer» men skjemaet kaller «SEO-verktøy» dens overordnede, mottar systemene to konkurrerende hierarkier. Denne inkonsekvensen er verre enn å utelate skjema, fordi den gjør nettstedets enhetsrelasjoner mindre pålitelige.

Følg element-skrivereglene når du velger denne komponenten. Deres forrangsregel gjelder her: hvis formålet med en passasje er å kommunisere hierarki og oppover-navigasjon, bruk det typed brødsmuleelementet. Ikke etterlign det med fritekst, en skråstrek-separert undertittel eller lenkede søkeord.

Når du skal bruke det

Bruk brødsmuler når en side tilhører et stabilt hierarki med minst én meningsfull overordnet side utover hjemmesiden. Store redaksjonelle nettsteder, e-handelskataloger, dokumentasjonsbiblioteker, tjenesteområdestrukturer, kataloger og flernivå-produktsider har størst nytte fordi besøkende ofte kommer inn under toppnivået.

Bruk dem konsekvent innenfor en seksjon. En sti som vises på bare noen produktsider får lesere til å lure på om de manglende sidene hører til et annet sted, og gjør automatisert tolkning avhengig av mal-tilfeldigheter. Innholdsmodellen eller ruten bør gi hierarkiet; forfattere bør ikke rekonstruere det uavhengig på hver side.

Ikke bruk brødsmuler når det ikke er noe hierarki å uttrykke. En one-page-kampanje, et grunt nettsted hvor hver side er direkte under Hjem, eller en midlertidig applikasjonstilstand kan få liten nytte av dem. Å legge til «Hjem › Gjeldende side» på hver grunn side kan skape visuell støy uten å avsløre ny kontekst.

Vanlige nesten-treff inkluderer:

• En nettleserhistorikk-sti. «Søk › Produkt › Handlekurv» registrerer en økt, ikke et innholdshierarki. Forskjellige besøkende ville få forskjellige overordnede for samme side, så forholdet er ikke kanonisk.
• En søkeordbane. «Best CRM › Billig CRM › CRM for startups» kan plassere målfrase i syne, men fabrikkerer overordnede sider som kanskje ikke eksisterer som navigerbare sider. Brødsmuleetiketter navngir reelle noder; de er ikke en ekstra titteltag.
• En filtersti. «Sko › Blå › Størrelse 9» beskriver valgte fasetter. Den hører hjemme i filterkontroller med mindre hvert trinn er en stabil, indekserbar landingsside med et bevisst overordnet forhold.
• En fremdriftsindikator. «Detaljer › Betaling › Bekreftelse» kommuniserer trinn i en transaksjon. Den trenger stepper-semantikk og tilstand, ikke BreadcrumbList-markering.
• En innholdsfortegnelse. Seksjonslenker beveger seg innenfor det gjeldende dokumentet; brødsmuler beveger seg mellom dokumenter i nettstedshierarkiet.
• En tag-kjede. Tagger beskriver mange-til-mange-emner, mens brødsmuler krever én ordnet primærsti. En side kan ha flere tagger, men bør ikke eksponere flere konkurrerende overordnede i én sti.

Når en side legitimt vises i flere samlinger, velg ett primært kanonisk hierarki for brødsmulen. Bevar andre oppdagelsesruter gjennom kontekstuelle lenker eller samlingssider. Flere brødsmulestier tvinger leseren og skjemakonsumenten til å bestemme hvilken overordnet som er autoritativ.

Hvor du skal plassere det

Orientering fungerer bare når den kommer før siden krever tolkning, så plasser stien etter den globale nettstedtoppteksten og før sidens H1 eller hero-innhold. Den bør være den første sidespesifikke navigasjonsregionen. Hold samme posisjon på både desktop og mobil-layout, selv om stien brytes forskjellig.

Ikke plasser brødsmuler ved siden av en innholdsfortegnelse, delt verktøylinje, kategori-fliser, kontokontroller eller en reklame-badge. Disse elementene svarer på forskjellige spørsmål og får den smale orienteringslinjen til å se ut som en generell verktøylinje. Ikke plasser en annonse eller en innebygd handlingsoppfordring mellom stien og H1. Hvis heroen inneholder begge deler, stable brødsmulen over tittelen og separer promoterende innhold under introduksjonsteksten.

Anatomi

1. Navigasjonslandemerke: en <nav> med det tilgjengelige navnet «Brødsmuler» skiller denne stien fra den globale og lokale navigasjonen.
2. Ordnet liste: rekkefølge bærer mening fra bredeste overordnede til gjeldende side, så <ol> er påkrevd selv om listemarkører er visuelt fjernet.
3. Overordnede elementer: hver overordnet bruker sin kanoniske menneskelesbare etikett og en crawlningsbar lenke til den reelle overordnede siden.
4. Skilletegn: en chevron eller skråstrek skiller elementer visuelt. Den er dekorativ og skjult for hjelpeteknologi.
5. Gjeldende element: det siste elementet navngir den gjeldende siden, har ingen lenke og bruker aria-current="page".
6. Dokumentrelasjon: stien sitter over H1. Skjermbildet merker denne posisjonen, men plassering styres av malen snarere enn forfattet tekst.

Design-eksempler

Varianter endrer tetthet og responsiv oppførsel, aldri det underliggende hierarkiet.

Standard: vis hele stien når to til fem konsise elementer får plass. Dette er den foretrukne varianten fordi ingen kontekst er skjult.

Lang sti: tillat en seks- eller syv-elementers sti bare når hvert nivå representerer en ekte navigerbar overordnet side. Bryt ved elementgrenser; krymp aldri tekst til den blir vanskelig å lese.

Sammenslått mobil: når den reelle stien ikke kan brytes akseptabelt, bevar Hjem, den nærmeste overordnede og den gjeldende siden. En fokuserbar ellipse-kontroll kan avsløre skjulte mellomliggende overordnede. Hele stien må forbli i DOM-en eller bli tilgjengelig gjennom den kontrollen, og strukturerte data må beholde hvert reelle element.

Mørk hero: farger og fokusindikatorer tilpasser seg bakgrunnen, men etiketter, rekkefølge, lenkeoppførsel og tilgjengelig navn forblir identiske med standarden.

Parametere

Elementet er en strukturert liste fordi parallelle arrays av etiketter og URL-er er lette å komme i utakt med. Elementrekkefølge er hierarkiet, og de samme elementene fôrer synlig HTML og skjema.

Den første overskriften har ingen tilordning i dette elementet. Brødsmuler er et navigasjonslandemerke, ikke en titulert innholdsseksjon, og å plassere en overskrift i et element ville skape falsk dokumenthierarki. Det siste elementet utelater url i forfattet kilde som standard; en gjengiver kan bruke sidens kanoniske URL for BreadcrumbList-output uten å gjøre det synlige gjeldende elementet til en selvenke.

To elementer betyr én overordnet pluss den gjeldende siden. Fem er det normale øvre området. Syv er en hard maksimumsgrense fordi dypere stier blir vanskelige å skanne og avslører vanligvis et IA-problem som bør fikses ved kilden snarere enn skjules med stilark.

Syntaks og kodeeksempler

Det kanoniske komponentnavnet er breadcrumbs. Elementrekkefølgen må komme fra nettstedets gjennomgåtte hierarkidata, selv når eksempler viser verdier inline.

Bærbar Markdown-direktiv

:::breadcrumbs{ariaLabel="Brødsmuler" schema=true collapse=mobile}
::item{label="Hjem" url="/"}
::item{label="SEO-playbook" url="/seo-playbook/"}
::item{label="Elementer" url="/seo-playbook/elements/"}
::item{label="Brødsmuler" current=true}
:::

Hugo-shortcode

{{< breadcrumbs ariaLabel="Brødsmuler" schema="true" collapse="mobile" >}}
  {{< breadcrumb-item label="Hjem" url="/" />}}
  {{< breadcrumb-item label="SEO-playbook" url="/seo-playbook/" />}}
  {{< breadcrumb-item label="Elementer" url="/seo-playbook/elements/" />}}
  {{< breadcrumb-item label="Brødsmuler" current="true" />}}
{{< /breadcrumbs >}}

Dette er den bærbare adapterkontrakten, ikke en instruksjon om å legge til en ny shortcode i dette repositoriet. En Hugo-implementering bør normalt utlede elementene fra sideforfedre og seksjonsmetadata slik at en redaktør ikke kan publisere en sti som er uenig med ruting.

WordPress-blokk

<!-- wp:amicited/breadcrumbs {"ariaLabel":"Brødsmuler","schema":true,"collapse":"mobile"} -->
<!-- wp:amicited/breadcrumb-item {"label":"Hjem","url":"/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"SEO-playbook","url":"/seo-playbook/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"Elementer","url":"/seo-playbook/elements/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"Brødsmuler","current":true} /-->
<!-- /wp:amicited/breadcrumbs -->

WordPress bør fylle blokken fra sidens primære overordnede kjede og kanoniske URL-er. Manuelle overstyringer krever redaksjonell gjennomgang fordi endring av én etikett ellers kan få navigasjon, skjema og nettstedsarkitektur til å være uenige.

Eksempler

Bra: et ekte, navigerbart hierarki

Hjem › Dokumentasjon › Revisjoner › Friskhetsrevisjon

Dette er bra når Dokumentasjon, Revisjoner og Friskhetsrevisjon er reelle kanoniske sider i denne overordnet–underordnet-rekkefølgen. Hver overordnet forutsier sin destinasjon, og den gjeldende etiketten er konsis nok til å bekrefte plassering uten å gjenta hele H1.

Dårlig: søkeord som utgir seg for å være hierarki

Hjem › Beste AI SEO-verktøy › Rimelig AI-synlighetsplattform › Brødsmuler

Dette er dårlig når de to midterste etikettene ikke er reelle overordnede sider. Stien gir løfter som lenkene ikke kan innfri, gjentar promoterende fraser i stedet for å navngi seksjoner, og skaper en falsk enhetskjede for crawlningsroboter. Erstatt den med den korteste faktiske overordnede banen. Hvis de ønskede konseptene fortjener sider, opprett og integrer disse sidene i IA først; ikke forhåndsvis en imaginær arkitektur i brødsmuler.

Skjemamarkering og tilgjengelighet

Brødsmuler kan mate Schema.org BreadcrumbList, en ordnet liste hvis oppføringer er ListItem-objekter. Bruk én-baserte heltalls position-verdier og hold name og item på linje med den synlige etiketten og kanoniske destinasjonen. Generer JSON-LD og HTML fra ett dataobjekt slik at en omdøping, flytting eller kanonisk endring oppdaterer begge outputene samtidig.

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

Skjema beskriver det synlige hierarkiet; det autoriserer ikke en andre, optimalisert bane. Ikke inkluder omdirigeringer, sporingsparametere, ikke-kanoniske protokoll- eller vertsvarianter, nettstedssøkresultater, øktstatuser eller skjulte søkeordkategorier. Ikke publiser to BreadcrumbList-objekter for to mulige taksonomier. Velg den primære stien i innholdsmodellen og bruk den overalt.

Tilgjengelighet starter med <nav aria-label="Brødsmuler"> og en ordnet liste. Den tilgjengelige etiketten skiller denne navigasjonsregionen uten å kreve en synlig overskrift. Skjul dekorative skilletegn med aria-hidden="true" eller opprett dem i CSS slik at skjermlesere ikke annonserer «større enn» mellom hvert element. Merk kun det siste elementet med aria-current="page" og ikke lenk det til seg selv.

Hver overordnet lenke trenger en synlig fokusindikator og et mål stort nok til å aktiveres på en berøringsskjerm. Lange stier må brytes eller slås sammen gjennom en tastaturbetjenbar kontroll; horisontal rulling som skjuler den gjeldende posisjonen er ikke en akseptabel standard. Avkorting kan forkorte en visuell etikett bare når det fullstendige tilgjengelige navnet forblir tilgjengelig og den forkortede teksten fortsatt er gjenkjennelig. Stol aldri kun på farge for å skille lenkede overordnede fra det gjeldende elementet.

Skriveregler

Brødsmuletiketter er stedsnavn, så skriv dem som navigasjon snarere enn miniatyroverskrifter. Bruk det offisielle, korteste entydige navnet på hver seksjon eller side. «Dokumentasjon» fungerer bedre enn «Utforsk all produktdokumentasjon», fordi destinasjonen gir konteksten og stien må forbli skannbar.

• Bruk ett til seks ord og maks 60 tegn per etikett. Korte etiketter gjør hierarkiet synlig før linjebryting; de er ikke tillatelse til å forkorte ukjente begreper.
• Bruk normalt to til fem elementer, inkludert den gjeldende siden. Tillat seks eller syv bare når hvert nivå er strukturelt nødvendig.
• Ordne elementer fra den bredeste overordnede til den gjeldende siden. Reverser aldri stien eller plasser et søsken i sekvensen.
• Bruk setningskasus med mindre et merkevare, produkt eller akronym har en godkjent skrivemåte.
• Hold etiketter stabile på tvers av sider. Den samme overordnede kan ikke være «Dok» i én sti og «Dokumentasjon» i en annen, med mindre navigasjonssystemet endres globalt.
• Få overordnede etiketter til å matche eller gjenspeile destinasjonens synlige navn. En konsis navigasjonsetikett er akseptabelt; et annet søkeordmål er det ikke.
• Navngi den gjeldende siden konsist. Den kan forkorte en lang H1, men må fortsatt identifisere samme dokument.
• Bruk en nøytral tone. Brødsmuler orienterer; de selger ikke, gratulerer ikke, advarer ikke eller instruerer ikke.

Sett aldri handlingsoppfordringer, priser, lagerstatus, datoer, forfatternavn, vurderingsscore, emojier, ikoner med uavhengig betydning, påstander, sporingskoder eller spørringsparametere inne i en brødsmuletikett. Legg aldri til «Tilbake», «Forrige» eller «Neste» som et element fordi disse kontrollene uttrykker historikk eller sekvens snarere enn forfedre. Skilletegn eies av gjengiveren og er ikke en del av noen etikett.

Innleggstyper som bruker det

postTypes-frontmatteren registrerer de støttede sammenkoblingene. Tabellen konverterer disse sammenkoblingene til bruks- og plasseringsregler; det er ikke en påstand om at hver forekomst trenger en manuelt forfattet sti.

«Vanligvis» betyr bruk elementet når nettstedet har den navngitte stabile overordnede, og utelat det på en genuint grunn implementering i stedet for å finne opp et ekstra nivå. «Alltid» forutsetter at den angitte nøstede strukturen eksisterer. Maler bør eie gjengivelsen; innleggstypen definerer forventet hierarkikilde og redaksjonelle unntak.

QA-sjekkliste

• Ekte hierarki: Hver overordnet er en reell, bevisst overordnet i nettstedets primære IA, ikke et søkeord, tagg, filter eller tidligere besøk.
• Riktig posisjon: Stien vises etter den globale toppteksten og før H1, uten reklame eller urelatert verktøylinje satt inn mellom dem.
• Én sti: Siden eksponerer én synlig brødsmule og ett samsvarende BreadcrumbList, ikke konkurrerende stier.
• Fullstendig rekkefølge: Elementer går fra bredeste overordnede til gjeldende side, uten manglende strukturnivå eller ekstra søsken.
• Kanoniske lenker: Hver overordnet løser direkte til sin kanoniske, indekserbare URL uten sporingsparametere eller unødvendige omdirigeringer.
• Gjeldende status: Det siste synlige elementet navngir den gjeldende siden, er ikke lenket og har aria-current="page".
• Konsise etiketter: Hver etikett bruker det offisielle korteste entydige navnet, følger setningskasus og holder seg innenfor den redaksjonelle grensen.
• Semantisk HTML: Komponenten bruker et merket navigasjonslandemerke og ordnet liste; det er ikke en rad med generiske spann.
• Dekorative skilletegn: Skilletegn er skjult for hjelpeteknologi og vises ikke inne i tilgjengelige lenkenavn.
• Responsiv oppførsel: Gjeldende posisjon forblir tilgjengelig på smale skjermer; linjebryting, avsløring, fokusrekkefølge og berøringsmål fungerer uten skjult horisontalt innhold.
• Skjemaparitet: BreadcrumbList-navn, kanoniske URL-er, rekkefølge, antall elementer og posisjoner samsvarer med det fullstendige synlige hierarkiet i substans.
• Enkelt datakilde: HTML og JSON-LD genereres fra det samme gjennomgåtte hierarkiet snarere enn vedlikeholdt som separate kopier.
• Bærbar paritet: Markdown-, Hugo- og WordPress-representasjoner bevarer identisk elementrekkefølge, etiketter, destinasjoner og gjeldende status.
• Skjermbildestatus: Fangstkommentarer forblir ikke-gjengivende instruksjoner inntil reelle eiendeler finnes; intet ikke-eksisterende skjermbilde refereres til som et bilde.

FAQ

Akademimalen gjengir de fem gjennomgåtte spørsmålene som er lagret i frontmatter. De dekker URL-stier, det gjeldende elementet, strukturerte data, ustabile filtersider og praktiske dybdegrenser.