Breadcrumb

Breadcrumb

Inhaltsverzeichnis

Kurzdefinition

Breadcrumbs (auch: Navigationspfade) sind ein sekundäres Navigationselement, das die Position einer Seite innerhalb der Hierarchie einer Website anzeigt und das schnelle Aufwärts-Navigieren zu übergeordneten Ebenen ermöglicht. Für Suchsysteme können Breadcrumbs zusätzlich als strukturierte Daten ausgezeichnet werden – typischerweise mittels BreadcrumbList (schema.org). 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 (u. a. für Desktop, Search Console-Berichte und Rich-Results-Test).

 

Breadcrumbs auf Kategorieseite: Home data-lazy-src=

 

Einordnung und Nutzen

Orientierung & Effizienz (UX)

Breadcrumbs senken die kognitive Last, weil der „Wo bin ich gerade?“-Kontext stets sichtbar bleibt – inklusive eines „eine Ebene höher“-Shortcuts. 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 differenzieren sinnvoll zwischen hierarchischen (Standort-)Breadcrumbs und verlaufbasierten Varianten und zeigen, dass Standort-Breadcrumbs auf Produktseiten die effiziente Rückkehr zur übergeordneten Kategorie fördern.

Findbarkeit & Suchdarstellung (SEO)

Für Suchmaschinen dienen Breadcrumbs als strukturelles Signal zur Informationsarchitektur. Google verarbeitet BreadcrumbList-Markup und empfiehlt, typische Nutzerpfade abzubilden (nicht zwingend die URL-Segmente zu spiegeln). Die Rich-Result-Darstellung ist nicht garantiert, doch korrektes Markup erleichtert das Verständnis. Auf Desktop kann Google Breadcrumbs als Teil der „sichtbaren URL“ ausspielen; 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 (z. B. aria-current="page"), damit Screenreader die Position korrekt vermitteln. Visuelle Trenner (z. B. „›“ oder „/“) sollten rein dekorativ per CSS eingebunden werden, um redundantes Vorlesen zu vermeiden.

 

Arten von Breadcrumbs

  1. 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.
  2. Pfad-Breadcrumbs (verlaufbasiert):
    Rekonstruieren den individuellen Sitzungsverlauf (z. B. Suchergebnisse → Kategorie → Produkt). In klassischen Websites selten empfehlenswert (Back-Button deckt die Funktion meist robuster ab), in spezifischen Anwendungen mit komplexen User Journeys aber sinnvoll.
  3. Attribut-Breadcrumbs (facettiert):
    Visualisieren gewählte Filter (z. B. Farbe: Blau, Größe: 32, Material: Leinen) als entfernbare Chips. UX-stark in facettierter Navigation – SEO-seitig erfordern sie saubere Kanonisierung/Parameterregeln, um Index-Bloat zu vermeiden.

Praxisregel: Auf Content-/Info-Websites und Shops bilden Standort-Breadcrumbs die Basis. Attribut-Chips ergänzen sie auf Filter-/Listen-Seiten; Verlauf-Crumbs bleiben Spezialfälle für Anwendungen.

 

Aktueller SERP-Kontext (Stand: 2025)

  • Mobil: Seit 23. Januar 2025 zeigt Google mobil im Snippet keine Breadcrumbs mehr; nur die Domain erscheint als sichtbares URL-Element. Desktop behält die Domain plus Breadcrumb bei. Für bestehendes BreadcrumbList-Markup ist keine Umstellung erforderlich; der Rich-Result-Bericht in der Search Console bleibt bestehen, und das Testing im Rich-Results-Tool ebenso.
  • Dokumentationsstand: Die offizielle Entwicklerdokumentation weist für Breadcrumb-Rich-Results ausdrücklich „Feature availability: desktop“ aus und wurde zuletzt am 04. Februar 2025 aktualisiert.

 

Implementierung: HTML & ARIA (zugänglich und robust)

Minimalbeispiel (semantisch korrekt)

<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>

Wesentliche Leitlinien:

  • Landmarke & Label: Setzen Sie <nav> und labeln Sie die Landmarke eindeutig (z. B. aria-label="Breadcrumb"), insbesondere wenn mehrere Navigationsbereiche existieren.
  • Aktuelle Seite: Markieren Sie den letzten Eintrag mit aria-current="page" (als Link oder als reiner Text ohne Link).
  • Trenner nur visuell: Setzen Sie Trenner nicht als Textknoten; generieren Sie sie per CSS, damit Screenreader nichts Zusätzliches vorlesen.
.breadcrumb {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: .25rem;
margin: 0;
padding: 0;
}.breadcrumb li:not(:last-child)::after {
content: "›"; /* rein visuell, nicht im Accessibility Tree */
margin: 0 .5rem;
color: var(--breadcrumb-sep, currentColor);
opacity: .6;
}

Position & Konsistenz: Platzieren Sie Breadcrumbs oberhalb des H1, unter der Hauptnavigation – und halten Sie Position und Reihenfolge auf allen Seiten konsistent (WCAG 3.2.3).

 

Implementierung: Strukturierte Daten (BreadcrumbList)

Warum: 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.

Minimalanforderungen für Google-Rich-Results (Auszug):

  • @type: "BreadcrumbList" mit mindestens zwei ListItem-Einträgen.
  • Jedes ListItem hat position (1-basiert), name und i. d. R. item (URL). Der letzte Eintrag darf ohne item angegeben werden; Google nutzt dann die Seiten-URL.
  • Empfehlung: Typische Nutzerpfade modellieren (nicht zwingend URL-Segmente spiegeln).
  • data-vocabulary.org ist nicht mehr für Rich-Results geeignet.

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" } /* letzter Eintrag: item optional */
]
}
</script>

Schema-Referenz: BreadcrumbList ist ein ItemList-Typ; die position-Property rekonstruiert die Reihenfolge. (Stand v29.2, 15. Mai 2025).

Validierung & Monitoring:
Nutzen Sie den Rich Results Test zur Validierung und überwachen Sie in der Search Console den „Breadcrumb“-Statusbericht; beide bleiben trotz der mobilen Sichtbarkeitsänderung aktiv.

 

Design- und Textleitlinien

  1. Klar & knapp benennen: Verwenden Sie sprechende, kurze Labels („Sofas“ statt „Produktkategorie-Sofas-Alle“). Das erhöht das Erkennen der Ebene und reduziert Trunkierung. (Die Google-Beispiele nutzen konsequent kurze Namen.)
  2. Sekundär, aber verlässlich sichtbar: Breadcrumbs sind ein sekundäres Element – visuell zurückhaltend, aber konsistent platziert (typisch oberhalb des H1). Bei mehreren <nav>-Bereichen immer labeln.
  3. Letzten Eintrag semantisch markieren: Üblicherweise nicht verlinken; falls verlinkt, aria-current="page" setzen.
  4. Trenner dekorativ: Trenner-Glyphen gehören ins CSS, nicht in den DOM-Text.
  5. Mobile Ellipsis: Bei langen Pfaden im engen Viewport mittlere Elemente einklappen und erste + letzte Crumb sichtbar lassen. (Bewährtes Muster in UX-Guides.)
  6. Konsistenz (WCAG 3.2.3): Platzierung und Reihenfolge seitenübergreifend beibehalten; Abweichungen gelten als Accessibility-Failure.
  7. Attribut-Chips sauber ausweisen: Filterzustände als einzeln entfern­bare Chips darstellen („Farbe: Blau ד). SEO-Kontrolle via kanonische URLs und Parameterregeln.

 

Typische Fehler – und wie Sie sie vermeiden

  • URL-Spiegelung statt Nutzerpfad: 1:1-Spiegelungen erzeugen oft kryptische Labels. Google empfiehlt ausdrücklich, typische Nutzerpfade abzubilden.
  • Unlabelte Landmarken: Mehrere <nav> ohne eindeutige Labels erschweren Screenreader-Nutzenden die Orientierung. Jede Landmarke braucht ein Label.
  • Trenner als Text: DOM-Trenner werden vorgelesen; setzen Sie sie dekorativ via CSS.
  • Letzter Crumb falsch ausgezeichnet: Ist der letzte Eintrag ein Link, aria-current="page" nicht vergessen; ansonsten als reinen Text ausgeben.
  • Facetten ohne SEO-Leitplanken: Filterkombinationen können Index-Bloat verursachen (Crawling/Indexierung). Kanons/Parameterregeln sind Pflicht.
  • Veraltete Standards: data-vocabulary.org ist für Rich-Results abgeschaltet – nutzen Sie schema.org/BreadcrumbList.

 

E-Commerce-Spezifika

Auf Produktdetailseiten sollten Sie immer eine hierarchische Breadcrumb zeigen (z. B. Möbel › Sofas › Ecksofas › Produktname). Ohne „Up“-Shortcut landen Nutzende sonst zu häufig wieder in Suche oder Filtern. Ergänzen Sie auf Listen-/Kategorieseiten ggf. Attribut-Chips für aktive Filter („Farbe: Blau ד). Dieses Doppel – Orientierung (hierarchisch) + Kontrolle (Filter entfernen) – ist UX-stark und aus Baymard-Sicht bewährt.

 

Technische Umsetzung in gängigen Stacks (Kurzguides)

  • Server-Rendered CMS (z. B. WordPress, TYPO3, Drupal):
    Verwenden Sie zentrale Breadcrumb-Komponenten/Plugins, fügen Sie JSON-LD programmatisch ein und achten Sie auf kanonische Pfade bei Mehrfach-Kategorisierung. (Für TYPO3 existieren dedizierte BreadcrumbList-Hilfen; prüfen Sie die Schema-Konformität.)
  • React/Next.js, Vue/Nuxt:
    Generieren Sie Breadcrumbs aus Routen-Metadaten (nicht blind aus Pfadsegmenten). In Next.js können Sie JSON-LD im <head> injizieren. Für SEO-Reliabilität sollte das Markup serverseitig (SSR/SSG) bereitstehen.
  • Designsysteme/Pattern Libraries:
    Halten Sie eine Breadcrumb-Komponente mit Varianten (Standard, Ellipsis, mit Attribut-Chips) vor; dokumentieren Sie ARIA-Rollen, Fokusverhalten und Escape-Regeln (z. B. Trenner nur via CSS).

 

Qualitätssicherung: Testen & Monitoring

  1. Visuell & funktional
    • Platzierung konsistent, Pfade korrekt, Ellipsis-Strategie auf kleinen Screens sauber.
    • Fokus-Reihenfolge und Tastaturnavigation prüfen.
  2. Barrierefreiheit
    • Landmarke eindeutig (aria-label="Breadcrumb"),
    • aria-current="page" korrekt gesetzt,
    • Trenner nicht vorgelesen,
    • Kontraste & Fokus-Stile sichtbar.
  3. Strukturierte Daten
    • Rich Results Test → Fehlerfreiheit,
    • Search Console-Bericht → Valid-Items überwachen; nach Template-Deploys auf Regressionen testen.
  4. Analytics
    • Breadcrumb-Klicks als Events messen,
    • Abbruchpfade vergleichen (ohne/mit Breadcrumb-Nutzung),
    • Konversionspfade: Prüfen, ob Nutzende häufiger in relevante übergeordnete Kategorien zurückkehren.

 

Best-Practice-Checkliste (kompakt)

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

 

Häufige Fragen (FAQ) zum Thema Breadcrumb

Zeigt Google Breadcrumbs noch in der Suche an?
Ja – auf Desktop. Mobil werden Breadcrumbs seit dem 23. Januar 2025 nicht mehr angezeigt; dort erscheint nur die Domain. Die Empfehlung, Breadcrumb-Markup weiter zu pflegen, bleibt bestehen (u. a. für Desktop-Darstellung, Search-Kontext, Search Console-Berichte).

Müssen Breadcrumbs die URL exakt spiegeln?
Nein. Google empfiehlt, typische Nutzerpfade zu modellieren – verständlicher für Nutzer*innen und Suchsysteme.

Soll der letzte Crumb anklickbar sein?
Gängige Praxis ist: nein – oder, wenn verlinkt, dann mit aria-current="page" kennzeichnen. Wichtig 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 als Desktop-Rich-Result erscheinen – das hat indirekte Effekte auf Nutzersignale.

Wie gehe ich mit sehr tiefen Hierarchien um?
Auf Mobilgeräten mittlere Elemente einklappen (Ellipsis); auf Desktop ggf. umbruchfähige oder scrollbare Breadcrumbs. Entscheidend sind Lesbarkeit und Eindeutigkeit der sichtbaren Items.

Was ist mit facettierten Filtern (Attribute/Chips)?
Nutzen Sie Chips als separate, entfernbare Filteranzeigen; die hierarchische Breadcrumb bleibt bestehen. Steuern Sie Crawling/Indexierung der Filter-Kombinationen über kanonische URLs/Robots-Regeln.

 

Erweiterte Hinweise für Implementierung

  • Informationsarchitektur: Definieren Sie kanonische Pfade pro Inhaltstyp (z. B. primäre Kategorie), damit Breadcrumbs eindeutig und wiederholbar sind – besonders bei Mehrfach-Kategorisierung.
  • Content & Übersetzungen: Halten Sie konsistente Benennungen (Glossar!); kürzen Sie überlange Labels ohne Bedeutungsverlust. Einheitliche Terminologie erleichtert Desktop-SERPs und Screenreader-Ankündigungen.
  • Design Tokens: Pflegen Sie Typografie-, Abstands- und Kontrast-Tokens für eine konsistente, barrierearme Darstellung über Produkte/Brands hinweg.
  • Regressive Tests: Jeder Template-Change kann Breadcrumbs brechen (z. B. falsche position im JSON-LD). Automatisieren Sie Snapshot-/DOM-Tests und prüfen Sie strukturierte Daten im CI (inkl. Rich-Results-Checks).

 

Zusammenfassung

Breadcrumbs sind ein kleines, sehr wirksames Navigationselement: Sie bieten Orientierung, erhöhen Navigationseffizienz, unterstützen Barrierefreiheit und liefern Suchsystemen klare Strukturhinweise. Auch wenn Google mobil seit dem 23. Januar 2025 keine Breadcrumbs mehr im sichtbaren URL-Element zeigt, bleiben saubere HTML/ARIA-Umsetzung und BreadcrumbList-Markup Best Practice – zugunsten von Nutzbarkeit, Desktop-SERPs und einer robusten Informationsarchitektur.

Weitere passende Glossareinträge

Backlink

Ein Backlink ist ein externer Link, der die Autorität und Sichtbarkeit Ihrer Website in den Suchmaschinen steigern kann.
Weiterlesen

Black Hat SEO

Black Hat SEO umfasst unethische Techniken zur Manipulation von Suchmaschinenergebnissen, die oft kurzfristige Erfolge bringen, aber erhebliche Risiken bergen.
Weiterlesen

Bing

Bing ist eine vielseitige Suchmaschine von Microsoft, die durch innovative Technologien und Funktionen eine Alternative zu Google bietet.
Weiterlesen

Bad Neighborhood (SEO)

Ein Bad Neighborhood beschreibt eine Gruppe von Websites, die aufgrund von unethischen SEO-Praktiken und problematischen Inhalten das Suchmaschinenranking negativ beeinflussen.
Weiterlesen

Backend

Das Backend ist die technische Basis, die hinter den sichtbaren Oberflächen einer Website oder Anwendung arbeitet und alle Datenprozesse steuert.
Weiterlesen
Zurück zum Glossar
Back to top