Breadcrumbs: Hierarchie- und Schema-Regeln

Breadcrumbs sind ein geordneter Pfad von Links, der zeigt, wo die aktuelle Seite in der Informationsarchitektur (IA) der Website steht – dem System von Eltern-, Kind- und Geschwisterbeziehungen, das Inhalte organisiert. Sie ermöglichen es einem Leser, nach oben zu navigieren, ohne von der Hauptnavigation neu starten zu müssen, und geben Crawlern und Antwortsystemen gleichzeitig eine explizite, maschinenlesbare Darstellung derselben Hierarchie.

Dieser dargestellte Pfad ist bewusst wörtlich. Er identifiziert drei echte Vorfahren, nennt die aktuelle Seite und verlinkt nur nach oben. Er fügt nicht „SEO-Navigation" oder einen anderen Ausdruck ein, nur weil diese Formulierung Suchanfragen anziehen könnte.

Warum dieses Element wichtig ist

Leser gelangen über Suchergebnisse, geteilte Links, E-Mails und KI-Antworten auf tiefe Seiten. Sie haben oft keine Erinnerung an den Weg, den die Menüs der Website von ihnen erwarten. Ein Breadcrumb löst diese Unsicherheit auf einen Blick: „Ich lese eine Elementseite innerhalb des SEO-Playbooks und kann zu beiden Sammlungen zurückkehren." Dieser Kontext senkt die Kosten für die Erkundung einer Website, ohne dass der Leser ein Menü öffnen, eine URL bearbeiten oder die Zurück-Taste benutzen muss.

Die Psychologie dahinter ist Orientierung, nicht Dekoration. Ein klarer Pfad gibt dem Leser ein stabiles Gefühl für den Ort und einen offensichtlichen Fluchtweg. Dies ist besonders auf großen Websites wichtig, wo ähnliche Seitentitel in verschiedenen Bereichen leben können – zum Beispiel eine Produktkategorie namens „Analytik" und ein Dokumentationsbereich mit demselben Namen. Die Vorfahren grenzen die Seite ein, bevor der Leser ihre Details interpretiert.

Maschinen benötigen dieselbe Beziehung, ausgedrückt ohne visuelle Abstände oder Chevrons. Maschinelle Extrahierbarkeit bedeutet, dass Software die Bedeutung und Reihenfolge einer Einheit aus dem HTML oder den strukturierten Daten wiederherstellen kann. Ein semantisches <nav>, eine geordnete Liste, normale Links, aria-current und passende BreadcrumbList-Daten legen eine Abfolge von Entitäten mit expliziten Positionen offen. Eine Reihe gestylter <span>-Elemente mag identisch aussehen, liefert jedoch keinen zuverlässigen Navigationsankerpunkt und keine Listenreihenfolge.

Der sichtbare Pfad und die strukturierte Ausgabe müssen eine Geschichte erzählen. Wenn die Seite sichtbar unter „Elemente" steht, das Schema aber „SEO-Tools" als übergeordnete Ebene nennt, erhält ein System zwei konkurrierende Hierarchien. Diese Inkonsistenz ist schlimmer als das Weglassen von Schema, da sie die Entitätsbeziehungen der Website weniger vertrauenswürdig macht.

Befolge die Element-Schreibregeln bei der Auswahl dieser Komponente. Ihre Vorrangregel gilt auch hier: Wenn der Zweck eines Abschnitts darin besteht, Hierarchie und Aufwärtsnavigation zu vermitteln, verwende das typisierte Breadcrumbs-Element. Ahme es nicht mit freiem Text, einem durch Schrägstriche getrennten Untertitel oder verlinkten Keywords nach.

Wann es verwendet wird

Verwende Breadcrumbs, wenn eine Seite zu einer stabilen Hierarchie mit mindestens einem sinnvollen übergeordneten Element jenseits der Startseite gehört. Große redaktionelle Websites, E-Commerce-Kataloge, Dokumentationsbibliotheken, Servicebereichsstrukturen, Verzeichnisse und mehrstufige Produktseiten profitieren am meisten, da Besucher häufig unterhalb der obersten Ebene einsteigen.

Verwende sie konsistent innerhalb eines Bereichs. Ein Pfad, der nur auf manchen Produktseiten erscheint, lässt Leser fragen, ob die fehlenden Seiten woanders hingehören, und macht die automatisierte Interpretation von Vorlagenzufällen abhängig. Das Inhaltsmodell oder die Route sollte die Hierarchie bereitstellen; Autoren sollten sie nicht auf jeder Seite unabhängig rekonstruieren.

Verwende keine Breadcrumbs, wenn es keine Hierarchie zu vermitteln gibt. Eine einseitige Kampagne, eine flache Website, auf der jede Seite direkt unter der Startseite liegt, oder ein temporärer Anwendungszustand gewinnen möglicherweise keinen nutzbaren Pfad daraus. Das Hinzufügen von „Startseite › Aktuelle Seite" zu jeder flachen Seite kann visuelles Rauschen erzeugen, ohne neuen Kontext zu erschließen.

Häufige Fehlinterpretationen sind:

• Ein Browser-Verlaufspfad. „Suche › Produkt › Warenkorb" zeichnet eine Sitzung auf, keine Inhalt Hierarchie. Verschiedene Besucher würden unterschiedliche übergeordnete Elemente für dieselbe Seite erhalten, daher ist die Beziehung nicht kanonisch.
• Ein Keyword-Pfad. „Bestes CRM › Billiges CRM › CRM für Startups" platziert zwar Zielbegriffe im Blickfeld, erfindet aber Vorfahren, die möglicherweise nicht als navigierbare Seiten existieren. Breadcrumb-Bezeichnungen benennen echte Knoten; sie sind kein zusätzlicher Title-Tag.
• Ein Filterpfad. „Schuhe › Blau › Größe 39" beschreibt ausgewählte Facetten. Es gehört in Filtersteuerelemente, es sei denn, jeder Schritt ist eine stabile, indexierbare Landingpage mit einer beabsichtigten Elternbeziehung.
• Ein Fortschrittsindikator. „Details › Zahlung › Bestätigung" kommuniziert Schritte einer Transaktion. Es benötigt Stepper-Semantik und -Zustände, nicht BreadcrumbList-Markup.
• Ein Inhaltsverzeichnis. Abschnittslinks bewegen sich innerhalb des aktuellen Dokuments; Breadcrumbs bewegen sich zwischen Dokumenten in der Seitenhierarchie.
• Eine Tag-Kette. Tags beschreiben Viele-zu-Viele-Themen, während Breadcrumbs einen einzigen geordneten primären Pfad erfordern. Eine Seite kann mehrere Tags haben, sollte aber nicht mehrere konkurrierende Eltern in einem Pfad anzeigen.

Wenn eine Seite legitimerweise in mehreren Sammlungen vorkommt, wähle eine primäre kanonische Hierarchie für den Breadcrumb. Bewahre andere Entdeckungswege durch kontextuelle Links oder Sammlungsseiten. Mehrere Breadcrumb-Pfade zwingen den Leser und den Schema-Konsumenten zu entscheiden, welches Elternteil autoritativ ist.

Wo es platziert wird

Orientierung funktioniert nur, wenn sie eintrifft, bevor die Seite Interpretation erfordert. Platziere den Pfad daher nach dem globalen Seitenkopf und vor der H1 oder dem Hero-Inhalt der Seite. Es sollte die erste seiten spezifische Navigationsregion sein. Behalte dieselbe Position auf Desktop- und Mobil-Layouts bei, auch wenn der Pfad anders umbricht.

Platziere Breadcrumbs nicht neben einem Inhaltsverzeichnis, einer gemeinsamen Symbolleiste, Kategorie-Chips, Kontoeinstellungen oder einem Werbe-Badge. Diese Elemente beantworten andere Fragen und lassen die schmale Orientierungsleiste wie eine allgemeine Symbolleiste aussehen. Platziere keine Werbung oder Inline-Call-to-Action zwischen dem Pfad und der H1. Wenn der Hero beides enthält, ordne den Breadcrumb oberhalb des Titels an und trenne Werbeinhalte unterhalb des Einleitungstexts.

Anatomie

1. Navigationsankerpunkt: Ein <nav> mit dem zugänglichen Namen „Breadcrumb" unterscheidet diesen Pfad von der globalen und lokalen Navigation.
2. Geordnete Liste: Die Reihenfolge trägt Bedeutung vom breitesten Vorfahren zur aktuellen Seite, daher ist <ol> erforderlich, auch wenn Listenmarkierungen visuell entfernt werden.
3. Vorfahren-Elemente: Jeder Vorfahre verwendet seine kanonische, menschenlesbare Bezeichnung und einen crawlbaren Link zur tatsächlichen übergeordneten Seite.
4. Trennzeichen: Ein Chevron oder Schrägstrich trennt Elemente visuell. Es ist dekorativ und für assistive Technologien verborgen.
5. Aktuelles Element: Das letzte Element nennt die aktuelle Seite, hat keinen Link und verwendet aria-current="page".
6. Dokumentenbeziehung: Der Pfad sitzt oberhalb der H1. Der Screenshot beschriftet diese Position, aber die Platzierung wird von der Vorlage gesteuert, nicht vom verfassten Text.

Designbeispiele

Varianten ändern Dichte und responsives Verhalten, niemals die zugrunde liegende Hierarchie.

Standard: Zeige den vollständigen Pfad an, wenn zwei bis fünf prägnante Einträge passen. Dies ist die bevorzugte Variante, da kein Kontext verborgen wird.

Langer Pfad: Erlaube einen Pfad mit sechs oder sieben Elementen nur, wenn jede Ebene einen echten navigierbaren Vorfahren darstellt. Breche an Elementgrenzen um; verkleinere niemals Text, bis er schwer lesbar wird.

Eingeklappt auf Mobilgeräten: Wenn der tatsächliche Pfad nicht akzeptabel umbrechen kann, behalte Startseite, das direkte Elternteil und die aktuelle Seite bei. Ein fokussierbares Auslassungs-Steuerelement kann verborgene mittlere Vorfahren anzeigen. Der vollständige Pfad muss im DOM bleiben oder über dieses Steuerelement verfügbar sein, und die strukturierten Daten müssen jedes tatsächliche Element enthalten.

Dunkler Hero: Farben und Fokusindikatoren passen sich dem Hintergrund an, aber Bezeichnungen, Reihenfolge, Verlinkungsverhalten und zugänglicher Name bleiben identisch zum Standard.

Parameter

Das Element ist eine strukturierte Liste, da parallele Arrays von Bezeichnungen und URLs leicht falsch ausgerichtet werden können. Die Elementreihenfolge ist die Hierarchie, und dieselben Elemente speisen sowohl sichtbares HTML als auch Schema.

Die erste Überschrift hat keine Entsprechung in diesem Element. Breadcrumbs sind ein Navigationsankerpunkt, kein betitelter Inhaltsabschnitt, und das Platzieren einer Überschrift in einem Element würde eine falsche Dokumentenhierarchie erzeugen. Das letzte Element lässt url standardmäßig in der Autorenquelle weg; ein Renderer kann die kanonische URL der Seite für die BreadcrumbList-Ausgabe verwenden, ohne das sichtbare aktuelle Element in einen Selbstlink zu verwandeln.

Zwei Elemente bedeuten einen Vorfahren plus die aktuelle Seite. Fünf ist der normale obere Bereich. Sieben ist eine absolute Obergrenze, da tiefere Pfade schwer zu überblicken sind und meist auf ein IA-Problem hinweisen, das an der Quelle behoben werden sollte, anstatt durch Styling versteckt zu werden.

Syntax und Codebeispiele

Der kanonische Komponentenname ist breadcrumbs. Seine Elementreihenfolge muss aus den überprüften Hierarchiedaten der Website stammen, auch wenn Beispiele Werte inline zeigen.

Portables Markdown-Direktiv

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

Hugo-Shortcode

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

Dies ist der portable Adaptervertrag, keine Anweisung, einen neuen Shortcode zu diesem Repository hinzuzufügen. Eine Hugo-Implementierung sollte die Elemente normalerweise aus der Seitenvererbung und Abschnittsmetadaten ableiten, damit ein Redakteur keinen Pfad veröffentlichen kann, der nicht mit dem Routing übereinstimmt.

WordPress-Block

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

WordPress sollte den Block aus der primären Elternkette und den kanonischen URLs der Seite befüllen. Manuelle Überschreibungen erfordern redaktionelle Prüfung, da eine Änderung einer Bezeichnung ansonsten Navigation, Schema und Seitenarchitektur in Konflikt bringen kann.

Beispiele

Gut: Eine echte, navigierbare Hierarchie

Startseite › Dokumentation › Audits › Frische-Audit

Dies ist gut, wenn Dokumentation, Audits und Frische-Audit echte kanonische Seiten in dieser Eltern-Kind-Reihenfolge sind. Jeder Vorfahre sagt sein Ziel voraus, und die aktuelle Bezeichnung ist prägnant genug, um den Standort zu bestätigen, ohne die gesamte H1 zu wiederholen.

Schlecht: Keywords, die sich als Hierarchie ausgeben

Startseite › Bestes AI-SEO-Tool › Erschwingliche KI-Sichtbarkeitsplattform › Breadcrumbs

Dies ist schlecht, wenn die beiden mittleren Bezeichnungen keine echten übergeordneten Seiten sind. Der Pfad macht Versprechungen, die seine Links nicht einhalten können, wiederholt Werbephrasen anstatt Abschnitte zu benennen und erzeugt eine falsche Entitätskette für Crawler. Ersetze ihn durch den kürzesten tatsächlichen Vorfahrenpfad. Wenn die gewünschten Konzepte eigene Seiten verdienen, erstelle und integriere diese Seiten zuerst in die IA; kündige keine imaginäre Architektur in Breadcrumbs an.

Schema-Markup und Barrierefreiheit

Breadcrumbs können Schema.org BreadcrumbList speisen, eine geordnete Liste, deren Einträge ListItem-Objekte sind. Verwende eins-basierte ganzzahlige position-Werte und halte name und item mit der sichtbaren Bezeichnung und dem kanonischen Ziel abgestimmt. Generiere JSON-LD und HTML aus einem Datenobjekt, sodass eine Umbenennung, Verschiebung oder kanonische Änderung beide Ausgaben gemeinsam aktualisiert.

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

Das Schema beschreibt die sichtbare Hierarchie; es autorisiert keinen zweiten, optimierten Pfad. Füge keine Weiterleitungen, Tracking-Parameter, nicht-kanonische Protokoll- oder Host-Varianten, On-Site-Suchergebnisse, Sitzungszustände oder versteckte Keyword-Kategorien ein. Veröffentliche nicht zwei BreadcrumbList-Objekte für zwei mögliche Taxonomien. Wähle den primären Pfad im Inhaltsmodell und verwende ihn überall.

Die Barrierefreiheit beginnt mit <nav aria-label="Breadcrumb"> und einer geordneten Liste. Die zugängliche Bezeichnung unterscheidet diese Navigationsregion, ohne eine sichtbare Überschrift zu benötigen. Verstecke dekorative Trennzeichen mit aria-hidden="true" oder erstelle sie in CSS, damit Screenreader nicht „größer als" zwischen jedem Element ansagen. Markiere nur das letzte Element mit aria-current="page" und verlinke es nicht auf sich selbst.

Jeder Vorfahren-Link benötigt einen sichtbaren Fokusindikator und eine ausreichende Größe, um auf einem Touchscreen aktiviert werden zu können. Lange Pfade müssen umbrechen oder über ein tastaturbedienbares Steuerelement eingeklappt werden; horizontales Scrollen, das die aktuelle Position verbirgt, ist kein akzeptabler Standard. Eine Kürzung kann eine visuelle Bezeichnung nur dann verkürzen, wenn der vollständige zugängliche Name verfügbar bleibt und der gekürzte Text noch unterscheidbar ist. Verlasse dich niemals allein auf Farbe, um verlinkte Vorfahren vom aktuellen Element zu unterscheiden.

Schreibregeln

Breadcrumb-Bezeichnungen sind Ortsnamen. Schreibe sie daher wie Navigation und nicht wie Miniatur-Überschriften. Verwende den offiziellen, kürzesten eindeutigen Namen jedes Abschnitts oder jeder Seite. „Dokumentation" funktioniert besser als „Alle Produktdokumentation erkunden", da das Ziel den Kontext liefert und der Pfad überblickbar bleiben muss.

• Verwende ein bis sechs Wörter und maximal 60 Zeichen pro Bezeichnung. Kurze Bezeichnungen machen die Hierarchie vor dem Umbruch sichtbar; sie sind keine Erlaubnis, unbekannte Begriffe abzukürzen.
• Verwende normalerweise zwei bis fünf Elemente, einschließlich der aktuellen Seite. Erlaube sechs oder sieben nur, wenn jede Ebene strukturell notwendig ist.
• Ordne die Elemente vom breitesten Vorfahren zur aktuellen Seite. Kehre den Pfad niemals um und platziere kein Geschwisterelement in der Abfolge.
• Verwende Satzanfang (nur erstes Wort groß), es sei denn, eine Marke, ein Produkt oder ein Akronym hat eine genehmigte Schreibweise.
• Halte Bezeichnungen seitenübergreifend stabil. Dasselbe Elternteil kann nicht in einem Pfad „Dokis" und in einem anderen „Dokumentation" heißen, es sei denn, das Navigationssystem ändert sich global.
• Lasse Vorfahren-Bezeichnungen mit dem sichtbaren Namen des Ziels übereinstimmen oder ihn eng widerspiegeln. Eine prägnante Navigationsbezeichnung ist akzeptabel; ein anderes Keyword-Ziel ist es nicht.
• Benenne die aktuelle Seite prägnant. Sie darf eine lange H1 verkürzen, muss aber dennoch dasselbe Dokument identifizieren.
• Verwende einen neutralen Ton. Breadcrumbs orientieren; sie verkaufen nicht, gratulieren nicht, warnen nicht und instruieren nicht.

Setze niemals Calls-to-Action, Preise, Lagerbestand, Daten, Autorennamen, Bewertungen, Emojis, Symbole mit eigenständiger Bedeutung, Werbeaussagen, Tracking-Codes oder Abfrageparameter in eine Breadcrumb-Bezeichnung. Füge niemals „Zurück", „Vorherige" oder „Weiter" als Element hinzu, da diese Steuerelemente Verlauf oder Reihenfolge ausdrücken, nicht Abstammung. Trennzeichen sind Renderer-eigene Darstellung und kein Teil einer Bezeichnung.

Beitragstypen, die es verwenden

Das postTypes-Frontmatter erfasst die unterstützten Verbindungen. Die Tabelle wandelt diese Verbindungen in Nutzungs- und Platzierungsregeln um; sie ist keine Behauptung, dass jede Instanz einen manuell erstellten Pfad benötigt.

„Meistens" bedeutet, verwende das Element, wenn die Website das genannte stabile Elternteil hat, und lasse es bei einer wirklich flachen Implementierung weg, anstatt eine zusätzliche Ebene zu erfinden. „Immer" setzt voraus, dass die angegebene verschachtelte Struktur existiert. Vorlagen sollten die Darstellung übernehmen; der Beitragstyp definiert die erwartete Hierarchiequelle und redaktionelle Ausnahmen.

QA-Checkliste

• Echte Hierarchie: Jeder Vorfahre ist ein echtes, beabsichtigtes Elternteil in der primären IA der Website, kein Keyword, Tag, Filter oder vorheriger Besuch.
• Korrekte Position: Der Pfad erscheint nach dem globalen Header und vor der H1, ohne Werbung oder nicht zugehörige Symbolleiste dazwischen.
• Ein Pfad: Die Seite zeigt einen sichtbaren Breadcrumb und ein passendes BreadcrumbList, keine konkurrierenden Pfade.
• Vollständige Reihenfolge: Elemente verlaufen vom breitesten Vorfahren zur aktuellen Seite, ohne fehlende strukturelle Ebene oder hinzugefügtes Geschwisterelement.
• Kanonische Links: Jeder Vorfahre löst direkt zu seiner kanonischen, indexierbaren URL auf, ohne Tracking-Parameter oder vermeidbare Weiterleitungen.
• Aktueller Zustand: Das letzte sichtbare Element benennt die aktuelle Seite, ist unverlinkt und hat aria-current="page".
• Prägnante Bezeichnungen: Jede Bezeichnung verwendet den offiziellen kürzesten eindeutigen Namen, folgt der Satzanfang-Schreibweise und bleibt innerhalb des redaktionellen Limits.
• Semantisches HTML: Die Komponente verwendet einen beschrifteten Navigationsankerpunkt und eine geordnete Liste; sie ist keine Zeile generischer Spans.
• Dekorative Trennzeichen: Trennzeichen sind vor assistiven Technologien verborgen und erscheinen nicht innerhalb zugänglicher Linknamen.
• Responsives Verhalten: Die aktuelle Position bleibt auf schmalen Bildschirmen verfügbar; Umbruch, Offenlegung, Fokus-Reihenfolge und Touch-Ziele funktionieren ohne versteckte horizontale Inhalte.
• Schema-Parität: BreadcrumbList-Namen, kanonische URLs, Reihenfolge, Anzahl der Elemente und Positionen stimmen inhaltlich mit der vollständigen sichtbaren Hierarchie überein.
• Einheitliche Datenquelle: HTML und JSON-LD werden aus derselben überprüften Hierarchie generiert, nicht als separate Kopien gepflegt.
• Portable Parität: Markdown-, Hugo- und WordPress-Darstellungen bewahren identische Elementreihenfolge, Bezeichnungen, Ziele und aktuellen Zustand.
• Screenshot-Status: Auskommentierte Hinweise bleiben nicht-rendering-Anweisungen, bis echte Assets existieren; kein nicht existierender Screenshot wird als Bild referenziert.

FAQ

Die Academy-Vorlage rendert die fünf im Frontmatter gespeicherten überprüften Fragen. Sie decken URL-Pfade, das aktuelle Element, strukturierte Daten, instabile Filterseiten und praktische Tiefengrenzen ab.