Breadcrumbs: Navigation richtig nutzen

Stellen Sie sich vor, jemand betritt Ihren Shop durch eine Hintertür. Direkt vor einem einzelnen Produkt. Keine Wegweiser, keine Hierarchie, kein Hinweis darauf, was sonst noch da ist.

Genau diese Situation entsteht, wenn jemand über eine Google-Suche auf einer Produktseite landet. Niemand kommt mehr durch den Vordereingang.

Und genau hier kommen Breadcrumbs ins Spiel.

Illustration einer Breadcrumb-Navigation mit Startseite, Wohnen, Sofas und Ecksofas sowie Hinweisen zu Desktop, Mobile und aria-label.

Breadcrumbs zeigen die Position innerhalb der Website-Hierarchie und ermöglichen den schnellen Sprung auf übergeordnete Ebenen.

Kurzdefinition

Breadcrumbs (auch: Navigationspfade) sind ein sekundäres Navigationselement, das die Position einer Seite innerhalb der Hierarchie einer Website anzeigt und das schnelle Navigieren in höhere Ebenen ermöglicht. Für Suchsysteme können Breadcrumbs zusätzlich als strukturierte Daten ausgezeichnet werden, typischerweise mittels BreadcrumbList (schema.org).

Stellen Sie sich Breadcrumbs wie Wegmarkierungen beim Wandern vor: kleine Schilder am Rand des Weges, leicht zu übersehen, wenn Sie nicht hinschauen, aber unentbehrlich, sobald Sie nicht mehr wissen, wo Sie sind. Sie führen nicht den Weg. Sie bestätigen ihn.

Aktuelle Lage: Google zeigt Breadcrumbs in den Desktop-Suchergebnissen weiterhin an. Auf Mobilgeräten blendet Google seit dem 23. Januar 2025 Breadcrumbs im sichtbaren URL-Element aus und reduziert die Anzeige auf die Domain. Die strukturierte Daten-Auszeichnung bleibt jedoch ausdrücklich unterstützt und empfohlen, unter anderem für Desktop-Snippets, Search-Console-Berichte und den Rich-Results-Test.

Warum es sich lohnt, sie ernst zu nehmen

Orientierung und Effizienz (UX)

Breadcrumbs senken die kognitive Last. Der „Wo bin ich gerade?“-Kontext bleibt sichtbar, und mit ihm der Shortcut „eine Ebene höher“. Das beschleunigt das Browsen durch tiefe Kategoriestrukturen und reduziert unnötiges Zurück-Klicken.

In E-Commerce-Kontexten ist dieser Effekt besonders ausgeprägt. Forschungen von Baymard unterscheiden klar zwischen hierarchischen (Standort-)Breadcrumbs und verlaufbasierten Varianten und zeigen, dass Standort-Breadcrumbs auf Produktseiten die Rückkehr zur übergeordneten Kategorie spürbar fördern.

Anders gesagt: Wer auf einer Produktseite kein „Sofas“ über dem H1 stehen sieht, kehrt häufig nicht zur Kategorie zurück. Sondern in die Suche. Oder gar nicht.

Findbarkeit und Suchdarstellung (SEO)

Für Suchmaschinen sind Breadcrumbs ein strukturelles Signal über die Informationsarchitektur. Google verarbeitet BreadcrumbList-Markup und empfiehlt, typische Nutzerpfade abzubilden, nicht zwingend die URL-Segmente zu spiegeln.

Eine garantierte Rich-Result-Darstellung gibt es nicht. Aber: Korrektes Markup erleichtert das Verständnis der Hierarchie, und auf Desktop spielt Google Breadcrumbs weiterhin als Teil der sichtbaren URL aus. Auf Mobil entfällt diese Darstellung seit dem 23. Januar 2025.

Barrierefreiheit (A11y)

Aus Accessibility-Sicht sind Breadcrumbs eine Navigations-Landmarke. Sie gehören in ein <nav> mit eindeutiger Beschriftung (z.B. aria-label="Breadcrumb"). Der aktuelle Eintrag wird semantisch markiert (aria-current="page"), damit Screenreader die Position korrekt vermitteln. Trenner wie „›“ oder „/“ gehören rein dekorativ ins CSS, nicht in den DOM-Text. Sonst werden sie vorgelesen, und das nervt.

Die drei Arten und wann welche passt

Standort-Breadcrumbs (hierarchisch): Zeigen die feste Position einer Seite innerhalb der Site-Struktur, unabhängig vom Einstiegsweg. Beispiel: Startseite › Wohnen › Sofas › Ecksofas. Standard für Content- und Shop-Sites.
Pfad-Breadcrumbs (verlaufbasiert): Rekonstruieren den individuellen Sitzungsverlauf. In klassischen Websites selten sinnvoll. Der Back-Button deckt die Funktion meist robuster ab. Spezialfall für komplexe Anwendungen mit verzweigten User Journeys.
Attribut-Breadcrumbs (facettiert): Visualisieren gewählte Filter als entfernbare Chips (Farbe: Blau ×, Größe: 32 ×). UX-stark in facettierter Navigation. SEO-seitig erfordern sie saubere Kanonisierung und Parameterregeln, sonst entsteht Index-Bloat.

Praxisregel: Auf Content-Sites und Shops bilden Standort-Breadcrumbs die Basis. Attribut-Chips ergänzen sie auf Filter-Seiten. Verlauf-Crumbs bleiben Spezialfall.

Was sich 2025 geändert hat (und was nicht)

Seit dem 23. Januar 2025 zeigt Google mobil im Snippet keine Breadcrumbs mehr. Nur die Domain erscheint als sichtbares URL-Element. Desktop behält Domain plus Breadcrumb.

Manche haben daraufhin überlegt, das Markup zu entfernen. Falsche Reaktion.

Die offizielle Entwicklerdokumentation weist für Breadcrumb-Rich-Results ausdrücklich „Feature availability: desktop“ aus und wurde zuletzt am 4. Februar 2025 aktualisiert. Bestehendes BreadcrumbList-Markup braucht keine Umstellung. Der Rich-Result-Bericht in der Search Console bleibt aktiv, und der Rich-Results-Test ebenso.

Heißt: Markup pflegen. Weiter wie bisher. Nur ohne die Erwartung, dass es im mobilen Snippet auftaucht.

Implementierung: HTML und ARIA

Das Grundgerüst

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li><a href="/">Startseite</a></li>
    <li><a href="/wohnen/">Wohnen</a></li>
    <li><a href="/wohnen/sofas/">Sofas</a></li>
    <li aria-current="page">Ecksofas</li>
  </ol>
</nav>

Drei Dinge sind hier nicht verhandelbar:

Landmarke und Label: Setzen Sie <nav> und labeln Sie die Landmarke eindeutig, besonders wenn mehrere Navigationsbereiche existieren.
Aktuelle Seite: Markieren Sie den letzten Eintrag mit aria-current="page". Als Link oder als reiner Text, beides geht.
Trenner nur visuell: Trenner als Textknoten werden vorgelesen. Im DOM haben sie nichts verloren.

Die Trenner per CSS

.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin: 0;
  padding: 0;
}

.breadcrumb li:not(:last-child)::after {
  content: "›";
  margin: 0 .5rem;
  color: var(--breadcrumb-sep, currentColor);
  opacity: .6;
}

Position und Konsistenz: Platzieren Sie Breadcrumbs oberhalb des H1, unter der Hauptnavigation. Und halten Sie Position und Reihenfolge auf allen Seiten konsistent (WCAG 3.2.3). Wer hier inkonsistent ist, verliert die Hilfe, die Breadcrumbs eigentlich leisten sollen.

Implementierung: Strukturierte Daten

Strukturierte Daten helfen Suchsystemen, Kontext und Hierarchie korrekt einzuordnen. Google unterstützt JSON-LD, Microdata und RDFa. JSON-LD ist in der Praxis am leichtesten wartbar.

Die Minimalanforderungen für Google-Rich-Results:

@type: "BreadcrumbList" mit mindestens zwei ListItem-Einträgen.
Jedes ListItem hat position (1-basiert), name und in der Regel item (URL).
Der letzte Eintrag darf ohne item angegeben werden. Google nutzt dann die Seiten-URL.
Modellieren Sie typische Nutzerpfade, nicht zwingend URL-Segmente.
Wichtig: data-vocabulary.org ist seit 2020 nicht mehr für Rich-Results geeignet. Nur schema.org/BreadcrumbList.

Beispiel (JSON-LD, empfohlen)

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Wohnen",
      "item": "https://www.beispiel.de/wohnen"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Sofas",
      "item": "https://www.beispiel.de/wohnen/sofas"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Ecksofas"
    }
  ]
}
</script>

Schema-Referenz: BreadcrumbList ist ein ItemList-Typ. Die position-Property rekonstruiert die Reihenfolge.

Validieren Sie mit dem Rich Results Test und überwachen Sie in der Search Console den Breadcrumb-Statusbericht. Beide bleiben trotz der mobilen Sichtbarkeitsänderung aktiv. Wenn das eine Test-Deploy-Pipeline verdient: ja, das tut es.

Wo die meisten den Fehler machen

Ein gut implementiertes Breadcrumb sieht banal aus. Eine schlecht implementierte fällt sofort auf. Die häufigsten Stolpersteine:

URL-Spiegelung statt Nutzerpfad: 1:1-Spiegelungen erzeugen kryptische Labels („produktkategorie-sofas-alle“ statt „Sofas“). Google empfiehlt ausdrücklich, typische Nutzerpfade abzubilden, nicht das technische Routing.
Unlabelte Landmarken: Mehrere <nav> ohne eindeutige Labels machen es Screenreader-Nutzenden schwer. Jede Landmarke braucht ihr Label.
Trenner als Textknoten: DOM-Trenner werden vorgelesen. Dekorativ via CSS lösen.
Letzter Crumb falsch ausgezeichnet: Ist der letzte Eintrag ein Link, fehlt oft das aria-current="page". Oder er ist gar nicht als aktueller Eintrag erkennbar.
Facetten ohne SEO-Leitplanken: Filterkombinationen produzieren beliebig viele URL-Varianten. Ohne kanonische URLs und Parameterregeln explodiert der Index.
Veraltetes Vokabular: Wer noch mit data-vocabulary.org markupt, bekommt keine Rich-Results mehr. Aufräumen.

E-Commerce: das Doppel aus Hierarchie und Filter

Auf Produktdetailseiten gehört eine hierarchische Breadcrumb. Immer. Beispiel: Möbel › Sofas › Ecksofas › Produktname. Ohne diesen „Up“-Shortcut landen Nutzende häufig wieder in der Suche oder verlassen die Seite.

Auf Listen- und Kategorieseiten ergänzen Sie Attribut-Chips für aktive Filter (Farbe: Blau ×). Das Doppel ist UX-stark: Orientierung über die Hierarchie, Kontrolle über die Filter. Das eine zeigt, wo man ist. Das andere, was man sich gerade angesehen hat.

Aber: Saubere Kanonisierung ist hier Pflicht, nicht Kür. Eine Filterkombination ist keine eigenständige Kategorieseite, sondern eine gefilterte Ansicht. Das gehört auch so behandelt.

Qualitätssicherung: woran erkennen Sie ein gutes Breadcrumb?

Drei Prüfungen reichen für den Anfang:

Visuell und funktional: Platzierung konsistent, Pfade korrekt, auf kleinen Screens lesbar (lange Pfade per Ellipsis kürzen, erste und letzte Crumb bleiben sichtbar). Tastaturnavigation funktioniert.
Barrierefreiheit: Landmarke eindeutig gelabelt, aria-current="page" gesetzt, Trenner werden nicht vorgelesen, Kontraste und Fokus-Stile sichtbar.
Strukturierte Daten: Rich Results Test grün, Search-Console-Bericht ohne Fehler, nach Template-Deploys auf Regressionen testen.

Wer Breadcrumb-Klicks zusätzlich als Events misst, lernt schnell, ob die Hierarchie wirklich genutzt wird. Oft eine ernüchternde, manchmal eine bestätigende Erfahrung.

Best-Practice-Checkliste

Standort-Breadcrumbs auf allen relevanten Seiten sichtbar, konsistent positioniert.
Semantik korrekt: <nav aria-label="Breadcrumb"> plus geordnete Liste. Letzter Eintrag mit aria-current="page" oder als Text.
Trenner via CSS, nicht im DOM.
BreadcrumbList als JSON-LD implementiert, mindestens zwei ListItem, Positionen korrekt.
Typischer Nutzerpfad statt bloßer URL-Segmente.
Attribut-Chips ergänzend, mit SEO-Kontrolle (Kanons, Parameterregeln).
Validierung im Rich Results Test, Monitoring in der Search Console.
Mobile Ellipsis bei langen Pfaden, erste und letzte Crumb bleiben sichtbar.

Häufige Fragen zu Breadcrumbs

Zeigt Google Breadcrumbs noch in der Suche an?
Auf Desktop ja. Auf Mobil seit dem 23. Januar 2025 nicht mehr. Dort erscheint nur die Domain. Die Empfehlung, Breadcrumb-Markup weiter zu pflegen, bleibt bestehen.

Müssen Breadcrumbs die URL exakt spiegeln?
Nein. Google empfiehlt ausdrücklich, typische Nutzerpfade abzubilden. Das ist verständlicher für Menschen und für Suchsysteme.

Soll der letzte Crumb anklickbar sein?
Gängige Praxis ist nein. Falls verlinkt, dann mit aria-current="page" kennzeichnen. Entscheidend ist die klare Statuskommunikation für Screenreader.

Sind Breadcrumbs ein Ranking-Faktor?
Dazu gibt es keine offizielle Aussage. Breadcrumbs verbessern Orientierung und interne Verlinkung und können auf Desktop als Rich-Result erscheinen. Indirekte Effekte auf Nutzersignale sind plausibel. Mehr nicht.

Wie umgehen mit sehr tiefen Hierarchien?
Auf Mobilgeräten mittlere Elemente einklappen (Ellipsis). Auf Desktop ggf. umbruchfähige oder scrollbare Breadcrumbs. Entscheidend bleiben Lesbarkeit und Eindeutigkeit der sichtbaren Items.

Was ist mit facettierten Filtern?
Filter als separate, entfernbare Chips darstellen. Die hierarchische Breadcrumb bleibt davon unberührt. Crawling und Indexierung der Filter-Kombinationen über kanonische URLs und Robots-Regeln steuern.

Gibt es CMS-Hilfen für die Implementierung?
Ja. Für TYPO3 existieren dedizierte BreadcrumbList-Hilfen. In WordPress übernehmen das SEO-Plugins. In React- oder Vue-Setups generieren Sie Breadcrumbs aus Routen-Metadaten, nicht blind aus Pfadsegmenten, und stellen das JSON-LD per SSR oder SSG bereit.

Letzter Gedanke

Breadcrumbs sind ein leises Element. Sie schreien nicht nach Aufmerksamkeit, sie blinken nicht, sie versprechen nichts.

Sie machen einfach nur den Unterschied zwischen einem Nutzer, der sich orientiert, und einem, der wieder geht.

Wer das versteht, baut sie gut. Wer das nicht versteht, baut sie irgendwie. Und wundert sich später über die Absprungrate.

Breadcrumb