You are currently viewing WordPress Breadcrumbs einbinden

Wo bin ich? Und wie komme ich wieder zurück zur Startseite? Genau diese Fragen kannst du deinem Website-Besucher mit einer Brotkrumen-Navigation beantworten. Wie du in WordPress Breadcrumbs einbinden kannst und welche Vorteile sie haben, zeige ich dir in diesem Beitrag.

Was ist ein Breadcrumb?

Ein Breadcrumb, auch Brotkrumennavigation genannt, ist ein zusätzlicher Navigationspfad, der dem Nutzer anzeigt, an welcher Position er sich innerhalb einer Website-Hierarchie befindet. Zusätzlich zeigt er ihm auch an, wie er wieder zu seinem ursprünglichen Ausgangspunkt oder zur übergeordneten Ebene zurückfinden kann.

Benannt wurde dieses Prinzip nach dem Märchen Hänsel & Gretel, in dem die beiden Kinder Brotkrumen fallen ließen, um ihren Weg zurückverfolgen zu können.

Für die Umsetzung einer Brokrümel-Navigation gibt es mehrere Möglichkeiten:

  • Standortbasierte Brotkrümelnavigation
    Am häufigsten wird die standortbasierte Breadcrumb Navigation genutzt. Hierbei spiegelt sich die hierarchische Struktur der Webseite wider. Also auf welcher Ebene man sich befindet, wie z.B.: Startseite > Seite > Unterseite
    Breadcrumb Beispiel Google docs
  • Attribut-basierte Breadcrumbs
    Diese zusätzliche Orientierungshilfe bieten vor allem Shops, indem sie eine Unterteilung in Produktkategorien nutzen. Hier ein Beispiel: Home > Schuhe > Trekkingschuhe > Produktname
    brokrümel beispiel mediamarkt
  • Pfadbasierte Navigation
    Eher selten werden pfadbasierte Breadcrumbs genutzt. Diese zeigen dem Nutzen den Verlauf der zuletzt besuchten Seiten als Pfad an.

Vorteile einer Breadcrumbnavigation

  • Verbesserung der Usability
    Der Benutzer kann sich leichter orientieren und findet mit wenigen Klicks wieder seinen Weg zurück. Auch kann er die Website einfacher durchsuchen.
  • Ein Navigationspfad kann die Absprungrate verbessern und auch Klickrate erhöhen.
  • Stärkung der internen Verlinkung
    Da die einzelnen Breadcrumb-Elemente verlinkt sind, wird dadurch die interne Verlinkung deiner Website gestärkt.
  • Und natürlich freut sich auch Google, da die Suchmaschine Breadcrumbs für ihr Crawling und Rich Results nutzt (Tweet von John Mueller).
  • Nimmt nur wenig Platz im Design ein

So geht’s: WordPress Breadcrumbs einbinden

Wenn du in WordPress Breadcrumbs nutzen möchtest, gibt es dafür gleich mehrere Möglichkeiten.
Wie diese genau funktionieren, stelle ich dir jetzt vor.

1. Breadcrumb Navigation über Theme einbinden

Viele WordPress Themes beinhalten bereits die Funktion einer Brotkrumennavigation. Die Einstellungen dafür findest du normalerweise in den Theme Option bzw. im WordPress Customizer. Hier kannst du dann mit wenigen Klicks die Breadcrumb-Anzeige aktivieren und anpassen.

Bei meinem Theme OceanWP geht das ganz unkompliziert über den Customizer:

Breadcrumb Einstellungen in OceanWP

Auch bei dem bekannten Theme Enfold lässt sich die Brotkrumen-Navi ganz einfach aktivieren.

Enfold Breadcrumb Einstellungen

Für den Besucher sieht das dann so aus:

Beispiel Brotkrümel in Enfold

2. SEO-Plugin für Breadcrumbs nutzen

Dein Theme bietet keine Brotkrümel-Navigation an? Oder sie gefällt dir nicht? Dann kannst du für die Breadcrumb Anzeige auch ein SEO-Plugin nutzen.

Ich nutze dafür Rank Math, da es hier bessere Einstellmöglichkeiten gibt als in OceanWP. Und auch mit dem bekannten Plugin Yoast SEO klappt das prima.

Die Funktion findest du unter Rank Math > Allgemeine Einstellungen > Breadcrumbs

Breadcrumb Optionen in Rank Math SEO

Mein Theme und auch einige andere WordPress Themes übernehmen automatisch die Rank Math Einstellungen. D.h. wenn du im Plugin die Breadcrumbs aktivierst, werden sie direkt auf deiner Website angezeigt.

Dabei bietet dir Rank Math folgende Optionen:

  • Festlegen der Trennzeichen
  • Anzeige der Startseite
  • Präfix für den Pfad (z.B. „Du befindest dich hier“)
  • Bezeichnung für Suchseiten, 404-Seiten, Archive
  • Anzeige von Blog-Seite, Kategorien und Tags im Brotkrümel-Pfad

Bei manchen Themes musst du jedoch ein kleines Code-Snippet in das entsprechende Template einfügen. Erst dann wird die Navigation ausgegeben.

<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>

Je nach Theme fügst du also die obige Zeile in die Datei header.php deines Child-Themes ein.

Alternativ kannst du auch einen Shortcode nutzen, den du auf einzelnen Seiten einfügen kannst:

[rank_math_breadcrumb]

Das klappt sowohl im Gutenberg Editor als auch in den meisten Page Buildern wie z.B. Elementor.

3. WordPress Breadcrumb Plugins

Wenn dir die vorherigen Methoden nicht zusagen, kannst du natürlich auch ein WordPress Breadcrumb Plugin einsetzen.

Wie immer bei WP, gibt es hier eine große Auswahl an kostenlosen Tools. Daher verweise ich hier nur kurz das bekannteste. Die anderen Tools funktionieren nach dem gleichen Prinzip.

Breadcrumb NavXT

Breadcrumb NavXT Plugin

Mit dem kostenlosen Plugin Breadcrumb NavXT kannst du mit wenigen Klicks Breadcrumbs in WordPress einbinden.

Dabei ist die Einrichtung sehr einfach und die Einstellungen sehr flexibel.

Die Plugin-Optionen sind sehr umfangreich, so dass vermutlich alle Anforderungen abgedeckt sein sollten. Hier die wichtigsten Features:

  • Hinterlegung des Trennzeichen
  • Festlegen der Startseite
  • Präfix für den Pfad (z.B. „Du befindest dich hier“)
  • Vorlagen für sämtliche Inhaltstypen und Taxonomien
  • MultiSite-kompatibel

Ähnlich wie bei den SEO-Tools musst du auch hier wieder ein Code-Snippet in dein Template einfügen, damit die Brokrümel auch angezeigt werden.

<?php if(function_exists('bcn_display')) {bcn_display();}?>

Alternativ kannst du auch einen Shortcode, einen Gutenberg Block oder ein Widget verwenden.

4. Breadcrumb ohne Plugin einbinden

Natürlich kannst du die zusätzliche Navigation auch ganz ohne Plugin oder Theme-Funktion einbinden. Dazu musst du allerdings etwas mehr Code einfügen.

Zunächst erstellst du eine Funktion, die für Seiten, Beiträge, Archive oder Custom Post Types den Breadcrumb Pfad erstellt. Dieser Code gehört in die functions.php deines Child Themes.

Hier ein kurzer rudimentärer Beispiel-Code, der weder Archiv- noch Suchseiten berücksichtigt.

function my_breadcrumb() {
   $pfad_sep = '&#187;'; // Trenner zwischen den Elementen
   $pfad_start = 'Startseite'; // Benennung des Pfadbeginns

echo '<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>';
}

Damit die Brotkrümel-Navigation auch auf der Website angezeigt wird, muss dann noch ein kleines Code-Schnipsel in das entsprechende Template (z.B. header.php) eingefügt werden. Also genau wie bei einer Plugin-Lösung.

<?php if (function_exists('my_breadcrumb')) my_breadcrumb(); ?>

Das Aussehen des Navigationspfades kannst anschließend mit eigenem CSS an deine Wünsche anpassen.

Bessere und umfangreichere Breadcrumb-Funktionen als mein Beispiel findest du z.B. auf Github oder Stackexchange.

Tipp zur Einbindung

Unabhängig davon, wie du Breadcrumbs in WordPress einbindest, solltest du den Navigationspfad mit Strukturierten Daten auszeichnen. Denn das hilft den Suchmaschinen, die Inhalte besser einlesen und verstehen zu können.

Viele Themes und SEO-Plugins fügen das nötige Markup bereits automatisch ein. Überprüfen kannst du das dann ganz einfach mit dem Test für Rich-Suchergebnisse.

Strukturierte Daten für Breadcrumbs mit Google testen

Und in einigen Fällen wird diese zusätzliche Navigation auch in den Suchergebnissen angezeigt.

Brotkrümel Pfad wird in Google Suche angezeigt

Fazit

Bei umfangreichen und vor allem hierarchisch verschachtelten Websites nutze ich sehr gerne Breadcrumbs. Denn für den Benutzer bietet die zusätzliche Navigation eine sehr gute und nützliche Orientierungshilfe.
Für die Einbindung nutze ich in den meisten Fällen die eingebaute Theme-Funktion wie z.B. von Enfold. Bei Themes ohne Breadcrumb greife ich auf ein SEO-Plugin zurück, denn das ist auf so gut wie jeder Website installiert.

Schreibe einen Kommentar