JavaScript und Suchmaschinen: Das solltest du beachten

Noch vor einigen Jahren war JavaScript mehr als umstritten. Nervige Werbe-Pop-ups führten dazu, dass die Programmiersprache oft ganz grundsätzlich blockiert wurde. Mittlerweile ist JavaScript aus dem modernen Webdesign nicht mehr wegzudenken. Vor allem im mobilen Internet spielt JavaScript eine wichtige Rolle – unter anderem zur Medienwiedergabe, aber auch für Geolocation und moderne Navigationen. Doch wie gut verträgt sich JavaScript mit Suchmaschinen? Was musst du beachten?

Suchmaschinen haben dazugelernt

Zunächst einmal sei gesagt, dass die Zeiten vorbei sind, in denen Suchmaschinen mit JavaScript gar nichts anfangen konnten. Waren per JavaScript geladene Inhalte früher unsichtbar für Suchmaschinen, haben die Suchmaschinen mittlerweile dazugelernt. Und wenn ich von Suchmaschinen spreche, ist natürlich vor allem Google gemeint. Denn der Suchriese ist nach wie vor das Maß aller Dinge.

So ist JavaScript keine grundsätzliche Hürde mehr für Google. Allerdings bedeutet dies nicht, dass du JavaScript völlig bedenkenlos einsetzen kannst. Da Google immer ein großes Geheimnis daraus macht, wie sein Suchalgorithmus funktioniert, sind folgende Tipps immer mit etwas Vorsicht zu genießen.

Inhalte per Load- statt User-Events laden

Oftmals werden Events eingesetzt, um per JavaScript Inhalte einer Website zu ändern. Hier gilt, dass Suchmaschinen in der Regel nur solche Inhalte berücksichtigen, die über Load-Events geladen werden.

Diese Ereignisse werden vom Browser gefeuert, sobald der DOM-Baum einer Seite geladen ist. Suchmaschinen wie Google lassen Load-Events beim Crawlen zu, sodass in der Regel der Seiteninhalt erst nach Ausführen der Load-Events indiziert wird.

User-Events werden jedoch nicht geladen. Das heißt, alle Veränderungen, die zum Beispiel über Click- oder Touch-Events ausgelöst werden, bleiben beim Indizieren unberücksichtigt.

Push-States und URLs

Damit Google eine Seite indizieren kann, muss diese immer zwingend über eine URL erreichbar sein. Daher können Click-Events auch nicht berücksichtigt werden, da diese immer einen vom Benutzer individuell herbeigeführten Inhalt darstellen.

Dank der Push-State-API von JavaScript ist es mittlerweile ja möglich, die URL einer Seite zu beeinflussen. So kannst du die komplette Navigation einer Seite per JavaScript realisieren, indem du per „pushState()“ die im Browser dargestellte URL änderst und gleichzeitig per JavaScript Inhalte lädst und ersetzt.

Da Google URLs, die ausschließlich per Push-State-API realisiert werden, nicht indizieren kann, muss jede per „pushState()“ erstellte URL immer auch eine „real existierende“ URL besitzen.

Dies ist übrigens nicht nur für Suchmaschinen interessant, sondern auch für soziale Netzwerke. Denn du kannst nur solche Seiten dort teilen, die über eine „echte“ URL verfügen. Denn auch Facebook und Twitter müssen Inhalte aus einer Seite extrahieren, was nur funktioniert, wenn die URL vorhanden ist.

Wichtig ist, dass du per „pushState()“ immer korrekte URLs erzeugt, die immer auch per JavaScript den richtigen Inhalt besitzen. Eine falsche Push-State-URL, die keine neuen Inhalte lädt, führt möglicherweise dazu, dass es du doppeltem Content kommt. Und das wiederum mögen Suchmaschinen ja auch nicht.

JavaScript nicht ausschließen
Es ist zwar selbstverständlich, sei aber dennoch erwähnt. Du musst natürlich dafür sorgen, dass JavaScript-Dateien für Suchmaschinen nicht ausgeschlossen sind. Werden über die „robots.txt“ JavaScript-Dateien grundsätzlich verboten, haben Suchmaschinen keine Möglichkeit, auf diese zuzugreifen.

Da JavaScript selbst ja keinerlei indizierbare Inhalte besitzt, wird es für Suchmaschinen gerne mal versteckt.

Progressive Enhancement

Trotz aller Möglichkeiten, die Google und andere Suchmaschinen dir geben, um per JavaScript erstellte Inhalte zu crawlen, ist die sicherste Methode immer noch das sogenannte „Progressive Enhancement“.

Dieses Prinzip verfolgt den Ansatz, dass Inhalte so aufzubereiten sind, dass sie immer unabhängig von Browser beziehungsweise Crawler verfügbar sind.

Konkret bedeutet dies, dass Texte, Bilder und andere Inhalte, die von einer Suchmaschine gefunden und durchsucht werden sollen, nach Möglichkeit ohne JavaScript auskommen sollen.

Dies bedeutet allerdings für den Webentwickler immer ein oft erheblichen Mehraufwand. Denn jede Seite muss im Grunde auch ohne JavaScript alle Inhalte bereitstellen. Je nach Art und Aufbereitung der Inhalte kommen möglicherweise auch Kompromisse in Frage, bei denen nur wichtige Inhalte auch ohne JavaScript bereitgestellt werden.

Hier musst du abwägen, welcher Aufwand für dein Projekt vertretbar ist.

Korrekte Semantik

Ob mit oder ohne JavaScript: In jedem Fall ist es wichtig, dass deine Inhalte semantisch korrekt ausgezeichnet sind. Auch Überschriften, die per JavaScript geladen werden, müssen mit den entsprechenden HTML-Elementen ausgezeichnet werden.

Denn hier gelten dieselben Regeln wie für normale Inhalte. Letztendlich ist für Google entscheidend, wie der HTML-Quelltext nach dem Ausführen von JavaScript aussieht. Da ist die Wahl der richtigen Elemente entscheidend.

Crawler-Ansicht testen

Entscheidest du dich dazu, Inhalte ausschließlich per JavaScript zu laden (also nicht nach dem „Progressive Enhancement“-Prinzip), solltest du testen, ob Suchmaschinen deine Inhalte tatsächlich korrekt und vollständig sehen und crawlen können.

So hilft dir zum Beispiel die „Search Console“ von Google. Unter „Crawling“ findest du die Funktion „Abruf wie durch Google“. Hier kannst du dir deine Website für Desktop- oder Mobilgeräte so darstellen lassen, wie Google sie tatsächlich crawlt.

Es gibt aber auch andere, meist kostenpflichtige Tools wie SEO.JS und prerender.io, die sich darauf spezialisiert haben, Websites dahingegend zu prüfen, ob JavaScript-Inhalt beim Crawlen korrekt und vollständig dargestellt werden. Bei komplexen Projekten mag das eine sinnvolle Ergänzung sein.