April 11, 2021

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;
}
				
			
Position des PayPal Buttons von
WooCommerce PayPal Payments
Elementor Custom-Breakpoints
Elementor Column oder Section klickbar/verlinken