hreflang mit dem Google Tag Manager in drei Schritten einbauen

Nicht jedes CMS kann hreflang ausgeben, und nicht jedes Team hat Zeit für eine Umsetzung im Template. Ist der Google Tag Manager eingebunden, gibt es einen Weg ohne Entwicklung. Du brauchst eine Website mit mindestens zwei Sprach- oder Länderversionen, die sich gegenseitig verlinken, etwa über einen Sprachwechsler.

Die Aufgabe

Jede Seite braucht hreflang-Links auf alle ihre Sprach- und Länderversionen, einschließlich eines Verweises auf sich selbst. Für eine Blogseite auf Englisch und Deutsch sieht das auf beiden Versionen so aus:

Von Hand für jede Seite ist das nicht machbar. Der Tag Manager soll die Links deshalb für alle Seiten auf einmal erzeugen. Dafür braucht er auf jeder Seite die URLs der anderen Versionen. Die stehen meist schon im Sprachwechsler. Grundlagen zu Codes und Sets erklärt der Ratgeber hreflang.

Schritt 1. Links aus dem Sprachwechsler auslesen

Der Tag Manager hat einen Variablentyp „DOM-Element“, der Werte aus dem HTML einer Seite liest. Für jede Sprach- oder Länderversion legst du eine solche Variable an.

1. Unter „Variablen“ bei den benutzerdefinierten Variablen auf „Neu“ klicken und den Typ „DOM-Element“ wählen.
2. Als Auswahlmethode „CSS-Selektor“ nehmen und der Variable den Namen der Zielversion geben, etwa „Link zur deutschen Version“.
3. Den Selektor findest du in Chrome. Rechtsklick auf den Link im Sprachwechsler, „Untersuchen“, dann im markierten Code „Copy“ und „Copy selector“. Ein Beispiel ist #menu-item-443-de > a.
4. Als Attributname „href“ eintragen. Ohne Attribut liefert die Variable den Linktext, also etwa „DE“.
5. Für jede weitere Version wiederholen.

Im Vorschaumodus prüfst du, ob die Variablen stimmen. Auf jeder Seite müssen sie die URLs der anderen Versionen zeigen, nicht die der aktuellen Seite. Der kopierte Selektor ist der schnelle Weg. Wer CSS-Selektoren kennt, findet meist robustere, die Template-Änderungen besser überstehen.

Schritt 2. Ein Tag je Sprachversion

Für jede Sprachversion legst du ein Tag vom Typ „Benutzerdefiniertes HTML“ an. Das Skript für die englischen Seiten erzeugt zwei Links. Der erste verweist mit der eingebauten Variable {{Page URL}} auf die Seite selbst, mit fest eingetragenem Sprachcode. Der zweite holt die URL der deutschen Version aus der Variable aus Schritt 1.

Den zweiten Block wiederholst du für jede weitere Version. Als Trigger nimmst du alle Seiten der englischen Version. Für die deutschen Seiten legst du ein zweites Tag an, mit „de“ im Selbstverweis und der Variable für die englische Version. Bei vielen Versionen geht es mit einer Nachschlagetabelle auch mit einem einzigen Tag, siehe unten.

Ältere Anleitungen nutzen jQuery('head').append(). Die Fassung oben kommt ohne jQuery aus und macht dasselbe.

Ein Tag für alle Versionen mit einer Nachschlagetabelle

Mit vielen Sprach- und Länderversionen wird ein Tag je Version unübersichtlich. Eine Nachschlagetabelle liefert dann den hreflang-Code der aktuellen Seite, im Beispiel je Domain. Weitere Versionen bekommen je eine Zeile in der Tabelle und einen Eintrag im Skript. Wie Nachschlagetabellen funktionieren und wofür du sie sonst nutzt, etwa für GA4, zeigt der Ratgeber Nachschlagetabellen im Google Tag Manager.

Liegen die Versionen in Verzeichnissen, nimmst du statt der Nachschlagetabelle eine RegEx-Tabelle mit {{Page Path}} als Eingabe. Sie prüft Muster wie ^/de/ von oben nach unten, nimmt den ersten Treffer und kann einen Standardwert setzen. Mit beiden Varianten reicht ein einziges Custom-HTML-Tag für alle Seiten mit Sprachwechsler.

Das Skript nimmt die URLs der Versionen aus den DOM-Variablen aus Schritt 1 und überschreibt den Eintrag der aktuellen Sprache mit der eigenen URL. Leere Variablen überspringt es, sodass auf Seiten ohne Gegenstück keine kaputten Links entstehen. Prüfe im Vorschaumodus auf je einer Seite pro Version, ob die Nachschlagetabelle den richtigen Code liefert.

Schritt 3. x-default ergänzen, optional

2017 leitete die Root-URL von searchviu.com Nutzer je nach Browsersprache auf die deutsche oder englische Startseite weiter. Das ist der klassische Fall für x-default. Ein drittes Tag fügt auf allen Startseiten-Versionen einen Link mit x-default auf die Root-URL ein.

Soll stattdessen eine ganze Sprachversion als Standard gelten, feuerst du auf ihren Seiten den Link mit {{Page URL}} und auf allen anderen Versionen den Link mit der passenden Variable aus Schritt 1.

Funktioniert das?

Ein eigener Test von 2017 deutet darauf hin, dass Google hreflang im gerenderten HTML auswertet, beschrieben im JavaScript-SEO-Experiment zu hreflang. Google selbst dokumentiert hreflang per JavaScript nicht. Der Tag Manager schreibt die Links in den Head des gerenderten HTML.

Vor dem Einbau rankten bei Markensuchen auf google.de zwei URLs von searchVIU, die deutsche Startseite und die Root-URL mit englischem Snippet. Etwa eine Woche nach dem Einbau zeigte Google auf google.de nur noch die deutsche Version. Unsere Erklärung ist, dass Google die Sprachstruktur der Website mit hreflang und x-default auf der Root-URL besser verstanden hat. Es ist ein Fall auf einer Website bei Markensuchen, kein Test mit Kontrollgruppe.

Grenzen der Methode

• Tools, die nur den Rohquelltext lesen, finden die Links nicht. Prüfe im gerenderten HTML.
• Google rendert Seiten mit Verzögerung. Bis die Angaben wirken, kann es länger dauern als bei hreflang im Quelltext.
• Die Links müssen im Head landen. Steht dort vorher ein ungültiges Element wie img oder iframe, nimmt Google das Ende des Heads an und liest die folgenden Elemente nicht.
• Ändert sich das Template, stimmt der Selektor womöglich nicht mehr, und die Variablen liefern leere oder falsche Werte.
• Seiten ohne Gegenstück, etwa Produkte nur in einem Land, brauchen eine Trigger-Bedingung. Das Tag feuert dann nur, wenn der Link im Sprachwechsler existiert.

Kann dein CMS oder ein Plugin hreflang ausgeben, ist das die bessere Wahl. Der Tag Manager eignet sich als Übergang oder für Websites, an deren Templates du nicht herankommst. Die Methode funktioniert auch domainübergreifend, solange sich die Versionen verlinken.

Was hat sich seitdem geändert?

Den Bericht „Internationale Ausrichtung“ in der Search Console, in dem 2017 hreflang-Angaben auftauchten, gibt es nicht mehr. Ob Google die Links sieht, prüfst du heute mit der URL-Prüfung und dem gerenderten HTML unter „Gecrawlte Seite anzeigen“. Der Vorschaumodus des Tag Managers läuft inzwischen über Tag Assistant. Googles Dokumentation zu hreflang nennt weiterhin HTML, HTTP-Header und Sitemap und erwähnt JavaScript nicht. Für das Canonical schreibt Google, dass es per JavaScript gesetzt beim Rendern übernommen wird, empfiehlt aber das HTML. Für hreflang gibt es keine entsprechende Aussage. Das Ergebnis oben ist eine Beobachtung von 2017.

Häufige Fehler

• Die Variable liefert auf jeder Seite die eigene URL statt der URL der anderen Version.
• Der Selbstverweis fehlt, weil das Tag nur die anderen Versionen einträgt.
• Das Tag einer Sprachversion feuert auf allen Seiten, und die Sprachcodes stimmen dann auf der Hälfte nicht.
• Das Skript nutzt jQuery, das auf der Website nicht geladen ist.
• Der Sprachwechsler verlinkt auf die Startseite der anderen Sprache statt auf die passende Seite.

Häufige Fragen