Breadcrumbs auf Website integrieren [Anleitung 2024]

Erfahren Sie, wie Sie Breadcrumbs auf Ihrer Website einbinden können. Unser kompletter Leitfaden. zeigt ihnen alle möglichen Optionen zur Einbindung von Breadcrumbs auf Ihrer Website.

Was sind Breadcrumbs?

Breadcrumbs, auch als Brotkrumen-Navigation bekannt, sind ein Navigationselementen auf Websites, die den Pfad anzeigen, den ein Benutzer genommen hat, um zu der aktuellen Seite zu gelangen. Der Begriff „Breadcrumbs“ leitet sich von dem Märchen „Hänsel und Gretel“ ab, in dem die Kinder Brotkrumen verwenden, um den Weg im Wald zurückzufinden.

Breadcrumbs sind besonders nützlich auf Websites mit komplexen Strukturen, vielen Unterseiten oder E-Commerce-Plattformen mit verschiedenen Produktkategorien. Sie dienen dazu, die Navigation zu erleichtern und den Nutzern zu zeigen, wo sie sich innerhalb der Hierarchie einer Website befinden.

Beispiel:

Haupttypen von Breadcrumbs

1. Pfad-Breadcrumbs (Hierarchische Breadcrumbs):

Diese zeigen den Pfad von der Startseite bis zur aktuellen Seite an. Zum Beispiel: Startseite > Kategorie > Unterkategorie > Produkt.

2. Attribut-Breadcrumbs (Attributsbasierte Breadcrumbs):

Diese zeigen die Merkmale oder Attribute eines Artikels an. Zum Beispiel: Startseite > Farbe > Größe.

3. Geschachtelte Breadcrumbs:

Dies ist eine Kombination von Pfad- und Attribut-Breadcrumbs. Sie können sowohl die Hierarchie als auch bestimmte Attribute anzeigen.

Vorteile von Breadcrumbs

• Benutzerfreundlichkeit: Breadcrumbs erleichtern es Benutzern, sich auf der Website zu orientieren und zu vorherigen Seiten zurückzukehren.
• SEO-Vorteile: Breadcrumbs verbessern die interne Verlinkung, die Crawlability für Suchmaschinen fördern und zusätzliche Keywords in die Seitenstruktur integrieren.
• Reduzierung der Absprungrate: Eine klare Navigation durch Breadcrumbs trägt dazu bei, dass Besucher länger auf der Website bleiben und zu verwandten Inhalten gelangen.
• Rich Snippets: Suchmaschinen können Breadcrumbs auch in den Suchergebnissen als Teil der Rich Snippets anzeigen.

In der Regel können Breadcrumbs in Content-Management-Systemen wie WordPress oder E-Commerce-Plattformen wie WooCommerce einfach implementiert werden. Sie sind ein wichtiger Bestandteil der User Experience und tragen zur Verbesserung der Navigation und der SEO bei.

In WordPress gibt es verschiedene Möglichkeiten, Breadcrumbs hinzuzufügen, um die Navigation auf Ihrer Website zu verbessern. Einige davon stellen wir Ihnen hier vor:

1| Der Nutzen von Breadcrumbs für SEO

Breadcrumbs sind nicht nur für die Benutzerfreundlichkeit Ihrer Website wichtig, sondern sie können auch positive Auswirkungen auf SEO (Suchmaschinenoptimierung) haben. Einige Gründe für die SEO Relevanz von Breadcrumbs sind folgende:

Verbesserte Benutzererfahrung:

Breadcrumbs erleichtern es Besuchern, sich auf Ihrer Website zu orientieren, indem sie den Pfad zur aktuellen Seite anzeigen. Dies verbessert die Benutzererfahrung und führt dazu, dass Besucher länger auf Ihrer Website bleiben.

Interne Verlinkung:

Breadcrumbs enthalten Links zu übergeordneten Seiten oder Kategorien. Dies fördert eine bessere interne Verlinkung, was sowohl für die Benutzer als auch für Suchmaschinen von Vorteil ist. Denn Suchmaschinen verwenden interne Links, um die Struktur einer Website zu verstehen.

Keyword-Optimierung:

Durch die Verwendung von Keywords in den Breadcrumbs können Sie zusätzliche relevante Keywords für Ihre Seite hinzufügen. Dies führt dazu, dass die Seite für eine breitere Palette von Suchanfragen sichtbar wird.

Verbesserte Crawlability:

Breadcrumbs erleichtern Suchmaschinen das Crawlen einer Website. Die klare Struktur und Navigation durch Breadcrumbs helfen Suchmaschinen, den Inhalt einer Website besser zu verstehen und zu indexieren.

Reduzierung der Absprungrate:

Eine klare Navigation durch Breadcrumbs trägt dazu bei, die Absprungrate zu reduzieren, da Besucher leichter zu verwandten Inhalten auf einer Website gelangen können.

Rich Snippets und SERP-Präsentation:

Suchmaschinen können zudem Breadcrumbs in den Suchergebnissen als Teil der Rich Snippets anzeigen. Dies bietet den Suchenden zusätzliche Informationen über die Seitenhierarchie und den Kontext.

Wenn Sie Breadcrumbs auf Ihrer Website implementieren möchten, achten Sie darauf, dass sie klar und konsistent strukturiert sind. Hier sind einige bewährte Praktiken:

• Verwenden Sie verständliche und leicht nachvollziehbare Breadcrumb-Pfade.
• Halten Sie die Breadcrumbs konsistent auf Ihrer Website.
• Verwenden Sie “sprechende Links” (klarer Linktitel, der dem User sagt, was sich auf der Seite befindet), um die Hierarchie der Seiten korrekt widerzuspiegeln.
• Stelle sicher, dass die Breadcrumbs für mobile Benutzer gut lesbar und benutzerfreundlich sind.
• Denken Sie daran, dass die Implementierung von Breadcrumbs in einigen Content-Management-Systemen oder E-Commerce-Plattformen, wie WordPress oder Shopify, unterschiedlich sind. In der Regel bieten diese Plattformen jedoch Funktionen oder Plugins, mit denen Sie Breadcrumbs einfach hinzufügen können.

2| Breadcrumbs auf Website integrieren

2.1 Breadcrumbs mit WordPress hinzufügen 

Hier finden Sie sind einige Methoden, wie Sie Breadcrumbs in WordPress einfügen können:

2.1.1 Breadcrumbs mit Theme-Unterstützung:

Einige WordPress-Themes wie Astra bieten eine integrierte Unterstützung für Breadcrumbs. Überprüfen Sie daher unbedingt immer zunächst die Einstellungen Ihres Themes, um herauszufinden, ob diese Funktion bereits eingebaut ist, bevor Sie anderweitig versuchen Breadcrumbs auf Ihrer Website zu integrieren. Wenn die Breadcrumb-Option bereits im Theme vorhanden ist, müssen Sie meist nur die Einstellungen anpassen oder sie im Customizer aktivieren.

Überprüfen Sie hierzu Ihr Theme, indem Sie im Dashboard zu „Design“ > „Customizer“ gehen und nach einer Breadcrumb-Option suchen.

2.1.1.1 Breadcrumbs im Astra Theme hinzufügen:

Astra ist ein sehr praktisches WordPress-Theme, das die Möglichkeit bietet, Breadcrumbs auf einfache Weise hinzuzufügen. Mit folgenden Schritten aktivieren Sie die Breadcrumbs im Astra  Theme:

Überprüfen Sie die Theme-Optionen:

• Gehen Sie im WP Dashboard zu „Design“ > „Customizer“

• Navigieren Sie zu „Breadcrumb“.

Stellen sie nun im Drop-Down Menu den Bereich ein, wo die Breadcrumbs auf der Website erscheinen sollen:

Konfigurieren Sie Breadcrumbs (falls erforderlich):

• Nach der Aktivierung der Breadcrumbs finden Sie weitere Optionen zur Anpassung, wie z.B. das Trennzeichen zwischen den Breadcrumb-Elementen.

Speichern Sie die Änderungen:

• Klicken Sie auf „Veröffentlichen“ um die Änderungen zu speichern.

Nach diesen Schritten sollten die Breadcrumbs automatisch auf Ihrer Website erscheinen, ohne dass Sie zusätzliche Schritte unternehmen müssen. Astra ist ein sehr benutzerfreundliches Theme, in welchem die Breadcrumb-Funktion bereits in den Theme-Optionen integriert ist.

>> mehr zum Einbinden von Breadcrumbs mit dem Theme GeneratePress

2.1.2 Breadcrumb-Plugins:

• Es gibt verschiedene WordPress-Plugins, die die Implementierung von Breadcrumbs erleichtern. Einige der beliebten Plugins sind „Yoast SEO“, “RankMath” oder „Breadcrumb NavXT“. Sie können eines dieser Plugins installieren und aktivieren und in den Einstellungen des Plugins anpassen, wie die Breadcrumbs angezeigt werden sollen.

2.1.2.1 Breadcrumbs mit dem Plugin Breadcrumb NavXT

Plugin installieren und aktivieren:

• Gehen Sie zu Ihrem WordPress-Dashboard.
• Klicken Sie auf „Plugins“ und dann auf „Installieren“.
• Suchen Sie nach „Breadcrumb NavXT“.
• Klicken Sie auf „Installieren“ und anschließend auf „Aktivieren“.

Einstellungen konfigurieren:

Nach der Aktivierung des Plugins finden Sie im WordPress-Dashboard einen neuen Menüpunkt namens „Breadcrumb NavXT“. Klicken Sie darauf.

In den Einstellungen können Sie die Brotkrumen-Navigation nach Ihren Bedürfnissen konfigurieren. Passen Sie die Optionen an, um das Aussehen und das Verhalten der Brotkrumen anzupassen.

Breadcrumbs in Ihr Theme einfügen:

Wenn Ihr Theme Breadcrumb NavXT nicht automatisch unterstützt, müssen Sie den PHP-Code manuell hinzufügen. Gehen Sie dazu zu Ihrem Theme-Editor und öffnen die Datei, die für die Anzeige der Brotkrumen verantwortlich ist (normalerweise header.php, single.php oder page.php).

Fügen Sie nun den folgenden Code an der Stelle ein, an der Sie die Brotkrumen anzeigen möchten:

<?php if ( function_exists(‚breadcrumbs‘) ) { breadcrumbs(); } ?>

Anpassungen vornehmen (optional):

Wenn Sie das Aussehen der Brotkrumen weiter anpassen möchten, können Sie dies in den Einstellungen von Breadcrumb NavXT tun oder CSS verwenden, um das Styling anzupassen.

Speichern und überprüfen:

Speichern Sie Ihre Änderungen und laden Sie Ihre Website, um sicherzustellen, dass die Brotkrumen-Navigation ordnungsgemäß angezeigt wird.

​​2.1.2.2 Breadcrumbs mit Yoast SEO Plugin hinzufügen:

• Installation und Aktivierung:
  • Klicken Sie auf „Plugins“ und dann auf „Installieren“.
  • Installieren und aktivieren Sie das Yoast SEO Plugin über das WordPress Dashboard.

• Breadcrumbs aktivieren:
  • Gehen Sie zu „Yoast SEO” > “Einstellungen“ in Ihrem WordPress-Dashboard.

• Klicken Sie bei “Erweitert” nun auf den Tab „Breadcrumbs“.

• Aktivieren Sie die Breadcrumbs.

• 

• Anpassung der Breadcrumb-Einstellungen:
  • Passen Sie die Einstellungen nach Bedarf an. Sie können den Breadcrumb-Titel ändern, das Trennzeichen anpassen und die Breadcrumbs für verschiedene Seiten deaktivieren.

• Speichern der Änderungen:
  • Klicken Sie auf „Änderungen speichern“, um Ihre Einstellungen zu übernehmen.

• Variante 1: Breadcrumbs in Ihr Theme einfügen:
  • Überprüfen Sie, ob Ihr Theme Breadcrumbs unterstützt. Wenn nicht, öffnen Sie den Theme-Editor (Beschreibung oben), der für die Anzeige der Breadcrumbs verantwortlich ist (oft header.php oder single.php). Fügen Sie nun den folgenden Code an der Stelle ein, an der Sie die Breadcrumbs anzeigen möchten (Einzelbeitrag, wenn es bei einem Beitrag erscheinen soll oder Einzelseite wenn es auf einer Seite erscheinen soll – beides geht auch):

Dieser Code ruft die Breadcrumbs von Yoast SEO auf und gibt sie aus:

<?php

// Breadcrumb-Funktion von Yoast

if ( function_exists(‚yoast_breadcrumb‘) ) {

    yoast_breadcrumb(‚<p id=“breadcrumbs“>‘,'</p>‘);

}

?>

• Variante 2: Shortcode per Pagebuilder direkt auf den Seiten einfügen

Nutzen Sie hierzu Ihren Pagebuilder (z.B. Divi, Elementor, Gutenberg..). Gehen Sie bei der jeweiligen Seite auf „Bearbeiten“, fügen Sie das Modul „Code“ (bei Divi und Elementor) oder bei Gutenberg „Custom HTML“ an die Stelle hinzu, wo Sie die Breadcrumbs haben möchten und fügen folgenden Code ein (speichern nicht vergessen!):

2.1.2.3 Breadcrumbs mit Rank Math Plugin hinzufügen:

• Installation und Aktivierung:
  • Klicken Sie auf „Plugins“ und dann auf „Installieren“ und dann gleich auf “aktivieren”.

• 
  

• Breadcrumbs aktivieren:
  • Gehen Sie zu „Rank Math“ > „Dashboard“ in Ihrem   WordPress-Dashboard.

• Klicken Sie auf „Allgemeine Einstellungen“ und dann auf „Breadcrumbs“.

• Aktivieren Sie die Breadcrumbs.

• Anpassung der Breadcrumb-Einstellungen:
  • Passen Sie die Breadcrumb-Einstellungen nach Bedarf an, einschließlich des Trennzeichens und des Breadcrumb-Titels.
• Speichern der Änderungen:
  • Klicken Sie auf „Änderungen speichern“, um Ihre Einstellungen zu übernehmen.
• Breadcrumbs in Ihr Theme einfügen:
• Funktioniert genauso wie beim Yoast Plugin (siehe oben) mit dem oberen php-Code der über der Breadcrumb Aktivierung bei Rank Math steht (einfach kopieren) und im Theme Editor in den Code für Einzelbeitrag und/oder Einzelseite einfügen):

Breadcrumb manuell auf Unterseiten einfügen:

Falls Sie sich nicht an die PHP-Datei wagen oder keinen Zugang haben, gibt es noch eine weitere Variante. Hierzu nutzen Sie den unteren Short-Code: [rank_math_breadcrumb]

Diesen fügen Sie nun an der gewünschten Stelle (z.B. bei Divi mit dem <code> Modul) ein, speichern das Ganze und et voilá: die Breadcrumbs sind da.

Hinweis: Achten Sie darauf, dass Sie die Unterseiten zuvor immer einer übergeordneten Seite zuordnen. Dies können Sie einfach über den “Quick Edit” Modus unter Dashboard > Seiten einstellen:

Alle drei genannten Plugins bieten eine einfache Möglichkeit, Breadcrumbs hinzuzufügen, und ermöglichen die Anpassung der Einstellungen nach Ihren Anforderungen. Wählen Sie das Plugin, das am besten zu Ihren Bedürfnissen passt oder das Sie bereits installiert haben.

2.1.3 Manuelle Implementierung der Breadcrumbs in der functions.php-Datei (Theme Editor):

Sie können Breadcrumbs auch manuell in der functions.php-Datei Ihres Themes implementieren. Dies erfordert jedoch einige PHP-Kenntnisse. Beachten Sie jedoch, dass das Bearbeiten des Codes direkt im Theme-Editor riskant sein kann, da Fehler zu schwerwiegenden Problemen auf Ihrer Website führen können. Daher unsere Empfehlung, vor dem Bearbeiten der Datei eine Sicherungskopie zu erstellen. 

Für das Hinzufügen des Codes können Sie den folgenden Code als Ausgangspunkt verwenden und ihn an Ihre Bedürfnisse anpassen:

<?php // breadcrumb

function nav_breadcrumb() {

 $delimiter = ‚&raquo;‘;

 $home = ‚Home‘; 

 $before = ‚<span class=“current-page“>‘; 

 $after = ‚</span>‘; 

 if ( !is_home() && !is_front_page() || is_paged() ) {

 echo ‚<nav class=“breadcrumb“>Sie sind hier: ‚;

 global $post;

 $homeLink = get_bloginfo(‚url‘);

 echo ‚<a href=“‚ . $homeLink . ‚“>‘ . $home . ‚</a> ‚ . $delimiter . ‚ ‚;

 if ( is_category()) {

 global $wp_query;

 $cat_obj = $wp_query->get_queried_object();

 $thisCat = $cat_obj->term_id;

 $thisCat = get_category($thisCat);

 $parentCat = get_category($thisCat->parent);

 if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ‚ ‚ . $delimiter . ‚ ‚));

 echo $before . single_cat_title(“, false) . $after;

 } elseif ( is_day() ) {

 echo ‚<a href=“‚ . get_year_link(get_the_time(‚Y‘)) . ‚“>‘ . get_the_time(‚Y‘) . ‚</a> ‚ . $delimiter . ‚ ‚;

 echo ‚<a href=“‚ . get_month_link(get_the_time(‚Y‘),get_the_time(‚m‘)) . ‚“>‘ . get_the_time(‚F‘) . ‚</a> ‚ . $delimiter . ‚ ‚;

 echo $before . get_the_time(‚d‘) . $after;

 } elseif ( is_month() ) {

 echo ‚<a href=“‚ . get_year_link(get_the_time(‚Y‘)) . ‚“>‘ . get_the_time(‚Y‘) . ‚</a> ‚ . $delimiter . ‚ ‚;

 echo $before . get_the_time(‚F‘) . $after;

 } elseif ( is_year() ) {

 echo $before . get_the_time(‚Y‘) . $after;

 } elseif ( is_single() && !is_attachment() ) {

 if ( get_post_type() != ‚post‘ ) {

 $post_type = get_post_type_object(get_post_type());

 $slug = $post_type->rewrite;

 echo ‚<a href=“‚ . $homeLink . ‚/‘ . $slug[’slug‘] . ‚/“>‘ . $post_type->labels->singular_name . ‚</a> ‚ . $delimiter . ‚ ‚;

 echo $before . get_the_title() . $after;

 } else {

 $cat = get_the_category(); $cat = $cat[0];

 echo get_category_parents($cat, TRUE, ‚ ‚ . $delimiter . ‚ ‚);

 echo $before . get_the_title() . $after;

 }

 } elseif ( !is_single() && !is_page() && get_post_type() != ‚post‘ && !is_404() ) {

 $post_type = get_post_type_object(get_post_type());

 echo $before . $post_type->labels->singular_name . $after;

 } elseif ( is_attachment() ) {

 $parent = get_post($post->post_parent);

 $cat = get_the_category($parent->ID); $cat = $cat[0];

 echo get_category_parents($cat, TRUE, ‚ ‚ . $delimiter . ‚ ‚);

 echo ‚<a href=“‚ . get_permalink($parent) . ‚“>‘ . $parent->post_title . ‚</a> ‚ . $delimiter . ‚ ‚;

 echo $before . get_the_title() . $after;

 } elseif ( is_page() && !$post->post_parent ) {

 echo $before . get_the_title() . $after;

 } elseif ( is_page() && $post->post_parent ) {

 $parent_id = $post->post_parent;

 $breadcrumbs = array();

 while ($parent_id) {

 $page = get_page($parent_id);

 $breadcrumbs[] = ‚<a href=“‚ . get_permalink($page->ID) . ‚“>‘ . get_the_title($page->ID) . ‚</a>‘;

 $parent_id = $page->post_parent;

 }

 $breadcrumbs = array_reverse($breadcrumbs);

 foreach ($breadcrumbs as $crumb) echo $crumb . ‚ ‚ . $delimiter . ‚ ‚;

 echo $before . get_the_title() . $after;

 } elseif ( is_search() ) {

 echo $before . ‚Ergebnisse für Ihre Suche nach „‚ . get_search_query() . ‚“‚ . $after;

 } elseif ( is_tag() ) {

 echo $before . ‚Beiträge mit dem Schlagwort „‚ . single_tag_title(“, false) . ‚“‚ . $after;

 } elseif ( is_404() ) {

 echo $before . ‚Fehler 404‘ . $after;

 }

 if ( get_query_var(‚paged‘) ) {

 if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ‚ (‚;

 echo ‚: ‚ . __(‚Seite‘) . ‚ ‚ . get_query_var(‚paged‘);

 if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ‚)‘;

 }

 echo ‚</nav>‘;

 } 

} 

?>

Fügen Sie dann  <?php if (function_exists(’nav_breadcrumb‘)) nav_breadcrumb(); ?>  an der Stelle ein, an der Sie die Breadcrumbs auf Ihrer Website anzeigen möchten (z.B. Einzelbeitrag, Einzelseite, Header).

Dieser Code erstellt eine Funktion custom_breadcrumbs, die die Breadcrumbs generiert. Die add_action-Funktion wird verwendet, um diese Funktion im <head>-Bereich der Seite aufzurufen.

Klicken Sie auf „Datei aktualisieren“, um Ihre Änderungen zu speichern.

2.1.4 Breadcrumbs mit Page Builder Integration:

Wenn Sie einen Page Builder wie Elementor, Beaver Builder oder Divi verwenden, haben diese oft spezielle Module oder Widgets für Breadcrumbs. Überprüfen Sie hierzu die verfügbaren Module oder Widgets und fügen Sie diese entsprechend Ihren Anforderungen hinzu.

2.1.4.1 Breadcrumbs mit Elementor Pro hinzufügen:

Mit Elementor, einem beliebten Page Builder für WordPress, können Sie Breadcrumbs ganz einfach zu Ihren Seiten hinzufügen. Hier sind die Schritte:

Nutzen Sie Elementor Pro!

Die Breadcrumb-Widget-Funktionalität ist in der Pro-Version von Elementor verfügbar. Stellen Sie daher sicher, dass Sie den Elementor Pro installiert und aktiviert haben.

-> siehe auch: Installation von Elementor Pro

Fügen Sie das Breadcrumb-Widget hinzu:

• Bearbeiten Sie die Seite oder den Beitrag, zu der/dem Sie Breadcrumbs hinzufügen möchten, mit Elementor.
• Suchen Sie nach dem „Breadcrumb“ Widget in der linken Seitenleiste unter den „Pro“-Widgets.
• Ziehen Sie das Breadcrumb-Widget in den Abschnitt, in dem Sie die Breadcrumbs anzeigen möchtest.

• Konfiguriere das Breadcrumb-Widget:
  • Klicken Sie auf das Breadcrumb-Widget, um es zu konfigurieren.
  • Passen Sie die Einstellungen an, z. B. den Separator, das Breadcrumb-Label und das Format.

• Aktualisiere die Seite:
  • Klicken Sie auf „Aktualisieren“ oder „Veröffentlichen“, um die Änderungen zu speichern.
• Vorschau oder Veröffentlichung der Seite:
  • Sie können eine Vorschau Ihrer Seite anzeigen, um sicherzustellen, dass die Breadcrumbs wie gewünscht erscheinen.
  • Wenn alles korrekt aussieht, veröffentlichen Sie die Seite.

Elementor Pro ermöglicht es Ihnen, Breadcrumbs ohne die Notwendigkeit von zusätzlichen Shortcodes oder manuellen Code-Eingaben hinzuzufügen. Falls Ihr Theme keine integrierte Breadcrumb-Unterstützung bietet, bietet Elementor Pro eine einfache und benutzerfreundliche Lösung.

2.1.4.2 Breadcrumbs mit Gutenberg Editor hinzufügen:

In WordPress können Sie Breadcrumbs mit dem Gutenberg-Editor nicht direkt über das Standard-Texteditor-Feld hinzufügen, da Breadcrumbs normalerweise im HTML-Code oder durch spezielle Funktionen im Theme oder über Plugins generiert werden.

Hier zeigen wir Ihnen jedoch einige Schritte, die Sie unternehmen können, um Breadcrumbs in Gutenberg zu integrieren:

• Nutzen Sie HTML-Blöcke:
  • Wenn Sie Breadcrumbs manuell in HTML schreiben möchten oder bereits einen speziellen Code für Breadcrumbs haben, können Sie den „HTML“-Block in Gutenberg verwenden. Fügen Sie den HTML-Code in den HTML-Block ein, und aktualisieren Sie die Seite oder den Beitrag.
  • Folgenden Code können Sie dafür nutzen (und vorher individuell an die Navigations-Namen anpassen). Jedoch wird diese Breadcrumb-Navigation dann immer unter dem Beitragstitel des Beitrags zu sehen sein (nicht darüber, da man darüber keinen Block einfügen kann): 

<div id=“breadcrumbs“>

<a href=“/index.htm“>Startseite</a> 

&gt;

<a href=“/eben1.htm“>Ebene 1</a>

&gt;

<a href=“/eben1-3.htm“>Unterpunkt zu Ebene 1</a>

</div>

Es ist auch wichtig zu wissen, dass die Integration von Breadcrumbs in den Inhaltsbereich einer Seite oder eines Beitrags oft nicht notwendig ist, da Breadcrumbs normalerweise in Header- oder Footer-Bereichen einer Website platziert werden. Daher sollten Sie prüfen, ob Breadcrumbs bereits an den gewünschten Stellen Ihrer Website aktiviert sind.

2.1.4.3 Breadcrumbs mit dem Divi Builder hinzufügen:

Der Divi Builder ist ein populäres Page-Builder-Plugin für WordPress, das von Elegant Themes entwickelt wurde. Wenn Sie Breadcrumbs zu Ihrer Website mit dem Divi Builder hinzufügen möchten, können Sie dies normalerweise über die Einstellungen des Divi Builders tun. Hier sind die Schritte:

• Divi Builder aktivieren:

Stellen Sie sicher, dass das Divi Builder Plugin aktiviert ist. Dies können Sie unter „Plugins“-> “Installierte Plugins”  in Ihrem WordPress-Dashboard überprüfen.

• Theme-Einstellungen überprüfen:

Gehen Sie zu „Divi“ > „Theme-Optionen“ in Ihrem WordPress-Dashboard. 

Unter den Theme-Optionen sollten Sie eine Registerkarte namens „Integration“ finden. Klicken Sie darauf.

• Breadcrumbs aktivieren:

Suchen Sie nach einer Option oder Einstellung, die sich auf Breadcrumbs oder Brotkrumen bezieht. In einigen Versionen von Divi kann dies unter „Layout“ > „Breadcrumbs“ oder „Navigation“ zu finden sein.

• Einstellungen anpassen:

Passen Sie die Breadcrumb-Einstellungen nach Ihren Vorlieben an. Dies könnte die Art des Breadcrumb-Stils, den Separator oder andere Darstellungsoptionen umfassen.

• Speichern und überprüfen:

Speichern Sie die Änderungen und laden Sie Ihre Website neu, um sicherzugehen, dass die Breadcrumbs nun sichtbar sind.

Wenn Sie nach diesen Schritten keine spezifischen Breadcrumb-Optionen im Divi Builder finden, könnte es sein, dass Ihre Version des Divi Builders oder des Divi-Themes möglicherweise nicht über diese Funktion verfügt. In diesem Fall könnten Sie auf andere Methoden, wie die Verwendung von Plugins oder die manuelle Hinzufügung von PHP-Code, zurückgreifen.

2.1.5 Breadcrumbs mit Woocommerce hinzufügen

In WooCommerce, einer E-Commerce-Plattform für WordPress, sind Breadcrumbs normalerweise standardmäßig in die Produktseiten und Shop-Layouts integriert. WooCommerce verwendet die Standard-Breadcrumb-Navigation von WordPress, die den Pfad zu einer bestimmten Seite oder Produktseite anzeigt.

Um sicherzustellen, dass Breadcrumbs in WooCommerce korrekt angezeigt werden, gibt es die folgenden Schritte:

• WooCommerce-Einstellungen überprüfen:
  • Gehen Sie zu „WooCommerce“ > „Einstellungen“ in Ihrem WordPress-Dashboard.

• Klicken Sie auf den Tab „Produkte“ und dann auf „Anzeige“.

• Stellen Sie sicher, dass die Option „Breadcrumb-Navigation“ aktiviert ist.
• WooCommerce Breadcrumb-Hook (falls erforderlich):
  • WooCommerce bietet auch einen Hook namens woocommerce_before_main_content, den Sie nutzen können, um benutzerdefinierte Breadcrumbs hinzuzufügen. Hier ist ein einfaches Beispiel:

function custom_woocommerce_breadcrumbs() {

 if ( function_exists(‚woocommerce_breadcrumb‘) ) {

 woocommerce_breadcrumb();

 }

}

add_action(‚woocommerce_before_main_content‘, ‚custom_woocommerce_breadcrumbs‘);

• Fügen Sie diesen Code-Snippet in die functions.php Ihres Child-Themes ein.

2.1.6 Breadcrumbs mit Shortcode hinzufügen:

2.2 Breadcrumbs für Wix hinzufügen

Wix ist ein CMS, welches seine eigenen integrierten Funktionen und Tools für das Website-Management hat. 

Wix generiert normalerweise automatisch eine Breadcrumb-Navigation basierend auf der Struktur einer Website. Die Breadcrumbs werden in der Regel in der Kopfzeile (Header) der Website platziert und zeigen den Pfad der aktuellen Seite an.

Falls es die Breadcrumbs nicht automatisch anzeigt, können Sie diese folgendermaßen manuell einfügen:

• Aktivieren Sie zunächst den Dev-Modus auf Ihrer Website: Klicken Sie dafür oben recht im Editor auf “Website bearbeiten”.

• Klicken Sie nun auf der linken Seite des Editors auf Hinzufügen.

• Klicken Sie auf Text und fügen Sie das gewünschte Format hinzu.

• Schreiben Sie den Pfad, der zu der jeweiligen Unterseite führt hinein.
• Trennen Sie den Pfad mit einem gewünschten Trennzeichen und verlinken Sie diesen mit den jeweiligen Unterseiten.

• Vergessen Sie nicht, die Seite rechts oben zu veröffentlichen, um die Einstellungen zu speichern.

Wix hat im Vergleich zu WordPress weniger Anpassungsmöglichkeiten im Hinblick auf Plugins. Falls die automatisch generierten Breadcrumbs Ihren Anforderungen nicht entsprechen und Wix keine integrierten Anpassungsoptionen bereitstellt, können sich direkt an den Wix-Support wenden, um spezifische Hilfe zu erhalten.

2.3 Breadcrumbs für Shopify hinzufügen

In Shopify ist die Breadcrumb-Navigation normalerweise standardmäßig in das Theme integriert und wird automatisch generiert. Sie zeigt den Pfad der aktuellen Seite an und ermöglicht es Besuchern, leicht zu vorherigen Seiten zurückzukehren. Wir zeigen Ihnen die allgemeinen Schritte, mit denen Sie die Breadcrumbs manuell in Shopify integrieren können (Beachten Sie jedoch, dass dies fortgeschrittenere Kenntnisse im Umgang mit Liquid (Shopifys Vorlagen-Sprache) erfordert.):

• Theme-Einstellungen überprüfen:
  • Gehen Sie in Ihren Shopify-Admin-Bereich.
  • Klicken Sie bei “Vertriebskanäle” auf „Onlineshop“ und dann auf „Themes“.

• Klicken Sie nun auf „Anpassen“ neben dem aktiven Theme.

• Header-Einstellungen überprüfen:
  • Gehen Sie nun auf “Code bearbeiten”
  • Suchen Sie im Code die Snippets und fügen das Breadcrumb Snippet hinzu.

Dort fügen Sie rechts in das große weße Feld folgenden Code ein:

<nav class=“breadcrumb“ role=“navigation“ aria-label=“breadcrumbs“>

  <a href=“/“ title=“Home“>Home</a>

  {% if template contains ‚page‘ %}

    <span aria-hidden=“true“>&rsaquo;</span>

    <span>{{ page.title }}</span>

  {% elsif template contains ‚product‘ %}

    {% if collection.url %}

      <span aria-hidden=“true“>&rsaquo;</span>

      {{ collection.title | link_to: collection.url }}

    {% endif %}

    <span aria-hidden=“true“>&rsaquo;</span>

    <span>{{ product.title }}</span>

  {% elsif template contains ‚collection‘ and collection.handle %}

    <span aria-hidden=“true“>&rsaquo;</span>

    {% if current_tags %}

      {% capture url %}/collections/{{ collection.handle }}{% endcapture %}

      {{ collection.title | link_to: url }}

      <span aria-hidden=“true“>&rsaquo;</span>

      <span>{{ current_tags | join: “ + “ }}</span>

    {% else %}

      <span>{{ collection.title }}</span>

    {% endif %}

  {% elsif template == ‚blog‘ %}

    <span aria-hidden=“true“>&rsaquo;</span>

    {% if current_tags %}

      {{ blog.title | link_to: blog.url }}

      <span aria-hidden=“true“>&rsaquo;</span>

      <span>{{ current_tags | join: “ + “ }}</span>

    {% else %}

    <span>{{ blog.title }}</span>

    {% endif %}

  {% elsif template == ‚article‘ %}

    <span aria-hidden=“true“>&rsaquo;</span>

    {{ blog.title | link_to: blog.url }}

    <span aria-hidden=“true“>&rsaquo;</span>

    <span>{{ article.title }}</span>

  {% else %}

   <span aria-hidden=“true“>&rsaquo;</span>

   <span>{{ page_title }}</span>

  {% endif %}

</nav>

{% endunless %} 

• Nun fügen Sie unter die Header Section folgenden Shortcode hinzu, damit Shopify weiß, wo es die Breadcrumbs anzeigen soll:

 {% render ‚breadcrumbs‘ %} 

Einige Themes haben sogar eigene Bausteine, mit denen man die Breadcrumbs ganz ohne Codierung hinzufügen kann. Überprüfen Sie vorher dafür Ihr gewähltes Theme, welche Optionen dieses für die Einbindung von Breadcrumbs bietet. 

Fazit

Die oben genannten Schritte können je nach dem von dir verwendeten WooCommerce-Theme variieren. Wenn Sie spezifische Fragen zu Ihrem Theme haben, ist es ratsam, direkt den Support des Theme-Anbieters  zu kontaktieren.

Insgesamt bieten Breadcrumbs sowohl für die Nutzer als auch für Suchmaschinen viele Vorteile. Die Implementierung hängt von der Plattform Ihrer Website ab, aber in den meisten Content-Management-Systemen gibt es einfache Möglichkeiten, Breadcrumbs hinzuzufügen. Achten Sie immer darauf, dass sie klar, konsistent und benutzerfreundlich gestaltet sind und Sie bei php Zugriffen vorher eine Sicherheitskopie machen.

Unsere Empfehlung

Was WordPress betrifft, ist die Methode mit dem Yoast Plugin unser persönlicher Favorit, da es in den meisten Fällen funktioniert und eine userfreundliche Methode ist, um Breadcrumbs auf eine unkomplizierte Art und Weise auf der Website zu integrieren.

Aber auch die Rank Math Version ist sehr einfach zu handhaben, da Sie hier nicht in den php-Code rein müssen, sondern die Breadcrumbs über einen vor generierten Shortcode zu den jeweiligen Unterseiten manuell hinzufügen können.

Weitere Beiträge:

• SEO Sparring: 8 Vorteile für Ihre SEO-Strategie
• Lassen sich Inhalte zu 100% aus dem Internet entfernen?
• Breadcrumbs auf Website integrieren [Anleitung 2024]
• WordPress lernen: Die besten Möglichkeiten für Anfänger & Fortgeschrittene
• VG Wort Zählmarken bei mehreren Blog-Autoren mit Prosodia