April 11, 2021

HTML-lang-Attribut einzelner WordPress Seiten Àndern

hreflang-Attribut auf einzelner Wordpress Seite Àndern
Photo by Sebastiano Piazzi on Unsplash

Man benötigt nicht immer gleich ein kostenpflichtiges Plugin wie WPML, um eine kleine WordPress Website multilingual zu gestalten. Im folgenden Artikel erklĂ€re ich, wie man eine kleine WordPress Website mehrsprachig gestalten kann und das hreflang-Attribut bestimmter Seiten einer WordPress Website anpassen kann, ohne dafĂŒr ein Plugin verwenden zu mĂŒssen.

Vor Kurzem habe ich von einem Kunden, fĂŒr welchen ich auch die WordPress Website entwickelt habe, eine erneute Anfrage erhalten. Er hĂ€tte nun gerne auch eine englischsprachige Version seiner Website.

Im ersten Moment habe ich dabei natĂŒrlich direkt an das gute alte WPML gedacht. Als ich mich dann aber gleich im nĂ€chsten Moment daran erinnert habe, dass die Website dieses Kunden ein One-Page war, befand ich es fĂŒr unverhĂ€ltnismĂ€ĂŸig, dem Kunden vorzuschlagen, eine Lizenz fĂŒr dieses Plugin zu kaufen.

Ich habe den Kundenwunsch dann einfach manuell umgesetzt. ZunĂ€chst habe ich im Theme Builder von Elementor im Template fĂŒr den globalen Header einen neuen Bereich eingebaut, der je nachdem, welche Sprache aktuell ausgewĂ€hlt ist im Header rechts neben der Hauptnavigation entweder eine deutsche oder eine großbritannische Flagge anzeigt.

Bei Klick auf die deutsche Flagge, landet der Nutzer auf der deutschsprachigen Startseite und bei Klick auf die großbritannische Flagge landet der Nutzer dementsprechend auf der englischsprachigen Version der Startseite, welche ich zuvor aus einem Duplikat der deutschsprachigen Startseite erstellt hatte.

Nun war damit aber noch nicht alles erledigt. Im HTML-Tag der englischsprachigen Seite befand sich nach wie vor das hreflang-Attribut „de-DE“, welches somit eigentlich signalisiert, dass man sich auf einer deutschsprachigen Website befindet.

hreflang-Attribut auf einzelner WordPress Seite Àndern - Das fehlerhafte hreflang-Attribut

Das kann beispielsweise zu Problemen fĂŒhren, wenn Google versucht die englischsprachige Version dieser Startseite zu indexieren. An diesem Punkt erhĂ€lt Google nĂ€mlich widersprĂŒchliche Signale. Zum einen deutet das hreflang-Attribut darauf hin, dass der Inhalt der zu indexierenden Seite deutschsprachig ist. Der Inhalt der Seite ist aber eigentlich englischsprachig. Nun kann es sein, dass Google somit nicht genau definieren kann, fĂŒr die Suchergebnisse welcher Sprache diese Ressource zu indexieren ist. Mitunter wird diese Seite somit gar nicht indexiert.

Das folgende PHP-Skript sorgt dafĂŒr, dass das hreflang-Attribut auf einer bestimmten Seite nach Belieben angepasst werden kann:

				
					function change_lang_attribute_specific_pages(){
	$format = get_page_template();
	$lang = "de-DE";
	
/* Hier xxxx durch die ID der betroffenen Seite ersetzen */
	if(is_page( $page = 'xxxx' )) {
		$lang = "en-GB";
	}
	return 'lang="'.$lang.'"';
}

add_filter('language_attributes', 'change_lang_attribute_specific_pages');
				
			

Das Skript wird in die functions.php des aktiven Child-Themes eingebaut. Die gewĂŒnschte Seite selektiert man dabei einfach ĂŒber die Page-ID. Diese findet man im Body-Tag der jeweiligen Seite:

hreflang-Attribut auf einzelner WordPress Seite Àndern - Die Page-ID finden

Im Anschluss kann man dann via CSS die entsprechende Flagge ausblenden, wenn man sich auf der entsprechenden Version der Seite befindet. Der CSS-Code dafĂŒr sieht so aus:

				
					html[lang=de-DE] .selektor-deutsche-flagge {
    display: none;
}

html[lang=en-GB] .selektor-großbritannische-flagge {
    display: none;
}