Ein Breadcrumb-Menü zeigt dem Besucher den Pfad von der Startseite bis zur aktuellen Seite, zum Beispiel: Startseite › Shop › Schuhe › Sneaker. Diese Brotkrümelnavigation verbessert die Orientierung auf der Website und stärkt gleichzeitig die interne Verlinkungsstruktur, was Suchmaschinen bei der Indexierung hilft. Richtig ausgezeichnet, kann sie als Rich Snippet in Google erscheinen und die Klickrate aus den Suchergebnissen erhöhen.
Breadcrumbs bringen echten Mehrwert in diesen Situationen:
- E-Commerce-Shops mit mehreren Kategorieebenen (Kleidung › Damen › Jacken › Winterjacken)
- Produktkataloge und Lexika mit tiefer Informationsarchitektur
- Unternehmenswebsites mit Unterseiten in mehreren Hierarchieebenen
- Blogs und Nachrichtenportale mit Rubriken und Unterkategorien
Auf flachen Websites mit nur einer Ebene oder auf One-Pagern sind Breadcrumbs dagegen überflüssig.
Wichtige Erkenntnisse
Ein Breadcrumb-Menü verbessert die Nutzerorientierung, stärkt die interne Verlinkung und kann als Rich Snippet in Google erscheinen, wenn BreadcrumbList-Markup mit mindestens zwei ListItems und korrekten Positionswerten ausgezeichnet ist.
| Thema | Details |
|---|---|
| Definition und Einsatz | Breadcrumbs zeigen den Seitenpfad und lohnen sich ab zwei Hierarchieebenen. |
| Drei Typen | Location für Hierarchien, Attribute für Filter im Shop, Path heute kaum noch empfohlen. |
| SEO-Pflichtpunkte | JSON-LD mit BreadcrumbList, Startseite als Position 1, Validierung per Rich Results Test. |
| Accessibility | <nav aria-label="Breadcrumb"> und aria-current="page" am letzten Element sind Pflicht. |
| Werbeeinfach | Professionelle WordPress- und WooCommerce-Implementierung inklusive Schema-Markup und Validierung. |
Inhaltsverzeichnis
- Welche drei Breadcrumb-Typen gibt es?
- Warum lohnen sich Breadcrumbs für UX und SEO?
- Wann sind Breadcrumbs sinnvoll — und wann nicht?
- Was macht gute Breadcrumbs aus? Dos & Don’ts
- Wie setzt du Breadcrumbs technisch korrekt um?
- Breadcrumbs in WordPress und WooCommerce richtig einrichten
- Wie sehen gute Breadcrumbs im Design aus?
- Werbeeinfach setzt Breadcrumbs für dich professionell um
- Quellen
- FAQ
Welche drei Breadcrumb-Typen gibt es?
Laut Wikipedia unterscheidet man drei grundlegende Typen der Brotkrümelnavigation. Jeder Typ löst ein anderes Navigationsproblem.
| Typ | Definition | Beispielpfad | Empfohlen für |
|---|---|---|---|
| Location (Hierarchie) | Zeigt die feste Position der Seite in der Sitestruktur | Startseite › Blog › WordPress › Plugins | Unternehmensseiten, Blogs, Lexika |
| Path (Klickverlauf) | Zeigt den individuellen Navigationspfad des Nutzers | Startseite › Suchergebnisse › Produkt A | Heute kaum noch empfohlen |
| Attribute (Filter) | Zeigt gewählte Filter oder Eigenschaften | Startseite › Schuhe › Größe 42 › Rot | E-Commerce, Produktkataloge |
Location-Breadcrumbs sind die sicherste Wahl für klare Hierarchien. Attribute-Breadcrumbs eignen sich besonders im E-Commerce, wo Nutzer nach Filtern suchen. Path-Breadcrumbs spiegeln den Klickverlauf wider, werden aber heute selten eingesetzt, weil sie bei jedem Nutzer anders aussehen und keine konsistente Orientierung bieten.
Im E-Commerce lassen sich Location- und Attribute-Typen gut kombinieren: Der Hauptpfad zeigt die Kategoriehierarchie, ein zweiter Pfad die gewählten Filter.
Warum lohnen sich Breadcrumbs für UX und SEO?
Breadcrumbs erfüllen zwei Aufgaben gleichzeitig: Sie helfen Nutzern, sich zu orientieren, und sie stärken die technische Seitenstruktur für Suchmaschinen.
Vorteile für die Nutzererfahrung:
- Besucher wissen jederzeit, wo sie sich befinden, ohne die Hauptnavigation zu bemühen.
- Übergeordnete Kategorien sind direkt anklickbar, was die Discovery von verwandten Inhalten fördert.
- Die Absprungrate sinkt, weil Nutzer leichter zur nächsthöheren Ebene zurücknavigieren können, statt den Zurück-Button zu nutzen.
Vorteile für SEO:
- Breadcrumbs erzeugen interne Links von jeder Unterseite zu allen übergeordneten Kategorieseiten. Das verteilt PageRank innerhalb der Website und stärkt wichtige Kategorieseiten.
- Korrekt ausgezeichnete Breadcrumbs erscheinen als Rich Snippet in den Google-Suchergebnissen. Statt einer langen URL sieht der Nutzer den lesbaren Pfad direkt unter dem Seitentitel. Das erhöht die Klickwahrscheinlichkeit.
- Kurze, nutzerorientierte Breadcrumb-Labels erhöhen die Klickrate in Suchergebnissen zusätzlich, weil sie im Snippet sichtbar werden.
Für einen umfassenderen Blick auf SEO-Grundlagen und interne Verlinkung lohnt sich ein Blick auf den Praxis-Guide.
Wann sind Breadcrumbs sinnvoll — und wann nicht?
Die Entscheidung hängt vor allem von der Tiefe der Informationsarchitektur ab.
Breadcrumbs einsetzen, wenn:
Die Website hat mindestens zwei Hierarchieebenen unterhalb der Startseite. Ein Online-Shop mit Kategorien, Unterkategorien und Produktseiten ist der Paradefall. Gleiches gilt für Kataloge, Wissensdatenbanken oder Unternehmenswebsites mit Abteilungsseiten. Nutzer kommen häufig über Suchmaschinen direkt auf tiefe Unterseiten und brauchen Orientierung, um den Kontext zu verstehen.
Breadcrumbs weglassen, wenn:
Flache Websites mit nur einer Navigationsebene brauchen keine Brotkrümelnavigation. Auf Landing Pages, One-Pagern oder Microsites erzeugen Breadcrumbs visuellen Lärm ohne Mehrwert. Auch wenn die Hauptnavigation bereits alle Ebenen abdeckt, ist ein zusätzlicher Breadcrumb-Pfad redundant.
Mobile Besonderheiten:
Auf kleinen Bildschirmen wird der Pfad schnell zu lang. Bewährte Strategien sind das Kürzen auf die letzten zwei Ebenen, ein Ellipsis-Muster (… › Kategorie › Produkt) oder ein ausklappbarer Pfad per Tap. Wichtig: Die Breadcrumbs müssen auch auf Mobilgeräten klickbar und gut lesbar bleiben. Mehr zu responsiven Designmustern findest du in unserem Responsive-Design-Guide.
Was macht gute Breadcrumbs aus? Dos & Don’ts
Gute Breadcrumbs sind kurz, klar und konsistent. Diese Regeln helfen dabei.
Labeling:
- Labels kurz halten: „Jacken“ statt „Alle Jacken für Damen ansehen“
- Nutzersprache verwenden, keine reinen Keywords
- Konsistenz mit den Hauptmenüpunkten sicherstellen
Verlinkung und Reihenfolge:
- Startseite immer als erstes Element einbinden
- Alle Ebenen außer der aktuellen Seite verlinken
- Die aktuelle Seite nicht verlinken, aber sichtbar anzeigen
- Reihenfolge immer von allgemein nach spezifisch
Design:
- Trennzeichen wie
›oder/klar und einheitlich verwenden - Breadcrumbs oberhalb des Seitentitels platzieren, damit sie sofort sichtbar sind
- Ausreichend Kontrast zwischen Linkfarbe und Hintergrund sicherstellen
Accessibility:
- Das umgebende Element als
<nav aria-label="Breadcrumb">auszeichnen - Screenreader können so den Navigationsbereich klar identifizieren
- Das aktuelle Element mit
aria-current="page"markieren
Profi-Tipp: Breadcrumbs nach URL-Änderungen oder einem Relaunch sofort aktualisieren. Veraltete Pfade im Schema erzeugen Inkonsistenzen zwischen sichtbarem Pfad und JSON-LD, was die Rich-Snippet-Darstellung verhindert. Mehr dazu im Abschnitt zu Fehlern beim Website-Relaunch.
Wie setzt du Breadcrumbs technisch korrekt um?
Die technische Umsetzung besteht aus drei Schichten: sichtbares HTML, ARIA-Auszeichnung und strukturierte Daten per JSON-LD.
Sichtbares HTML-Markup
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Startseite</a></li>
<li><a href="/shop/">Shop</a></li>
<li><a href="/shop/schuhe/">Schuhe</a></li>
<li aria-current="page">Sneaker</li>
</ol>
</nav>
Das <ol>-Element ist semantisch korrekt, weil die Reihenfolge der Elemente bedeutsam ist. Das letzte Element wird nicht verlinkt und trägt aria-current="page", damit Screenreader die aktuelle Position klar kommunizieren.
JSON-LD für strukturierte Daten
Schema als ItemList mit ListItem-Elementen. Die position-Eigenschaft muss ganzzahlig und aufsteigend vergeben sein, beginnend mit der Startseite als Position 1.
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Startseite",
"item": "https://example.de/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Shop",
"item": "https://example.de/shop/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Schuhe",
"item": "https://example.de/shop/schuhe/"
},
{
"@type": "ListItem",
"position": 4,
"name": "Sneaker",
"item": "https://example.de/shop/schuhe/sneaker/"
}
]
}
Validierung und Sonderfälle
| Schritt | Tool / Hinweis |
|---|---|
| Markup prüfen | Google Rich Results Test |
| Schema debuggen | Schema.org Validator |
| Nach Weiterleitungen | Canonical und JSON-LD synchron prüfen |
| Mehrsprachige Sites | Kanonische URLs und sprachspezifische Namen im BreadcrumbList-Objekt synchronisieren |
| Dynamische Kategorien | Sicherstellen, dass Name und URL im sichtbaren Pfad und im Schema übereinstimmen |
WebSeo empfiehlt, zunächst den für Nutzer sinnvollen Pfad zu modellieren und erst danach das JSON-LD zu erzeugen. Wer blind die URL-Struktur übernimmt, riskiert Inkonsistenzen zwischen sichtbarem Pfad und Schema. Typische Fehlerquelle: doppelte BreadcrumbList-Ausgaben durch Theme und Plugin gleichzeitig.
Breadcrumbs in WordPress und WooCommerce richtig einrichten
Für WordPress gibt es drei Wege, und jeder hat seinen Platz.
Plugin-gestützte Breadcrumbs (Yoast SEO / Rank Math)
Beide Plugins erzeugen Breadcrumbs und das zugehörige JSON-LD automatisch. Das ist der schnellste Weg für die meisten Projekte. Yoast und Rank Math liefern korrektes Schema, sofern die Template-Einbindung stimmt. Theme-Breadcrumbs hingegen geben oft kein JSON-LD aus oder erzeugen fehlerhafte Positionen.
Vorteil: Schnelle Lieferung, integriertes JSON-LD, regelmäßige Plugin-Updates.
Nachteil: Weniger Kontrolle bei komplexen Taxonomien oder mehreren Kategorien pro Produkt.
Theme-Breadcrumbs
Viele Themes bringen eigene Breadcrumb-Funktionen mit. Diese sind oft optisch gut integriert, liefern aber selten korrektes Schema-Markup. Wer auf Theme-Breadcrumbs setzt, sollte zwingend prüfen, ob JSON-LD ausgegeben wird.
Custom-Implementierung
Bei komplexen Taxonomien, mehreren Kategorien pro Produkt oder speziellen Performance-Anforderungen ist eine eigene Implementierung sinnvoll. Hier lässt sich der Pfad exakt steuern und das JSON-LD präzise erzeugen.
Nummerierte Umsetzungscheckliste für WordPress
- Backup erstellen vor jeder Änderung an Theme oder Plugins
- Plugin aktivieren (Yoast SEO oder Rank Math) und Breadcrumbs in den Einstellungen einschalten
- Template einbinden: Breadcrumb-Funktion im passenden Template-File aufrufen (z. B.
single.php,page.php,archive.php) - JSON-LD prüfen: Seite im Google Rich Results Test testen und sicherstellen, dass
BreadcrumbListkorrekt ausgegeben wird - Doppelte Ausgaben ausschließen: Prüfen, ob Theme und Plugin gleichzeitig Schema ausgeben, und eine Quelle deaktivieren
- Crawling überwachen: Nach dem Launch mit der Google Search Console prüfen, ob Breadcrumbs in den Suchergebnissen erscheinen
Profi-Tipp: Bei WooCommerce-Shops mit Produkten in mehreren Kategorien legt Yoast standardmäßig die primäre Kategorie als Breadcrumb-Pfad fest. Diese Einstellung in den Yoast-Optionen kontrollieren, damit der angezeigte Pfad mit dem Schema übereinstimmt.
Wie sehen gute Breadcrumbs im Design aus?
Gute Breadcrumbs fallen kaum auf. Sie sind da, wenn man sie braucht, und stören nicht, wenn man sie nicht braucht.
Desktop-Muster:
Ein vollständiger Pfad mit Trennzeichen › ist der Standard: Startseite › Kategorie › Unterkategorie › Aktuelle Seite. Die aktuelle Seite wird nicht verlinkt und erscheint in einer anderen Farbe oder Schriftstärke. Labels wie „Startseite“ statt „Home“ oder ein Haus-Icon sind beide akzeptabel, solange sie konsistent sind.
Mobile Muster:
- Ellipsis-Muster:
… › Schuhe › Sneakerzeigt nur die letzten zwei Ebenen und spart Platz. - Ausklappbarer Pfad: Ein Tap auf
…klappt den vollständigen Pfad auf. - Nur eine Ebene zurück: Manche Mobile-Designs zeigen nur den direkten Elternlink als
‹ Zurück zu Schuhen. Das ist einfach und funktioniert gut für tiefe Hierarchien.
Microcopy-Beispiele:
- Statt „Kategorie: Herrenbekleidung“ besser: „Herrenbekleidung“
- Statt „Produkte/Schuhe/Sneaker“ besser: „Startseite › Schuhe › Sneaker“
- Attribute-Breadcrumbs im Filter: „Schuhe › Größe 42 › Schwarz“ statt technischer Filter-IDs
Visuelle Regeln:
- Trennzeichen kleiner und heller als die Labels selbst
- Linkfarbe muss sich vom Fließtext abheben, aber nicht schreien
- Schriftgröße leicht kleiner als der Seitentitel, aber gut lesbar (mindestens 13 px)
Für die UX-Grundlagen hinter nutzerfreundlicher Navigation gibt es einen eigenen Leitfaden.
Werbeeinfach setzt Breadcrumbs für dich professionell um
Breadcrumbs korrekt zu implementieren ist mehr als ein Snippet Code. Wer komplexe Taxonomien, mehrsprachige Setups oder WooCommerce-Shops mit Tausenden Produkten betreibt, braucht eine saubere Architektur, geprüftes Schema-Markup und eine Template-Integration, die auch nach Updates stabil bleibt.
Werbeeinfach ist eine WordPress-Agentur aus Stuttgart mit über 14 Jahren Erfahrung in der Entwicklung von WordPress-Websites und WooCommerce-Shops. Wir übernehmen die vollständige technische Umsetzung: sichtbares Markup, ARIA-Auszeichnung, JSON-LD-Schema, Validierung und laufende Pflege. Gerade bei Shops mit mehreren Kategorien pro Produkt oder bei Relaunches, bei denen Pfade und Canonicals synchron bleiben müssen, zahlt sich professionelle Begleitung aus. Schreib uns oder schau dir unsere WordPress-Leistungen an, um den nächsten Schritt zu planen.
Quellen
FAQ
Was ist ein Breadcrumb-Menü auf Deutsch?
Ein Breadcrumb-Menü ist eine Brotkrümelnavigation: eine Pfadanzeige, die zeigt, wo sich der Nutzer innerhalb der Website-Hierarchie befindet, zum Beispiel „Startseite › Shop › Schuhe › Sneaker“.
Was ist ein Breadcrumb-Pfad?
Der Breadcrumb-Pfad ist die geordnete Abfolge von Links von der Startseite bis zur aktuellen Seite. Er bildet die Hierarchie der Website ab und ermöglicht das direkte Zurücknavigieren zu übergeordneten Ebenen.
Was ist eine Breadcrumb-Navigation und wozu dient sie?
Eine Breadcrumb-Navigation zeigt die Position einer Seite innerhalb der Sitestruktur und verlinkt alle übergeordneten Ebenen. Sie verbessert die Orientierung für Nutzer und stärkt die interne Verlinkung für Suchmaschinen. Mit korrektem BreadcrumbList-Schema kann sie als Rich Snippet in Google erscheinen.
Brauche ich für Breadcrumbs ein WordPress-Plugin?
Nicht zwingend. Plugins wie Yoast SEO oder Rank Math liefern Breadcrumbs inklusive JSON-LD schnell und zuverlässig. Bei komplexen Taxonomien oder speziellen Anforderungen ist eine Custom-Implementierung oft die bessere Wahl, weil sie mehr Kontrolle über Pfad und Schema bietet.
Wie prüfe ich, ob mein Breadcrumb-Schema korrekt ist?
Den Google Rich Results Test nutzen: URL eingeben und prüfen, ob BreadcrumbList ohne Fehler erkannt wird. Zusätzlich sicherstellen, dass kein Theme und kein Plugin gleichzeitig Schema ausgeben, da doppelte Ausgaben die Darstellung in den Suchergebnissen beeinträchtigen können.
