Viele moderne Webseiten nutzen JavaScript, um Dynamik und Interaktivität zu ermöglichen. Obwohl Suchmaschinen-Crawler heutzutage sehr fortgeschritten sind, können sie möglicherweise nicht alle JavaScript-Inhalte korrekt verarbeiten, was sich negativ auf das Ranking in den Suchergebnissen auswirken kann.
Die Darstellung von JavaScript-Inhalten hängt maßgeblich davon ab, wie Ihre Webseite den Code interpretiert.
Beim serverseitigen Rendering beispielsweise, werden die Inhalte der Webseite direkt vom Server bereitgestellt. Der Browser empfängt dann das vollständig gerenderte HTML-Dokument.
Im Gegensatz dazu, wird beim clientseitigen Rendering das JavaScript im Browser mithilfe des DOM (Document Object Model) interpretiert und umgesetzt.
Eine dritte Option ist das dynamische Rendering. Hierbei wird der clientseitig gerenderte Inhalt an den Browser gesendet, während Suchmaschinen die serverseitig gerenderte Version erhalten.
Die gewählte Rendering-Methode hat also direkten Einfluss darauf, wie JavaScript gerendert wird und somit auch auf die Position Ihrer Webseite in den Suchergebnissen.
Um sicherzustellen, dass der gesamte JavaScript-Code Ihrer Webseite korrekt verarbeitet wird, ist es ratsam, bewährte Praktiken im Bereich JavaScript-SEO zu befolgen. Doch zunächst wollen wir klären, was JavaScript-SEO überhaupt bedeutet.
Was versteht man unter JavaScript-SEO?
JavaScript-SEO zielt darauf ab, Suchmaschinen das Crawlen und Indexieren von JavaScript-Code (also dynamischen Inhalten) einer Webseite zu erleichtern. Google und andere Suchmaschinen gehen bei der Verarbeitung von JavaScript in drei Schritten vor: Crawlen, Rendern und Indexieren. Damit dies reibungslos funktioniert, sollten die JavaScript-Inhalte SEO-freundlich gestaltet sein, also sichtbar und zugänglich.
Wie Google JavaScript-Inhalte einer Seite verarbeitet
Hier sind die Schritte, die der Googlebot bei der Verarbeitung von JavaScript durchläuft:
- Eine URL aus der Crawling-Warteschlange wird über eine HTTP-Anfrage angefordert.
- Die Datei robots.txt wird überprüft, um URLs zu finden, deren Crawling die Website untersagt.
- „Verbotene“ URLs werden übersprungen, die Antwort anderer URLs wird analysiert und diese werden der Crawl-Warteschlange hinzugefügt.
- Seiten, die nicht als „nicht indexiert“ markiert sind, werden zum Rendern in die Warteschlange gestellt.
- Die Seite wird mit Chromium gerendert, das JavaScript wird ausgeführt und die Seite wird indexiert.
- Das gerenderte HTML wird erneut auf Links untersucht.
- Die URLs werden zum Crawlen in die Warteschlange gestellt.
Wann kann Google JavaScript-Inhalte nicht indexieren?
Grundsätzlich kann Google JavaScript problemlos indexieren, wenn es richtig implementiert wurde. Wenn jedoch einige Ihrer JS- und CSS-Dateien blockiert sind, kann dies die korrekte Verarbeitung der Webseite durch Google beeinträchtigen. Wenn Links im ursprünglichen HTML-Code vorhanden sind, die im gerenderten HTML fehlen, kann Google das Crawlen oder Indexieren dieser Links möglicherweise überspringen.
Auch wenn JavaScript nicht direkt in das HTML eingebettet ist, muss Google die Datei zum Ausführen herunterladen. Außerdem nutzen Suchmaschinen zur Optimierung der Leistung manchmal eine zwischengespeicherte Version einer Webseite, und das JavaScript auf der Seite ist möglicherweise nicht mit dieser Version synchron.
Da jeder Teil des JavaScript-Codes gelesen werden muss, kann eine übermäßige Nutzung von JavaScript die Ladezeiten der Seite verlängern oder zu Zeitüberschreitungsfehlern führen.
Warum ist JavaScript-SEO von Bedeutung?
JavaScript-SEO ist deshalb wichtig, weil es viele On-Page-Elemente und Ranking-Faktoren beeinflusst, die von Google und anderen Suchmaschinen für die Suchmaschinenoptimierung berücksichtigt werden:
| Onpage-Element | Mögliches SEO-Problem | Mögliche SEO-Lösung |
| Gerenderter Inhalt | Suchmaschinen (wie Google) können Ihre Seite nicht richtig rendern, wenn Ressourcen in der Datei robots.txt Ihrer Webseite blockiert sind. Zusätzlich kann Google blockierte oder versteckte JS- und CSS-Dateien nicht indexieren oder rendern. | Reduzieren Sie JavaScript auf die wesentlichen Inhalte der Seite und erwägen Sie alternative Ansätze für das clientseitige Rendering, wie zum Beispiel serverseitiges Rendering, dynamisches Rendering oder eine Kombination aus beidem (hybrides Rendering). |
| Verlinkungen | Wenn Links intern gesetzt oder durch JavaScript generiert werden, wenn ein Benutzer darauf klickt, kann Google diese Links möglicherweise nicht erkennen. | Verwenden Sie Ankerlinks mit dem Attribut „href“ und beschreibenden Ankertext. Pseudo-Links, die mit
oder -Tags erstellt wurden, werden nicht gecrawlt.
|
| Metadaten | Wenn die Webseite keine Node.js-Pakete wie „vue-meta“ verwendet, werden die Metadaten für die verschiedenen Ansichten/Seiten möglicherweise nicht richtig oder gar nicht von den Suchmaschinen erfasst. | Verwenden Sie Node.js-Pakete wie „react-helmet“, „vue-meta“ oder „react-meta-tags“. |
| Lazy-Loaded-Bilder | Inhalte, die als „Lazy Loading“ markiert sind, werden vom Suchmaschinen-Crawler möglicherweise nicht berücksichtigt. Da Suchmaschinen nicht scrollen können, werden bestimmte Inhalte möglicherweise nie gerendert. | Verwenden Sie die IntersectionObserver-API, die die Sichtbarkeit und Position von DOM-Elementen erkennt, sobald sie verfügbar sind. Alternativ können Sie die native Lazy-Loading-Funktion von Chrome nutzen. |
| Seitenladezeiten | Eine Seite mit umfangreichen JavaScript-Inhalten kann lange Ladezeiten haben, was sich negativ auf das Ranking in den Suchergebnissen auswirken kann. | Fügen Sie kritischen JS-Code inline ein und verschieben Sie unkritischen JS-Code, bis der Hauptinhalt gerendert ist. Dadurch wird die Gesamtmenge des JS-Codes reduziert. |
Bewährte Methoden für JavaScript-SEO
Durch die Anwendung einiger bewährter Praktiken, können wir sicherstellen, dass Suchmaschinen die Seiten besser crawlen und darstellen können:
Links und Bilder gemäß den Webstandards hinzufügen
Fügen Sie alle Links mit dem „ahref“-Tag anstelle von „onclick“, „#pageurl“ oder „window.location.href=’/page-url'“ ein. Google kann diese Links problemlos crawlen und verfolgen.
<a href="https://wdzwdz.com">Willkommen in der Geek-Welt</a>
Fügen Sie Bilder auf die gleiche Weise mit dem Tag „img src“ anstelle von „img data-src“ ein:
<img src="myimg.png" />
Serverseitiges Rendering bevorzugen
Stellen Sie sicher, dass die Inhalte Ihrer Webseite sowohl für den Benutzerbrowser, als auch auf dem Server verfügbar sind.
Sicherstellen, dass das gerenderte HTML alle wichtigen Inhalte enthält
Das gerenderte HTML sollte den korrekten Titel, Meta-Robots, Meta-Beschreibungen, Bilder, strukturierte Daten und kanonische Tags beinhalten.
Ihre JavaScript-Webseite SEO-freundlich gestalten
Um die Implementierung von JavaScript-SEO auf Ihrer Webseite zu testen, können Sie folgende Schritte ausführen:
- Ermitteln Sie, wie viel JavaScript Ihre Webseite verwendet: Dies kann einfach getestet werden, indem Sie JavaScript in Ihrem Browser deaktivieren. Wenn Sie dann nur wenige Inhalte sehen, ist Ihre Webseite stark von JavaScript abhängig.
- Prüfen Sie, ob der Googlebot alle wichtigen Inhalte und Tags empfängt: Verwenden Sie dazu das Tool zum Testen auf Optimierung für Mobilgeräte von Google oder das Testtool für Rich-Suchergebnisse. Damit können Sie herausfinden, wie der Googlebot das Rohtext-HTML zum Rendern von Inhalten verwendet.
- Sie können auch Chrome-Erweiterungen verwenden, wie z. B. View Rendered Source, um zu analysieren, wie JavaScript die Seite verändert und das Quell-HTML mit dem gerenderten HTML zu vergleichen.
- Die wichtigen Tags (Titel, Meta-Beschreibung usw.) im gerenderten HTML lassen sich über SEO Pro Chrome-Erweiterung überprüfen.
Fazit
In diesem Artikel haben wir erfahren, wie JavaScript die SEO-Verarbeitung komplexer gestalten kann und welche Lösungsansätze für potenzielle Probleme bestehen, die durch eine umfangreiche Nutzung von JavaScript im Code entstehen.
Wir haben auch einige Best Practices und Tools kennengelernt, um Ihre JavaScript-Webseite SEO-freundlich zu gestalten. Weitere hilfreiche Tools, die Google dabei unterstützen, dynamische Inhalte zu erkennen und zu crawlen, sind Prerender, AngularJS und Huckaby.
Darüber hinaus können Sie sich mit bewährten Methoden zur Verkürzung der Ladezeiten von Webseiten beschäftigen.
Hat Ihnen der Artikel gefallen? Dann teilen Sie ihn gerne mit anderen!