Wie man hreflang mit Google Tag Manager implementiert

Hast du dich jemals gefragt, ob du hreflang mit dem Google Tag Manager implementieren kannst? Ja, das kannst du! Oder suchst du einfach nach dem einfachsten Weg, hreflang auf deiner Website zu implementieren, wenn du kein Entwickler bist? Nun, hier ist sie. In diesem Artikel zeigen wir dir, wie du hreflang mit dem Google Tag Manager in drei einfachen Schritten implementieren kannst, ziemlich einfach) Schritte. Alles, was du brauchst, ist eine Website mit mehreren Länder- oder Sprachversionen, auf die Links verweisen, und eine Implementierung von Google Tag Manager auf deiner Website. Also los geht's!

Die Herausforderung: Jede Gruppe von Sprachversionen erhält ihren eigenen Satz von hreflang-Anmerkungen

Wenn du diesen Beitrag liest, gehe ich davon aus, dass du bereits das Grundkonzept von hreflang verstehen: Jede Seite auf deiner Website braucht hreflang-Anmerkungen, die auf die verschiedenen Länder- und Sprachversionen verweisen, einschließlich einer, die auf die URL selbst verweist. Hier ist ein Beispiel. Unsere Blogseite existiert auf Englisch (https://www.searchviu.com/en/blog/) und Deutsch (https://www.searchviu.com/de/searchviu-blog/), daher benötigen beide Versionen die folgenden hreflang-Anmerkungen (die auf sich selbst und auf einander verweisen): Das Gleiche gilt für die beiden Versionen unserer Homepage (https://www.searchviu.com/en/ und https://www.searchviu.com/de/): Und so weiter, für jedes Paar von englischen und deutschen Seiten... Wichtiger Hinweis: Die in diesem Beitrag vorgestellte Lösung funktioniert für Websites mit einer beliebigen Anzahl von Länder-/Sprachversionen. In dem hier beschriebenen Fall gibt es nur zwei Versionen, Deutsch und Englisch, aber wir erklären auch, was du tun musst, wenn du mehr Versionen hast als diese. Da wir die hreflang-Anmerkungen nicht manuell zu jeder Seite unserer Website hinzufügen wollen, sondern dynamisch zu allen Seiten auf einmal, brauchen wir eine Möglichkeit, die URLs aller Sprach- und Länderversionen für jeden Satz von Seiten zu extrahieren. Wenn du den nächsten Teil etwas herausfordernd findest, verzweifle nicht. Tu es einfach! Der Rest ist viel einfacher. Und wenn etwas unklar bleibt oder du Fragen hast, zögere nicht, uns zu kontaktieren. Wir helfen dir gerne weiter!

Schritt 1: Extrahiere die internen Links zu den verschiedenen Länder- und Sprachversionen aus deiner Website mit Hilfe von “DOM Element” GTM-Variablen.

Die URLs der anderen Sprach- oder Länderversionen einer Seite finden sich normalerweise in einer Art Sprach- oder Länderumschalter auf der Seite, die Links zu den anderen Versionen enthält. Hier können wir die URLs extrahieren, die wir für die hreflang-Anmerkungen benötigen. Der Google Tag Manager hat einen Variablentyp namens “DOM Element”, mit dem wir Informationen aus dem HTML-Code einer Seite extrahieren können. Ich werde dir jetzt genau zeigen, wie du eine Variable dieses Typs für jede Sprach- und Länderversion deiner Website erstellst. Gehe im Google Tag Manager auf “Variablen”, scrolle nach unten zu “Benutzerdefinierte Variablen” und klicke auf “NEU”. In dem neuen Dialog, der sich öffnet, klickst du auf die Variablenkonfiguration und wählst den Variablentyp “DOM Element”. Die Variable hat zwei Auswahltypen, “ID” und “CSS-Selektor”. In diesem Fall brauchen wir den Typ “CSS selector”. Du solltest nun Folgendes sehen: Fangen wir jetzt an, die leeren Felder zu füllen. Der Variablenname am Anfang ist ein Kinderspiel. Gib ihr den Namen des Landes oder der Sprachversion, mit der du beginnen willst (denk daran, dass wir die Links zu den Länder- oder Sprachversionen extrahieren und eine Variable für jede davon erstellen). In diesem Fall möchte ich mit der deutschen Version von searchVIU beginnen, also nenne ich die Variable “Link zur deutschen Version”. Der Teil “Element Selector” ist wahrscheinlich der schwierigste Teil der ganzen Anleitung. Ich zeige dir den einfachsten Weg, nicht den ausgeklügeltsten, um ihn zu füllen. Wenn du etwas Zeit findest, um zu lernen, wie CSS-Selektoren funktionieren, wirst du schönere Wege finden, dieses Feld zu füllen, aber für den Moment reicht die einfache Variante. Am einfachsten kannst du den CSS-Selektor eines Links zu einer anderen Sprach- oder Länderversion auf einer deiner Seiten ermitteln, indem du in Chrome mit der rechten Maustaste auf den Link klickst und “Untersuchen” wählst. Die Entwicklertools von Chrome öffnen sich und der HTML-Code des Links ist bereits hervorgehoben. Auf der englischen Blogseite auf der searchVIU-Website (https://www.searchviu.com/en/blog/), sehen wir, nachdem wir den obigen Link zur deutschen Version gemacht haben, folgendes: Um den CSS-Selektor dieses Links zu erhalten, klicken wir mit der rechten Maustaste auf das hervorgehobene Stück Code im Chrome-Entwicklercode und wählen “Kopieren &gt; Selektor kopieren”. Dann fügen wir diesen Wert (“#menu-item-443-de &gt; a” in unserem Fall) in das Feld “Element Selector” in der Variable ein, die wir im Google Tag Manager erstellen. Jetzt haben wir das Feld “Attributname” übrig. Wenn wir es leer lassen würden, würde die Variable den Linktext zurückgeben, in diesem Fall “DE”. Wir wollen aber die URL, also füllen wir das Feld mit “href”, dem Namen des Attributs der Variable. <a> Element, das die URL als Wert hat. So sollte das jetzt für dich aussehen, mit Ausnahme des Wertes im Feld “Element Selector”, den du durch den individuellen Wert ersetzen musst, der für deine Website funktioniert: In unserem Fall müssen wir dies einmal für Links tun, die auf die deutschen Versionen unserer Seiten verweisen, und einmal für Links, die auf die englischen Versionen verweisen. Wenn du mehr Sprach- oder Länderversionen hast als wir, kannst du diesen Vorgang für jede einzelne Version wiederholen. Klicke in Chrome mit der rechten Maustaste auf einen Link zu einer Sprachversion, wähle “Untersuchen”, klicke mit der rechten Maustaste auf das hervorgehobene Stück Code in den Entwicklertools von Chrome, wähle “Kopieren > Selektor kopieren” und füge den kopierten Wert in das Feld “Elementselektor” einer neuen benutzerdefinierten Variablen in GTM ein. Fülle das Feld “Attribut” mit “href” und gib der Variablen den Namen des Landes oder der Sprachversion, auf die der Link zeigt. Wiederhole den Vorgang für jedes Land oder jede Sprachversion auf deiner Website. Bevor du weitermachst, kannst du überprüfen, ob deine Variablen funktionieren, indem du den Vorschaumodus von GTM aktivierst, deine Seiten aufrufst und den Reiter “Variablen” im GTM-Debugging-Overlay auswählst. Du solltest die richtigen Werte für die Variablen aller anderen Sprach-/Länderversionen der Seite sehen, auf der du dich befindest (nicht für die Seite selbst). Für die Startseite von searchVIU sieht es so aus:

Schritt 2: Erstelle ein GTM-Tag mit einem Skript, das hreflang-Annotationen für jede Sprachversion erzeugt.

Herzlichen Glückwunsch! Wenn du es bis hierher geschafft hast, hast du den schwierigsten Teil der Implementierung gemeistert. Jetzt, da wir die GTM-Variablen für die URLs der verschiedenen Sprach-/Länderversionen eingerichtet haben, können wir die hreflang-Anmerkungen zu unseren Seiten hinzufügen! Hier ist das Skript, das wir für die hreflang-Implementierung auf der englischen Version aller Seiten auf unserer Website brauchen, mit einer kurzen Erklärung jeder Zeile unten. <script> var link_en = document.createElement('link'); link_en.rel = 'alternate'; link_en.href = '{{Page URL}}'; link_en.hreflang = 'en'; jQuery('head').append(link_en); var link_de = document.createElement('link'); link_de.rel = 'alternate'; link_de.href = '{{Link to German version}}'; link_de.hreflang = 'de'; jQuery('head').append(link_de); </script> Die erste Zeile erstellt ein HTML-Element: <link> Die zweite Zeile fügt dem Link-Element ein rel-Attribut mit dem Wert “alternate” hinzu. <link rel="alternate"> Die dritte Zeile fügt dem Link-Element ein “href”-Attribut mit dem Wert der aktuellen Seite hinzu. {{Seiten-URL}} ist eine eingebaute Variable in GTM und gibt immer die vollständige URL der aktuellen Seite zurück. Wenn wir dieses Skript auf der englischen Blogseite implementieren, erhalten wir das folgende Ergebnis: <link rel="alternate" href="https://www.searchviu.com/en/blog/"> Die vierte Zeile fügt dem Link-Element ein hreflang-Attribut mit dem Wert “en” hinzu. Der hreflang-Wert kann hier fest codiert werden, da wir dieses Skript nur der englischen Version unserer Website hinzufügen werden und ein separates Skript für jede andere Sprachversion: <link rel="alternate" href="https://www.searchviu.com/en/blog/" hreflang="en"> Die fünfte Zeile fügt dies in die Kopfzeile des Post-DOM-HTML (auch gerendertes HTML genannt) deiner Seite ein, sobald das Skript im Google Tag Manager ausgeführt wird. Mit den ersten fünf Zeilen dieses Skripts haben wir also die selbstreferenzierenden hreflang-Anmerkungen für die englische Version der Blogseite erstellt. Da die Seiten-URL mit Hilfe einer GTM-Variable dynamisch hinzugefügt wird, funktioniert das gleiche Skript für alle englischen URLs auf der gesamten Website. Schauen wir uns nun die nächsten fünf Zeilen des Skripts an. Sie sind den ersten fünf Zeilen sehr ähnlich, mit dem kleinen Unterschied, dass sie keine selbstreferenzierende hreflang-Anmerkung erzeugen, sondern diejenige, die auf die deutsche Version der englischen Blogseite verweist, und zwar mithilfe der benutzerdefinierten Variablen, die wir im vorherigen Schritt eingerichtet haben: <link rel="alternate" href="https://www.searchviu.com/de/searchviu-blog/" hreflang="de"> Da das Skript die Variable verwendet, die wir in Schritt 1 eingerichtet haben, um die URL der deutschen Version aus der Seite zu extrahieren, wird genau dieses Skript auf allen Seiten der englischen Website-Version funktionieren. Du kannst die letzten fünf Zeilen für jede weitere Sprach- oder Länderversion deiner Website wiederholen, damit die englischen Seiten nicht nur auf eine andere Version verweisen, wie in unserem Fall, sondern auf alle Länder-/Sprachversionen, die du hast. Als Nächstes fügen wir das obige Skript zu einem “Custom HTML”-Tag im Google Tag Manager hinzu und stellen die Auslöseoptionen so ein, dass es auf allen englischen Seiten ausgeführt wird: Wir brauchen ein solches Tag, um es auf allen Seiten jeder Sprachversion auszuführen. Als Nächstes erstellen wir also dasselbe Skript für alle deutschen Seiten, wobei die Variablen und hreflang-Werte entsprechend ersetzt werden: Du kannst diesen Schritt für jede einzelne deiner Sprach-/Länderversionen wiederholen. Hinweis: Wenn du viele Sprach-/Länderversionen hast und ein echter GTM-Ninja bist, solltest du vielleicht auch mit Variablen für die hreflang-Werte arbeiten. Das war's im Grunde! Es war einfacher als du gedacht hast, oder? Schauen wir uns noch einen Schritt an, den du vielleicht machen möchtest, wenn du noch Lust hast...

Schritt 3 (optional): Füge eine hreflang=”x-default” Version hinzu.

Wenn du mit der Funktionsweise von hreflang vertraut bist, weißt du wahrscheinlich, was “x-default” ist (falls nicht, schau nach hier). Möglicherweise musst du den Wert “x-default” in deiner hreflang-Implementierung gar nicht zuweisen, aber falls doch, ist dieser letzte Schritt für dich. Auf staging.searchviu.com benötigen wir einen “x-default”-Wert, der von den beiden Versionen unserer Homepage auf unsere Root-URL (https://www.searchviu.com/) verweist, da diese Root-URL die Nutzer je nach Browsersprache auf eine der beiden Sprachversionen unserer Homepage weiterleitet und somit einen klassischen Fall für die Verwendung von “x-default” darstellt. Die Umsetzung ist denkbar einfach und ich bin mir sicher, dass du es selbst herausfinden kannst, nachdem du den ganzen komplizierten Kram oben gemacht hast, aber hier ist ein Screenshot: Wenn du wie wir eine hreflang-Anmerkung mit dem Wert “x-default” brauchst, die in allen Versionen deiner Homepage auf deine Stamm-URL verweist, musst du nur sicherstellen, dass dieses Tag in allen Versionen deiner Homepage ausgeführt wird, und schon bist du fertig. In einem anderen Szenario möchtest du vielleicht den Wert “x-default” allen Seiten einer Sprachversion zuweisen, der du bereits eine Sprache oder einen Sprach-/Länderwert zugewiesen hast. In diesem Fall musst du das obige Skript mit der Variablen {{Seiten-URL}} für den href-Wert auf allen Seiten dieser Sprach-/Landesversion auslösen. Außerdem musst du das gleiche Skript mit der Variable aus Schritt 1, die die URL dieser Sprachversion enthält, als href-Wert auf allen Seiten aller anderen Sprachversionen aufrufen. Kinderleicht, nicht wahr?

Ok, cool, aber funktioniert das wirklich?

Ja, das tut sie! Wie wir bereits in einer vorheriger Artikel, Google verlässt sich bei der Interpretation von hreflang-Anmerkungen auf das gerenderte HTML und ignoriert das HTML-Quelldokument. Das bedeutet, dass es absolut kein Problem mit der Implementierung von hreflang im Google Tag Manager gibt und dass Google es problemlos verarbeitet. Ein Problem, das mit hreflang-Annotationen gelöst werden kann, ist, wenn Google nicht in der Lage ist, die richtigen URL-Versionen von internationalen oder mehrsprachigen Websites für die richtigen Nutzer/innen ohne weitere Hilfe zu ranken. Bevor wir hreflang mit dieser Methode auf unserer Website implementiert haben, wurden die deutsche Startseite und die Stamm-URL (mit einem englischen Snippet) in google.de für unsere Markensuche gerankt: Etwa eine Woche nach der Implementierung von hreflang änderte sich dies und Google zeigte nur noch die deutsche Version in google.de an. Dank hreflang und der Zuweisung des Wertes “x-default” an die Stamm-URL verstand Google die mehrsprachige Struktur unserer Website besser. So sieht es jetzt aus: Wie du also siehst, funktioniert diese Methode sehr gut.

Hast du Fragen? Bitte lass es mich wissen!

Ich hoffe sehr, dass dir dieser Artikel gefallen hat und dass er dir geholfen hat, hreflang mit dem Google Tag Manager zu implementieren. Wenn etwas unklar bleibt oder du auf Probleme stößt, zögere nicht, mir Bescheid zu sagen. Ich helfe dir immer gerne! Wenn du dem hier Geschriebenen noch etwas hinzufügen möchtest, teile bitte deine Erfahrungen mit uns.