Alles, was Sie über JavaScript-SEO wissen müssen

Fragen Sie irgendeinen Programmierer und er wird Ihnen sagen, was er über JavaScript denkt.

Seit seiner Veröffentlichung ist JavaScript (JS) die beliebteste Programmiersprache, die von Webentwicklern auf der ganzen Welt verwendet wird. Eine aktuelle Umfrage von Stack Overflow unter Webentwicklern zeigt, dass JavaScript seit acht Jahren in Folge die am meisten bevorzugte Programmiersprache ist.

Mit JS können Webentwickler mühelos umfangreiche Webanwendungen erstellen. Es hat eine außergewöhnliche Fähigkeit, Seiten dynamisch zu aktualisieren und sie interaktiver zu machen. Darüber hinaus reduzieren JavaScript-Frameworks wie AngularJS, ReactJS, Vue und NodeJS den Zeit- und Arbeitsaufwand für die Entwicklung JS-basierter Websites erheblich. Kein Wunder, dass JavaScript die Basis von 96 Prozent aller Websites weltweit bildet.

Dennoch scheinen JS-basierte Websites eine Hassliebe zu Google zu haben. JavaScript kann HTML einfach steuern und ändern, um die Webseiten dynamisch und interaktiv zu gestalten und so die UX der Website zu verbessern. Suchmaschinen finden es jedoch schwierig, mit JS umzugehen, und lassen die meisten JavaScript-Inhalte nicht indiziert.

Lassen Sie uns etwas genauer untersuchen, warum JavaScript die Arbeit von Google erschwert und was Sie tun können, um Ihre JS-Inhalte botfreundlich zu gestalten.

Wie wirkt sich Javascript auf SEO aus?

JavaScript ermöglicht ein schnelles Laden der Seiten, bietet eine reichhaltige Benutzeroberfläche und ist einfach zu implementieren. Die Browser-Fluidität ändert sich jedoch basierend auf der Benutzerinteraktion, was es für Suchmaschinen schwierig macht, die Seite zu verstehen und dem Inhalt einen Wert zuzuordnen.

Suchmaschinen haben ihre Grenzen beim Rendern von Webseiten, die JavaScript-Inhalte enthalten. Google führt einen anfänglichen Crawl der Seite durch und indiziert, was es findet. Sobald Ressourcen verfügbar sind, kehren die Bots zum Rendern von JS auf diesen Seiten zurück. Das bedeutet, dass Inhalte und Links, die auf JavaScript basieren, Gefahr laufen, von Suchmaschinen nicht gesehen zu werden, was möglicherweise der SEO der Website schadet.

Quelle

Google weiß jedoch, dass JavaScript hier ist, um zu bleiben! Infolgedessen hat der Suchmaschinengigant einen Großteil seiner Ressourcen darauf verwendet, Suchprofis bei der Optimierung ihrer JS-basierten Websites zu unterstützen.

Sehen Sie sich diese Videoserie über JavaScript-SEO von Google an, die dabei helfen kann, Ihre JS-Inhalte online besser auffindbar zu machen.

SEO-Experten müssen ihre JS-basierten Webseiten in ein Format bringen, das Google zu schätzen weiß. Mit ein wenig Verständnis dafür, wie Suchmaschinen JS-Inhalte verarbeiten, können JavaScript und SEO zusammenarbeiten, um das Ranking Ihrer Website zu verbessern.

Wie verarbeiten Suchmaschinen JavaScript?

Google-Bots verarbeiten JS anders als eine Nicht-JS-Seite. Bots verarbeiten sie in drei Phasen, nämlich Crawlen, Indizieren und Rendern. Diese Phasen sind dank der folgenden Grafik von Google Developers leicht verständlich:

Quelle

Krabbeln

In dieser Phase geht es um die Auffindbarkeit Ihrer Inhalte. Es ist ein komplizierter Prozess, der Unterprozesse umfasst, nämlich Seed-Sets, Crawl-Warteschlangen und -Planung, URL-Wichtigkeit und andere.

Zunächst stellen die Bots von Google die Seiten zum Crawlen und Rendern in eine Warteschlange. Die Bots verwenden das Analysemodul, um Seiten abzurufen, Links auf den Seiten zu folgen und bis zu einem Punkt zu rendern, an dem die Seiten indiziert sind. Das Modul rendert nicht nur Seiten, sondern analysiert auch den Quellcode und extrahiert die URLs in den <a href=“…“> Snippets.

Die Bots überprüfen die robots.txt-Datei, um festzustellen, ob das Crawlen erlaubt ist oder nicht. Wenn die URL als unzulässig markiert ist, überspringen die Bots sie. Daher ist es wichtig, die robots.txt-Datei zu überprüfen, um Fehler zu vermeiden.

Rendern

Der Prozess der Anzeige des Inhalts, der Vorlagen und anderer Funktionen einer Website für den Benutzer wird als Rendering bezeichnet. Es gibt serverseitiges Rendering und clientseitiges Rendering.

Serverseitiges Rendern (SSR)

Wie der Name schon sagt, werden bei dieser Art des Renderns die Seiten auf dem Server gefüllt. Bei jedem Zugriff auf die Website wird die Seite auf dem Server gerendert und an den Browser gesendet.

Mit anderen Worten, wenn ein Benutzer oder Bot auf die Website zugreift, erhält er den Inhalt als HTML-Markup. Dies hilft normalerweise der SEO, da Google das JS nicht separat rendern muss, um auf den Inhalt zuzugreifen. SSR ist die traditionelle Rendering-Methode und kann sich in Bezug auf die Bandbreite als kostspielig erweisen.

Clientseitiges Rendern

Clientseitiges Rendern ist eine relativ neue Art des Renderns, die es Entwicklern ermöglicht, ihre vollständig im Browser mit JavaScript gerenderten Websites zu erstellen. Anstatt also eine separate HTML-Seite pro Route zu haben, ermöglicht das clientseitige Rendering, dass jede Route dynamisch direkt im Browser erstellt wird. Obwohl diese Art des Renderns anfangs langsam ist, da sie mehrere Runden zum Server durchläuft, ist die Erfahrung durch das JS-Framework schnell, sobald die Anforderungen abgeschlossen sind.

Um auf das zurückzukommen, was passiert, nachdem eine Seite gecrawlt wurde, identifizieren die Bots die Seiten, die gerendert werden müssen, und fügen sie der Render-Warteschlange hinzu, es sei denn, das Robots-Meta-Tag im Roh-HTML-Code weist den Googlebot an, die Seite nicht zu indexieren.

Die Seiten verbleiben einige Sekunden in der Renderwarteschlange, können jedoch je nach Menge der verfügbaren Ressourcen einige Zeit in Anspruch nehmen.

Quelle

Sobald die Ressourcen dies zulassen, rendert, parst und kompiliert der Google Web Rendering Service (WRS) die Seiten und führt das JavaScript auf der Seite aus. Der Bot analysiert den gerenderten HTML-Code erneut auf Links und stellt die gefundenen URLs zum Crawlen in eine Warteschlange. Das gerenderte HTML wird zum Indizieren der Seite verwendet.

Indizierung

Sobald der WRS die Daten von externen APIs und Datenbanken abgerufen hat, kann der Caffeine-Indexer bei Google den Inhalt indizieren. In dieser Phase wird die URL analysiert, der Inhalt der Seiten und ihre Relevanz verstanden und die gefundenen Seiten im Index gespeichert.

So optimieren Sie JavaScript für SEO

JavaScript kann bei falscher Implementierung Ihre SEO ruinieren. Befolgen Sie diese Best Practices für Javascript-SEO, um das Ranking Ihrer Website zu verbessern.

Seien Sie hartnäckig bei Ihren On-Page-SEO-Bemühungen

Alle On-Page-SEO-Regeln, die in die Optimierung Ihrer Seite einfließen, um ihnen zu helfen, in Suchmaschinen zu ranken, gelten weiterhin. Optimieren Sie Ihre Titel-Tags, Meta-Beschreibungen, Alt-Attribute in Bildern und Meta-Roboter-Tags. Eindeutige und beschreibende Titel und Meta-Beschreibungen helfen Benutzern und Suchmaschinen, den Inhalt leicht zu identifizieren. Achten Sie auf die Suchabsicht und die strategische Platzierung semantisch verwandter Keywords.

Außerdem ist es gut, eine SEO-freundliche URL-Struktur zu haben. In einigen Fällen implementieren Websites eine PushState-Änderung in der URL, was Google verwirrt, wenn es versucht, die kanonische URL zu finden. Stellen Sie sicher, dass Sie die URLs auf solche Probleme überprüfen.

Stellen Sie sicher, dass Ihr JavaScript in der DOM-Struktur angezeigt wird

Das JavaScript-Rendering funktioniert, wenn das DOM einer Seite ausreichend geladen ist. Das DOM oder Document Object Model zeigt die Struktur des Seiteninhalts und die Beziehung der einzelnen Elemente zueinander. Sie finden es im „Inspect-Element“ des Browsers auf dem Seitencode. DOM ist die Grundlage der dynamisch generierten Seite.

Wenn Ihre Inhalte im DOM angezeigt werden, besteht die Möglichkeit, dass Ihre Inhalte von Google analysiert werden. Durch die Überprüfung des DOM können Sie feststellen, ob Ihre Seiten von den Suchmaschinen-Bots aufgerufen werden oder nicht.

Bots überspringen das Rendern und die JS-Ausführung, wenn das Meta-Robots-Tag anfänglich noindex enthält. Der Googlebot löst keine Ereignisse auf einer Seite aus. Wenn der Inhalt der Seite mit Hilfe von JS hinzugefügt wird, sollte dies erfolgen, nachdem die Seite geladen wurde. Wenn der Inhalt beim Klicken auf die Schaltfläche, beim Scrollen der Seite usw. zum HTML hinzugefügt wird, wird er nicht indiziert.

Wenn Sie strukturierte Daten verwenden, verwenden Sie schließlich JavaScript, um das erforderliche JSON-LD zu generieren und es in die Seite einzufügen. Lernen Sie nebenbei etwas über die besten On-Page-SEO-Tricks, die Sie von Anfang an implementieren sollten.

Vermeiden Sie es, Suchmaschinen daran zu hindern, auf JS-Inhalte zuzugreifen

Um das Problem zu vermeiden, dass Google JS-Inhalte nicht finden kann, verwenden einige Webmaster einen Prozess namens Cloaking, der den JS-Inhalt für Benutzer bereitstellt, ihn aber vor Crawlern verbirgt. Diese Methode wird jedoch als Verstoß gegen die Webmaster-Richtlinien von Google angesehen und Sie könnten dafür bestraft werden. Arbeiten Sie stattdessen daran, die wichtigsten Probleme zu identifizieren und JS-Inhalte für Suchmaschinen zugänglich zu machen.

Manchmal kann der Site-Host unbeabsichtigt blockiert werden, wodurch Google daran gehindert wird, den JS-Inhalt zu sehen. Wenn Ihre Website beispielsweise einige untergeordnete Domains hat, die unterschiedlichen Zwecken dienen, sollte jede eine separate robots.txt haben, da Subdomains als separate Website behandelt werden. In einem solchen Fall müssen Sie sicherstellen, dass keine dieser robots.txt-Anweisungen Suchmaschinen daran hindert, auf die zum Rendern erforderlichen Ressourcen zuzugreifen.

Verwenden Sie relevante HTTP-Statuscodes

Die Crawler von Google verwenden HTTP-Statuscodes, um Probleme beim Crawlen einer Seite zu identifizieren. Verwenden Sie daher einen aussagekräftigen Statuscode, um die Bots zu informieren, wenn eine Seite nicht gecrawlt oder indexiert werden soll. Sie könnten beispielsweise einen 301-HTTP-Status verwenden, um den Bots mitzuteilen, dass eine Seite auf eine neue URL verschoben wurde, sodass Google seinen Index entsprechend aktualisieren kann.

Sehen Sie sich diese Liste mit HTTP-Statuscodes an und wissen Sie, wann Sie sie verwenden müssen:

Quelle

Korrigieren Sie doppelte Inhalte

Bei der Verwendung von JavaScript für Websites kann es zu unterschiedlichen URLs für denselben Inhalt kommen. Dies führt zu Problemen mit doppelten Inhalten, die häufig durch Großschreibung, IDs oder Parameter mit IDs verursacht werden. Stellen Sie sicher, dass Sie solche Seiten finden, wählen Sie die ursprüngliche/bevorzugte URL aus, die Sie indizieren möchten, und setzen Sie kanonische Tags, um zu vermeiden, dass Suchmaschinen verwirrt werden.

Reparieren Sie verzögert geladene Inhalte und Bilder

Die Seitengeschwindigkeit ist entscheidend für SEO. Lazy Loading ist eine solche bewährte UX-Methode, die das Laden von nicht kritischen oder nicht sichtbaren Inhalten verzögert und so die anfängliche Ladezeit der Seite verkürzt. Aber neben dem schnelleren Laden von Seiten müssen Sie auch sicherstellen, dass Ihre Inhalte für Suchmaschinen-Crawler zugänglich sind. Diese Crawler führen Ihr JavaScript nicht aus oder scrollen nicht durch die Seite, um verzögert geladene Inhalte zu fördern, was sich negativ auf Ihre SEO auswirkt.

Darüber hinaus sind Bildsuchen auch eine Quelle für zusätzlichen organischen Traffic. Wenn Sie also Lazy-Loaded-Bilder haben, werden Suchmaschinen sie nicht auswählen. Während Lazy Loading für Benutzer großartig ist, muss es mit Sorgfalt durchgeführt werden, um zu verhindern, dass Bots möglicherweise kritische Inhalte übersehen.

Verwenden Sie JS-SEO-Tools

Es gibt eine Fülle von Tools, mit denen Sie Probleme mit JavaScript-Code identifizieren und beheben können. Hier sind einige, die Sie zu Ihrem Vorteil nutzen können.

• URL-Prüffunktion. Dieses Tool ist in der Google Search Console zu finden. Es kann Ihnen zeigen, ob die Crawler von Google Ihre Seiten indexieren oder crawlen konnten.
• Suchmaschinen-Crawler. Mit diesen Tools können Sie effektiv testen und überwachen, wie Suchmaschinen Ihre Seiten durchsuchen.
• Einblicke in die Seitengeschwindigkeit. Googles Page Speed ​​Insights teilt Details über die Leistung Ihrer Website mit und gibt Empfehlungen, wie sie verbessert werden kann.
• Ort: Befehl. Dieses Tool hilft Ihnen zu sehen, ob Google Ihre Inhalte richtig indexiert hat oder nicht. Alles, was Sie tun müssen, ist diesen Befehl auf der Google-Site einzugeben: [Website-URL] „Text-Snippet oder Abfrage“

JavaScript-SEO-Herausforderungen

Inzwischen haben Sie eine ungefähre Vorstellung davon, wie Suchmaschinen JavaScript-Inhalte verarbeiten und was Sie tun können, um Ihre Website auf die Überholspur zum SEO-Erfolg zu bringen. Es gibt jedoch noch einige andere Herausforderungen, denen sich SEO-Experten und Webmaster stellen müssen. Die meisten davon sind auf Fehler zurückzuführen, die sie bei der Optimierung ihrer JavaScript-basierten Websites begangen haben

1. Unverkürzte JavaScript- und CSS-Dateien

Wenn Sie SEO-Tools zur Prüfung Ihrer JS-Website verwenden, sind Sie wahrscheinlich auf eine Warnung bezüglich Problemen mit nicht minimiertem Javascript und CSS gestoßen. Im Laufe der Zeit werden JS- und CSS-Dateien durch unnötige Codezeilen, Leerzeichen, Kommentare im Quellcode und Hosting auf externen Servern belastet, wodurch Ihre Website langsam wird. Stellen Sie sicher, dass Sie unnötige Zeilen, Leerzeichen und Kommentare entfernen, um die Ladezeit der Seiten zu verkürzen, die Interaktionsrate zu verbessern und die SEO zu steigern.

2. Verwendung von Hash in den URLs

Erinnern Sie sich, was John Mueller bei einer SEO-Veranstaltung über schlechte URLs gesagt hat?

„Wenn wir dort eine Art Haschisch sehen, bedeutet das für uns, dass der Rest dort wahrscheinlich irrelevant ist. Meistens lassen wir das fallen, wenn wir versuchen, den Inhalt zu indizieren …“

Dennoch generieren mehrere JS-basierte Websites URLs mit einem Hash. Dies kann für Ihr SEO katastrophal sein. Stellen Sie sicher, dass Ihre URL Google-freundlich ist. So sollte es auf keinen Fall aussehen:

www.example.com/#/about -us ODER

www.example.com/about#us

3. Keine Überprüfung der internen Linkstruktur

Google benötigt korrekte <a href>-Links, um URLs auf Ihrer Website zu finden. Wenn die Links nach dem Klicken auf eine Schaltfläche zum DOM hinzugefügt werden, können die Bots sie auch nicht sehen. Die meisten Webmaster verpassen diese Punkte, wodurch ihre SEO leidet.

Achten Sie darauf, den traditionellen „href“-Link bereitzustellen, damit sie für die Bots erreichbar sind. Überprüfen Sie Ihre Links mit dem Website-Audit-Tool SEOprofiler, um die interne Linkstruktur Ihrer Website zu verbessern.

Schauen Sie sich diese Präsentation von Tom Greenway während der Google I/O-Konferenz an, um eine Anleitung zu einer richtigen Linkstruktur zu erhalten:

Fazit

Ohne Zweifel erweitert JavaScript die Funktionalität von Websites. Allerdings passen JavaScript und Suchmaschinen nicht immer zusammen. JavaScript wirkt sich auf die Art und Weise aus, wie Suchmaschinen eine Website crawlen und indizieren, und wirkt sich somit auf ihr Ranking aus. Daher müssen Suchprofis verstehen, wie Suchmaschinen-Bots JS-Inhalte verarbeiten, und die notwendigen Schritte unternehmen, um sicherzustellen, dass JavaScript gut in ihre SEO-Strategie passt.

Wenn Sie eine JS-basierte Website haben und Ihre Inhalte bei Google nicht finden können, ist es an der Zeit, die Probleme anzugehen. Verwenden Sie die Informationen und Tipps in diesem Beitrag, um JavaScript für SEO zu optimieren und Ihre Rendite zu steigern.