SEO & UX – YOAST Breadcrumbs einbinden

In diesem Artikel erfährst Du, wie Du in WordPress mit ein paar Zeilen PHP-Code schnell und einfach YOAST Breadcrumbs einbinden kannst.

Breadcrumbs sind ein fester Bestandteil so ziemlich jeder Webseite – oder besser, sie sollten es sein. Daher bieten auch viele WordPress-Themes von Hause aus entweder eine eigene Breadcrumb-Navigation an, oder aber verwenden die YOAST Breadcrumbs, sofern das YOAST SEO Plugin installiert wurde.

Hin und wieder steht man dann aber doch vor dem Problem, dass ein WordPress-Theme überhaupt keine Breadcrumb-Navigation zur Verfügung stellt. Gerade bei kostenlosen WordPress-Themes ist dies immer mal wieder der Fall.

In diesem Artikel zeige ich Dir, wie Du auf Du Deiner Webseite dennoch Breadcrumbs zur Verfügung stellen kannst.

Du brauchst dafür nur das YOAST SEO Plugin und ein paar Zeilen PHP-Code.

Außerdem nutze ich für die folgenden Code-Injections das WordPress-Plugin Code Snippets von Shea Bunge, das Du Dir ebenfalls installieren solltest.

Warum überhaupt Breadcrumbs verwenden?

Breadcrumbs stellen eine sogenannte sekundäre Navigation dar und zahlen gleich auf zwei wichtige Bereiche Deiner Webseite ein: User Experience (UX) und Suchmaschinenoptimierung (SEO).

Diese Form der Navigation unterscheidet man in drei Arten: Klickpfad-Navigation, ortsbasierte Navigation und attributbasierte Navigation.

Die Klickpfad-Navigation ist aufgrund ihres Namens schon fast selbsterklärend: Hier wird der Weg, über den sich ein Besucher durch Deine Webseite bewegt, abgebildet.

Die gebräuchlichste Form der Breadcrumbs dürfte die ortsbasierte Navigation sein. Typischerweise werden hier neben der aktuellen Seite auch die Elternelemente angezeigt, beispielsweise die Kategorien denen ein Artikel zugeordnet ist.

Die attributbasierte Navigation findet vorwiegend in Onlineshops Verwendung. Sie stellt die am aufwendigsten zu implementierende Form der Breadcrumbs dar, weil oftmals neben den Kategorien auch Attribute sowie Such- und Personalisierungsfunktionen angeboten werden.

Breadcrumbs für die User Experience

Für Deine Besucher ist die Breadcrumb-Navigation eine einfache Möglichkeit, sich innerhalb Deiner Seitenstruktur zu orientieren. Denn neben der aktuellen Seite, werden hier mindestens Teilbereiche der Seitenhierarchie, wie beispielsweise Kategorien angezeigt, durch die Dein Besucher auch navigieren kann.

Gerade für Besucher, die über eine Suchanfrage den Weg auf einen Deiner Artikel gefunden haben, sind Breadcrumbs eine einfache Hilfe, den Kontext der Zielseite einzuordnen, sich zu orientieren und gegebenenfalls auch zu navigieren.

Als Beispiel der YOAST Breadcrumb eines Artikels auf Bloggerwissen:

Anhand dieses Breadcrumbs kann mein Besucher leicht erkennen, dass er sich auf der Seite WP Resonar Theme – Wie erstelle ich meinen eigenen Footer? befindet, das dieser Artikel der Kategorie Anpassungen angehört, und das diese einen Teilbereich des Themas WordPress darstellt. Zudem findet mein Besucher leicht den Weg auf die Startseite von Bloggerwissen.

Interessiert sich mein Besucher nun für die Themen WordPress und dessen Anpassungsmöglichkeiten, kann er über den Breadcrumb schnell in die übergeordneten Bereich wechseln.

Breadcrumbs sind also auch eine gute Möglichkeit, Besucher länger auf Deiner Seite zu halten, was sich wiederum positiv auf Deine Suchmaschinenoptimierung auswirkt. Denn die Verweildauer Deiner Besucher wird ebenfalls für das Ranking herangezogen.

Breadcrumbs für die Suchmaschinenoptimierung

Richtig implementiert, können Breadcrumbs sich positiv auf Deine Onpage-Suchmaschinenoptimierung auswirken.

Wichtig ist dabei, dass Du Deine Breadcrumbs mit Hilfe von Mikrodaten, RDFa oder JSON-LD semantisch auszeichnest.

Diese semantische Auszeichnung bewirkt, dass Suchmaschinen wie Google die URLs Deiner Arikel in den SERPs (Search Engine Result Pages, deutsch: Suchmaschinenergebnisseite) als Rich Snippets anzeigen.

Beispiel für den Rich Snippet dieses Artikels mit der dazugehörigen Breadcrumb-Struktur.
Beispiel für den Rich Snippet dieses Artikels mit der dazugehörigen Breadcrumb-Struktur.
Beispiel für einen Product Rich Snippet meines Onlineshops JUST YUM YUM Kitchen mit Breadcrumb-Struktur und Informationen zu Produktbewertungen.
Beispiel für einen Product Rich Snippet meines Onlineshops JUST YUM YUM Kitchen mit Breadcrumb-Struktur und Informationen zu Produktbewertungen.
Beispiel für einen Event Rich Snippet meines Food Event-Kalenders mit Breadcrumb-Struktur und Informationen zu den Eventdaten.
Beispiel für einen Event Rich Snippet meines Food Event-Kalenders mit Breadcrumb-Struktur und Informationen zu den Eventdaten.

YOAST Breadcrumb verwendet für diese semantische Auszeichnung das Format JSON-LD. Wenn Du Dir den Quellcode einer Deiner Artikel ansieht, findest Du im <head>-Tag Deiner Artikelseite ein JSON_LD-Skript, ähnlich diesem:

<script type='application/ld+json'>{
"@context":"https://schema.org",
"@type":"BreadcrumbList",
"itemListElement":[
	{"@type":"ListItem",
	"position":1,
	"item":{
		"@id":"https://justyumyum.media/",
		"name":"Bloggerwissen"}
		},
	{"@type":"ListItem",
	"position":2,
	"item":{
		"@id":"https://justyumyum.media/wordpress/",
		"name":"WordPress"}
		},
	{"@type":"ListItem",
	"position":3,
	"item":{
		"@id":"https://justyumyum.media/wordpress/anpassungen/",
		"name":"Anpassungen"}
		},
	{"@type":"ListItem",
	 "position":4,
	 "item":{
		"@id":"https://justyumyum.media/wp-resonar-theme-eigenen-footer-erstellen/",
		"name":"WP Resonar Theme – Wie erstelle ich meinen eigenen Footer?"
			}
		}
	]
}
</script> 

Dieses Skript sorgt dafür, dass Deine Breadcrumbs für Suchmaschinen interpretierbar werden. Ob alles richtig funktioniert, kannst Du übrigens mit dem Testtool für strukturierte Daten von Google herausfinden.

Wo soll der Breadcrumb hin?

Idealerweise sollte sich Dein Breadcrumb im oberen Bereich Deiner Seiten befinden. Gängige Platzierungen sind beispielsweise ganz am Anfang eines Artikels oder direkt über der Artikelüberschrift.

Schon vor einiger Zeit bin ich dazu übergegangen, eine weitere Breadcrumb-Navigation unterhalb eines Artikels anzuzeigen.

Gerade bei (sehr) langen Artikeln habe ich damit gute Erfahrungen gemacht. Insbesondere auf mobilen Endgeräten erspart dieser zusätzliche Breadcrumb Deinem Besucher das ewige Scrollen zurück zum Seitenanfang.

Zur Platzierung verwende ich sogenannte Action Hooks oder Filter Hooks. Als mögliche Platzierung kommen folgende WordPress-Hooks in Frage:

  • loop_start – Funktionen, deren Ausführung diesen Hook gehängt werden, werden ausgeführt sobald die WordPress-Schleife the_loop ausgeführt wird.
  • the_content – in Verbindung mit der WordPress-Funktion add_filter lässt sich über diesen Hook der Inhalt eines Artikels manipulieren.
  • comment_form_before (optional) – Funktionen, die an diesen Hook gehängt werden, werden vor Deinem Kommentarformular ausgeführt. Ich verwende diesen Hook, um die Breadcrumb-Navigation nochmal unterhalb eines Artikels anzuzeigen.
  • loop_end (optional) – Im Grunde das Gegenstück zu loop_start. Wenn Du einen zweiten Breadcrumb am Ende Deiner Seite einbinden willst, kannst Du statt diesen Hook anstatt comment_form_before verwenden.

Welcher dieser Hooks speziell für Dein Theme in Frage kommt, musst Du leider ausprobieren.

Inbesondere kostenpflichtige WordPress-Themes können häufig mit weiteren, eigenen Theme-Hooks aufwarten. Daher lohnt sich unbedingt auch ein Blick in die Dokumentation Deines Themes, ob es nicht vielleicht einen Hook gibt, der sich eher für die Platzierung Deiner YOAST Breadcrumbs anbietet als die Standard-WordPress-Hooks.

Ein glänzendes Beispiel für eine sehr umfangreiche Anzahl an eigenen Hooks sind da definitiv die Studiopress-Themes, die auf dem Genesis-Framework basieren.

Um den YOAST Breadcrumb einzubinden und in meinen Artikeln zu platzieren, verwende ich die WordPress-Funktion add_action() in Verbindung mit dem Template-Hook loop_start.

add_action('loop_start','addYoastBreadcrumb');

Mit dem WP Resonar-Theme, das ich für diesen Blog verwende, führt nur loop_start zu einem passablen Ergebnis. Die unterschiedlichen Code-Beispiele für diese Hooks findest Du am Ende dieses Artikels.

Ist da wer…?

Bevor Du die YOAST Breadcrumbs tatsächlich einbindst, solltest Du zunächst prüfen, ob die YOAST Breadcrumbs überhaupt aktiviert sind.

Ohne diese Prüfung, würde es Fehlermeldungen geben, falls die Breadcrumbs im Plugin nicht aktiviert wurden oder gar das YOAST SEO Plugin selbst nicht zur Verfügung steht.

Die YOAST Breadcrumbs stecken in einer Funktion namens yoast_breadcrumbs. Um jetzt das Vorhandensein der Breadcrumbs-Funktion zu prüfen, bedienst Du Dich eines if-Statements und der PHP-Funktion function_exists.

function addYoastBreadcrumb() {
        if (function_exists('yoast_breadcrumb')) {
		yoast_breadcrumb( '<p class="breadcrumbs">','</p>' );
        }
} // close function

Vereinfacht ausgedrückt, passiert nun Folgendes: Wenn (if) die PHP-Funktion function_exists die Funktion yoast_breadcrumb findet, wird die Funktion yoast_breadcrumb auch ausgeführt. Andernfalls passiert nichts.

Eigentlich würde diese Art der Einbindung schon ausreichen, um die YOAST Breadcrumbs auf Deiner Seite anzeigen zu lassen, aber…

YOAST Breadcrumbs aktivieren

Wichtig an dieser Stelle ist, dass es nicht ausreicht, wenn Du das YOAST SEO Plugins installierst und aktivierst. Die Breadcrumbs müssen im YOAST Plugin ausdrücklich aktiviert werden.

Wenn Du dies noch nicht gemacht hast, gehe jetzt bitte innerhalb des YOAST SEO Plugins über Darstellung in der Suche auf den Reiter Breadcrumbs und setzte den Schieber auf Aktiviert.

SEO & UX - YOAST Breadcrumbs schnell und einfach einbinden: Yoast Seo Breadcrumbs aktivieren

Breadcrumbs auf der Startseite verhindern

Da ich die Breadcrumbs aber nicht auf meiner Startseite haben möchte, nehme ich noch eine Einschränkung vor, um die Anzeige der Breadcrumbs auf dieser Seite ausdrücklich zu verhindern.

Dafür verwende ich eine weitere if-Schleife, in der ich sage, dass die Funktion yoast_breadcrumb nur dann ausgeführt werden soll, wenn sich der Besucher nicht auf meiner Startseite befindet.

Da WordPress zwei Formen von Startseiten kennt, verwende ich sowohl is_home  als auch is_front_page als Ausschlußkriterien.

if ((!is_home() || !is_front_page()) &amp;&amp; !is_amp_endpoint()){
				yoast_breadcrumb( '<p class="breadcrumbs">','</p>' );
}

Eine Besonderheit gibt es bei mir noch: Da ich meine Artikel auch als AMP-Seiten anbiete, schließe ich die Anzeige der Breadcrumbs auf diesen Seiten ebenfalls aus. Da ich für meine AMP-Seiten eigene Templates verwende, ist der Code für die YOAST Breadcrumbs bereits fester Bestandteil dieser Templates.

Daher wird ohne die Anweisung !is_amp_endpoint() der Breadcrumb auf meinen AMP-Seiten doppelt angezeigt.

Auch wichtig zu wissen: is_amp_endpoint() ist kein Standard-Hook von WordPress, sondern wird durch das Plugin AMP zur Verfügung gestellt. Der Hook sollte daher auch nur dann verwendet werden, wenn dieses Plugin installiert und aktiviert ist. Andernfalls wird es zu Fehlern auf Deiner Seite kommen.

Die YOAST Breadcrumbs hübsch machen

Zu guter Letzt musst Du Deine neuen YOAST Breadcrumbs nun noch mit ein bisschen CSS aufhübschen.

Nachfolgendend findest Du die – sehr rudimentären – CSS-Anweisungen, die ich hier auf meinem Blog verwende.

Je nachdem welches WordPress-Theme du verwendest und/oder wie kreativ Du werden möchtest, musst/kannst Du Dich hier ordentlich austoben.

p.breadcrumbs{
			font-size:0.8rem;
			margin-bottom: 0;
			margin-right: 1%;
			margin-left: 1%;
			padding-top:.25rem;
			padding-bottom:.25rem;
		}

Der vollständige Code

Den Anfang mache ich mit dem Code wie ich ihn auf diesem Blog verwende. Wie schon geschrieben, hat sich loop_start in Verbindung mit dem Resonar-Theme als der für mich zufriedenstellendste Ansatz herausgestellt.

Nachfolgend findest Du aber auch noch wie angekündigt das Code-Beispiel in Verbindung mit the_content.

YOAST Breadcrumbs mit loop_start

add_action('loop_start','addYoastBreadcrumb');

function addYoastBreadcrumb(){
		if (function_exists('yoast_breadcrumb')) {
			
			if ((!is_home || !is_front_page()) &amp;&amp; !is_amp_endpoint()){
				yoast_breadcrumb( '<p class="breadcrumbs">','</p>' );
				add_action('wp_footer','addYoastBreadcrumbCSS',100);
			}
		}
} // close function

function addYoastBreadcrumbCSS(){
	echo('<style id="jyy-yoast-breadcrumbs">
		p.breadcrumbs{	font-size:0.8rem;
						margin-bottom: 0;
						margin-right: 1%;
						margin-left: 1%;
						padding-top:.25rem;
						padding-bottom:.25rem;}
			</style>');
}

YOAST Breadcrumbs mit the_content

Diesen Ansatz zur Implementierung solltest Du intensiv testen, da es zumindest mit meinem Theme zu unschönen Nebeneffekten geführt hat. So hatte ich die Breadcrumbs plötzlich dreimal auf einer Artikelseite, zweimal direkt vor allen Elementen und dann einmal an der von mir gewünschten Position.

add_filter('the_content','addYoastBreadcrumb');

function addYoastBreadcrumb($content){
		if (function_exists('yoast_breadcrumb')) {
			
			if ((!is_home || !is_front_page()) &amp;&amp; !is_amp_endpoint()){
				add_action('wp_footer','addYoastBreadcrumbCSS',100);
				$contentWithBreadcrumbs = yoast_breadcrumb('<p class="breadcrumbs">','</p>');
				$contentWithBreadcrumbs .= $content;
				return $contentWithBreadcrumbs;
				
			}
		}
} // close function

function addYoastBreadcrumbCSS(){
	echo('<style id="yoast-breadcrumbs">
		p.breadcrumbs{	font-size:0.8rem;
						margin-bottom: 0;
						margin-right: 1%;
						margin-left: 1%;
						padding-top:.25rem;
						padding-bottom:.25rem;}
			</style>');
}

Eine zweite Breadcrumb-Naviagtion

Wie schon erwähnt, verwende ich eine zweite Breadcrumb-Navigation. Um die YOAST Breadcrumbs ein zweites Mal einzubinden, kannst Du den Code einfach um eine der beiden add_action-Funktionen erweitern.

add_action('comment_form_before','addYoastBreadcrumb');
add_action('loop_end','addYoastBreadcrumb');

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.