So aktivieren Sie Breadcrumbs auf Ihrer Website mit Rank Math SEO

Semmelbrösel Machen Sie es den Besuchern einfach, auf Ihrer Website zu navigieren. Die Aktivierung von Breadcrumbs – insbesondere für E-Commerce-Shops – hat enorme Vorteile, wie z. B. eine gute Benutzererfahrung, eine geringere Absprungrate, ein einfacheres Crawlen der Website durch Suchmaschinen und letztendlich eine Verbesserung des Rankings.

Glücklicherweise macht das Rank Math SEO-Plugin das Hinzufügen extrem einfach Semmelbrösel Schema dass Suchmaschinen verlangen, dass Breadcrumbs in den Suchergebnissen angezeigt werden. Schauen wir uns nun an, wie man Breadcrumbs mit Rank Math aktiviert:

1 Breadcrumbs aktivieren

Der erste Schritt besteht darin, rüber zu gehen WordPress-Dashboard → Rank Math SEO. Once done, enable the Schema module, as shown below. This would allow Rank Math to add the Breadcrumb Schema for the breadcrumbs we’ll add in the rest of the tutorial.

Next, you should configure your breadcrumbs settings. To do that, head to Rank Math SEO → Allgemeine Einstellungen → Breadcrumbs. Wenn die Breadcrumbs-Einstellungen nicht verfügbar sind, stellen Sie sicher, dass dies der Fall ist in den erweiterten Modus gewechselt im Rank Math.

In den Breadcrumbs-Einstellungen ist derzeit nur eine Einstellung verfügbar, da die Breadcrumbs-Funktion deaktiviert ist.

Aber sobald Sie die Breadcrumbs-Funktion aktivieren, funktioniert alles andere die Einstellungen erscheint auf dem Bildschirm.

2 Bearbeitungsoptionen von Breadcrumbs

Auf dem Bild oben können Sie mehrere Bearbeitungsoptionen erkennen, die in den Breadcrumbs-Einstellungen verfügbar sind. Schauen wir uns nun jede Option einzeln an.

2.1 Trennzeichen

Mit dieser Option können Sie ein Trennzeichen für Ihre Breadcrumb-Elemente festlegen. Sie können eines der verschiedenen in dieser Liste verfügbaren Zeichen auswählen oder im letzten Feld Ihr eigenes Trennzeichen eingeben.

2.2 Homepage-Link anzeigen

Sie können diese Option aktivieren, wenn Sie möchten, dass Ihre Homepage in die Breadcrumbs aufgenommen wird. Wenn Sie diese Option aktivieren, stehen Ihnen zwei neue Optionen zur Verfügung: „Homepage-Label' Und 'Homepage-Link' erscheint auf Ihrem Bildschirm.

2.3 Homepage-Label

Mit dieser Option können Sie ein Label für die Startseite Ihrer Website festlegen. Standardmäßig ist die Bezeichnung auf eingestellt Zuhause, aber Sie können Ihre eigene Bezeichnung eingeben, die relevanter wäre, um die Homepage Ihrer Website zu kennzeichnen.

If the homepage label is set to Home, the breadcrumb will appear as:

Startseite / Wissensdatenbank / SEO Suite / So aktivieren Sie Breadcrumbs auf Ihrer Website mit Rank Math SEO

2.4 Homepage-Link

Mit dieser Option können Sie konfigurieren, wohin der Homepage-Link den Besucher führt. Diese Option ist nützlich, wenn Ihre Website über mehrere Abschnitte wie Blog, Shop usw. verfügt und Sie den Link eingeben können, wohin Sie Ihren Besucher weiterleiten möchten.

2.5 Präfix Breadcrumb

Mithilfe von können Sie Ihrem Breadcrumb-Pfad ein Präfix hinzufügen Präfix Breadcrumb Möglichkeit. Zu den beliebten Präfixen für Breadcrumbs gehören „Sie befinden sich hier“, „Navigation“, „Index“ usw

Wenn wir beispielsweise das Präfix Breadcrumb als „Sie sind hier:“ hinzufügen, würden unsere Breadcrumbs wie folgt aussehen:

Sie sind hier: Startseite / Wissensdatenbank / SEO Suite / So aktivieren Sie Breadcrumbs auf Ihrer Website mit Rank Math SEO

2.6 Archivformat

Mit dieser Option können Sie ein Breadcrumb-Format für die Archivseiten festlegen. %s stellt die Taxonomie dar und wir empfehlen, sie nicht zu entfernen.

2.7 Suchergebnisformat

Mit dieser Option können Sie ein Breadcrumb-Format für Suchergebnisseiten festlegen. %s stellt die Suchanfrage dar und wir empfehlen Ihnen, sie nicht zu entfernen. Einige beliebte Formate sind „Sie haben gesucht“, „Hier ist, wonach ich gefunden habe“ usw.

2.8 404-Etikett

Mit dieser Option können Sie ein Breadcrumb-Label für Ihre 404-Seiten festlegen.

2.9 Beitragstitel ausblenden

Sie können diese Option aktivieren, wenn Sie nicht möchten, dass der Titel des aktuellen Beitrags im Breadcrumb enthalten ist. Normalerweise wird der Titel der Seite, die Sie gerade ansehen, als letztes Element in den Breadcrumb eingefügt. Wenn Sie diese Option aktivieren, enthält der Breadcrumb nicht den Titel des Beitrags.

Wenn die Option „Beitragstitel ausblenden“ aktiviert ist, wird unser Breadcrumb wie folgt angezeigt:

Startseite / Wissensdatenbank / SEO Suite

Wenn Sie den Beitragstitel im Breadcrumb anzeigen möchten, der Beitragstitel jedoch länger aussieht, können Sie dies tun Ändern Sie die Semmelbrösel-Beschriftung allein, ohne Änderungen am Titel des Beitrags vorzunehmen.

Stellen Sie dazu sicher, dass die Option „Beitragstitel ausblenden“ deaktiviert ist. Öffnen Sie dann den Beitrag mit dem längeren Titel und navigieren Sie zu Rank Math Meta Box → Registerkarte „Erweitert“ → Breadcrumb-Titel, und hier können Sie einen kürzeren Titel für Ihren Beitrag angeben, der nur im Breadcrumb angezeigt wird.

2.10 Kategorie anzeigen

Kategorie(n) anzeigen zeigt die Kategorien Ihres Beitrags im Breadcrumb an. Wir empfehlen, diese Option deaktiviert zu lassen, damit Ihr Breadcrumb klein und präzise aussieht. Wenn die Option „Kategorie(n) anzeigen“ aktiviert ist deaktiviert, unsere Semmelbrösel werden wie folgt aussehen:

Startseite / Wissensdatenbank / So aktivieren Sie Breadcrumbs auf Ihrer Website mit Rank Math SEO

Kategorie anzeigen ist aktiviert

Wenn Ihre Kategorien jedoch wichtige Navigationselemente auf Ihrer Website sind, sollte die Aktivierung dieser Option vorgezogen werden.

Wenn die Option „Kategorie(n) anzeigen“ aktiviert ist aktiviert, wird die Kategorie direkt vor dem Namen des Beitrags eingefügt. Die primäre Kategorie wird hier verwendet, wenn Ihr Beitrag mehrere Kategorien enthält. Falls Sie die Hauptkategorie für Ihren Beitrag ändern möchten, Hier ist ein spezielles Tutorial. Der Brotkrümel würde nun wie folgt aussehen:

Startseite / Wissensdatenbank / SEO Suite / So aktivieren Sie Breadcrumbs auf Ihrer Website mit Rank Math SEO

Jetzt ist die Option „Kategorie(n) anzeigen“ verfügbar aktiviert, und wir haben eine Kategorie als primäre Kategorie ausgewählt (z. B. „Technical SEO“), diese enthält jedoch eine übergeordnete Kategorie (z. B. „SEO Suite“). Dann wird der Breadcrumb wie folgt angezeigt:

Startseite / Wissensdatenbank / SEO Suite / Technische SEO / So aktivieren Sie Breadcrumbs auf Ihrer Website mit Rank Math SEO

Anpassung der Breadcrumb-Kategorie

Änderung der primären Taxonomie: Wenn Sie die für die Breadcrumbs verwendete Taxonomie ändern möchten, können Sie Folgendes festlegen Primäre Taxonomie Geben Sie für Ihren Beitrag unten Folgendes ein WordPress-Dashboard → Rank Math SEO → Titel & Meta → Beiträge.

Ändern der Breadcrumb-Beschriftung für Kategorien: Um die Beschriftung einer Ihrer in den Breadcrumbs angezeigten Kategorien zu ändern, können Sie die Kategorieseite öffnen und in der Meta-Box des Rank Math zu navigieren Fortschrittlich Klicken Sie auf die Registerkarte und geben Sie die Bezeichnung ein Breadcrumb-Titel Feld.

2.11 Taxonomienamen ausblenden

Wenn Sie diese Option aktivieren, entfernt Rank Math den Taxonomienamen aus den Breadcrumbs der Archivseiten. Die empfohlene Einstellung ist „Aus“.

Zum Beispiel, wenn die Option „Taxonomienamen ausblenden“ aktiviert ist deaktiviert, Die Archivseite eines Begriffs (z. B. „Schema-Markup“), der mit einer benutzerdefinierten Taxonomie (z. B. „Benutzerdefinierte Kategorien“) verknüpft ist, hätte einen Breadcrumb wie folgt:

Startseite / Benutzerdefinierte Kategorien / Schema-Markup /

Wenn du ermöglichen Wenn Sie die Option „Taxonomienamen ausblenden“ aktivieren, wird der Taxonomiename nun ausgeblendet und die Archivseite des Begriffs enthält einen Breadcrumb wie folgt:

Startseite / Schema-Markup /

2.12 Blog-Seite anzeigen

Wenn Sie diese Option aktivieren, wird Ihre Blogseite neben der Startseite in den Breadcrumb eingefügt. Rank Math würde den Titel Ihrer Blog-Seite in den Breadcrumb neben der Startseite einfügen (sofern Sie Breadcrumbs für die Anzeige der Homepage konfiguriert haben).

Rank Math zeigt die Blog-Seite in den Breadcrumbs nur in Ihren Beiträgen an und nicht in Seiten oder anderen benutzerdefinierten Beitragstypen.

Zum Beispiel, wenn die Option „Blogseite anzeigen“ aktiviert ist aktiviert, Die Breadcrumb für unseren Blogbeitrag würde wie folgt aussehen:

Startseite / Blog / Kanonische URLs verstehen: Der endgültige Leitfaden

Notiz: Die Option „Blogseite anzeigen“ ist in Ihren Breadcrumbs-Einstellungen nur dann sichtbar, wenn Sie eine festgelegt haben Seite „Beiträge“. unter WordPress-Dashboard → Einstellungen → Lesen → Ihre Homepage wird angezeigt.

3 Breadcrumbs zur Website hinzufügen

Nachdem Sie nun die Breadcrumbs-Einstellungen konfiguriert haben, müssen Sie den Breadcrumbs-Code zu Ihrer Website hinzufügen, damit er im Frontend angezeigt wird. Es gibt verschiedene Möglichkeiten, Breadcrumbs zu Ihrer Website hinzuzufügen. Wir werden sie uns einzeln ansehen.

Notiz: Stellen Sie vor dem Hinzufügen von Breadcrumbs zu Ihrer Website sicher, dass Rank Math das einzige Plugin ist, das die Breadcrumbs hinzufügt. Wenn Ihr Theme oder ein anderes auf Ihrer Website installiertes Plugin bereits Breadcrumbs hinzufügt, müssen Sie möglicherweise zuerst die Breadcrumbs deaktivieren/entfernen, um Konflikte zu vermeiden.

3.1 Hinzufügen von Breadcrumbs zu Theme-Vorlagendateien

Sie können den Breadcrumbs-Code von Rank Math zu den Vorlagendateien Ihres Themes hinzufügen und die Breadcrumbs werden entsprechend im Frontend Ihrer Website angezeigt. Das direkte Bearbeiten der Theme-Dateien kann für Anfänger schwierig sein und bei unsachgemäßer Handhabung negative Auswirkungen haben. Daher empfehlen wir immer Verwendung eines Child-Themes.

Um Ihr untergeordnetes Thema zu bearbeiten, navigieren Sie zu WordPress-Dashboard → Erscheinungsbild → Theme-Datei-Editor (für ein klassisches Thema) oder WordPress-Dashboard → Tools → Theme-Datei-Editor (für ein Blockthema).

Auf der rechten Seite sehen Sie die Theme-Dateien. Wählen Sie Ihre Child-Theme-Vorlage wie unten gezeigt aus.

Als Nächstes sollten Sie den folgenden Code an der entsprechenden Stelle in der Vorlagendatei Ihres Themes hinzufügen, um die Breadcrumbs anzuzeigen.

/** * Verwenden Sie den folgenden Code in Ihren Theme-Vorlagendateien, um Breadcrumbs anzuzeigen: */

Notiz: Je nachdem, welches Theme Sie verwenden, variiert die Theme-Datei, in der Sie die Breadcrumbs-Funktion hinzufügen sollten. In den meisten Themes wäre es entweder die Datei single.php oder die Datei header.php. Falls Sie es jedoch nicht herausfinden können, können Sie sich an Ihren Theme-Entwickler wenden oder sich an ihn wenden Das Support-Team von Rank Math direkt von hier aus und wir stehen Ihnen rund um die Uhr zur Verfügung, um Ihnen zu helfen.

Nachdem Sie die Änderungen vorgenommen haben, klicken Sie auf die Schaltfläche „Datei aktualisieren“, um Ihre Änderungen zu speichern. Wenn Sie darüber hinaus ein sofort einsatzbereites Theme verwenden möchten, das mit der Breadcrumbs-Funktion von Rank Math kompatibel ist, können Sie sich an unser wenden Kompatibilitätsseite hier.

3.2 Breadcrumbs mit Shortcode hinzufügen

Sie können den Breadcrumb auch mithilfe eines Shortcodes an einer beliebigen Stelle hinzufügen. Kopieren Sie einfach diesen Shortcode und fügen Sie ihn in den Texteditor eines beliebigen Beitrags/einer beliebigen Seite ein. Anschließend ruft Rank Math den Breadcrumb für diesen bestimmten Beitrag/diese bestimmte Seite ab.

[rank_math_breadcrumb]

You can refer to this guide for adding shortcodes to your site. 

3.3 Native Theme-Unterstützung

Theme-Autoren können sicherstellen, dass ihre Themes native Unterstützung für die Breadcrumbs-Funktion von Rank Math bieten. Um die Theme-Unterstützung zu registrieren, sollten Theme-Autoren den folgenden Code in die Datei „functions.php“ ihres Themes einfügen oder ihn an den Hook anhängen 'after_setup_theme'.

/** * Theme-Unterstützung für Rank Math-Breadcrumbs registrieren */ add_theme_support( 'rank-math-breadcrumbs' );

Sobald die Theme-Unterstützung für unsere Breadcrumbs-Funktion registriert ist, fügen Sie den folgenden Code an einer gewünschten Stelle in das Theme ein, um die Breadcrumbs im Frontend anzuzeigen.

/** * Verwenden Sie den folgenden Code in Ihren Theme-Vorlagendateien, um Breadcrumbs anzuzeigen: */

Wenn ein Theme über native Unterstützung für unsere Breadcrumbs-Funktion verfügt, müssen Endbenutzer keine Änderungen an den Dateien ihres Themes vornehmen, damit die Breadcrumbs im Frontend angezeigt werden, da das Theme den Code bereits enthält. Dies bedeutet auch, dass Benutzer die Breadcrumbs-Funktion unten nicht deaktivieren können WordPress-Dashboard → Rank Math SEO → Allgemeine Einstellungen → Breadcrumbs.

Lediglich die Option zum Aktivieren/Deaktivieren der Breadcrumbs-Funktion steht den Benutzern nicht zur Verfügung, sie können jedoch weiterhin alle anderen Bearbeitungsmöglichkeiten nutzen, die Rank Math für Breadcrumbs bietet.

Der einfachste Weg herauszufinden, ob ein Theme Unterstützung für Rank Math Breadcrumbs bietet, ist, rüber zu gehen Rank Math SEO → Status und Tools → Systeminformationen → Aktives Thema. Hier im Themenfunktionen, können Sie überprüfen, ob Rang-Mathe-Brotkrumen ist aufgelistet.

3.4 Semmelbrösel hinzufügen mit Elementor PROFI

Wenn Sie den Elementor-Seitenersteller verwenden, können Sie das Breadcrumbs-Widget von Rank Math ganz einfach in jede Seite oder Vorlage einbinden.

To use breadcrumbs with Elementor, open any page with Elementor page builder, and under the Elements tab, search for the Breadcrumbs widget.

Notiz: The Rank Math breadcrumbs widget is available only when Elementor Pro and Rank Math PRO are installed.

Next, click on the breadcrumbs widget. The breadcrumbs will be added to your editing screen. The breadcrumbs settings will also be visible on the left side of the screen, as shown below.

Notiz: Rank Math Free users can still use Breadcrumbs in Elementor using this shortcode. Simply add this shortcode in the editing screen of the page builder, and now you can take advantage of the same styling and customizations that Elementor offers for the Breadcrumbs widget.

Styling-Optionen

The breadcrumbs widget has some styling options that allow you to change the typography, text color, and link color of your breadcrumbs. You can access the styling options by clicking Stil, Wie nachfolgend dargestellt.

This is what the style option looks like once you’ve clicked on it.

Now, let us go through the available styling options one by one.

Typography Options

When you click the edit icon next to the Typography option, the complete set of styling options related to Typography will be available for you to edit.

The different styling options available under Typography are:

• Familie: There are various font families available to choose one from
• Größe: To change the size of the font in the breadcrumb
• Gewicht: You can use this option to change the font weight in the breadcrumb, which will make the font look bolder
• Transform: The transform option lets you change the text to uppercase, lowercase, or capital letters, or keep it normal
• Style: You can choose from the different style options available, like italic, oblique or keep the style as normal
• Dekoration: You can choose between underline, overline, line-through, or leave it none to decorate your text
• Zeilenhöhe: This option helps to increase or decrease the line-height
• Buchstaben-Abstand: The letter spacing option lets you change the spacing between two letters
• Word Spacing: The word spacing option lets you change the spacing between the words

Text Color Option

Die Text Color option allows you to select the color of your text.  You will click the color picker icon to choose your desired text color, as shown below. 

Link Color Option

Die Link Color option enables you to set the color of your links. It has two options: Normal und Hover.

• Normal allows you to change the color of the link as it appears on the post or page
• Hover, on the other hand, will enable you to change the color of the link when a visitor hovers over it 

Select one of Normal or Hover. Once done, click the color picker icon to select your desired link color.

After you’re done styling the page, click the Veröffentlichen oder Aktualisieren button to save the changes. Following the same method as adding the Breadcrumbs widget to any post/page with the Elementor page builder, you can also add breadcrumbs to Elementor templates to use it on all your pages.

3.5 Adding Breadcrumbs in Block Themes

In case you’re using a Block Theme like Twenty Twenty-Four, you can add Rank Math’s Breadcrumbs to any page with the following steps.

Beginnen Sie mit der Überschrift zu WP Admin Dashboard → Appearance → Editor:

Next, click Templates.

You will be presented with the available templates. Select the template of the post or page you’re looking to add the breadcrumbs to.

After selecting a template, say, for example, Single Post, hover over a location on the editing screen and click the Add pattern icon +. Once done, search for Kurzwahl and click the shortcode block, as shown below:

Now add the following shortcode right inside the block and click the Speichern button on the top right corner of the Editor.

[rank_math_breadcrumb] 

And, that’s it. Now you should see Rank Math’s Breadcrumbs on all the pages that use this template. Similarly, you can also use this shortcode on your other templates and display the breadcrumbs at your preferred location.

4 Wie deaktiviere ich WooCommerce-Breadcrumbs?

By default, WooCommerce adds Breadcrumbs to the product pages and archives. However, it does not add Breadcrumb Schema out of the box.

Fortunately for WooCommerce users, Rank Math is here to save your day. If you want to add Breadcrumb Schema in WooCommerce without losing the benefits of customization options that Rank Math offers for Breadcrumbs, then you will have to disable the default breadcrumbs feature from the Theme-Datei-Editor. For that, you should add the below-mentioned code to your theme files:

/**
 * Function to disable WooCommerce breadcrumbs
 */
function remove_wc_breadcrumbs() {
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}
add_action( 'init', 'remove_wc_breadcrumbs' );

Now you have successfully updated the code. You can try using one of Rank Math’s methods to add breadcrumbs to see the effect.

And that’s it! If you still have questions about using our Breadcrumbs feature, feel free to reach our support forum — we’re always here to help.