JavaScript SEO Test: Verwendet Google Pre- oder Post-DOM-HTML für die Interpretation von hreflang?

In Zeiten von JavaScript-Crawling und -Indexierung ist es wichtig zu verstehen, wie Google mit den beiden HTML-Versionen jeder Seite einer Website umgeht, die JavaScript verwendet: dem Pre-DOM und dem Post-DOM-HTML. Aus Neugierde haben wir einen kleinen Test durchgeführt, um herauszufinden, welche der beiden Versionen Google verwendet, um die im Kopf des HTML-Dokuments implementierten hreflang-Anmerkungen zu interpretieren.

Wenn du mit den Grundlagen der JavaScript-SEO nicht vertraut bist, oder wenn pre-DOM und post-DOM HTML dir noch nichts sagen, empfehlen wir dir dringend Justin Briggs‘ Artikel “Die Grundprinzipien von SEO für JavaScript”, Ein Artikel, den jeder, der sich für die eher technische Seite von SEO interessiert, lesen und verdauen sollte.

Die Idee für diesen kleinen Test entstand, als wir ein anderes Experiment vorbereiteten, das wir bald veröffentlichen werden: Wir hatten uns gefragt, ob es möglich ist, die hreflang mit Google Tag Manager implementieren (Spoiler: die Antwort lautet Ja!).

Um dies auf unserer eigenen Website zu testen, searchVIU.com, mussten wir zunächst die hreflang-Anmerkungen entfernen, die bereits vorhanden waren. Aufgrund unseres technischen Aufbaus (hreflang wurde automatisch von dem großartigen mehrsprachigen WordPress-Plugin Polylang), haben wir keine schnelle und einfache Möglichkeit gefunden, hreflang von unserer Website zu entfernen. Also haben wir beschlossen, den Google Tag Manager zu verwenden, um entfernen die hreflang-Anmerkungen von unserer Website, bevor wir sie wieder hinzufügen (auch mit Google Tag Manager).

Entfernen von hreflang von der Website mit Google Tag Manager

Die Konfiguration im Google Tag Manager zum Entfernen aller hreflang-Tags aus dem HTML-Code einer Seite ist extrem einfach:

Das Skript, das du im Screenshot siehst, entfernt alle Link-Elemente, die hreflang-Attribute haben, aus dem HTML-Quellcode (Hut ab vor Sam Nemzer für das Teilen der Skripte, die wir als Inspiration für dieses Meisterwerk verwendet haben “Wie man SEO-Änderungen mit dem Google Tag Manager umsetzt”).

Diese Implementierung mit dem Google Tag Manager führt zu einem Konflikt zwischen dem Pre-DOM- und dem Post-DOM-HTML: Die hreflang-Anmerkungen sind im HTML-Quelldokument (pre-DOM) vorhanden, aber nicht im gerenderten HTML (post-DOM). Für diejenigen unter euch, die mit diesen Konzepten nicht so vertraut sind, wollen wir das mal aufschlüsseln:

Du kannst auf den HTML-Code einer Seite zugreifen, indem du mit der rechten Maustaste in deinem Browser klickst und “Quellcode anzeigen” wählst. Auf searchVIU.com, solange dieser Test noch aktiv ist (vielleicht jetzt nicht mehr, je nachdem, wann du dies liest), Die hreflang-Anmerkungen sind im HTML-Quelldokument vor dem DOM jeder Seite sichtbar:

In der gerenderten HTML-Version (dem Post-DOM-HTML), auf die du zugreifen kannst, indem du in deinem Browser mit der rechten Maustaste klickst und “Inspect” (oder den entsprechenden Begriff in deinem Browser) auswählst, fehlen die hreflang-Anmerkungen, da sie mit Hilfe des Google Tag Managers unter Verwendung von JavaScript entfernt wurden. In diesem Screenshot siehst du denselben Bereich des HTML-Codes, aber es sind keine hreflang-Anmerkungen zu sehen:

Wie geht Google damit um, wenn hreflang im HTML-Quelltext vorhanden ist, aber nicht im gerenderten HTML?

Um ehrlich zu sein, hatten wir keine Ahnung, wie das funktionieren würde. Würde Google die hreflang-Anmerkungen im HTML-Quelltext ignorieren, weil sie im gerenderten HTML fehlen würden? Wir hatten natürlich gehofft, dass dies der Fall sein würde, sonst hätten wir diesen Test nicht durchgeführt.

Die einfache Antwort auf diese Frage ist, dass Google interessiert sich nicht für das HTML-Quelldokument (das Prä-DOM-HTML) und schaut sich nur das gerenderte HTML an (das Post-DOM-HTML).

Kurz nach dem Entfernen der hreflang-Anmerkungen begann Google, die Stamm-URL mit einem englischen Snippet auf Position 2 in den deutschen Suchergebnissen (auf google.de) zu platzieren, direkt nach der deutschen Startseite:

Vorher, als hreflang noch korrekt implementiert war, rangierte nur die deutsche Version in den deutschen Suchergebnissen, genau wie erwartet, wenn hreflang korrekt implementiert ist.

Wir wollten natürlich mehr Beweise dafür, also haben wir den hreflang-Bericht in der Google Search Console im Auge behalten. Etwa zwei Wochen lang nach der Entfernung der hreflang-Anmerkungen passierte nichts. Wir dachten schon, dass die schlechte internationale SERP-Anzeige, unter der wir seit der Änderung litten, ein Zufall sein könnte, aber dann kamen die Dinge endlich in Bewegung:

Dies und die Tatsache, dass unsere internationalen Versionen seit der Änderung falsch angezeigt werden, sind genug Beweise, um zu sagen, dass Google unser HTML-Quelldokument ignoriert und bei der Interpretation von hreflang nur auf das gerenderte HTML achtet. Ziemlich interessant, oder?

Fazit und Ausblick

Wir waren überrascht und froh, als wir herausfanden, dass Google sich so verhält. Wir dachten, dass Google sowohl das Prä- als auch das Post-DOM-HTML verarbeiten und einige der Informationen verwenden könnte, die es in beiden Versionen findet. Andererseits wäre es wahrscheinlich ziemlich schwierig für Google zu entscheiden, welcher Version es vertrauen soll, wenn es Konflikte gibt. Es sieht also so aus, als ob sie nur noch mit dem gerenderten HTML arbeiten (oder gearbeitet haben) und das Pre-DOM HTML ignorieren. Im Nachhinein betrachtet ist das wahrscheinlich sinnvoll und wir hätten mit den Ergebnissen rechnen sollen, die wir gesehen haben.

Was denkst du? Hast du ähnliche Beobachtungen gemacht? Oder gegenteilige? Kennst du aktuelle Fälle, in denen Google das gerenderte HTML ignoriert und das Prä-DOM-HTML verwendet? Wir würden uns freuen, von dir in den Kommentaren zu hören.

Wenn du dich für den zweiten Teil dieses Experiments interessierst, bleib dran! Wir werden hreflang mit dem Google Tag Manager implementieren und eine Schritt-für-Schritt-Anleitung auf diesem Blog veröffentlichen, um dir zu zeigen, wie du es selbst machen kannst. Wir gehen natürlich davon aus, dass Google die so implementierten hreflang-Anmerkungen nach den obigen Ergebnissen problemlos verarbeiten wird, aber wir lassen dich auf jeden Fall wissen, wie es läuft. Folge uns einfach auf Twitter, Facebook, oder wo immer du willst, damit du es nicht verpasst!