Suchen Sie nach einer einfachen Möglichkeit, Ihrer Website eine Brotkrümelnavigation hinzuzufügen?
Es gibt SEO- und Benutzer-Vorteile durch das Hinzufügen einer Brotkrümelnavigation.
In diesem Tutorial lernen Sie, wie Sie eine Brotkrümelnavigation hinzufügen und einige Optionen zur Anpassung Ihrer Brotkrümelpfade.
In diesem Artikel
Was ist Brotkrümelnavigation?
Brotkrümel sind winzige Links, die den Benutzern den Weg zur aktuellen Seite anzeigen, auf der sie sich befinden.
Diese Links werden auch als Brotkrümelpfad bezeichnet.
Der Begriff stammt aus dem Märchen von Hänsel und Gretel. Hänsel hinterlässt eine Spur von Brotkrümeln, als er und seine Schwester den Wald betreten. Er hofft, diese Brotkrümel zu benutzen, um den Weg nach Hause zu finden.
Vorteile von Brotkrümeln
Brotkrümel helfen Suchmaschinen, das Thema Ihrer Seite und Ihre Website-Hierarchie zu verstehen.
Diese Brotkrümel können Ihrer Seite helfen, für ihre Ziel- oder verwandten Schlüsselwörter zu ranken.
Und da Brotkrümelpfade interne Links sind, können sie auch Suchmaschinen helfen, Ihre Website zu crawlen.
Schema-Markup
Es gibt auch einen SEO-Vorteil durch das Hinzufügen von Brotkrümel-Schema-Markup zu Ihren Webseiten. Diese Art von HTML-Code hilft Google, Ihre Seite besser zu verstehen.
WordPress SEO-Plugins wie All in One SEO (AIOSEO) fügen diesen Code automatisch für Sie hinzu.
Verbesserte Benutzererfahrung
Brotkrümel helfen Benutzern auch, eine Website zu navigieren, ohne die Zurück-Taste des Browsers zu verwenden. Aus diesem Grund können Brotkrümel eine bessere Benutzererfahrung bieten, Absprungraten reduzieren und das Engagement erhöhen.
Komplexe Websites, einschließlich E-Commerce-Shops mit verschachtelten Hierarchien, profitieren erheblich von der Brotkrümelnavigation.
In diesem Tutorial zeigen wir Ihnen, wie Sie Brotkrümel hinzufügen und anzeigen und anpassen.
Wir werden das All in One SEO (AIOSEO) Plugin verwenden.
Schritt 1: All in One SEO (AIOSEO) herunterladen und installieren
Laden Sie zuerst All in One SEO (AIOSEO) herunter und installieren Sie es.
Dieses Plugin enthält einen Brotkrümel-Generator. Es hat auch alles, was Sie für SEO brauchen. Und es ist anfängerfreundlich.
All in One SEO (AIOSEO) ist ein etabliertes Plugin mit Tausenden von 5-Sterne-Bewertungen auf WordPress.org. Derzeit nutzen über 3 Millionen Website-Besitzer das Plugin.
Schritt 2: Brotkrümel aktivieren
Nachdem Sie das Plugin installiert haben, gehen Sie zu AIOSEO » Allgemeine Einstellungen » Brotkrümel.
Schalten Sie die Schaltfläche Breadcrumbs aktivieren ein.
Darunter sehen Sie 4 Optionen zum Hinzufügen von Breadcrumbs zu Ihrer Website.
Schritt 3: Wählen Sie eine Anzeigeoption
Hier sind die 4 Optionen
- Gutenberg-Block oder Shortcode: Verwenden Sie diese, um Breadcrumbs zu einzelnen Seiten hinzuzufügen.
- Widget: Verwenden Sie dies, um Breadcrumbs zum Seitenbereich oder Fußzeilenbereich Ihrer Blogbeiträge hinzuzufügen.
- PHP-Code: Verwenden Sie dies, um Breadcrumbs sofort auf der gesamten Website (auf allen Seiten) hinzuzufügen.
Alle diese Methoden sind einfach zu verwenden. Lassen Sie uns sie Schritt für Schritt durchgehen.
Methode 1: Gutenberg-Block
Wie Sie vielleicht wissen, wird WordPress mit dem Gutenberg-Editor geliefert, der klickbare Blöcke verwendet, um Elemente zu einer Seite hinzuzufügen.
Diese Elemente können ein Absatz, eine Aufzählungsliste, ein Bild oder eine Tabelle sein.
All in One SEO bietet Ihnen einige spezielle Gutenberg-Blöcke, einschließlich des AIOSEO – Breadcrumbs-Blocks.
Um diesen Block zu verwenden, öffnen Sie eine Seite und platzieren Sie den Cursor dort, wo die Breadcrumbs hinzugefügt werden sollen.
- Klicken Sie auf das schwarze „+“-Zeichen, um einen neuen Block hinzuzufügen.
- Suchen Sie im Popup-Fenster nach „breadcrumbs“, und der Block AIOSEO – Breadcrumbs wird angezeigt.
- Klicken Sie darauf, um Breadcrumbs zu Ihrer Seite hinzuzufügen.
Methode 2: Shortcode
Es gibt auch einen einzigartigen AIOSEO Shortcode zum Hinzufügen von Breadcrumbs.
WordPress Shortcodes sind kleine Textstücke, die Sie auf einer Seite kopieren und einfügen, um ein Element wie ein Inhaltsverzeichnis hinzuzufügen.
Wie Gutenberg-Blöcke sind Shortcodes schnell und einfach zu verwenden.
Kehren Sie zu AIOSEO » Allgemeine Einstellungen » Breadcrumbs zurück, um den Breadcrumb-Shortcode zu erhalten.
- Klicken Sie auf das Shortcode-Symbol.
- Und kopieren Sie den AIOSEO Breadcrumbs Shortcode darunter.
Navigieren Sie nun zu einer Seite auf Ihrer Website, zu der Sie Breadcrumbs hinzufügen möchten.
Fügen Sie dann den Shortcode in Ihren Artikel ein.
Wenn Sie Ihre Webseite in der Vorschau anzeigen, können Sie sehen, dass die Breadcrumbs hinzugefügt wurden.
Methode 3: Widget
WordPress-Widgets ermöglichen es Ihnen, Funktionen zu permanenten Bereichen Ihrer Website wie Seitenleisten und Fußzeilen hinzuzufügen.
Widgets umfassen Kalender, Suchfelder und Archive.
Um Breadcrumbs mit der Widget-Option zu Ihrer Website hinzuzufügen, gehen Sie zu Darstellung » Widgets.
(Wenn Ihr Theme Widget-Bereiche unterstützt, sehen Sie es im Menü.)
Das öffnet ein neues Fenster. Sie sehen eine scrollbare Replik Ihrer Seitenleiste auf der rechten Seite.
Klicken Sie nun auf das „+“-Symbol neben dem Wort Widgets.
Dadurch wird ein Suchfeld geöffnet. Beginnen Sie mit der Eingabe von „Breadcrumbs“, und das AIOSEO Breadcrumbs-Widget wird angezeigt.
Ziehen Sie das Widget dorthin, wo es in der Seitenleiste erscheinen soll.
In unserem Beispiel ziehen wir es in den Footer-Bereich.
Nun werden unsere Breadcrumbs im Footer der Seitenleiste angezeigt.
Natürlich können Sie Breadcrumbs sowohl in Ihrer Seitenleiste als auch am oberen Rand Ihrer Seiten haben.
Methode 4: PHP-Code
Sie können Breadcrumbs ganz einfach website-weit mit einem PHP-Code-Snippet hinzufügen.
Sie kopieren und fügen dieses Snippet ein, genau wie Sie es mit normalem Text tun würden.
Der Vorteil dieser Option ist, dass sie automatisch Breadcrumbs zu all Ihren Seiten hinzufügt und Sie diese Aktion nie wiederholen müssen.
Dies sind die Schritte:
- Kopieren Sie das Code-Snippet.
- Öffnen Sie den Theme-Editor.
- Klicken Sie auf header.php.
- Fügen Sie den Code-Snippet ein.
Lassen Sie uns diese Schritte durchgehen.
1. Kopieren Sie das Code-Snippet
Auf der Seite AIOSEO Breadcrumbs
- Klicken Sie auf PHP-Code. Dadurch erscheint eine kleine Codezeile.
- Klicken Sie auf das kleine Kopiersymbol rechts neben dem Code-Snippet.
Nachdem Sie diese Codezeile kopiert haben, werden Sie sie in Ihr Theme einfügen.
2. Öffnen Sie den Theme-Editor.
- Navigieren Sie in der linken Navigation von WordPress zu Darstellung » Theme-Datei-Editor.
Ein neues Fenster wird wie folgt geöffnet:
3. Klicken Sie auf header.php
- Scrollen Sie in der rechten Spalte (Theme-Dateien), um header.php zu finden und klicken Sie darauf.
Dadurch erscheint links ein neues Codefenster.
4. Fügen Sie den Code ein.
- Suchen Sie nach dem Tag </head>.
- Fügen Sie darunter den PHP-Code-Schnipsel ein.
- Klicken Sie dann auf Datei aktualisieren, um Ihre Änderungen zu speichern.
Hier ist eine Nahaufnahme des </head>-Tags und des PHP-Code-Schnipsels für Breadcrumbs.
Nachdem Sie auf Datei aktualisieren geklickt haben, werden alle Ihre Webseiten mit Breadcrumbs versehen.
Und neue Beiträge oder Seiten werden sie ebenfalls haben.
Achtung: Vor dem </head>-Tag gibt es ein <head>-Tag (ohne Schrägstrich). Der PHP-Code-Schnipsel muss nach dem </head>-Tag eingefügt werden.
Nachdem Sie nun wissen, wie Sie die Breadcrumb-Navigation auf Ihrer WordPress-Website hinzufügen, zeigen wir Ihnen, wie Sie deren Erscheinungsbild anpassen können.
Brotkrümel-Einstellungen
Das Ändern Ihrer Breadcrumb-Einstellungen beeinflusst, wie Ihre Breadcrumb-Pfade aussehen.
Diese Einstellungen umfassen Optionen zum:
- Einbeziehen oder Auslassen Ihrer Homepage.
- Verwenden unterschiedlicher Trennzeichenstile.
- Einbeziehen oder Auslassen der aktuellen Seite (Seitentitel), auf der sich der Benutzer befindet.
Zuerst sehen Sie die Vorschau oben im Bereich Breadcrumb-Einstellungen.
Während Sie die Einstellungen anpassen, ändert sich diese Vorschau.
Unter der Vorschau können Sie mit verschiedenen Trennzeichenstilen experimentieren.
Und Sie können den Homepage-Link aus- oder einschalten oder ihm eine andere Bezeichnung geben. („Home“ ist die Standardbezeichnung.)
Scrollen Sie ein wenig nach unten.
Hier haben Sie 2 weitere Anpassungsoptionen.
- Breadcrumb-Präfix: Wenn Sie Text am Anfang Ihres Breadcrumb-Pfads anzeigen lassen möchten, geben Sie ihn hier ein.
- Blog-Startseite anzeigen: Schalten Sie dies auf „Aus“, wenn Ihr Blogname nicht im Breadcrumb-Pfad erscheinen soll.
Erfahren Sie mehr über Breadcrumb-Einstellungen.
Verwendung von Pro-Brotkrümel-Vorlagen
Wenn Sie die Pro-Version von All in One SEO (AIOSEO) verwenden, sehen Sie die Optionen für die Breadcrumb-Vorlage unten unter AIOSEO » Allgemeine Einstellungen » Breadcrumbs.
Die Vorlagen ermöglichen es Ihnen, das Aussehen von Breadcrumbs zu ändern. Sie können für verschiedene Beitragstypen unterschiedliche Optionen wählen.
Erfahren Sie mehr über Breadcrumb-Vorlagen.
Arten von Breadcrumb-Navigation
Zusätzlich zu den oben behandelten hierarchiebasierten Breadcrumbs gibt es 2 weitere Arten von Breadcrumb-Navigation.
Hierarchiebasierten Breadcrumbs werden auch standortbasierte Breadcrumbs genannt.
Verlaufsbasierte Breadcrumbs (Pfadbasierte Breadcrumbs)
Diese Navigationsart zeigt die Seiten an, die Sie auf einer Website besucht haben.
Es kann unübersichtlich werden, wenn Benutzer viele Seiten besuchen.
Attributbasierte Breadcrumbs
Einige E-Commerce-Websites integrieren Produktattribute wie Farbe, Oberfläche oder Größe in ihre Breadcrumb-Pfade.
Diese können mit hierarchiebasierten Breadcrumbs kombiniert werden.
Best Practices
Google empfiehlt, dass Ihre Breadcrumbs der Hierarchie Ihrer Website entsprechen.
Allerdings sollten sie Ihre Hauptnavigationspunkte nicht nachbilden oder ersetzen.
Zusammenfassung
Breadcrumbs können die Benutzerfreundlichkeit Ihrer Website verbessern und dazu beitragen, dass Ihre Seiten in den Google-Suchergebnissen besser ranken.
E-Commerce-Seiten mit vielen Produktseiten und informationsreichen Websites profitieren erheblich von der Breadcrumb-Navigation. Aber jeder Website-Besitzer kann sie hinzufügen.
Was kommt als Nächstes?
Nachdem Sie nun gelernt haben, wie Sie Breadcrumbs hinzufügen, was kommt als Nächstes?
Es ist einfach zu lernen, wie Sie eine HTML-Sitemap hinzufügen zu Ihrer WordPress-Website. Und erkunden Sie unsere DIY-SEO-Projekte für Anfänger.
Wenn Sie diesen Artikel hilfreich fanden, abonnieren Sie bitte unseren YouTube-Kanal. Dort finden Sie viele weitere hilfreiche Tutorials. Sie können uns auch auf X (Twitter), LinkedIn oder Facebook folgen, um auf dem Laufenden zu bleiben.
Möchten Sie AIOSEO kostenlos ausprobieren?
Geben Sie die URL Ihrer WordPress-Website ein, um AIOSEO Lite zu installieren.
Offenlegung: Unsere Inhalte werden von den Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, können wir eine Provision verdienen. Wir empfehlen nur Produkte, von denen wir glauben, dass sie unseren Lesern einen Mehrwert bieten.
Dieser Artikel beginnt gut, aber dann gibt es nicht genug Erklärung für mich, warum (und wie) ich bestimmte Breadcrumb-bezogene Aktionen auf meiner Website durchführen sollte – der Autor setzt Wissen voraus, das ich nicht besitze. Daher bin ich nicht zuversichtlich, irgendwelche Maßnahmen zu ergreifen. Insgesamt ist dieser Artikel nicht ausreichend anfängerfreundlich.