Breadcrumbs sind ein tolles Hilfsmittel, um Lesern und Suchmaschinen eine Orientierungshilfe zu bieten.
Die kleine Navigationsleiste ist insbesondere für große Websites mit vielen Beiträgen oder Unterseiten ein Muss.
In diesem Beitrag verraten wir dir, was Breadcrumbs sind, warum du nicht darauf verzichten solltest und wie du diese einfach und schnell mit oder ohne Plugin auf deiner Seite integrierst.
Als Breadcrumb-Navigation, auch kurz als „Breadcrumbs“ genannt, bezeichnet man eine kleine Navigationszeile, die beginnend von der Homepage den Pfad bis zur aktuellen Seite einer Website aufschlüsselt.
Auch bei Gradually AI nutzen wir eine Breadcrumb-Navigation, wie du weiter oben in diesem Artikel sehen kannst:
Breadcrumb bedeutet in das Deutsche übersetzt „Brotkrumen“ oder „Brotkrümel“.
Der Begriff ist nicht zufällig gewählt, denn der Nutzen einer Breadcrumb-Navigation erinnert stark an das Märchen Hänsel und Gretel:
Die Brotkrumen sollen deinen Besuchern helfen, sich auf einer Websites zurechtfinden und bei Bedarf ihren Weg zurückzufinden.
Man unterscheidet im Allgemeinen zwischen drei Arten von Breadcrumbs:
- Standortbasiert: Die häufigste Art der Breadcrumb-Navigation. Sie besteht aus einem hierarchischen Aufbau und spiegelt so die Struktur einer Website wider. Ein Beispiel wäre: Startseite > Kategorie A > Beitrag A
- Attributbasiert: Dieser Typ ist überwiegend bei Online-Shops zu finden, da sie Produktkategorien beinhaltet. Ein Beispiel wäre: Startseite > Outdoor > Rucksäcke > Damen-Trekking-Rucksack
- Pfadbasiert: Dieser Typ ist eher selten. Sie zeigt dem Leser seinen individuellen Klickpfad und beinhaltet seine zuletzt besuchten Seiten.
Obwohl Breadcrumbs viele Vorteile bieten, werden sie bei weitem nicht von allen Website-Betreibern genutzt.
Das sind die drei wichtigsten Vorteile einer solchen Navigation:
2.1 Benutzerfreundlichkeit
Breadcrumbs dienen Nutzern als Orientierung und Navigationshilfe, was sich unter Umständen positiv auf die Besuchsdauer auswirkt und die Absprungrate senken kann. Das gilt vor allem für Websites mit vielen Seiten oder Blogartikeln.
2.2 Suchmaschinenoptimierung
Durch Breadcrumbs können Suchmaschinen Websites besser crawlen (deren Inhalte entdecken) und erhalten mehr Informationen über die Inhalte von Seiten und deren Beziehungen untereinander, was sich positiv auf das Ranking in den Suchergebnissen auswirken kann.
Ein weiterer Vorteil:
Sofern deine Breadcrumbs mit strukturierten Daten ausgezeichnet wurden, wird anstelle der URL der Breadcrumb-Pfad in den Google-Suchergebnissen dargestellt, was professioneller wirkt und die Klickrate erhöhen kann:
Plugins wie Rank Math, Yoast SEO oder Breadcrumbs NavXT, die ich dir im folgenden noch vorstellen werde, binden diese strukturierten Daten automatisch ein.
2.3 Meistens einfach einzubauen
Eine Breadcrumb-Navigation lässt sich meist recht schnell in eine WordPress-Website integrieren und sich individuell anpassen, sodass sie mit deinem Design harmoniert.
Es gibt viele verschiedene Möglichkeiten, um Breadcrumbs auf deiner WordPress-Website einzubinden Hier findest du die fünf einfachsten und beliebtesten Wege:
3.1 Mit Rank Math
Breadcrumbs mit Rank Math einzubinden ist leicht und erfordert keinen Code. Auch Einsteiger werden, also mit dieser Methode definitiv keine Probleme haben.
Nachdem du Rank Math installiert und aktiviert hast, findest du unter Rank Math > Einstellungen > Breadcrumbs zahlreiche Individualisierungsmöglichkeiten:
Dazu gehören:
- Charakter der Trennzeichen definieren
- Ein-/ausblenden der Startseite
- Definieren eines Präfix
- Definition von Anzeigetypen (Kategorien und Tags)
Viele Themes übernehmen, sobald Breadcrumbs in Rank Math aktiviert wurden, automatisch alle Einstellungen.
Andere stellen diese leider nicht automatisiert dar, was aber kein großes Problem ist. Denn Rank Math stellt dir einen Shortcode zur Verfügung, um die Breadcrumb-Navigationsleiste an einer beliebigen Stelle einfügen zu können.
3.2 Mit Yoast SEO
Auch mit dem Plugin Yoast SEO lassen sich Breadcrumbs auf einer Seite einbinden. Hier ist das Prozedere ähnlich simpel, wenn auch etwas anspruchsvoller als bei Rank Math.
Sollte dein Theme Breadcrumbs von Yoast SEO nicht unterstützen, musst du einen Code-Schnipsel in deine Theme-Datei hinzufügen.
Wo genau du diesen einfügen musst, hängt davon ab, wo die Breadcrumbs später sichtbar sein sollen. Ich empfehle dir, diese im oberen Teil der Website und websiteweit auszuspielen, damit die Breadcrumb-Navigation alle ihre Vorteile ausspielen kann. In diesem Fall ist die Datei header.php die richtige Adresse.
Füge hier folgenden Code ein:
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}?>
Nachdem du den Code hinzugefügt hast, musst du im nächsten Schritt die Breadcrumbs im Backend des Yoast-Plugins aktivieren. Die Schaltfläche hierfür findest du unter Yoast SEO > Darstellung in der Suche > Brotkrümelnavigation:
Einstellungen zu den Breadcrumbs, wie Trennzeichen, Anker-Text für die Startseite oder Präfixe kannst du auf derselben Seite vornehmen:
Sofern du auf den Einsatz eines ganzheitlichen SEO-Plugins verzichten möchtest, gibt es auch die Möglichkeit, ein spezielles Plugin zu verwenden, wie Breadcrumbs NavXT.
Das Plugin ist simpel aufgebaut, leichtgewichtig und tut genau das, was es soll. Ähnlich wie bei Yoast musst du zunächst folgenden Code einfügen, bevor du in den Plugin-Einstellungen das Erscheinungsbild deiner Breadcrumbs individualisieren kannst:
<?php if(function_exists('bcn_display')) {bcn_display();}?>
Alternativ wäre auch die Verwendung eines Shortcodes möglich.
Nachdem das erledigt ist, kannst du im Backend verschiedene Einstellungen vornehmen:
- Trennzeichen definieren
- Startseite ein-/ausblenden
- Präfix festlegen
3.4 Über die Theme-Einstellungen
Bei vielen Themes, darunter auch bei Astra, ist die Breadcrumb-Funktion bereits integriert.
Das ist natürlich eine tolle Erleichterung, da du nicht nur auf zusätzliche Plugins verzichten, sondern das Erscheinungsbild direkt im Customizer anpassen kannst.
In Astra funktioniert das wirklich kinderleicht:
Direkt im Customizer findest du den Eintrag „Breadcrumbs“. Hier kannst du zunächst die Position der Breadcrumbs bestimmen, bevor du unter zahlreichen Konfigurationsmöglichkeiten auswählen kannst:
Einziger Wermutstropfen:
In der Regel sind die Individualisierungsmöglichkeiten nicht so umfangreich wie bei der Einbindung über ein Plugin. Auch die Position der Breadcrumbs lässt sich nur selten anpassen.
3.5 Manuell per functions.php
Die fünfte und letzte Möglichkeit, die wir dir vorstellen möchten, ist die Einbindung über die functions.php.
Der Vorteil dieser Methode ist, dass du komplett auf Plugins verzichten kannst und auch nicht zwingend ein Theme benötigst, das eine Breadcrumb-Funktion beinhaltet.
Ein Nachteil ist hingegen, dass die Einbindung und spätere Individualisierung deutlich komplexer ist.
Zunächst musst du Code erstellen, der alle gewünschten Inhalte (Beiträge, Seiten, Custom Post Types, etc.) beinhaltet und später anzeigt. Hier findest du ein vereinfachtes Grundgerüst:
function my_breadcrumb() {
$pfad_sep = '»'; // Trenner zwischen den Elementen
$pfad_start = 'Startseite'; // Benennung des Pfadbeginnsecho '<div class="bread"><a href="' . home_url() . '" title="' . esc_attr( get_bloginfo( 'name' ) ) . '" rel="home" class="bread-start">'.$pfad_start . '</a>';
if (is_category() || is_single()) {
echo $pfad_sep;
the_category(' • ');
if (is_single() || is_page() ) {
echo $pfad_sep;
the_title(); }
} elseif (is_page()) {
echo $pfad_sep;
the_title();
}
echo '</div>';
}
Dieser Code muss im nächsten Schritt in die functions.php kopiert werden.
Im Anschluss musst du deinem Theme signalisieren, dass es die Navigation anzeigen soll. Das geschieht über folgenden Code, den du in der header.php deines Themes einfügst:
<?php if (function_exists('my_breadcrumb')) my_breadcrumb(); ?>
Im dritten und letzten Schritt muss nun die Optik angepasst werden. Das geht per CSS. Am einfachsten ist es, das CSS über den Customizer einzufügen, denn dieser bietet eine Live-Vorschau.
Alles in allem ist diese Methode jedoch deutlich aufwendiger als die Einbindung von Breadcrumbs über ein Plugin und setzt eine gewisse Erfahrung im Programmieren voraus. Für Einsteiger ist diese Methode also eher ungeeignet.
Abschließend solltest du mit dem Rich Snippet Testing Tool von Google überprüfen, ob die Auszeichnung deiner Breadcrumbs mit strukturierten Daten korrekt erfolgt ist.
Zeigt das Tool Fehler oder Warnungen an, kann es sein, dass die Breadcrumb-Pfade nicht oder nicht korrekt in den Suchergebnissen angezeigt werden.
Beim Trouble-Shooting kann dir Googles Dokumentation zu Navigationspfaden helfen.
Gerade für Online-Shops mit vielen Produkten sind Breadcrumbs hilfreich für Besucher, um sich im Shop zurechtzufinden.
Mit dem Plugin WooCommerce Breadcrumbs kannst du das einfach und schnell umsetzen (vorausgesetzt natürlich, du betreibst einen WooCommerce-Shop, ansonsten funktioniert das Plugin nicht):
Im WordPress-Adminbereich navigierst du zu Einstellungen > WC Breadcrumbs. Hier kannst du deine Breadcrumbs individuell konfigurieren.
Es könnte sein, dass es demnächst einen nativen Gutenberg-Blog für Breadcrumbs geben wird, was die Einbindung noch einfacher machen würde.
Ein entsprechender Pull Request besteht seit Juni 2021 auf GitHub und wird von Zeit zu Zeit aktualisiert.
7. FAQ
Hier habe ich dir Antworten auf häufige Fragen rund um WordPress-Breadcrumbs zusammengestellt:
Elementor besitzt ein eigenes Breadcrumb-Widget, das du per Drag-and-drop an der gewünschten Stelle deiner Website einfügen kannst.
Im Anschluss kannst du das Design und den Inhalt individuell nach deinen Wünschen anpassen (Farbe, Typografie etc.).
Ja, das ist kein Problem.
In Yoast SEO kannst du zum Beispiel unter SEO > Darstellung in der Suche > Brotkrümelnavigation festlegen, für welche Post-Typen Breadcrumbs angezeigt werden sollen. Dort kannst du auch Custom Post Types auswählen.
Um Breadcrumbs zu deiner Website hinzuzufügen, kannst du ein SEO-Plugin wie Yoast SEO oder Rank Math verwenden.
Auch eigenständige Plugins wie Breadcrumbs NavXT sind eine tolle Lösung.
Abschließend sind Page-Builder (z. B. Elementor) zu nennen, die ein Breadcrumb-Widget enthalten.
