Brødkrummer: Hierarki- og skemaregler

Brødkrummer er en ordnet sti af links, der viser, hvor den aktuelle side befinder sig i sitets informationsarkitektur (IA): systemet af forældre-, børne- og søskendeforhold, der organiserer indhold. De lader en læser bevæge sig opad uden at starte forfra fra hovednavigationen, samtidig med at de giver crawls og svarsystemer en eksplicit, maskinlæsbar redegørelse for det samme hierarki.

Den viste sti er bevidst bogstavelig. Den identificerer tre reelle forfædre, navngiver den aktuelle side og linker kun opad. Den indsætter ikke “SEO-navigation” eller en anden frase, blot fordi formuleringen måske tiltrækker søgninger.

Hvorfor dette element er vigtigt

Læsere ankommer til dybe sider fra søgeresultater, delte links, e-mails og AI-svar. De har ofte ingen erindring om den rute, sitets menuer forventer, de skal følge. En brødkrummesti løser den usikkerhed på ét blik: “Jeg læser en elementside inde i SEO-playbooken, og jeg kan vende tilbage til begge samlinger.” Den kontekst sænker omkostningerne ved at udforske et site uden at tvinge læseren til at åbne en menu, redigere en URL eller bruge Tilbage-knappen.

Psykologien handler om orientering, ikke dekoration. En tydelig sti giver læseren en stabil fornemmelse af sted og en oplagt flugtvej. Dette betyder mest på store sites, hvor lignende sidetitler kan befinde sig i forskellige sektioner – for eksempel en produktkategori kaldet “Analytics” og en dokumentationssektion med samme navn. Forfædrene disambiguerer siden, før læseren fortolker dens detaljer.

Maskiner har brug for det samme forhold udtrykt uden at stole på visuel afstand eller pile. Maskinekstraherbarhed betyder, at software kan genfinde en enheds betydning og rækkefølge fra HTML eller strukturerede data. En semantisk <nav>, en ordnet liste, almindelige links, aria-current og matchende BreadcrumbList-data eksponerer en sekvens af entiteter med eksplicitte positioner. En række stylede <span>-elementer kan se identiske ud, men giver ingen pålidelig navigationsmarkering eller listefølge.

Den synlige sti og det strukturerede output skal fortælle én historie. Hvis siden visuelt er under “Elementer”, men skemaet kalder “SEO-værktøjer” dens forælder, modtager systemer to konkurrerende hierarkier. Den inkonsistens er værre end at udelade skema, fordi den gør sitets entitetsrelationer mindre troværdige.

Følg skrivereglerne for elementer , når du vælger denne komponent. Deres forrangsregel gælder her: hvis formålet med en passage er at kommunikere hierarki og opadgående navigation, brug da det typedefinerede brødkrummeelement. Efterlign det ikke med fritekst, en skråstregssepareret undertitel eller linkede søgeord.

Hvornår skal det bruges

Brug brødkrummer, når en side tilhører et stabilt hierarki med mindst én meningsfuld forælder ud over startsiden. Store redaktionelle sites, e-handelskataloger, dokumentationsbiblioteker, serviceområdestrukturer, mapper og produktsteder på flere niveauer har størst gavn, fordi besøgende ofte kommer ind under topniveauet.

Brug dem konsekvent på tværs af en sektion. En sti, der kun vises på nogle produktsider, får læsere til at spekulere på, om de manglende sider hører til et andet sted, og gør automatiseret fortolkning afhængig af skabelontilfældigheder. Indholdsmodellen eller ruten bør levere hierarkiet; forfattere bør ikke rekonstruere det uafhængigt på hver side.

Brug ikke brødkrummer, når der ikke er noget hierarki at udtrykke. En et-sides kampagne, et lavt site hvor hver side er direkte under Hjem, eller en midlertidig applikationstilstand får muligvis ingen nyttig rute af dem. At tilføje “Hjem › Aktuel side” til alle lavvandede sider kan skabe visuel støj uden at afsløre ny kontekst.

Almindelige næsten-missere inkluderer:

• En browserhistoriksti. “Søgning › Produkt › Kurv” registrerer en session, ikke et indholdshierarki. Forskellige besøgende ville modtage forskellige forældre for samme side, så forholdet er ikke kanonisk.
• En søgeordssti. “Bedste CRM › Billig CRM › CRM til startups” placerer muligvis målsøgeord i syne, men opfinder forfædre, som måske ikke eksisterer som navigerbare sider. Brødkrummeetiketter navngiver reelle noder; de er ikke en ekstra titeltag.
• En filtersti. “Sko › Blå › Størrelse 9” beskriver valgte facetter. Den hører til i filterkontroller, medmindre hvert trin er en stabil, indekserbar landingsside med et bevidst forældreforhold.
• En fremskridtsindikator. “Detaljer › Betaling › Bekræftelse” kommunikerer trin i en transaktion. Den har brug for stepper-semantik og -tilstand, ikke BreadcrumbList-markup.
• En indholdsfortegnelse. Sektionslinks bevæger sig inden for det aktuelle dokument; brødkrummer bevæger sig mellem dokumenter i sitehierarkiet.
• En tagkæde. Tags beskriver mange-til-mange-emner, mens brødkrummer kræver én ordnet primær sti. En side kan have flere tags, men bør ikke eksponere flere konkurrerende forældre i én sti.

Når en side legitimt optræder i flere samlinger, skal du vælge ét primært kanonisk hierarki til brødkrummen. Bevar andre opdagelsesruter gennem kontekstuelle links eller samlingssider. Flere brødkrummestier tvinger læseren og skemaforbrugeren til at beslutte, hvilken forælder der er autoritativ.

Hvor skal det placeres

Orientering virker kun, når den ankommer, før siden kræver fortolkning, så placer stien efter den globale site-header og før sidens H1 eller hero-indhold. Det bør være det første sidespecifikke navigationsområde. Behold samme position på både desktop- og mobillayouts, selvom stien pakkes forskelligt.

Placer ikke brødkrummer ved siden af en indholdsfortegnelse, delt værktøjslinje, kategori-chips, kontokontroller eller et reklamemærke. Disse elementer besvarer forskellige spørgsmål og får den smalle orienteringslinje til at ligne en generel værktøjslinje. Placer ikke en annonce eller inline call to action mellem stien og H1. Hvis heroen indeholder begge dele, stable brødkrummen over titlen og adskil reklameindholdet under den indledende tekst.

Anatomi

1. Navigationsmarkering: en <nav> med det tilgængelige navn “Brødkrummer” adskiller denne sti fra den globale og lokale navigation.
2. Ordnet liste: rækkefølge bærer betydning fra bredeste forfader til aktuel side, så <ol> er påkrævet, selvom listemarkører er visuelt fjernet.
3. Forfædreelementer: hver forfader bruger sin kanoniske, læsbare etiket og et crawlbart link til den reelle forælderside.
4. Separator: en pileform eller skråstreg adskiller elementer visuelt. Den er dekorativ og skjult for hjælpeteknologi.
5. Aktuelt element: det sidste element navngiver den aktuelle side, har intet link og bruger aria-current="page".
6. Dokumentforhold: stien ligger over H1. Skærmbilledet markerer denne position, men placeringen styres af skabelonen, ikke af forfattet tekst.

Designeksempler

Varianter ændrer tæthed og responsiv adfærd, aldrig det underliggende hierarki.

Standard: vis hele stien, når to til fem korte elementer passer. Dette er den foretrukne variant, fordi ingen kontekst er skjult.

Lang sti: tillad en sti med seks eller syv elementer kun, når hvert niveau repræsenterer en ægte navigerbar forfader. Bryd ved elementgrænser; formindsk aldrig tekst, indtil den bliver svær at læse.

Sammenklappet mobil: når den reelle sti ikke kan pakkes acceptabelt, bevar Hjem, den umiddelbare forælder og den aktuelle side. En fokuserbar ellipseknap kan afsløre skjulte mellemliggende forfædre. Den fulde sti skal forblive i DOM eller blive tilgængelig via den knap, og strukturerede data skal beholde alle reelle elementer.

Mørk hero: farver og fokusindikatorer tilpasser sig baggrunden, men etiketter, rækkefølge, linkadfærd og tilgængeligt navn forbliver identiske med standarden.

Parametre

Elementet er en struktureret liste, fordi parallelle arrays af etiketter og URL’er er lette at bringe ud af justering. Elementrækkefølge er hierarkiet, og de samme elementer fodrer synlig HTML og skema.

Den første overskrift har ingen tilknytning i dette element. Brødkrummer er en navigationsmarkering, ikke en tituleret indholdssektion, og at placere en overskrift i et element ville skabe falsk dokumenthierarki. Det sidste element udelader url i forfattet kilde som standard; en renderer kan bruge sidens kanoniske URL til BreadcrumbList-output uden at gøre det synlige aktuelle element til et selvlink.

To elementer betyder én forfader plus den aktuelle side. Fem er den normale øvre grænse. Syv er en hård maksimumgrænse, fordi dybere stier bliver svære at skanne og afslører som regel et IA-problem, der bør løses ved kilden snarere end skjules med styling.

Syntaks og kodeeksempler

Det kanoniske komponentnavn er breadcrumbs. Dets elementrækkefølge skal komme fra sitets gennemgåede hierarkidata, selv når eksempler viser værdier inline.

Bærbar Markdown-direktiv

:::breadcrumbs{ariaLabel="Brødkrummer" 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ødkrummer" current=true}
:::

Hugo-shortcode

{{< breadcrumbs ariaLabel="Brødkrummer" 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ødkrummer" current="true" />}}
{{< /breadcrumbs >}}

Dette er den bærbare adapterkontrakt, ikke en instruktion om at tilføje en ny shortcode til dette repository. En Hugo-implementering bør normalt udlede elementerne fra sideancestri og sektionsmetadata, så en redaktør ikke kan publicere en sti, der er i uoverensstemmelse med routing.

WordPress-blok

<!-- wp:amicited/breadcrumbs {"ariaLabel":"Brødkrummer","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ødkrummer","current":true} /-->
<!-- /wp:amicited/breadcrumbs -->

WordPress bør udfylde blokken fra sidens primære forældrekæde og kanoniske URL’er. Manuelle tilsidesættelser kræver redaktionel gennemgang, fordi ændring af én etiket ellers kan få navigation, skema og sitearkitektur til at være uenige.

Eksempler

Godt: et ægte, navigerbart hierarki

Hjem › Dokumentation › Revisioner › Opdateringsrevision

Dette er godt, når Dokumentation, Revisioner og Opdateringsrevision er reelle kanoniske sider i den forældre-barn-rækkefølge. Hver forfader forudsiger sin destination, og den aktuelle etiket er kort nok til at bekræfte placering uden at gentage hele H1.

Dårligt: søgeord, der udgiver sig for at være hierarki

Hjem › Bedste AI SEO-værktøj › Overkommelig AI-synlighedsplatform › Brødkrummer

Dette er dårligt, når de to midterste etiketter ikke er reelle forældresider. Stien giver løfter, som dens links ikke kan indfri, gentager reklamefraser i stedet for at navngive sektioner og skaber en falsk entitetskæde for crawls. Erstat den med den korteste faktiske forfadersti. Hvis de ønskede koncepter fortjener sider, skal du oprette og integrere disse sider i IA først; forhåndsvis ikke en imaginær arkitektur i brødkrummer.

Skema-markup og tilgængelighed

Brødkrummer kan fodre Schema.org BreadcrumbList, en ordnet liste, hvis poster er ListItem-objekter. Brug en-baserede heltals position-værdier og hold name og item justeret med den synlige etiket og kanoniske destination. Generér JSON-LD og HTML fra ét dataobjekt, så en omdøbning, flytning eller kanonisk ændring opdaterer begge outputs sammen.

{
  "@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ødkrummer","item":"https://amicited.com/seo-playbook/elements/breadcrumbs/"}
  ]
}

Skema beskriver det synlige hierarki; det autoriserer ikke en anden, optimeret sti. Inkludér ikke omdirigeringer, sporingsparametre, ikke-kanoniske protokol- eller host-varianter, on-site-søgeresultater, sessionstilstande eller skjulte søgeordskategorier. Publicér ikke to BreadcrumbList-objekter for to mulige taksonomier. Vælg den primære sti i indholdsmodellen og brug den overalt.

Tilgængelighed starter med <nav aria-label="Brødkrummer"> og en ordnet liste. Den tilgængelige etiket adskiller dette navigationsområde uden at kræve en synlig overskrift. Skjul dekorative separatorer med aria-hidden="true" eller opret dem i CSS, så skærmlæsere ikke annoncerer “større end” mellem hvert element. Markér kun det sidste element med aria-current="page" og link det ikke til sig selv.

Hvert forfædrelink behøver en synlig fokusindikator og et mål stort nok til at aktivere på en berøringsskaerm. Lange stier skal pakkes eller foldes sammen via et tastaturbetjenbart kontrol; horisontal scroll, der skjuler den aktuelle position, er ikke en acceptabel standard. Afkortning må forkorte en visuel etiket kun, når det fulde tilgængelige navn forbliver tilgængeligt, og den forkortede tekst stadig kan skelnes. Stol aldrig udelukkende på farve til at adskille linkede forfædre fra det aktuelle element.

Skriveregler

Brødkrummeetiketter er stednavne, så skriv dem som navigation snarere end miniatureoverskrifter. Brug det officielle, korteste utvetydige navn for hver sektion eller side. “Dokumentation” fungerer bedre end “Udforsk al produktdokumentation”, fordi destinationen leverer konteksten, og stien skal forblive skannbar.

• Brug et til seks ord og højst 60 tegn pr. etiket. Korte etiketter gør hierarkiet synligt, før det pakkes; de er ikke tilladelse til at forkorte ukendte termer.
• Brug normalt to til fem elementer, inklusive den aktuelle side. Tillad seks eller syv kun, når hvert niveau er strukturelt nødvendigt.
• Rækkefølg elementer fra den bredeste forfader til den aktuelle side. Vend aldrig stien om eller placer et søskendeelement i sekvensen.
• Brug sætningsform, medmindre et brand, produkt eller akronym har en godkendt stavemåde.
• Hold etiketter stabile på tværs af sider. Den samme forælder kan ikke være “Docs” i én sti og “Dokumentation” i en anden, medmindre navigationssystemet ændres globalt.
• Få forfædretiketter til at matche eller afspejle destinationens synlige navn. En kort navigationstekst er acceptabel; et andet søgeordsmål er ikke.
• Navngiv den aktuelle side kortfattet. Den kan forkorte en lang H1, men skal stadig identificere det samme dokument.
• Brug en neutral tone. Brødkrummer orienterer; de sælger ikke, lykønsker ikke, advarer ikke eller instruerer ikke.

Sæt aldrig call to action, priser, lagerstatus, datoer, forfatternavne, anmeldelsesscores, emojis, ikoner med selvstændig betydning, reklamepåstande, sporingskoder eller forespørgselsparametre inde i en brødkrummeetiket. Tilføj aldrig “Tilbage”, “Forrige” eller “Næste” som et element, fordi disse kontroller udtrykker historik eller sekvens snarere end ancestorforhold. Separatorer er renderer-ejet præsentation og er ikke en del af nogen etiket.

Indlægstyper, der bruger det

Frontmatterens postTypes registrerer de understøttede sammenkoblinger. Tabellen konverterer disse sammenkoblinger til brugs- og placeringsregler; den er ikke en påstand om, at hvert eksempel har brug for en manuelt forfattet sti.

“Sædvanligvis” betyder, at du bruger elementet, når sitet har den nævnte stabile forælder, og udelader det på en virkelig overfladisk implementering i stedet for at opfinde et ekstra niveau. “Altid” forudsætter, at den angivne indlejrede struktur eksisterer. Skabeloner bør eje gengivelsen; indlægstypen definerer det forventede hierarkikilde og redaktionelle undtagelser.

QA-tjekliste

• Ægte hierarki: Hver forfader er en reel, tilsigtet forælder i sitets primære IA, ikke et søgeord, tag, filter eller tidligere besøg.
• Korrekt position: Stien vises efter den globale header og før H1, uden reklame eller urelateret værktøjslinje indsat mellem dem.
• Én sti: Siden eksponerer én synlig brødkrumme og ét matchende BreadcrumbList, ikke konkurrerende stier.
• Fuldstændig rækkefølge: Elementer løber fra bredeste forfader til aktuel side, uden manglende strukturelt niveau eller tilføjet søskendeelement.
• Kanoniske links: Hver forfader løser direkte til sin kanoniske, indekserbare URL uden sporingsparametre eller undgåelige omdirigeringer.
• Aktuel tilstand: Det sidste synlige element navngiver den aktuelle side, er ikke-linket og har aria-current="page".
• Kortfattede etiketter: Hver etiket bruger det officielle korteste utvetydige navn, følger sætningsform og holder sig inden for den redaktionelle grænse.
• Semantisk HTML: Komponenten bruger en markeret navigationsmarkering og ordnet liste; det er ikke en række generiske spans.
• Dekorative separatorer: Separatorer er skjult for hjælpeteknologi og vises ikke inde i tilgængelige linknavne.
• Responsiv adfærd: Den aktuelle position forbliver tilgængelig på smalle skærme; tekstombrydning, offentliggørelse, fokusrækkefølge og berøringsmål fungerer uden skjult horisontalt indhold.
• Skemaparatitet: BreadcrumbList-navne, kanoniske URL’er, rækkefølge, elementantal og positioner matcher det fulde synlige hierarki i substans.
• Enkelt datakilde: HTML og JSON-LD genereres fra det samme gennemgåede hierarki i stedet for at vedligeholdes som separate kopier.
• Bærbar paritet: Markdown-, Hugo- og WordPress-repræsentationer bevarer identisk elementrækkefølge, etiketter, destinationer og aktuel tilstand.
• Skærmbilledestatus: Kommentarer om optagelse forbliver ikke-gengivende instruktioner, indtil rigtige aktiver eksisterer; intet ikke-eksisterende skærmbillede refereres til som et billede.

FAQ

Akademiskabelonen gengiver de fem gennemgåede spørgsmål, der er gemt i frontmatteren. De dækker URL-stier, det aktuelle element, strukturerede data, ustabile filtersider og praktiske dybdegrænser.