JavaScript SEO: Was man wissen muss

JavaScript ist ein Begriff, den Sie vielleicht im Zusammenhang mit verschiedenen Kopfschmerzen hören, wenn es um technisches SEO geht, obwohl er das heutzutage nicht unbedingt bedeuten muss. In den frühen Tagen (etwa im Jahr 2008) wurde berichtet, dass Google Probleme beim Crawlen und Rendern von Websites hatte, die mit JavaScript erstellt wurden, wobei die Best-Practice-Empfehlung derzeit lautete, die Verwendung von JavaScript so weit wie möglich zu minimieren.

Die Dinge haben sich jedoch geändert, und das Web hat sich längst von einfachem altem HTML entfernt. Tatsächlich hat Google so gut wie bestätigt, dass es JavaScript-Inhalte nicht anders behandelt als andere Sprachen und Anwendungen. 

Es gibt jedoch eine Reihe von Dingen, auf die Sie achten müssen, wenn Sie es mit einer Website zu tun haben, die mit JavaScript erstellt wurde oder in bestimmten Bereichen in gewissem Maße auf JavaScript-Bibliotheken angewiesen ist. Typische Fallstricke sind das Crawlen, Rendern und schließlich die Indexierung sowie die Sicherstellung, dass der Googlebot in der Lage ist, Inhalte zu erkennen, die über JavaScript auf die gleiche Weise wie bei HTML- oder CSS-Ressourcen abgerufen werden. 

Inhaltsverzeichnis

Aus SEO-Sicht stellt JavaScript eine etwas andere Herausforderung dar als die typische technische SEO-Fehlerbehebung, und es gibt einige Lernkurven. Neben der Auffindbarkeit kann JavaScript unter anderem damit in Verbindung gebracht werden, dass es zu Seitenlade- und Leistungsproblemen beiträgt, und das sind Dinge, nach denen wir Ausschau halten müssen. 

Was ist JavaScript?

Neben HTML und CSS ist JavaScript eine der Kernsprachen des Internets, die zum Ausführen von Website-Code verwendet wird. Es verwendet eine Reihe von Bibliotheken von Drittanbietern, wobei jQuery neben anderen wie React und Angular am beliebtesten ist. Über die Gestaltungs- und Strukturfunktionen von CSS und HTML hinaus ermöglicht JavaScript Seiten die Verwendung interaktiver Elemente. Denken Sie an das letzte Mal, als Sie eine Website-Suche, ein eingebettetes Video oder ein Dropdown-Hamburger-Menü auf einer Website verwendet haben – all dies hätte JavaScript als Mittel zur Ausführung verwendet.

Abgesehen von interaktiven Funktionalitäten, die auf einer Website verstreut sind, kann JavaScript auch verwendet werden, um fast alles auf der Website zu erstellen, um Benutzerinhalte bereitzustellen, normalerweise auf dynamischer Basis. Denken Sie an eBay, Amazon oder eine andere E-Commerce-Website, die Inhalte dynamisch einzieht, wenn bestimmte Such- oder Filtermethoden angewendet werden. In Bezug auf die Identifizierung von JavaScript auf einer Website können Sie mit einem Chrome-Plug-in wie Wappalyzer sehen, ob eine Website mit einer JavaScript-Bibliothek erstellt wurde. Sie können auch „Inspect“ in Ihrem Browser verwenden, um den Code einer Website zu untersuchen, auf dessen Verwendung wir weiter unten näher eingehen werden.

JavaScript ist dem Web also sicher nicht fremd. Meistens verhindert es keine größeren SEO-Überlegungen (vielleicht über die Website-Geschwindigkeit hinaus), wenn es auf einer Website sparsam verwendet wird, um die Funktionalität bereitzustellen. Wenn jedoch eine Website mit starker Abhängigkeit von JavaScript erstellt wird, gibt es Überlegungen zum Umgang mit Googlebot. Angesichts der zunehmenden Popularität der Verwendung von JS-Frameworks auf öffentlich zugänglichen Front-End-Websites ist es wichtig, genauer zu verstehen, welche Auswirkungen diese haben, wenn es um das Crawlen und Indizieren der Seiten Ihrer Website durch den Googlebot geht.

Google und JavaScript: Wie sie interagieren

Obwohl es viele Dokumentationen und Leitfäden zu diesem Thema gibt, gibt es viele widersprüchliche Informationen darüber, wie der Googlebot beim Crawlen und Indizieren einer Seite einer Website mit JavaScript funktioniert. Wie wir bereits beschrieben haben, besteht kein Grund zur großen Panik, wenn Sie an einer überwiegend JavaScript-zentrierten Website arbeiten, da es viele Überlegungen gibt, damit die Dinge funktionieren. Es ist wahr, wie Google bestätigt hat, dass Google JS-Sites crawlen und indexieren kann. Es gibt jedoch tatsächlich Vorbehalte, die es zu erforschen und zu beachten gilt.

Wenn Sie dies in einen schrittweisen Prozess aufteilen, wird der Googlebot zuerst die URLs crawlen, die in der anfänglichen Warteschlange gecrawlt wurden. Der Crawler sendet dann eine GET-Anforderung an den Server, der wiederum mit den Headern und Inhalten der HTML-Datei antwortet und aufgrund von Rendering-Ressourcen auf Seiten von Google zunächst nicht mit JavaScript. Dazu gehören Elemente wie Seitengröße, Titel, Beschreibung, Header-Tags, Links und Inhalt, um nur einige zu nennen. JavaScript-Ressourcen werden dann zur Verarbeitung in der „zweiten Welle“ der Indizierung durch Google Web Rendering Services (WRS) in die Warteschlange gestellt, wobei Google HTML indiziert, nachdem das JS ausgeführt wurde. 

Der entscheidende Punkt hier ist, dass Websites, die stark auf JS angewiesen sind, aufgrund der aus Sicht von Google zum Parsen und Ausführen erforderlichen Ressourcen beim Crawlen und eventuellen Indizieren verzögert werden können. Dies kann zu einigen Problemen führen, insbesondere in Bezug auf die Fähigkeit von Google, Websites zu crawlen, zu rendern und zu indizieren, die Websitestruktur, interne Links und verschiedene Metaelemente zu verstehen.

Typische JS-Herausforderungen für Googlebot

Wie wir beschrieben haben, können eine Reihe wichtiger Herausforderungen für den Googlebot während dieses Prozesses die Fähigkeit der Website beeinträchtigen, in den Suchergebnissen von Google gut abzuschneiden. 

Beispielsweise kann Google JavaScript auf einigen Frameworks viel besser indizieren als auf anderen. Es hängt oft von einer fallweisen Implementierung ab und davon, wie dieses Framework bereitgestellt wird. Beachten Sie, dass der Googlebot verschiedene JS-Frameworks und -Builds auf unterschiedliche Weise behandelt. Es kann einige Fälle geben, in denen Google den Inhalt rendern kann, obwohl es je nach Konfiguration möglicherweise nicht in der Lage ist, interne Links zu crawlen, die mit dem Framework erstellt wurden, je nachdem, wie es erstellt wurde. Dies kann zu allen Arten von Problemen führen, ungeachtet des Autoritätsflusses zu Seiten in Ihrer internen Verlinkungsreise sowie zu Problemen mit verwaisten URLs

Sie können auch auf Renderprobleme stoßen, die im Rahmen Ihres Renderbudgets zu einer langsameren Indexierung als gewünscht führen. 

Hier sind einige weitere häufige Probleme:

Unterschiede darin, wie Nutzer Inhalte im Vergleich zum Googlebot sehen

Während uns immer wieder gesagt wird, wir sollten „für den Benutzer optimieren“, berücksichtigt dies nicht viele Variablen, die unter das technische SEO-Radar fallen, insbesondere wenn man sich JavaScript ansieht. Nehmen Sie zum Beispiel eine E-Commerce-Website, auf der das Klicken auf bestimmte Schaltflächen mehr Kaufoptionen und Kategorien, dh Inhalte, anzeigt. Der Googlebot klickt nicht auf Schaltflächen, um auf diese Inhalte auf einer Webseite zuzugreifen, daher müssen Sie sicherstellen, dass sie auffindbar sind. Wenn Ihre Website auf diese Art von Aktion angewiesen ist, um Inhalte auf die Seite zu ziehen, wird Google sie nicht sehen und rendern. Die Lösung hier besteht darin, sicherzustellen, dass der Inhalt ohne erforderliche Maßnahmen in das DOM geladen wird, damit der Googlebot ihn sieht. 

Google ruft möglicherweise nicht jede Ressource ab

Der Googlebot und sein Web-Rendering-Dienst analysieren und identifizieren kontinuierlich Ressourcen, die nicht zu wesentlichen Seiteninhalten beitragen, und rufen solche Ressourcen möglicherweise nicht ab, sodass möglicherweise nicht jede Ressource angefordert wird. Wenn sich eine Seite nach dem Rendern nicht wesentlich ändert, kann Google außerdem entscheiden, eine Seite in Zukunft nicht mehr zu rendern, um Ressourcen zu sparen. Dies bedeutet, dass Google möglicherweise wichtige Inhalte auf Ihrer Seite ignoriert, was die Ranking-Chance beeinträchtigt. 

Google kann immer noch nicht alles sehen

Obwohl der Googlebot auf der neuesten Version von Chrome läuft, hat Google angegeben, dass er immer noch nicht alles sehen kann. Auf der Google I/O-Entwicklerkonferenz im Mai 2019 sagte Google: „Obwohl der Googlebot JavaScript ausführt, gibt es einige Unterschiede und Einschränkungen, die Sie berücksichtigen müssen, wenn Sie Ihre Seiten und Anwendungen entwerfen, um zu berücksichtigen, wie Crawler auf Ihre Inhalte zugreifen und diese darstellen.“ . Google hat einen Beitrag zur Behebung suchbezogener JavaScript-Probleme erstellt , in dem weitere JS-SEO-bezogene Fallstricke wie unter anderem Soft-404-Fehler aufgeführt sind.

Es besteht die Möglichkeit, dass Seiten auf neuen Websites als Duplikate angesehen werden

Bei App-Shell-Modellen (wie React) ist die HTML-Rückgabe bei der ursprünglichen Anfrage oft begrenzt und kann auf allen Seiten gleich sein. Dies kann zu Problemen führen, wenn Seiten als ähnlich oder als Duplikate angesehen und nicht an die Wiedergabewarteschlange gesendet werden. 

All dies bedeutet, dass es für Google kein einfacher und konsistenter Prozess ist, JS-basierte Websites zu crawlen, zu rendern und zu indizieren. Die Anzahl der Fehlerpunkte nimmt erheblich zu, was sich auf die organische Sichtbarkeit und das Ranking auswirken kann. Lösungen zur Verringerung dieser Herausforderungen werden im Folgenden erörtert. 

So testen Sie, ob Google JavaScript-basierte Inhalte sehen kann

Wenn Sie auf eine JS-lastige Website stoßen, ist Ihre erste Anlaufstelle, zu testen, ob Google sie korrekt verarbeitet. Es müssen drei Tests durchgeführt werden, um dies festzustellen, und wir empfehlen, alle durchzuführen, um sicherzustellen, dass alle Ihre Grundlagen abgedeckt sind. 

Google Search Console

Es ist wahrscheinlich am besten, zu überprüfen, was die Google Search Console sagt. Überprüfen Sie eine URL im Tool, indem Sie sie in die obere Suchleiste einfügen, um diese Fragen zu beantworten: 

  • Wird der Hauptinhalt geladen? 
  • Ist die Navigation sichtbar? 
  • Ist das Design und Layout der Seite sichtbar? 
  • Wird die Seite ohne Probleme oder Fehler geladen? 

Sie können dies tun, indem Sie den gerenderten HTML-Code auf der rechten Seite überprüfen, um sicherzustellen, dass Google alle relevanten Links, On-Page-SEO-Elemente und mehr aufgreift. Überprüfen Sie die Registerkarte „Screenshot“, um zu sehen, ob die Seite in Bezug auf ihr Layout richtig angezeigt wird, und überprüfen Sie schließlich die Registerkarte „Weitere Informationen“ und überprüfen Sie das Fehlerprotokoll. Es zeigt eine Liste von JavaScript-Fehlern, die beim Rendern der Seite aufgetreten sind, oder eine Liste blockierter Ressourcen. Von hier aus können weitere Untersuchungen und Fehlerbehebungen durchgeführt werden, um festzustellen, warum bestimmte Inhalte oder Elemente nicht für Google geladen wurden, abgesehen von Dingen wie Ressourcen, die aufgrund von robots.txt-Anweisungen blockiert wurden.

Überprüfen Sie die Seite in Google Chrome

Laden Sie Ihre betreffende Seite in Google Chrome, klicken Sie dann mit der rechten Maustaste und wählen Sie „Inspizieren“. Dies zeigt Ihnen die vollständig gerenderte HTML-Version des Codes. Darin können Sie mit STRG+F nach Inhalten auf der Seite suchen, um sicherzustellen, dass sie im Code sichtbar sind. Markieren Sie außerdem das Element Ihrer Seite, das JavaScript verwendet, indem Sie mit der rechten Maustaste darauf klicken und erneut auf „Inspizieren“ klicken, um den Code hervorzuheben. Dadurch wird der Code, den Sie untersuchen möchten, in Ihrem Codeinspektionsfenster lokalisiert, wo Sie ihn erweitern und herausfinden können, ob Elemente wie Links oder Titel vorhanden sind.

Hier ist es entscheidend zu prüfen, ob die Links die richtigen Anchor-Tags mit href-Attribut verwenden und korrekt ausgezeichnet sind. Andernfalls kann Google diese Seiten nicht crawlen oder entdecken. Google kann Links nur folgen, wenn es sich um ein <a>-Tag mit einem href-Attribut handelt. Links, die andere Formate verwenden, werden von den Crawlern von Google nicht verfolgt. 

Überprüfen Sie, ob der Inhalt in Google indexiert wurde

Ungeachtet dessen, was die Google Search Console und Ihr Quellcode Ihnen möglicherweise sagen, ist es wahrscheinlich am besten, zu überprüfen, was in der Google-Suche selbst angezeigt wird. Verwenden Sie den Befehl Google Site Search in der Google-Suche, um zu suchen, ob die URL selbst indexiert ist, und wiederholen Sie diesen Vorgang dann für mehrere Sätze in verschiedenen Vorlagen, um sicherzustellen, dass der gesamte Inhalt indexiert wurde. 

Es ist wichtig zu beachten, dass Sie sich möglicherweise in der zweiten Phase der Indexierung befinden, wenn die Seite gerade live geschaltet wurde. Wenn seit dem Start der Seite mehrere Wochen vergangen sind, ist dies wahrscheinlich ein Hinweis auf Crawling-Probleme. Wenn der Inhalt nicht gefunden werden kann, ist dies ein Hinweis darauf, dass Google das JS nicht korrekt verarbeitet und weitere Untersuchungen erforderlich sind. 

Zusammenfassen:

  • Der Crawling-, Rendering-, Indizierungs- und Ranking-Prozess für eine JS-Website kostet Google viel mehr Ressourcen, die verarbeitet und verstanden werden müssen, als dies bei allgemeinen HTML- und CSS-Ressourcen der Fall ist
  • Obwohl der Googlebot seine Fähigkeit verbessert hat, JS zu rendern und zu verstehen, wie Inhalte eingezogen werden, gibt es auf dem Weg dorthin eine Reihe von Fehlerpunkten. Dazu gehört, wie Google entscheiden kann, eine bestimmte Ressource zu priorisieren oder eine Seite in Zukunft sogar nicht zu rendern
  • Änderungen an einzelnen Seiten, die nur mit JS wirksam sind, können aufgrund eines längeren Warteschlangenprozesses länger dauern, bis sie sich in den SERPs widerspiegeln.
  • Google kann Links nur folgen, wenn es sich um ein <a>-Tag mit einem href-Attribut handelt. Links, die andere Formate verwenden, werden von den Crawlern von Google nicht verfolgt. 

Um sicherzustellen, dass Ihre Website erfolgreich und konsistent von Google gecrawlt, indexiert und gerendert wird, wird im Allgemeinen empfohlen, eine Lösung zu finden, die es ermöglicht, den vollständig gerenderten HTML-Code dem Googlebot anzuzeigen. Dies kann durch einen Blick auf Optionen wie serverseitiges Rendering und dynamisches Rendering erfolgen, die wir im Folgenden durchgehen werden.  

Was ist dynamisches Rendern?

Das hier beschriebene dynamische Rendering ist auch die bevorzugte Lösung für Bingbot. Es ermöglicht Websites, die harte Arbeit für Suchmaschinen auf der Serverseite zu erledigen und die gerenderte Version für sie bereitzustellen.

Dynamisches Rendering wird von den Suchmaschinen nicht als Cloaking betrachtet und stellt sicher, dass sie alle Inhalte und Links sehen können, ohne einen umfangreichen Rendering-Prozess durchlaufen zu müssen. Es eignet sich gut für indexierbare, JS-generierte Inhalte, die sich schnell ändern. Es gibt bestimmte Tools und/oder Dienste, die bei der Implementierung helfen können – Prerender.io, Puppeteer oder Rendertron zusammen mit den Implementierungsrichtlinien von Google

Was ist mit serverseitigem Rendern?

Serverseitiges Rendering (SSR) bietet eine Reihe von Optionen, die je nach Anwendung untersucht werden können. Die folgende Tabelle von Google hebt diese Optionen zusammen mit ihren Vor- und Nachteilen hervor.

Je nach Framework gibt es Tools, die bei der Umsetzung von serverseitigem Rendering helfen können: 

  • Reagieren – Next.js
  • Eckig – Eckig Universell
  • Vue.js – Nuxt.js

Auf der positiven Seite erhalten mit SSR alle Suchmaschinen (nicht nur Google) und Benutzer den vollständigen Code mit allen für SEO erforderlichen Elementen. Es kann auch die Zeit reduzieren, die für den First Contentful Paint benötigt wird, eine von Google gemessene Metrik für die Seitenerfahrung, obwohl es die Zeit bis zum ersten Byte erhöhen kann, da alles in Echtzeit geschieht. Dies ist jedoch ein erwägenswerter Kompromiss.  

Was kann ich gegen die Seitengeschwindigkeit tun?

Wir haben in diesem Leitfaden ein paar Mal darauf angespielt, dass die übliche Assoziation mit JavaScript-Ressourcen wichtige Seitengeschwindigkeitsmetriken nach unten zieht. Google hat diese Metrik mit seinem jüngsten Core Web Vitals-Vorstoß in sein Toolset und seine Messtools wie Lighthouse integriert, und es handelt sich um Metriken, die routinemäßig als Bereiche mit Verbesserungspotenzial in der Branche betrachtet werden.

Um die potenziell hohe Nutzlast von JavaScript zu reduzieren, suchen Sie nach Möglichkeiten, wie Sie Ihre JS-Ressourcen minimieren oder, noch besser, nicht kritische JS-Ressourcen zurückstellen können, bis der Hauptinhalt im DOM gerendert wird. Es kann auch eine Option sein, kritisches JS auf Ihrer Website zu integrieren. JavaScript ist eine teure Ressource für Suchmaschinen und Server, also suchen Sie immer nach Möglichkeiten, wie Sie Ihren Code auf Ihrer Website verkleinern, komprimieren und optimieren können.

Was ist mit anderen Suchmaschinen?

Dieser Leitfaden hat sich speziell auf den Googlebot konzentriert, und das zu Recht angesichts des Marktanteils, den die Suchmaschine hat. Es gibt jedoch andere Regionen, in denen andere Suchmaschinen eine wichtigere Rolle spielen und die Indexierung von JS einer breiteren Betrachtung bedarf. In Bezug auf das Rendering von JS können Sie nicht davon ausgehen, dass das, was für Googlebot funktioniert, auch für andere funktioniert – Google ist eine fortschrittlichere Suchmaschine mit einer fortschrittlicheren Crawl-, Rendering- und Indexierungs-Engine. 

Ausgehend von der bis vor kurzem laufenden Dokumentation (mit dem unten stehenden Diagramm von Moz aus dem Jahr 2017) ist es nach wie vor so, dass die meisten anderen Suchmaschinen keine JS-Inhalte verarbeiten können. 

dass die meisten anderen Suchmaschinen keine JS-Inhalte verarbeiten können
Quelle: moz.com

Was sollte ich fragen, wenn mein Unternehmen oder Kunde sich stark auf JavaScript verlässt?

Hoffentlich haben wir eine Reihe gängiger SEO-Überlegungen und Fallstricke skizziert, die mit der Verwendung von JavaScript einhergehen. Suchmaschinen werden sicherlich immer schlauer und können JS-generierte Inhalte in Zukunft nur noch effizienter verarbeiten und rendern. Letztendlich kommt es darauf an sicherzustellen, dass Sie alles tun, um Google so viel wie möglich von Inhalt, Struktur und Verlinkung Ihrer Website zu zeigen. 

Hier sind einige Punkte zum Mitnehmen: 

  • Machen Sie sich mit dem Verständnis oder den Plänen Ihres Kunden bezüglich der Bereitstellung von vollständig gerenderten HTML-Inhalten (DOM) für Browser und/oder Suchmaschinen vertraut. 
  • Verstehen Sie, was Ihre Konkurrenten in ihren JavaScript-Frameworks tun und wie sich die Leistung unterscheidet. Mit einer Vielzahl von Crawling-Tools von Drittanbietern können Sie darüber ziemlich viel herausfinden.
  • Verschaffen Sie sich einen Überblick über das aktuelle Framework-Setup und alle Änderungen, die vorgenommen werden müssen, um sicherzustellen, dass die Website von Suchmaschinen gefunden werden kann. Ist die Umstellung auf serverseitiges oder dynamisches Rendering eine Option? Wie werden Dinge so wie sie sind von Google entdeckt? 
  • Wie werden interne Links entdeckt und mit den richtigen Href-Links ausgezeichnet? 

Interesse geweckt?

Dann lassen Sie uns doch gemeinsam einmal schauen, wo es aktuell noch Potenzial für Verbesserungen für Ihr Unternehmen gibt.

DSGVO Cookie-Einwilligung mit Real Cookie Banner