Breadcrumbs: Orientierung und Seitenhierarchie verständlich abbilden

Marktdenker · Veröffentlicht am

Breadcrumbs sind eine zusätzliche Navigation, die eine Seite in der Hierarchie deiner Website einordnet. Sie zeigen übergeordnete Seiten in einer nachvollziehbaren Reihenfolge und machen diese erreichbar. Das Breadcrumb-Muster der W3C beschreibt dafür eine geordnete Folge von Links zu Elternseiten.

Für deine Planung sind zwei Fragen entscheidend: Welche übergeordneten Seiten helfen dem Leser? Und wie stimmen sichtbare Navigation und strukturierte Daten überein? Mit einem fiktiven Blogbeispiel kannst du beides auseinanderhalten und anschließend den Entwurf prüfen.

Themenbanner Breadcrumbs mit verbundenen Papierstufen und der Aufschrift Orientierung, Hierarchie, Kontext
KI-generierter Themenbanner: Papierstufen als Motiv für Orientierung und Hierarchie, ohne technische Datenbehauptung.

Stell dir einen fiktiven Blog vor. Er hat den Bereich „Wissen“, darunter „Marketing“ und darin den Artikel „Kampagnenplan“. Die sinnvolle Spur lautet:

Wissen → Marketing → Kampagnenplan

Ein Leser kann den Artikel über ein Suchergebnis öffnen, ein anderer über einen direkten Link und ein dritter über einen Querverweis aus einem weiteren Beitrag. In diesem Modell bleibt die Breadcrumb-Spur für alle gleich: Sie erklärt die Zuordnung des Artikels. Eine Liste der zuletzt besuchten Seiten würde eine andere Frage beantworten.

„Marketing“ braucht dabei eine eigene Aufgabe: Der Bereich führt zu passenden Marketinginhalten. Ein Zwischenlabel, das keinen hilfreichen Bereich bezeichnet, ergänzt keine Orientierung. Notiere deshalb für jede Elternseite, was der Leser dort finden soll.

Die Reihenfolge muss auch nicht aus den Verzeichnissen der URL entstehen. Der fiktive Artikel könnte unter https://example.org/artikel/kampagnenplan/ liegen und trotzdem in die Themenhierarchie Wissen → Marketing gehören. Google empfiehlt einen typischen Nutzerpfad statt einer mechanischen Übernahme der URL-Struktur.

Fiktive Hierarchie Wissen, Marketing und Kampagnenplan; Suche, direkter Link und Querverweis führen unabhängig davon zum gleichen Artikel
Fiktives Modell: Die drei Einstiegswege führen zum selben Artikel. Seine Elternseiten bleiben Wissen und Marketing; die Spur zeigt keinen individuellen Besuchsverlauf.

Plane eine zusätzliche Spur, wenn deine Inhalte hilfreiche übergeordnete Ebenen besitzen. Bei einem umfangreichen Wissensbereich kann der Leser damit vom einzelnen Beitrag zum Themenbereich wechseln. Das ist eine konkrete Navigationsaufgabe, für die du die passenden Zielseiten benennen kannst.

Bei einer kleinen Website mit wenigen gleichrangigen Seiten solltest du zuerst prüfen, welche zusätzliche Orientierung die Spur überhaupt bietet. Erfinde keine Kategorien, damit jeder Beitrag eine längere Breadcrumb-Zeile bekommt. Die Länge ist kein Qualitätsmaß.

Auch Filterzustände verdienen eine eigene Entscheidung. „Marketing“ als dauerhaftes Themenverzeichnis ist etwas anderes als eine gerade ausgewählte Sortierung. Bevor du einen solchen Zustand als Elternseite verlinkst, kläre, ob er tatsächlich eine verständliche, eigenständig aufrufbare Zielseite darstellt. Das Beispielmodell enthält deshalb nur feste Bereiche.

Lass die Hauptnavigation weiterhin ihre Aufgabe erfüllen: Sie führt in die wichtigen Bereiche der Website. Die Breadcrumb-Spur ergänzt die Orientierung innerhalb dieser Bereiche. Interne Verlinkung im Artikeltext kann zusätzlich thematisch verwandte Inhalte verbinden, die gar keine Elternseiten sind. Ein passender Querverweis muss deshalb nicht als neue Hierarchiestufe erscheinen.

Die sichtbare Breadcrumb-Navigation besteht aus verständlichen Labels und Links für Menschen. BreadcrumbList beschreibt dagegen den Navigationspfad als strukturierte Daten für Maschinen. Das sind zwei getrennte Ausgaben derselben inhaltlichen Zuordnung.

Du brauchst kein JSON-LD, um eine sichtbare Linkspur zu bauen. Umgekehrt stellt ein JSON-LD-Codeblock noch keine sichtbare Navigation bereit. Prüfe daher beide Ausgaben, statt nur festzustellen, dass dein CMS irgendwo Breadcrumb-Daten erzeugt.

Für strukturierte Daten empfiehlt Google im Allgemeinen JSON-LD, wenn die Website es ermöglicht. Auch Microdata und RDFa werden unterstützt. Das Format entscheidet aber nicht darüber, ob die angegebenen Bereiche sinnvoll sind. Die Daten sollen den tatsächlichen Seiteninhalt beschreiben.

Zuordnung der sichtbaren Breadcrumb-Labels Wissen, Marketing und Kampagnenplan zu Position, Name und Ziel in einer separaten BreadcrumbList
Vereinfachtes Schema mit fiktiven Seitennamen: Sichtbare Navigation und BreadcrumbList beschreiben dieselbe Reihenfolge. Die aktuelle Seite ist im sichtbaren Modell unverlinkt; ihr letztes item ist im Datenbeispiel weggelassen.

Verwende klare Namen, die auch außerhalb des gerade gelesenen Absatzes verständlich sind. „Marketing“ bezeichnet im Beispiel einen Themenbereich; „Zurück“ würde dagegen keine Elternseite benennen. Googles Link-Dokumentation empfiehlt aussagekräftigen, prägnanten Linktext und crawlbare a-Elemente mit href. Reine Skriptklicks liefern dafür keine zuverlässige Grundlage.

Eine mögliche fiktive HTML-Grundstruktur sieht so aus:

<nav aria-label="Brotkrümelnavigation">
  <ol>
    <li><a href="https://example.org/wissen/">Wissen</a></li>
    <li><a href="https://example.org/marketing/">Marketing</a></li>
    <li aria-current="page">Kampagnenplan</li>
  </ol>
</nav>

Die beiden Elternseiten sind verlinkt, die aktuelle Seite ist Text. Der benannte Navigationsbereich macht die Aufgabe der Spur erkennbar. Laut W3C-Pattern trägt ein Link zur aktuellen Seite aria-current="page"; bei einem unverlinkten aktuellen Element ist diese Angabe optional. Das Beispiel nutzt sie auch dort.

Gestalte Abstände und Trennzeichen anschließend separat. Das illustrative W3C-Beispiel verwendet eine geordnete Liste und ergänzt die sichtbaren Trennzeichen per CSS, damit Screenreader sie nicht redundant vorlesen. Übernimm ein Beispiel erst nach Prüfung in deiner tatsächlichen Umgebung. Die obige Grundstruktur ist keine fertig getestete Navigation für jedes Theme.

Die Namen und Reihenfolge aus dem fiktiven Blog lassen sich getrennt als JSON-LD beschreiben. Die Google-Dokumentation zu BreadcrumbList verlangt mindestens zwei ListItem-Elemente. position beginnt bei 1; name benennt das Element und item seine Zielseite. Beim letzten Element ist item optional: Google verwendet dann die URL der betreffenden Seite.

Das passende fiktive Datenbeispiel lautet:

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Wissen",
      "item": "https://example.org/wissen/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Marketing",
      "item": "https://example.org/marketing/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Kampagnenplan"
    }
  ]
}

example.org und sämtliche Seitennamen sind Modelldaten. Sie stehen für keine veröffentlichten Marktdenker-Seiten. Wenn du das Prinzip umsetzt, ersetze sie durch die tatsächlichen Namen und Ziele deiner Website. Halte die sichtbare Zuordnung und die Datenbeschreibung konsistent.

Eine technische Vorlage sollte diese Zuordnung bewusst abbilden. Prüfe insbesondere Beiträge, die mehreren Themenbereichen angehören. Entscheide zuerst, welcher hilfreiche Pfad dargestellt wird; ein automatisches Zerlegen der URL beantwortet diese inhaltliche Frage nicht.

Breadcrumbs auf deiner Website und die URL-Darstellung im Suchergebnis sind ebenfalls verschiedene Dinge. Google kündigte am 23. Januar 2025 an, Breadcrumbs aus mobilen Suchergebnissen zu entfernen und dort nur die Domain zu zeigen. Auf Desktop werden Breadcrumbs weiter unterstützt. Die offizielle Änderungsmeldung erklärt außerdem, dass Markup, Rich-Results-Test und der entsprechende Search-Console-Bericht weiter unterstützt werden.

Daraus folgt keine Empfehlung, die sichtbare Navigation deiner mobilen Website zu entfernen. Diese hilft dem Leser auf der Seite und erfüllt eine andere Aufgabe als die Suchergebnisdarstellung.

Erwarte auch bei korrektem Markup keine garantierte Anzeige im Suchergebnis. Google schließt diese Garantie in seiner Breadcrumb-Dokumentation ausdrücklich aus. Ebenso lässt sich aus dem hier gezeigten Modell kein bestimmter Ranking-, Klick- oder Umsatzgewinn ableiten.

Beginne mit einer einzelnen repräsentativen Unterseite. Gehe den Entwurf offen durch:

  1. Hierarchie: Ist jede Elternseite ein hilfreicher Bereich? Bleibt die Zuordnung auch bei einem direkten Einstieg verständlich?
  2. Links: Führen die Elternlinks zum benannten Ziel? Sind aktuelle Seite und Elternseiten erkennbar auseinanderzuhalten?
  3. Darstellung: Sind lange Labels auf einem schmalen Bildschirm vollständig lesbar? Prüfe Umbruch, Abstände und die Bedienung mit der Tastatur.
  4. Hilfsmittel: Prüfe die Navigation auch mit den benötigten unterstützenden Technologien. W3C weist bei seinem Beispiel ausdrücklich auf mögliche Unterstützungslücken hin, besonders bei Mobil- und Touch-Kombinationen.
  5. Daten: Stimmen Positionen, Namen und Ziele mit dem gewählten Pfad überein? Verwende den Test für Rich-Suchergebnisse. Nach einer gesonderten Veröffentlichung helfen URL-Prüfung und Statusberichte bei der Kontrolle der tatsächlich ausgelieferten Seiten. Google beschreibt diese Prüfungen in seiner Implementierungsanleitung.

Ein bestandener Datentest beantwortet nicht automatisch die Fragen nach sinnvollen Bereichen, verständlichen Labels oder Bedienbarkeit. Umgekehrt beweist eine hübsche Linkzeile noch kein korrektes JSON-LD. Die Checkliste ist ein redaktionelles Prüfmodell, kein Bericht über einen bereits durchgeführten Website-Test.

Wenn dein CMS Breadcrumbs bereits ausgibt, inventarisiere zuerst diese Ausgabe. Vergleiche die sichtbaren Ziele und die vorhandenen Daten mit deinem gewünschten Pfad. So formulierst du einen konkreten Änderungsauftrag, statt zusätzliche Ausgaben ungeprüft nebeneinander einzubauen.

Wähle einen Beitrag aus und schreibe seinen hilfreichen Elternpfad auf. Erkläre für jede Ebene kurz, was ein Leser dort findet. Erst danach entwirfst du die sichtbare Spur und prüfst, welche maschinenlesbare Beschreibung dazu passt.

Im Bereich Content & SEO findest du die übergeordnete Orientierung für Inhalte und Websiteaufbau.

Weitere Themen zu Business, Marketing und KI erschließt dir die Startseite von Marktdenker.