Suchen Sie nach einer einfachen Möglichkeit, Ihrer Site eine Breadcrumb-Navigation hinzuzufügen?
Das Hinzufügen einer Breadcrumb-Navigation bietet SEO- und Benutzervorteile.
In diesem Tutorial erfahren Sie, wie Sie eine Breadcrumb-Navigation hinzufügen und erhalten einige Optionen zum Anpassen Ihrer Breadcrumb-Spuren.
In diesem Artikel
- Was ist Breadcrumb-Navigation?
- Vorteile von Breadcrumb
- Schritt 1: All in One SEO (AIOSEO) herunterladen und installieren
- Schritt 2: Breadcrumbs aktivieren
- Schritt 3: Wählen Sie eine Anzeigeoption
- Breadcrumb-Einstellungen
- Verwenden von Pro Breadcrumb-Vorlagen
- Arten der Breadcrumb-Navigation
- Bewährte Methoden
Was ist Breadcrumb-Navigation?
Breadcrumbs sind kleine Links, die Benutzern den Pfad anzeigen, den sie genommen haben, um zur aktuellen Seite zu gelangen.
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 aus Brotkrümeln, als er und seine Schwester den Wald betreten. Er hofft, mit diesen Brotkrümeln den Weg nach Hause zu finden.
Vorteile von Breadcrumb
Breadcrumbs helfen Suchmaschinen dabei, das Thema Ihrer Seite und die Hierarchie Ihrer Site zu verstehen.
Und da Breadcrumb-Navigation interne Links sind, können sie Suchmaschinen auch beim Crawlen Ihrer Site helfen.
Schema-Markup
Das Hinzufügen von Breadcrumb -Schema-Markup zu Ihren Webseiten bietet auch einen SEO-Vorteil. 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
Breadcrumbs helfen Benutzern außerdem dabei, auf einer Website zu navigieren, ohne die Zurück-Schaltfläche des Browsers zu verwenden. Aus diesem Grund können Breadcrumbs eine bessere Benutzererfahrung bieten, die Absprungrate verringern 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 Breadcrumbs hinzufügen, anzeigen und anpassen.
Wir verwenden das Plugin „All in One SEO“ (AIOSEO).
Schritt 1: All in One SEO (AIOSEO) herunterladen und installieren
Laden Sie zunächst All in One SEO (AIOSEO) herunter und installieren Sie es.
Dieses Plugin enthält einen Breadcrumb-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 verwenden über 3 Millionen Websitebesitzer das Plugin.
Schritt 2: Breadcrumbs aktivieren
Nachdem Sie das Plugin installiert haben, gehen Sie zu AIOSEO » Allgemeine Einstellungen » Breadcrumbs .
Aktivieren Sie die Schaltfläche „Breadcrumbs aktivieren“ .
Darunter sehen Sie vier Optionen zum Hinzufügen von Breadcrumbs zu Ihrer Site.
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 zur Seitenleiste oder Fußzeile Ihres Blogbeitrags hinzuzufügen.
- PHP-Code : Verwenden Sie diesen, um sofort Breadcrumbs auf der gesamten Site (zu allen Seiten) hinzuzufügen.
Alle diese Methoden sind einfach anzuwenden. Lassen Sie uns sie Schritt für Schritt durchgehen.
Methode 1: Gutenberg-Block
Wie Sie vielleicht wissen, verfügt WordPress über den Gutenberg-Editor, der anklickbare Blöcke verwendet, um einer Seite Elemente 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, darunter den AIOSEO – Breadcrumbs- Block.
Um diesen Block zu verwenden, öffnen Sie eine Seite und platzieren Sie den Cursor an der Stelle, an der Sie die Brotkrümel hinzufügen möchten.
- 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- Kurzcode zum Hinzufügen von Breadcrumbs.
WordPress-Shortcodes sind kleine Textteile, die Sie kopieren und auf einer Seite einfügen, um ein Element hinzuzufügen, beispielsweise ein Inhaltsverzeichnis.
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 darunter liegenden AIOSEO-Breadcrumbs-Shortcode.
Navigieren Sie nun zu einer Seite auf Ihrer Site, der Sie Breadcrumbs hinzufügen möchten.
Fügen Sie dann den Shortcode in Ihren Artikel ein.
Wenn Sie eine Vorschau Ihrer Webseite anzeigen, können Sie sehen, dass die Breadcrumbs hinzugefügt wurden.
Methode 3: Widget
Mit WordPress-Widgets können Sie permanenten Teilen Ihrer Site Funktionen hinzufügen, beispielsweise Seitenleisten und Fußzeilen.
Zu den Widgets gehören Kalender, Suchfelder und Archive.
Um Ihrer Site mithilfe der Widget-Option Breadcrumbs hinzuzufügen, gehen Sie zu Darstellung » Widgets .
(Wenn Ihr Design Widget-Bereiche unterstützt, wird es im Menü angezeigt.)
Dadurch wird ein neues Fenster geöffnet. Auf der rechten Seite sehen Sie eine scrollbare Kopie Ihrer Seitenleiste.
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 an die Stelle in der Seitenleiste, an der es erscheinen soll.
In unserem Beispiel ziehen wir es in den Fußzeilenbereich.
Jetzt werden unsere Breadcrumbs in der Fußzeile der Seitenleiste angezeigt.
Natürlich können Sie Breadcrumbs in Ihrer Seitenleiste und oben auf Ihren Seiten haben.
Methode 4: PHP-Code
Mit einem PHP-Codeausschnitt können Sie Breadcrumbs ganz einfach auf der gesamten Site hinzufügen.
Sie kopieren und fügen diesen Ausschnitt genauso ein wie normalen Text.
Der Vorteil dieser Option besteht darin, dass Breadcrumbs automatisch zu allen Ihren Seiten hinzugefügt werden und Sie diese Aktion nie wiederholen müssen.
Dies sind die Schritte:
- Kopieren Sie den Codeausschnitt.
- Öffnen Sie den Design-Editor.
- Klicken Sie auf header.php.
- Fügen Sie den Codeausschnitt ein.
Lassen Sie uns diese Schritte durchgehen.
1. Code-Snippet kopieren
Auf der AIOSEO Breadcrumbs -Seite
- Klicken Sie auf PHP-Code. Daraufhin wird eine kleine Codezeile angezeigt.
- Klicken Sie rechts neben dem Codeausschnitt auf das kleine Kopiersymbol .
Nachdem Sie diese Codezeile kopiert haben, fügen Sie sie in Ihr Design ein.
2. Öffnen Sie den Design-Editor.
- Gehen Sie in der linken Navigation von WordPress zu Darstellung > Theme-Datei-Editor.
Es öffnet sich ein neues Fenster mit folgendem Aussehen:
3. Klicken Sie auf header.php
- Scrollen Sie in der rechten Spalte ( Designdateien) , bis Sie die Datei header.php finden, und klicken Sie darauf.
Dadurch wird links ein neues Codefenster angezeigt.
4. Fügen Sie den Code ein.
- Look for the </head> tag.
- Fügen Sie darunter den PHP-Codeausschnitt ein.
- Klicken Sie dann auf „Datei aktualisieren“, um Ihre Änderungen zu speichern.
Here’s a close-up of the </head> tag and the PHP breadcrumb code snippet.
Nachdem Sie auf „Datei aktualisieren“ geklickt haben, werden allen Ihren Webseiten Breadcrumbs hinzugefügt.
Und neue Beiträge oder Seiten werden sie auch haben.
Watch out: Before the </head> tag, there’s a <head> tag (without the slash). The PHP code snippet must go after the </head> tag.
Nachdem Sie nun wissen, wie Sie Ihrer WordPress-Website eine Breadcrumb-Navigation hinzufügen, zeigen wir Ihnen, wie Sie deren Erscheinungsbild anpassen.
Breadcrumb-Einstellungen
Durch Ändern Ihrer Breadcrumb-Einstellungen ändern Sie das Aussehen Ihrer Breadcrumb-Spuren.
Diese Einstellungen umfassen Optionen für:
- Fügen Sie Ihre Homepage ein oder lassen Sie sie weg.
- Verwenden Sie unterschiedliche Trennzeichenstile.
- Fügen Sie die aktuelle Seite (Seitentitel), auf der sich der Benutzer befindet, ein oder lassen Sie sie weg.
Zuerst sehen Sie die Vorschau oben im Bereich „Breadcrumb-Einstellungen“ .
Wenn Sie die Einstellungen anpassen, ändert sich diese Vorschau.
Unterhalb der Vorschau können Sie mit verschiedenen Trennzeichenstilen experimentieren.
Und Sie können den Homepage-Link ausschalten oder ihm eine andere Bezeichnung geben. („Home“ ist die Standardbezeichnung.)
Scrollen Sie etwas nach unten.
Hier stehen Ihnen noch 2 weitere Individualisierungsmöglichkeiten zur Verfügung.
- Breadcrumb-Präfix : Wenn Sie möchten, dass am Anfang Ihrer Breadcrumb-Navigation Text angezeigt wird, geben Sie ihn hier ein.
- Blog-Homepage anzeigen : Schalten Sie die Option auf „Aus“, wenn Ihr Blogname nicht in der Brotkrümelnavigation angezeigt werden soll.
Erfahren Sie mehr über die Breadcrumb-Einstellungen .
Verwenden von Pro Breadcrumb-Vorlagen
Wenn Sie die Pro-Version von All in One SEO (AIOSEO) verwenden, werden die Optionen für Breadcrumb-Vorlagen unten unter AIOSEO » Allgemeine Einstellungen » Breadcrumbs angezeigt.
Mit den Vorlagen können Sie das Aussehen der Breadcrumbs ändern. Sie können für verschiedene Beitragstypen unterschiedliche Optionen auswählen.
Erfahren Sie mehr über Breadcrumb-Vorlagen .
Arten der Breadcrumb-Navigation
Zusätzlich zu den oben beschriebenen hierarchiebasierten Breadcrumbs gibt es zwei weitere Arten der Breadcrumb-Navigation.
Hierarchiebasierte Breadcrumbs werden auch standortbasierte Breadcrumbs genannt.
Verlaufsbasierte Breadcrumbs (pfadbasierte Breadcrumbs)
Dieser Navigationstyp zeigt die Seiten an, die Sie auf einer Site besucht haben.
Es kann unhandlich werden, wenn Benutzer viele Seiten besuchen.
Attributbasierte Breadcrumbs
Einige E-Commerce-Websites nehmen Produkteigenschaften wie Farbe, Verarbeitung oder Größe in ihre Breadcrumb-Navigation auf.
Diese können mit hierarchiebasierten Breadcrumbs kombiniert werden.
Bewährte Methoden
Google empfiehlt , dass Ihre Breadcrumbs der Hierarchie Ihrer Site entsprechen.
Allerdings sollten sie Ihre Hauptnavigationselemente weder replizieren noch ersetzen.
Zusammenfassung
Breadcrumbs können die Benutzerfreundlichkeit Ihrer Website verbessern und dazu beitragen, dass Ihre Seiten in den Google-Suchergebnissen ein besseres Ranking erzielen.
E-Commerce-Websites mit vielen Produktseiten und informationsreiche Websites profitieren erheblich von der Breadcrumb-Navigation. Aber jeder Websitebesitzer kann sie hinzufügen.
Was kommt als Nächstes?
Nachdem Sie nun gelernt haben, wie man Semmelbrösel hinzufügt, wie geht es weiter?
So fügen Sie Ihrer WordPress-Website ganz einfach eine HTML-Sitemap hinzu . Und entdecken 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 testen?
Geben Sie die URL Ihrer WordPress-Website ein, um AIOSEO Lite zu installieren.
Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, erhalten wir möglicherweise eine Provision. Wir empfehlen nur Produkte, von denen wir glauben, dass sie unseren Lesern einen Mehrwert bieten.
Dieser Artikel fängt gut an, aber dann gibt es für mich nicht genügend Erklärungen, warum (und wie) ich bestimmte Breadcrumb-bezogene Aktionen auf meiner Website durchführen sollte – der Autor setzt Kenntnisse voraus, die ich nicht besitze. Daher bin ich nicht zuversichtlich, irgendwelche Maßnahmen zu ergreifen. Insgesamt ist dieser Artikel nicht ausreichend anfängerfreundlich.