Breadcrumbs (Brotkrümelnavigation)
Eine sekundäre Navigation, die dem Nutzer hilft, sich auf einer Webseite zu orientieren.
Was sind Breadcrumbs?
Breadcrumbs, auch Brotkrümelnavigation genannt, sind eine sekundäre Navigation, die Nutzern hilft, sich auf einer Webseite besser zu orientieren. Sie zeigen den Pfad zur aktuellen Seite an und erleichtern es dem Nutzer, schnell zu übergeordneten Seiten zurückzukehren.
Die Breadcrumb-Navigation verbessert nicht nur die Benutzerfreundlichkeit, sondern spielt auch eine wichtige Rolle für die Suchmaschinenoptimierung (SEO), indem sie die Struktur einer Webseite für Suchmaschinen verständlicher macht.
Warum sind Breadcrumbs wichtig?
Breadcrumbs bringen gleich mehrere Vorteile – sowohl für die Nutzerfreundlichkeit als auch für die SEO-Optimierung einer Webseite.
Verbesserung der Benutzerfreundlichkeit
🔹 Breadcrumbs zeigen den genauen Standort auf der Webseite, sodass Nutzer jederzeit nachvollziehen können, wo sie sich befinden.
🔹 Sie erleichtern die Navigation, da Nutzer mit nur einem Klick zu vorherigen Seiten zurückkehren können.
🔹 Besonders hilfreich sind sie für große E-Commerce-Seiten, Blogs und Portale mit vielen Unterseiten.
✔ Beispiel für eine Breadcrumb-Navigation:
📍 Startseite > Kategorien > Schuhe > Laufschuhe
Positive Auswirkungen auf die SEO
Breadcrumbs helfen Suchmaschinen dabei, die Struktur einer Webseite besser zu verstehen, was sich positiv auf das Ranking auswirken kann.
🔹 Sie erzeugen interne Links, die Google dabei unterstützen, den Zusammenhang zwischen verschiedenen Seiten zu erkennen.
🔹 In den Google-Suchergebnissen (SERPs) können Breadcrumbs anstelle der URL angezeigt werden, was die Klickrate erhöht.
✔ Beispiel für Breadcrumbs in Google:
👉 Beispiel-Shop > Herrenschuhe > Sneaker
Reduzierung der Absprungrate
Wenn Besucher nicht direkt das finden, was sie suchen, springen sie oft ab. Mit Breadcrumbs kannst du sie zu übergeordneten Seiten leiten, statt sie zu verlieren.
🔹 Nutzer müssen nicht auf den „Zurück“-Button klicken oder die Navigation neu starten.
🔹 Sie können direkt eine höhere Kategorie aufrufen und nach weiteren Inhalten suchen.
✔ Effekt: Längere Verweildauer, bessere Nutzererfahrung und geringere Absprungrate.
Welche Arten von Breadcrumbs gibt es?
Es gibt verschiedene Arten von Breadcrumbs, die je nach Webseite und Zielgruppe eingesetzt werden können.
Hierarchische Breadcrumbs (Pfadbasiert)
Diese Breadcrumbs zeigen den Navigationspfad von der Startseite bis zur aktuellen Seite.
✔ Beispiel:
📍 Startseite > Blog > SEO-Tipps > Breadcrumbs optimieren
💡 Ideal für: Onlineshops, Blogs und strukturierte Webseiten.
Attributbasierte Breadcrumbs
Diese Variante wird oft in E-Commerce-Shops verwendet, um Produktattribute darzustellen.
✔ Beispiel:
📍 Startseite > Schuhe > Marke: Adidas > Farbe: Blau
💡 Ideal für: Webshops mit vielen Produktvarianten.
Verlaufsbasierte Breadcrumbs
Diese Breadcrumbs zeigen den individuellen Navigationsverlauf des Nutzers.
✔ Beispiel:
📍 Zurück zu deiner vorherigen Seite: Sneaker Sale
💡 Ideal für: Personalisierte Nutzererfahrungen.
Wie fügst du Breadcrumbs in deine Webseite ein?
Breadcrumbs können mit HTML und CSS manuell erstellt oder über CMS und Plugins automatisiert eingebunden werden.
Breadcrumbs mit HTML & CSS
Eine einfache HTML-Struktur für Breadcrumbs könnte so aussehen:
<nav aria-label="Breadcrumb"><ul>
<li><a href="index.html">
Startseite
</a></li><li><a href="kategorie.html">
SEO
</a></li><li>
Breadcrumbs optimieren
</li></ul>
</nav>
💡 Tipp: Mit CSS kannst du das Design anpassen und die Breadcrumbs optisch hervorheben.
Breadcrumbs in WordPress mit Plugins einfügen
Für WordPress-Nutzer gibt es zahlreiche Plugins, die die Implementierung erleichtern:
✔ Yoast SEO – Fügt automatisch Breadcrumbs hinzu und optimiert sie für SEO.
✔ Rank Math – Bietet eine einfache Konfiguration für Breadcrumbs.
Best Practices für die Optimierung von Breadcrumbs
Damit Breadcrumbs ihre volle Wirkung entfalten, solltest du einige bewährte Methoden beachten.
Konsistente Platzierung
🔹 Breadcrumbs sollten immer an der gleichen Stelle angezeigt werden – meistens oben auf der Seite unter dem Hauptmenü.
Keine Breadcrumbs auf der Startseite
🔹 Da die Startseite der erste Einstiegspunkt ist, sind Breadcrumbs hier überflüssig.
Nutze strukturierte Daten für SEO
🔹 Durch Schema Markup (JSON-LD) können Breadcrumbs für Google lesbar gemacht werden.
✔ Beispiel für JSON-LD Markup:
{"@context":
"https://schema.org",
"@type":
"BreadcrumbList",
"itemListElement":
[
{
"@type":
"ListItem",
"position":
1,
"name":
"Startseite",
"item":
"https://example.com/"
},
{
"@type":
"ListItem",
"position":
2,
"name":
"SEO",
"item":
"https://example.com/seo/"
},
{
"@type":
"ListItem",
"position":
3,
"name":
"Breadcrumbs optimieren",
"item":
"https://example.com/seo/breadcrumbs-optimieren/"
}
]
}
🔹 Diese Daten helfen Google, die Breadcrumbs in den Suchergebnissen anzuzeigen.
Keine überflüssigen Breadcrumbs setzen
🔹 Vermeide zu lange Breadcrumb-Pfade, die unnötige Klicks enthalten.
🔹 Schlecht:
📍 Startseite > Kategorie > Unterkategorie > Weitere Unterkategorie > Noch eine Unterkategorie > Produkt
🔹 Besser:
📍 Startseite > Kategorie > Produkt
Häufige Fehler bei Breadcrumbs und wie du sie vermeidest
Fehlende Breadcrumb-Navigation auf komplexen Webseiten
❌ Problem: Nutzer verlieren sich auf großen Webseiten ohne klare Navigation.
✔ Lösung: Breadcrumbs einfügen, um eine bessere Orientierung zu bieten.
Fehlende Verlinkung der Pfade
❌ Problem: Breadcrumbs werden als reiner Text angezeigt, aber sind nicht klickbar.
✔ Lösung: Jede Stufe (außer der letzten) sollte verlinkt sein.
Zu lange oder unlogische Breadcrumb-Pfade
❌ Problem: Zu verschachtelte Breadcrumbs, die den Nutzer eher verwirren als helfen.
✔ Lösung: Nur die wichtigsten Ebenen anzeigen und logisch strukturieren.
Fazit – Warum Breadcrumbs ein Muss für jede Webseite sind
Breadcrumbs sind eine einfache, aber effektive Lösung, um die Navigation zu verbessern und gleichzeitig die SEO zu optimieren.
✔ Bessere Benutzererfahrung durch klare Orientierung.
✔ SEO-Vorteile durch verbesserte interne Verlinkung und optimierte Darstellung in den Suchergebnissen.
✔ Niedrigere Absprungrate, da Nutzer leichter durch die Seite navigieren können.
Falls deine Webseite noch keine Breadcrumbs hat, solltest du sie unbedingt implementieren – deine Nutzer und Google werden es dir danken! 🚀
Falls du Fragen hast oder eine individuelle Lösung für deine Webseite benötigst, lass es mich wissen!