🎉 Neles brandneuer Instagram-Kurs kommt im August 2022!Ja, zeig mir den Kurs!

10 Tage, 10 E-Mails

Du willst in 2022 mehr Besucher und Kunden über SEO bekommen?

Starte mit meinem kostenlosen E-Mail-Training, um 10 fatale SEO-Fehler zu vermeiden, die dich deine Google-Rankings kosten.

WordPress-Breadcrumbs einbinden: So geht’s mit und ohne Plugin

WordPress-Breadcrumbs

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.

1. Was ist eine Breadcrumb-Navigation?

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 Blogmojo nutzen wir auch 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.

1.1 Welche Arten von Breadcrumbs gibt es?

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.

2. Welche Vorteile bietet eine Breadcrumb-Navigation?

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.   

3. Breadcrumbs in WordPress einfügen

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:

Rank Math Breadcrumbs

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>' );
}?>
Achtung: Bei Theme-Updates werden die Änderungen eventuell überschrieben. Wir empfehlen daher den Einsatz eines Child-Themes.

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:

Yoast Breadcrumbs

3.3 Mit Breadcrumbs NavXT

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.

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:

Astra Breadcrumbs

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 = '&#187;'; // 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(' &bull; ');
   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.

4. Strukturierte Daten der Breadcrumbs testen

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.

Breadcrumbs testen

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.

5. WooCommerce-Breadcrumbs hinzufügen

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

WooCommerce Breadcrumbs

Im WordPress-Adminbereich navigierst du zu Einstellungen > WC Breadcrumbs. Hier kannst du deine Breadcrumbs individuell konfigurieren.

Achtung: Stelle unbedingt sicher, dass die Checkbox unter „Breadcrumbs aktivieren“ einen Haken enthält und dass deine Produktseiten einen Titel enthalten. Andernfalls funktioniert das Plugin nicht korrekt.

6. Nativer Gutenberg-Block für Breadcrumbs?

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:

Wie kann ich Breadcrumbs in Elementor hinzufügen?

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

Kann ich WordPress-Breadcrumbs auch für Custom Post Types verwenden?

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.

Mit welchen WordPress-Plugins kann ich Breadcrumbs hinzufügen?

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.

Finn Hillebrandt

Finn Hillebrandt

Gründer von Blogmojo, SEO-Experte mit 11+ Jahren Erfahrung, WordPress-Fan

Finn hilft Online-Unternehmern mehr Kunden und Besucher über Google zu bekommen.

Er setzt dabei nicht auf Hörensagen, sondern führt ständig eigene Tests und Recherchen durch, um herauszufinden, wie Google wirklich tickt. Achtung, Nerd-Alarm! 🤓

Er teilt sein Wissen hier auf dem Blog in 80+ Fachartikeln zu Online-Business, WordPress und SEO sowie in Online-Kursen, wie z. B. seinem SEO-Kurs „New Level SEO“ und seinem Mini-Kurs „Kann ich ranken?“.

Erfahre mehr über Finn und das Team, folge ihm auf Instagram, Twitter und LinkedIn oder tritt seiner Facebook-Gruppe SEO & Affiliate-Marketing bei.

Werbehinweis für Links mit Sternchen (*)

Es handelt sich um einen Affiliate-Link, das heißt, wenn du auf der verlinkten Website etwas kaufst, erhalten wir eine Provision. Dies hat keinerlei Einfluss darauf, wie wir ein Tool oder einen Anbieter bewerten.

Wir empfehlen nur Tools bzw. Anbieter, hinter denen wir auch wirklich stehen. Für dich entstehen dadurch natürlich keine zusätzlichen Kosten! Du hilfst jedoch uns und diesem Projekt. Danke! ❤️

Du willst in 2022 mehr Besucher und Kunden über SEO bekommen?
10 SEO-Fehler

Dann starte mit meinem E-Mail-Training, um 10 fatale SEO-Fehler zu vermeiden, die dich deine Google-Rankings kosten.

Es kostet dich keinen Cent, nur deine E-Mail-Adresse. 😉

👉 Ja, zeig mir das Training!