Breadcrumbs, auch Breadcrumb Navigation, Brotkrümelnavigation oder Ariadnepfad genannt, sind eine nützliche und sinnvolle Ergänzung bei der Gestaltung einer Webseite. Die Breadcrumb-Navigation hält sowohl für Usability als auch für SEO Vorteile bereit. Da die Implementierung üblicherweise unkompliziert ist, sollte diese “Low Hanging Fruit” bei der Suchmaschinenoptimierung nicht ungepflückt bleiben.

Was sind Breadcrumbs?

Die Breadcrumb Navigation ist üblicherweise eine Textzeile oder ein Link-Pfad, die dem Benutzer Orientierung bietet und grafisch darstellt, auf welcher hierarchischen Position einer Webseite sich der User gerade befindet.

Zum Begriff: Die Bezeichnung “Breadcrumbs” bzw. “Brotkrümelnavigation” leitet sich aus dem Märchen “Hänsel und Gretel” ab, bei dem Hänsel Brotkrumen auf den Weg streut, um den Weg durch den Wald nach Hause wiederzufinden. Die zweite Bezeichnung “Ariadnepfad” ist auf eine Sage der griechischen Mythologie zurückzuführen, in der Theseus mit Hilfe des Ariadnefadens wieder aus dem Labyrinth des Daidalos herausfindet.

Bild von Hänsel und Gretel mit Brotkrumen

Auf Webseiten sollen Breadcrumbs die gleiche Funktion erfüllen: Sie machen den Weg für Users zurückverfolgbar und erlauben ein Zurückspringen auf höher gelegene Hierarchieebenen bzw. vorher besuchte Seiten.

Als Second-Level Navigation werden die Breadcrumbs in der Regel im Bereich unterhalb der Hauptnavigation und oberhalb des Text-/Inhaltsbereiches einer Webseite platziert. Hier sind ausnahmsweise auch kleinere Schriftarten erlaubt, da die Breadcrumbs zwar erkennbar, aber nicht dominieren sollten.

Arten der Breadcrumb Navigation

Es werden verschiedene Arten der Breadcrumb Navigation unterschieden.

Location-Breadcrumbs = Ort

Location-Breadcrumbs zeigen die aktuelle Position des Users ausgehend von einer Hauptseite an. Hier kann der Seitenbesucher seinen aktuellen Standort in Relation zu den hierarchisch übergeordneten Kategorien ablesen und durch die interne Verlinkung schnell auf höher liegende Kategorieebenen springen. Location-Breadcrumbs werden am häufigsten benutzt und con Seitenbesuchern intuitiv verstanden.

Beispiel:

[framed_box borderColor=“#dddddd“]Wurzelkategorie → Unterkategorie 1 → Unterkategorie 1.3 → Unterkategorie 1.3.2[/framed_box]

Path-Breadcrumbs = Pfad

Alternativ zu den Location-Breadcrumbs werden auf Webseiten mitunter Path-Breadcrumbs genutzt. Diese Art der Breadcrumb Navigation zeigt den bisherigen Klickpfad des Nutzers an. D.h., die Seiten, die der User tatsächlich zuvor aufgerufen hat. Innerhalb seiner Bewegungen kann der User schnell auf seine zuvor aufgerufenen Seiten zurückspringen.

Beispiel:

[framed_box borderColor=“#dddddd“]Unterkategorie 2.1 → Startseite → Kategorie 1 → Kategorie 3 → Kategorie 3.2[/framed_box]

Attribute-Breadcrumbs = Eigenschaften

Attribute-Breadcrumbs eignen sich besonders für umfangreiche Webseiten oder Webshops. Diese Art der Breadcrumbs schlüsselt das Thema der angezeigten Unterseite semantisch auf, ist aber eher unüblich.

Beispiel:

[framed_box borderColor=“#dddddd“]Startseite → Mode → Damen → Schuhe → Sandalen[/framed_box]

[framed_box borderColor=“#dddddd“]Startseite → Schuhe → Sommern → Damen → Sandalen[/framed_box]

Bedeutung der Breadcrumbs

Breadcrumbs helfen dem Webseitenbesucher, sich zu orientieren, die Webseite zu verstehen und schnell zu ebenfalls relevanten Seiten zu navigieren. Sie steigern somit die Usability und erhöhen auch die Barrierefreiheit der Webseite. In einer maschinenlesbaren Form durch strukturierte Daten helfen sie auch Bots und Suchmaschinen, die Webseite besser einzuordnen.

Breadcrumbs & Usability

Ohne viele Klicks können User auf die nächsthöheren Ebenen navigieren, von wo aus sie wiederum zu anderen interessanten Unterseiten gelangen können.

Gerade für Erstbesucher, die bspw. über ein Suchergebnis aus Google auf einer Produktseite landen, ist diese Breadcrumbs-Positionsanzeige sehr interessant. Die Navigation lädt den Besucher ein, auf höher gelegenen Kategorieebenen Ihrer Webseite weiterzustöbern – wie durch den mythischen Ariadnefaden werden sie auf den „rechten Pfad“ geleitet. Somit sinkt nicht nur der Frustrationslevel des Besuchers erheblich, sondern auch die Bounce-Rate (der Sprung zurück auf die Suchergebnisliste wegen eines unpassenden Suchergebnisses).

Breadcrumbs haben somit das Potenzial, das Interesse des Besuchers für andere Inhalte oder Produkte Ihrer Webseite zu wecken, welches zuvor nicht vorhanden war. Durch die Einleitung “Sie befinden sich hier” finden sich selbst ungeübte User mit Hilfe einer guten Brotkrumen-Navigation schnell zurecht.

Breadcrumbs & SEO

Auch im Bereich SEO hat die Breadcrumbs-Navigation einen hohen Wert, da sie die von Google befürwortete “gute Linkarchitektur”↗ sowie die Bildung von Themensilos bestens unterstützt.

  • intuitive Navigation für User und gesteigerte Usability der Webseite
  • vom Googlebot auffindbare und crawlbare interne Links
  • beschreibende und passgenaue Ankertexte innerhalb der Breadcrumbs

Seit 2015↗ stellt Google außerdem den URL-Pfad in den SERPs in einer Breadcrumb-Struktur dar, wenn möglich. Damit möchte Google den Usern helfen, das Thema eines Suchergebnisses noch schneller zu verstehen. Dabei erlaubt Google sich, bei langen Breadcrumb-Pfaden zwischengelagerte Kategorien durch “﹥…﹥” auszublenden, um den Ziel des Pfades anzeigen zu können.

Der User kann das Thema und die Position der Seite beim flüchtigen Scannen sofort erfassen und schneller entscheiden, ob das Suchergebnis für ihn relevant ist.

Bild: Ohne Breadcrumbs SEO in den SERPS

Suchergebnis ohne Breadcrumbs-Darstellung

 

Bild: Breadcrumbs SEO in den SERPS

Suchergebnis mit Breadcrumbs-Darstellung

 

Einbindung von Breadcrumbs

Damit Google die Breadcrumbs als solche darstellen und verstehen kann, müssen diese mit strukturierten Daten ausgezeichnet werden. Beispiele finden Sie auf schema.org/BreadcrumbList↗.

Viele Shopsysteme wie Magento, Gambio oder Shopware enthalten bereits von Hause aus die Funktion für die korrekte Darstellung der Breadcrumb-Navigation inkl. strukturierter Daten. CMS wie WordPress oder Joomla bieten zudem die Möglichkeit, den automatisch generierten Breadcrumb-Pfad via Plugins mit vergleichsweise geringem Aufwand nachzurüsten. Hier finden Sie z.B. die Implementierung via YOAST↗ für WordPress.

Wie immer: Sollten Sie irgendwelche Fragen oder Feedback zum Thema haben, freuen wir uns auf Ihre Rückfragen oder Kommentare.