WordPress-Breadcrumbs: So zeigst du sie auf deiner Website an

Hast du schon mal auf einer Website nach einem Produkt gesucht und wolltest dir dann andere Produkte aus derselben Kategorie ansehen? Die schnellste Möglichkeit, das zu tun, ist oft ein Klick auf die nächsthöhere Ebene in der sogenannten Breadcrumb-Navigation (oder Brotkrümelnavigation).

Stell dir vor, du suchst nach einem Rasensprenger. Vielleicht möchtest du dir mehr Produkte in der Kategorie „Sprinkler“ ansehen oder sogar zur übergeordneten Kategorie „Bewässerung & Schlauchsysteme“ wechseln. Breadcrumbs machen genau das möglich – sie zeigen dir den Weg durch die Hierarchie einer Website.

Egal, ob du aktiv bloggst oder einen Onlineshop betreibst: Du organisierst deine Inhalte oder Produkte wahrscheinlich in Kategorien und Unterkategorien. Doch zu viele Bereiche auf deiner Website können Benutzer schnell verwirren. Hier kommen Breadcrumbs ins Spiel.

Breadcrumbs zeigen einen Pfad von Links an, mit dessen Hilfe sich deine Benutzer besser zurechtfinden können. So können sie leicht zu vorherigen Seiten zurückkehren oder den Überblick behalten, wo sie sich gerade befinden.

In diesem Beitrag erfährst du mehr über die Breadcrumb-Navigation und wie diese Funktion das Benutzererlebnis (UX) und deine Suchmaschinenoptimierung (SEO) verbessern kann. Anschließend zeigen wir dir ein paar Methoden, wie du diese Links zu deiner Website hinzufügen kannst. Also legen wir gleich los!

Möchtest du mehr Tipps? Erhalte Benachrichtigungen zu neuen Beiträgen per E-Mail.

In diesem Artikel:

Die Breadcrumb-Navigation ist ein Designelement, das die Hierarchie einer Gruppe von Seiten auf einer Website anzeigt. Diese Funktion kann nützlich für Websites sein, die Inhalte zu verschiedenen Themen veröffentlichen, wie zum Beispiel Bildungsblogs, sowie für Onlineshops, die eine Vielzahl von Produkten führen:

Es ist wichtig zu beachten, dass die Breadcrumb-Navigation einen etwas anderen Zweck erfüllt als das Hauptnavigationsmenü.

Die Breadcrumb-Navigation ist ein Pfad mit Links, der Besuchern zeigt, wo auf einer Website sie sich gerade befinden, und ihnen hilft, ihre Schritte einfach zurückzuverfolgen. Daher auch der Name „Breadcrumb-Navigation“, auf Deutsch „Brotkrümelnavigation“ – wie die Spur aus Brotkrumen im Märchen „Hänsel und Gretel“.

Wenn Benutzer einen Beitrag auf deinem Blog fertiggelesen haben, können sie ganz einfach zur vorherigen Seite zurückkehren – also zu der Seite, die sie zu diesem Artikel geführt hat. Dafür klicken sie einfach auf den entsprechenden Breadcrumb-Link. Das erspart ihnen das Durchsuchen des Hauptmenüs oder das Grübeln, wie sie zu diesem Beitrag gekommen sind.

Auf einer Reise-Website könnte die Breadcrumb-Navigation zum Beispiel so aussehen:

USA > New York > Aktivitäten > Kostenlose Attraktionen

Wenn Leser sich alle kostenlosen Attraktionen angesehen haben, möchten sie vielleicht zur Seite „Aktivitäten“ zurückkehren, um andere Arten von Aktivitäten zu entdecken. Wenn sie eine neue Seite besuchen, könnte das Breadcrumb-Menü dann so aussehen:

USA > New York > Aktivitäten > Outdoor-Aktivitäten

Wie du siehst, sorgt die Breadcrumb-Navigation für ein besseres Benutzererlebnis, indem sie es sehr einfach macht, sich auf einer Website zurechtzufinden.

Außerdem kann dir diese Funktion helfen, deine SEO zu verbessern. Suchmaschinen wie Google zeigen deine Breadcrumb-Links in den Ergebnissen an:

Die Breadcrumbs können deine Sichtbarkeit auf Suchergebnis-Seiten (SERPs) erhöhen und so mehr Klicks auf deine Website bringen. Damit das funktioniert, ist es wichtig, dass die Breadcrumb-Navigation korrekt eingerichtet ist.

Nachdem wir jetzt über die Bedeutung von Breadcrumb-Navigationslinks auf deiner WordPress-Website gesprochen haben, wollen wir uns ansehen, wie du sie in deine Inhalte einbinden kannst.

Eine der einfachsten Möglichkeiten, eine Breadcrumb-Navigation zu deiner Website hinzuzufügen, ist die Verwendung eines kostenlosen Plugins. Hinweis: Wenn du WordPress.com verwendest, brauchst du einen Plugin-fähigen Tarif, um die in diesem Tutorial erwähnten Plugins nutzen zu können.

Sehen wir uns jetzt zwei beliebte Plugin-Optionen an: All in One SEO und Breadcrumb NavXT.

Breadcrumbs mit All in One SEO hinzufügen

All in One SEO (AIOSEO) ist eines der leistungsstärksten SEO-Plugins auf dem WordPress-Markt:

Dieses Plugin ist vollgepackt mit Funktionen, um das Ranking deiner Website in Suchmaschinen zu verbessern. Es beinhaltet Schema-Markup – das sind Daten, die du deiner Website hinzufügen kannst, damit Suchmaschinen deine Seiten auf informativere Weise anzeigen können. Zum Beispiel ermöglicht es dir, Rich Snippets und Breadcrumb-Sitelinks zu aktivieren.

Gehe zuerst in deinem WordPress.com-Dashboard zu Plugins > Neues Plugin hinzufügen und suche nach All in One SEO. Klicke dann auf Jetzt installieren und anschließend auf Aktivieren:

Dadurch gelangst du zum Einrichtungsassistenten des Plugins. Klicke auf Lass uns anfangen →:

Zuerst wirst du aufgefordert, eine Kategorie auszuwählen, die deine Website am besten beschreibt:

Hier kannst du festlegen, wie deine Startseite in den SERPs aussehen soll. Zum Beispiel solltest du sicherstellen, dass dein Website-Titel und dein Untertitel sichtbar sind:

Wenn du bereit bist, klicke auf Speichern und fortfahren. Auf der nächsten Seite musst du Details zu deiner Website und Links zu deinen Social-Media-Seiten angeben. Du kannst diesen Schritt überspringen und diese Informationen später ausfüllen, wenn du möchtest.

Du musst auch die SEO-Funktionen auswählen, die du zu deiner Website hinzufügen möchtest:

Sobald du die Einrichtung abgeschlossen hast, gehe zurück zu deinem WordPress.com-Dashboard und navigiere zu All in One SEO > Haupteinstellungen.

Dann wähle Breadcrumbs aus dem Menü:

Standardmäßig fügt AIOSEO Breadcrumbs zum Schema-Markup deiner Website hinzu. Es bietet dir auch vier Möglichkeiten, Breadcrumb-Navigationspfade auf deiner Website anzuzeigen.

Falls du die Option Shortcode auswählst, füge den folgenden Code an der Stelle ein, wo die Breadcrumbs angezeigt werden sollen:

[aioseo_breadcrumbs]

Wenn du den Block-Editor verwendest, kannst du einfach den Block Shortcode zu deinem Beitrag hinzufügen und den Code dort einfügen.

Alternativ kannst du deine Breadcrumb-Navigation mit dem eigenen Gutenberg-Block anzeigen. Füge dazu einfach den Block AIOSEO – Breadcrumbs in deinen Beitrag ein.

Mit den oben gezeigten Methoden kannst du Breadcrumb-Links zu einzelnen Seiten oder Beiträgen hinzufügen. Wenn du Breadcrumbs automatisch auf allen Seiten deiner Website hinzufügen möchtest, kannst du die Breadcrumb-Navigation auch mit dem Website-Editor in die Sidebar einfügen – entweder mithilfe des Shortcodes oder des Gutenberg-Blocks.

Du kannst Breadcrumbs auch über benutzerdefinierten Code hinzufügen, indem du deine WordPress-Theme-Dateien bearbeitest. Diese Methode ist jedoch etwas anspruchsvoller. Daher empfehlen wir, die einfacheren Optionen mit Shortcodes oder dem Gutenberg-Block zu nutzen.

Das AIOSEO-Plugin erlaubt dir auch, das Aussehen deiner Breadcrumbs in den Suchergebnissen anzupassen. Du kannst zum Beispiel den Trennzeichen-Stil ändern oder die Bezeichnung (das Label) für die Startseite individuell anpassen.

Breadcrumb-Einstellungen

Zusätzlich kannst du die Bezeichnungen für Archivseiten, Suchergebnisse und 404-Fehlerseiten bearbeiten.

Wenn alles fertig ist, klicke auf den Button Änderungen speichern – und das war’s. Deine Breadcrumb-Navigation ist jetzt eingerichtet!

Breadcrumbs mit Breadcrumb NavXT hinzufügen

AIOSEO ist ein leistungsstarkes Tool, aber vielleicht verwendest du bereits ein anderes SEO-Plugin auf deiner Website. In diesem Fall kannst du nachsehen, ob dein SEO-Plugin eine Breadcrumb-Option hat. Wenn nicht, kannst du ein auf spezielles Plugin für die Breadcrumb-Navigation verwenden.

Ein solches Tool ist Breadcrumb NavXT. Dieses Plugin generiert Breadcrumb-Pfade für deine Website und bietet dir zahlreiche Möglichkeiten, diese ganz nach deinen Anforderungen und Vorstellungen anzupassen.

Installiere und aktiviere das Plugin und gehe anschließend zu Einstellungen > Breadcrumb NavXT in deinem WordPress-Dashboard. Hier kannst du die Einstellungen für verschiedene Breadcrumb-Pfade auf deiner Website konfigurieren. Du kannst zum Beispiel das Trennzeichen zwischen den Breadcrumb-Links ändern oder bestimmte Seiten wie die Startseite oder das Blog aus dem Breadcrumb-Pfad entfernen.

Im Tab Inhaltstypen kannst du anpassen, wie deine Blogbeiträge in der Breadcrumb-Navigation angezeigt werden.

Du kannst zum Beispiel auswählen, welche Elemente in der Hierarchie deiner Beiträge sichtbar sein sollen, zum Beispiel Schlagwörter oder Kategorien. Außerdem hast du die Möglichkeit, die Breadcrumb-Pfade für deine Medien und Projekte individuell anzupassen.

Zusätzlich kannst du das Erscheinungsbild der Breadcrumbs für Blog-Kategorien und Schlagwörter im Tab Taxonomien bearbeiten.

Wenn du weitere Arten von Breadcrumbs anpassen möchtest, z. B. Autoren-Archive, Datumsseiten oder 404-Fehlerseiten, findest du diese Einstellungen im Bereich Sonstiges.

Wie du siehst, ist Breadcrumb NavXT ein äußerst benutzerfreundliches Tool. Es erlaubt dir, Breadcrumb-Pfade für verschiedene Inhalte deiner Website anzuzeigen und ganz nach deinen Bedürfnissen anzupassen.

Fazit

WordPress-Breadcrumbs ermöglichen es deinen Besuchern, ihre Bewegungen auf deiner Website nachzuverfolgen. Sie können ihre Schritte einfach zurückverfolgen und bequem zu vorherigen Seiten zurückkehren, indem sie auf die Links in der Breadcrumb-Navigation klicken. Diese Funktion verbessert nicht nur das Benutzererlebnis auf deiner Website, sondern erhöht auch deine Sichtbarkeit in den Suchergebnissen von Suchmaschinen.

Mit Plugins wie AIOSEO oder Breadcrumb NavXT stehen dir zwei leistungsstarke und flexible Lösungen zur Verfügung, um Breadcrumbs unkompliziert zu integrieren und individuell anzupassen. Wähle das Plugin, das am besten zu deinen Anforderungen passt, und optimiere die Navigation und Struktur deiner Website für ein optimales Nutzererlebnis!