Photo by Sebastiano Piazzi on Unsplash

HTML-lang-Attribut einzelner WordPress Seiten ├Ąndern

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;
}