Die Spracheinstellung (+ Länderkennzeichen) des Browsers kann man über Javascript im Browser auslesen und der nächste Schritt ist dann eine entsprechende Begrüßung anzuzeigen.
Steht die im Browser eingestellte Sprache (z.B. Friesisch) nicht zur Verfügung soll Englisch als Fallback verwendet werden.
Anforderung und Umsetzung
1. Einsetzbar auf jeder beliebigen, auch gecachten Seite
Um auf jeder Seite einsetzbar zu sein, bietet sich die Umsetzung durch ein Shortcode-Plugin an. Im Moment erfolgt die sprachabhängige Begrüßung nur auf der Startseite durch den Shortcode sbhh-get-greeting.
Zwar steht über „Accept-Language“ im Response-Header die Browser-Sprache zur Verfügung, aber da die Startseite gecacht wird, kann nicht entsprechend darauf reagiert werden. Deshalb wird die Sprachweiche in den Browser verlagert und erfolgt durch ein kleines Javascript-Skript, das aus Performance-Gründen direkt bei der Erzeugung des HTML-Codes der Seite ausgegeben und nicht über eine gesonderte JS-Datei ausgeliefert wird.
2. Nachladen einer Begrüßung
Nachdem die eingestellte Browsersprache/Länderkennzeichen ausgelesen wurde, wird die u.U. 5-stellige Kennzeichnung (z.B. en-US) auf die ISO 639-zweistellige Notation gekürzt.
Ist dieses Kennzeichen „de“ für Deutschland beendet sich das Skript sofort. Andernfalls wird der auf der Seite mit der ID „greetings“ (bei WordPress ist das der „HTML-Anker“) gekennzeichnete Block durch den nachgeladene Block ausgetauscht.
Die erste Idee war, das Holen des Austauschblocks über die Standard-WordPress-AJAX-Schnittstelle zu relaisieren. Dadurch wäre fast die gesamte Logik auf den Server verlagert worden. Die Lösung wurde wegen Performance-Problemen verworfen.
Der nächste Versuch war, den Austauschblock über einen GET-Request zu holen und wenn der Request wegen eines 404-Fehlers fehlschlug, den Englischen Block auch wieder über einen GET-Request zu holen. Das führt aber zu starken Verzögerungen im Aufbau der Seite, so dass auch diese Lösung verworfen wurde.
Die aktuelle Lösung sieht vor, dass der Shortcode ermittelt, welche vorbereiteten Sprachdateien es gibt, daraus einen Array-String erzeugt und in das Javascript schreibt. Dadurch braucht das ermittelte Sprachkennzeichen nur mit dem Array abgeglichen werden und gezielt die Sprachdatei oder als Fallback die englische Sprachdatei geladen werden.
Nach dem Austausch des Containers „greetings“ erfolgt noch eine AJAX-Anfrage an der Server, um die Sprachen zu ermitteln und zu zählen.
3. Transportkodierung der Sprachdatei
Die Sprachedatei wird durch das Backend vorbereitet und als JSON-Datei gespeichert. Dadurch wird der sichere Transport zum Browser gewährleistet. Das Javascript im Browser dekodiert die JSON-Kodierung und ersetzt dann nur noch den Block.
4. Behandlung von Bots
Bots sollen zur Indexierung nur die deutsche Variante verwenden. Deshalb wertet das Javascript den Useragent-String des Browsers aus. Da die seriösen Bots sich durch den Useragent-String zu erkennen geben, wird Bots, die sich über eine der Zeichenfolgen ('bot', 'crawl', 'spider', 'seo', 'lighthouse', 'facebookexternalhit', 'preview') zu erkennen geben, direkt die deutsche Seite gezeigt. Das ist auch für den Google-Bot relevant, da durch den Austausch des Blocks ein Layout Shift (CLS) ausgelöst wird, den Google negativ bewertet. Die Erkennung der Bots ist angelehnt an das Kokoanalytics-Plugin.