Javascript SEO einfach erklärt
Javascript SEO ist die Optimierung von Websites, die auf Javascript basieren, so dass sie von Suchmaschinen korrekt indexiert und in den Suchergebnissen angezeigt werden.
Inhalt
Warum ist Javascript SEO wichtig?
Moderne Internetauftritte verwenden häufig Javascript, um dynamische Inhalte und interaktive Nutzererlebnisse zu bieten und so die Nutzer länger auf der Website zu halten. Darüber hinaus ermöglicht die Programmiersprache die Personalisierung und Anpassung von Inhalten an den Nutzer. Heutzutage werden sogar ganze Webanwendungen mit Javascript Frameworks wie Angular oder React entwickelt.
Die Verwendung von Javascript stellte ursprünglich eine Herausforderung für die Suchmaschinenoptimierung (SEO) dar, da der Google-Bot, das automatische Programm zum Crawlen und Indexieren von Webseiten, ursprünglich nur statische HTML-Seiten verarbeiten konnte.
Aufgrund der Tatsache, dass JavaScript-Code clientseitig im Browser des Nutzers ausgeführt wird, waren Inhalte, die mittels JavaScript dynamisch geladen (z. B. AJAX-Aufrufe) oder verändert wurden, für den Google-Crawler nicht sichtbar. Erst nach und nach hat Google seine Rendering-Fähigkeiten optimiert, und kann heute die meisten JavaScript-Inhalte problemlos verarbeiten.
Eine gute Javascript SEO stellt sicher, dass dieser Content von Suchmaschinen erfasst und bewertet werden kann, was für die Sichtbarkeit und Auffindbarkeit der Website entscheidend ist.
Wie funktioniert Javascript SEO?
Google verarbeitet Javascript in drei Schritten:
- Crawling
Der Google-Bot holt sich eine URL aus seiner Warteschlange ab und prüft anhand der robots.txt-Datei, ob sie gecrawlt werden darf. Anschließend wird der HTML-Code ausgelesen und indexiert.
- Rendering
Seiten, die JavaScript benötigen, werden in eine separate Warteschlange gestellt. Google rendert diese Seiten mit einer aktuellen Version von Chromium und führt den Javascript-Code aus. Aufgrund der hohen Kosten und Ressourcen kann dies einige Zeit in Anspruch nehmen.
- Indexierung
Das gerenderte HTML wird anschließend indexiert. Erst jetzt ist der gesamte Inhalt der Seite im Google-Index sichtbar und kann von Nutzern gelesen werden. Zuvor wurde nur der Inhalt des ursprünglichen HTML-Contents indexiert.
Bei Webseiten, die stark auf Javascript setzen, kann es vorkommen, dass diese Bots den Inhalt nicht sofort „sehen“ können. Hier kommen die folgenden Rendering-Prozesse ins Spiel:
- Client-Side Rendering (CSR): Der Inhalt wird erst nach dem Laden der Seite im Browser dargestellt. Suchmaschinen-Bots müssen Javascript ausführen, um den Inhalt sehen zu können.
- Server-Side Rendering (SSR): Der Inhalt wird vollständig auf dem Server gerendert und als HTML an den Browser geschickt. Dies erleichtert die Indexierung durch Suchmaschinen.
- Dynamisches Rendering: Eine hybride Lösung, bei der der Server entscheidet, ob der Inhalt server- oder clientseitig gerendert wird, und zwar auf der Grundlage des User-Agents. Handelt es sich um einen normalen Nutzer, wird die Javascript-Variante der Webseite geliefert, die im Browser gerendert wird. Suchmaschinen-Bots erhalten eine vorgerenderte, statische HTML-Version. Wichtig: Google sieht dynamisches Rendern in der Regel nicht als Cloaking an.
Dynamisches Rendering kann in spezifischen Situationen eine Lösung für Javascript-SEO-Probleme sein (z. B. bei großen Webseiten mit sich rasch ändernden Inhalten, die schnell in den Index müssen), wird aber nicht generell für alle Javascript-basierten Websites empfohlen.
Best Practices für Javascript SEO
Damit Deine Website auch bei umfangreichem Javascript optimal von Suchmaschinen erfasst wird, solltest Du neben Server-Side Rendering weitere Best Practices berücksichtigen.
- Progressive Enhancement: Inhalte und Funktionen der Website werden so gestaltet, dass sie auch ohne Javascript funktionieren und dann durch Javascript verbessert werden. So können Nutzer und Suchmaschinen in jedem Fall auf die zentralen Inhalte Deiner Seiten zugreifen.
- Prerendering: Durch statisches Prerendering generierst Du fertige HTML-Seiten im Voraus, die dann an Suchmaschinen-Bots gesendet werden.
- Priorisierung: Stelle wichtige Inhalte im ursprünglichen HTML-Code zur Verfügung, anstatt sie ausschließlich über Javascript zu laden. Auf diese Weise kann der Content selbst bei verzögertem Rendering in den Index gelangen.
- Crawling zulassen: Blockiere keine relevanten Javascript-Dateien in der robots.txt-Datei. Achte darauf, dass Google Zugriff auf alle Ressourcen hat, die für das Crawlen und Rendern Deiner Seiten erforderlich sind.
- SEO-Audits: Führe regelmäßig technische SEO-Audits durch, um Javascript-bedingte Probleme frühzeitig zu erkennen und zu beheben.
- Testing: Nutze das URL-Prüftool in der Google Search Console, um zu überprüfen, wie Google Deine Seiten rendert.
- Zusammenarbeit mit Entwicklern: Arbeite eng mit Entwicklern zusammen, damit SEO-freundliche Javascript-Implementierungen gewährleistet sind.
Javascript SEO: Häufige Probleme und Lösungen
Nachfolgend sind einige häufige Herausforderungen im Zusammenhang mit Javascript SEO aufgeführt und wie Du diese am besten löst.
Fehlende Indexierung von Javascript-generiertem Inhalt
- Problem: Suchmaschinen haben oft Schwierigkeiten, dynamisch geladene Inhalte zu lesen. Dies kann dazu führen, dass Informationen nicht indexiert werden und somit in den Suchergebnissen fehlen.
Lösung: Verwende u. a. Server-Side Rendering, um Inhalte ohne die Ausführung von Javascript bereitzustellen. Diese Techniken sorgen dafür, dass Suchmaschinen alle relevanten Informationen bereits beim ersten Laden der Seite erfassen können.
Langsame Ladezeiten
- Problem: Eine übermäßige Verwendung von Javascript kann die Geschwindigkeit Deiner Website erheblich beeinträchtigen, was zu einer schlechteren Nutzererfahrung und einem schlechteren Suchmaschinenranking führen kann.
Lösung: Reduziere die Anzahl und Größe der Javascript-Dateien. Nutze Techniken wie Code-Splitting und Lazy-Loading, um nur die Skripte zu laden, die tatsächlich benötigt werden. Dadurch wird die Ladezeit Deiner Seite optimiert und die Performance verbessert.
Probleme beim Crawlen von Links
- Problem: Mit Javascript erzeugte Links können für Suchmaschinen schwer zu erkennen sein, was dazu führt, dass wichtige Seiten nicht gecrawlt und indexiert werden.
Lösung: Achte darauf, dass alle wichtigen Links im HTML-Code vorhanden sind und nicht ausschließlich durch Javascript erzeugt werden. So können Suchmaschinen alle relevanten Seiten Deiner Website finden.
Falsche Strukturierung von Inhalten
- Problem: Javascript kann die Struktur Deiner Seite verändern und zu Problemen bei der Indexierung führen, da Suchmaschinen Schwierigkeiten haben, den betreffenden Inhalt richtig zu interpretieren.
Lösung: Stelle sicher, dass wesentliche SEO-Elemente wie Überschriften, Meta-Tags und das Canonical Tags im ursprünglichen HTML-Code korrekt platziert sind. Dies hilft Suchmaschinen, den Inhalt Deiner Seite besser zu verstehen und richtig zu indexieren.
Unterschiedliche Inhalte in HTML und nach Ausführung von Javascript
- Problem: Wenn Google die Seite rendert, können Unterschiede zwischen dem ursprünglichen HTML und dem durch Javascript generierten Inhalt zu widersprüchlichen Signalen führen.
Lösung: Versichere Dich, dass kritische SEO-Inhalte bereits im initialen HTML-Code vorhanden sind und nicht erst durch Javascript hinzugefügt werden. Dadurch wird sichergestellt, dass alle wichtigen Informationen sofort verfügbar sind und korrekt indexiert werden. Beispielsweise würde ich es vermeiden, wenn man den SEO-Title oder auch eine Noindex-Anweisung in Javascript schreibt.