JavaScript-Rendering für SEO verstehen (+6 einfache Möglichkeiten zum Testen!)

JavaScript ist eine leistungsstarke Programmiersprache, die das Benutzererlebnis verbessern und Websites interaktiver gestalten kann.

Aber hier ist die Sache: Suchmaschinen kommen mit JavaScript nicht immer zurecht .

Es ist wichtig zu verstehen, wie sich JavaScript-Rendering auf SEO auswirkt. Anschließend können Sie die notwendigen Schritte unternehmen, um sicherzustellen, dass Ihre Website die Sichtbarkeit erhält, die sie verdient.

In diesem Leitfaden behandeln wir Folgendes:

• Die wichtigsten Aspekte des JavaScript-Renderings
• Sechs einfache Möglichkeiten, um zu testen, wie Suchmaschinen Ihre Website sehen
• Praktische SEO-Techniken für JavaScript-Sites

Was ist JavaScript und was bedeutet Rendering?

JavaScript ist eine beliebte Programmiersprache zum Erstellen dynamischer und interaktiver Webseiten.

Wenn Google eine Website crawlt, muss es den Inhalt und die Struktur der Website verstehen, um ihre Seiten zu indizieren.

Hierzu wird ein Prozess namens „JavaScript-Rendering“ verwendet. Google führt den JavaScript-Code aus und analysiert dann den resultierenden HTML-Inhalt.

Bildquelle

Dadurch können Suchmaschinen die dynamisch generierten Inhalte indizieren.

Allerdings ist dieser Prozess nicht perfekt. Das Crawlen von JavaScript-Inhalten auf Seiten dauert bei Google neunmal länger als bei einer einfachen HTML-Seite.

Manchmal führen Suchmaschinen JavaScript nicht vollständig oder korrekt aus , wodurch wertvolle Seitenelemente von Crawlern unentdeckt bleiben und möglicherweise das Ranking beeinträchtigen.

Was sind die Probleme mit JavaScript für SEO?

Eines der Hauptprobleme besteht darin, dass Suchmaschinen Schwierigkeiten beim Crawlen und Rendern von mit JavaScript generierten Inhalten haben können.

Wenn Google ein Element einer Seite nicht crawlen kann, wird dieser Inhaltsabschnitt nicht zum Index von Google hinzugefügt .

In manchen Fällen kann es sich um dengesamten Inhalt einer Seitehandeln, sodass keine Chance auf ein Ranking besteht!

Eine nicht crawlbare Seite beeinträchtigt nicht nur ihr Ranking, sondern kann auch die SEO einer Website im Allgemeinen beeinträchtigen .

Wenn Google aufgrund eines Fehlers beim JavaScript-Rendering mehrere Seiten als identisch ansieht, behandelt es sie möglicherweise fälschlicherweise als doppelten Inhalt. Dies kann zu einer unerwünschten Kanonisierung oder dazu führen, dass wichtige Seiten von Crawlern vollständig ignoriert werden, was sich nachteilig auf Ihre gesamte SEO auswirken kann.

Alle Links auf einer Seite, die ein Crawler nicht rendern konnte, werden ebenfalls nicht gecrawlt, sodass kein Link-Equity von dieser Seite an interne oder externe Quellen weitergegeben wird.

Da wichtige interne Links von Crawlern übersehen werden, kann auch das Verständnis einer Suchmaschine für die Navigation Ihrer Website verzerrt sein, und es besteht auch die Möglichkeit, dass wichtige Seiten als verwaiste Seiten behandelt werden.

Einige andere SEO-Probleme, die wahrscheinlich durch fehlgeschlagenes JavaScript-Rendering entstehen, sind:

• Bilder werden aus dem Index entfernt, wodurch der Bildverkehr reduziert wird.
• Dynamisch generierte Seitentitel werden möglicherweise übersehen, was sich auf Suchrankings und Klickraten auswirkt.

Warum JavaScript für ein SEO-Projekt verwenden?

Daher kann JavaScript eine Menge SEO-Probleme verursachen.

Sie fragen sich vielleicht , warum Sie angesichts dieser potenziellen Probleme überhaupt JavaScript für ein SEO-Projekt verwenden sollten .

Nun, es gibt tatsächlich viele Gründe, warum Sie es für ein Webentwicklungsprojekt verwenden möchten.

JavaScript kann die Benutzererfahrung und das Engagement auf Ihrer Website erheblich verbessern. Sie können damit Diadecks, Animationen und andere interaktive Funktionen erstellen.

Es kann auch die Leistung und Geschwindigkeit Ihrer Website verbessern. Sie können Ihre Website mithilfe von Lazy Loading, Code-Splitting, Caching und Service-Workern optimieren.

Sie können auch dynamische und personalisierte Inhalte basierend auf Benutzerverhalten, Vorlieben und Standort erstellen.

Es gibt einen Grund, warum über 98 % der Websites JavaScript verwenden.

Das Web hat sich von reinem HTML entfernt – als SEO können Sie das begrüßen. Lernen Sie von JS-Entwicklern und teilen Sie SEO-Wissen mit ihnen. JS wird nicht verschwinden.

— John Mueller (offiziell) · #StaplerLife (@JohnMu) 8. August 2017

Sie müssen lediglich JavaScriptrichtigverwenden und auf mögliche Probleme testen!

6 einfache Möglichkeiten, das JavaScript-Rendering für SEO zu testen

Durch das Testen der JavaScript-Wiedergabe können Sie potenzielle Probleme identifizieren, die Google möglicherweise daran hindern, Ihre Inhalte zu crawlen und zu indizieren.

Hier sind sechs einfache Möglichkeiten, dies zu tun :

1. Testen Sie, ob Chrome die Seite laden kann, wenn JavaScript blockiert ist

Der erste Schritt besteht darin, JavaScript in Ihrem Browser zu deaktivieren.

Wenn Ihr Browser den Inhalt nicht vollständig anzeigen kann, liegt wahrscheinlich ein Problem bei der Darstellung von JavaScript in einem HTML-Dokument vor.

Sobald die Seite in Google Chrome geladen ist, klicken Sie auf das Vorhängeschloss in der Adressleiste und wählen Sie „Site-Einstellungen“.

Scrollen Sie dann nach unten zu „JavaScript“ und wählen Sie „Blockieren“.

Wenn Sie zum Tab zurückkehren, schlägt Chrome vor, die Seite neu zu laden. Klicken Sie auf Neu laden.

Können Sie den Inhalt noch sehen?

Wenn die Seite wie im obigen Beispiel vollständig verschwunden ist, liegt offensichtlich ein Problem mit der JavaScript-Darstellung der Seite vor.

Google wird den Inhalt wahrscheinlich nicht crawlen können.

In manchen Fällen fehlen auf der Seite nur bestimmte Funktionen, wie zum Beispiel Werbebanner.

Sie möchten sicherstellen, dass alle Inhalte, die gecrawlt werden sollen, sichtbar sind. Wenn Google beispielsweise nicht ganze Absätze crawlen kann, entgehen ihm wichtige Informationen, was das Ranking-Potenzial der Seite gefährdet.

Es ist nicht nur der Hauptinhalt der Seite gefährdet …

2. Überprüfen Sie, wie ein SEO-Analysetool die Seite anzeigt

Die Verwendung eines schnellen und einfachen SEO-Analysetools ist eine noch einfachere Möglichkeit, JavaScript-SEO-Probleme zu identifizieren.

Indem Sie den Crawling-Prozess nachahmen, können Sie einen Hinweis darauf erhalten, wie Suchmaschinen die Seite verstehen.

Klicken Sie auf das Symbol in der Adressleiste und erlauben Sie wieder JavaScript in Chrome.

Analysieren Sie nun die On-Page-SEO der Webseite mit einem Browser-Add-on wie SEOMinion.

Eine Seitenleiste wird geöffnet. Wählen Sie nun „On-Page-SEO analysieren“.

Verwenden Sie den generierten Bericht und vergleichen Sie ihn mit dem, was Sie tatsächlich auf der Seite sehen können:

• Wie viele Wörter hat die Seite?
• Sind alle Heading-Tags vorhanden?
• Ist die Anzahl der Bilder korrekt?
• Werden andere Elemente je nach Analysetool anders angezeigt?

In diesem Beispiel können wir sehen, dass die Wortanzahl für die Seite nur ein Wort beträgt, was zu einem sehr dünnen Artikel führen würde!

Es gibt nur ein Überschriften-Tag (das H1) auf der Seite, und dieses scheint gut durchzukommen. Wenn es jedoch H2- oder H3-Tags gäbe, würden diese wahrscheinlich nicht durchkommen, da die Wortanzahl darauf hindeutet, dass der Inhaltskörper nicht korrekt wiedergegeben wird.

Die Seite enthält drei Bilder, aber dieses Tool zeigt an, dass nur eines sichtbar ist.

Als wir die Bilddatei herunterluden, stellten wir fest, dass es sich hierbei um das Website-Logo handelte (aus der Kopfzeile entnommen).

Wenn das, was Sie sehen können, mit dem kollidiert, was der Bericht „sieht“, ist dies ein weiterer Hinweis darauf, dass der Inhalt im Hauptteil der Seite nicht ordnungsgemäß gecrawlt werden kann.

3. Google-Handyfreundlichkeitstest

Sie können auch das Mobile-Friendly-Test-Tool von Google verwenden, um den gerenderten HTML-Code Ihrer Webseite zu überprüfen.

Geben Sie die URL ein, die Sie überprüfen möchten. Auf der rechten Seite der Ergebnisseite wird ein Screenshot der Seite angezeigt.

Dies ist eine visuelle Darstellung, wie der Googlebot Ihre Seite sieht. Sie können den Screenshot mit Ihrer Seite vergleichen und nach fehlenden Elementen suchen.

Wenn Ihnen etwas Unregelmäßiges auffällt, überprüfen Sie den gerenderten HTML-Code und stellen Sie fest, ob im Screenshot etwas fehlt, das auch im HTML-Code fehlt.

Hinweis: Google wird dieses Tool Ende 2023 entfernen. Aber kein Grund zur Sorge, denn SEO Kristina Azarenko hat einen großartigen Workaround parat, sowohl für den Moment als auch für den Fall, wenn es soweit ist:

Google stellt das Tool „Mobile Friendly Test“ Ende dieses Jahres ein.

Viele technische SEOs verwenden seit langem das Tool „Mobile-Friendly Test“, um den gerenderten HTML-Code einer Seite zu überprüfen. Es ist sehr praktisch, wenn Sie keinen Zugriff auf das URL-Inspect-Tool der Google Search Console haben … pic.twitter.com/AcSh7J7jhu

— Kristina Azarenko (@azarchick) 12. Juni 2023

Das führt uns perfekt zu …

4. Google Rich Results Tool

Der Rich Results Test von Google bietet ähnliche Einblicke in die Art und Weise, wie der Googlebot JavaScript-Dateien rendert.

Geben Sie Ihre URL ein und führen Sie einen Test durch, um einen Screenshot zu sehen, der zeigt, wie der Googlebot die Seite sieht.

5. URL-Inspektion der Google Search Console

Sie können das URL-Inspektionstool der Google Search Console verwenden, um die JavaScript-Wiedergabe für eine bestimmte URL auf Ihrer Website zu überprüfen.

Das Tool liefert detaillierte Informationen zum Indexierungsstatus der Seite und zur JavaScript-Wiedergabe.

Es zeigt an, ob das JavaScript erfolgreich ausgeführt wurde oder ob Probleme vorliegen.

Achten Sie auf Fehler im Zusammenhang mit der JavaScript-Ausführung. Diese können sich darauf auswirken, wie Suchmaschinen Ihre Inhalte verstehen und indizieren.

6. Verwenden Sie ein spezielles Rendering-Tool

Eine weitere effektive Möglichkeit, das JavaScript-Rendering für SEO zu testen, ist die Verwendung eines speziellen Rendering-Tools.

Diese Tools simulieren, wie Suchmaschinen-Crawler mit JavaScript interagieren und Webseiten rendern.

Kostenlose Tools:

• Fetch & Render – dieses Tool ahmt den Rendering-Prozess nach (ähnlich den Google-Inspektionstools), ermöglicht Ihnen jedoch das Testen mit verschiedenen Benutzeragenten.
• Mit dem Pre-Rendering-Testtool können Sie die Pre-Rendering-Informationen verschiedener Crawler vergleichen. Geben Sie einfach Ihre URL ein und wählen Sie einen Benutzeragenten aus. So können Sie vor dem Rendering-Prozess vergleichen, welche Inhalte verschiedenen Crawlern bereitgestellt werden.

Kostenpflichtige Tools:

Heutzutage ist eine Vielzahl wirklich leistungsstarker technischer SEO-Software verfügbar, die besonders für Großprojekte oder Projekte auf Unternehmensebene nützlich ist.

Alle unten aufgeführten Tools umfassen Tools zum Testen des JavaScript-Renderings:

• Botify
• JetOctopus
• Lumar
• ScreamingFrog
• OnCrawl
• Semrush

Unabhängig davon, welches Tool Sie verwenden, stellen Sie sicher, dass die folgenden Elemente korrekt gerendert werden, um Crawlbarkeit und Indexierbarkeit zu gewährleisten und dass Ihr Inhalt aus technischer Sicht das bestmögliche Ranking erhält:

• Auf die Seite kopieren
• Bilder
• Kanonisches Tag
• Titel und Meta-Beschreibung
• Meta-Robots-Tag
• Strukturierte Daten
• Hreflang
• Überschriften-Tags
• Video
• Inhalte innerhalb interaktiver Elemente (z. B. Akkordeonfunktionen)

So machen Sie Ihre JavaScript-Site SEO-freundlich

Sie können mehrere Best Practices für JavaScript-SEO implementieren, um Suchmaschinen dabei zu helfen, Ihre Webseiten effektiv zu crawlen und zu indizieren.

Links

Verwenden Sie HTML-Ankertags mit einem href-Attribut für Ihre internen und externen Links.

Suchmaschinen erkennen und verstehen <a>-Tags als Links. Der Googlebot ruft diese Links ab und fügt sie der Crawling-Warteschlange hinzu.

Verwenden Sie beschreibende Ankertexte, um Google dabei zu helfen, den Inhalt der verlinkten Seite zu verstehen. Vermeiden Sie generische Formulierungen und entscheiden Sie sich für einen natürlichen, schlüsselwortreichen Ankertext, der die Zielseite genau wiedergibt.

Bilder

Fügen Sie beschreibende Alt-Tags für Ihre Bilder ein. Alt-Tags stellen alternativen Text bereit, der den Bildinhalt beschreibt.

Dies hilft Suchmaschinen, die Relevanz des Bildes für den umgebenden Inhalt zu verstehen.

Es wird außerdem empfohlen, für Ihre Bilder beschreibende und schlüsselwortreiche Dateinamen zu verwenden.

Sie können strukturiertes Daten-Markup wie ImageObject von schema.org verwenden, um zusätzlichen Kontext zu Ihren Bildern bereitzustellen.

Serverseitiges Rendering oder dynamisches Rendering

Websites, die mit JavaScript-Frameworks wie Angular und React erstellt wurden, verwenden standardmäßig clientseitiges Rendering.

Die Darstellung der Webseite erfolgt im Browser des Nutzers.

Das Problem besteht darin, dass Suchmaschinen-Crawler den Inhalt möglicherweise nicht verstehen können – sie sehen eine leere Seite.

Eine Alternative besteht darin, serverseitiges Rendering (SSR) zu verwenden, um HTML-Versionen Ihrer JavaScript-lastigen Seiten zu generieren.

Dadurch kann Google direkt auf den vorgerenderten HTML-Inhalt zugreifen und ihn indizieren.

Allerdings kann SSR teuer und ressourcenintensiv sein.

Eine Problemumgehung besteht darin, dynamisches Rendering zu verwenden.

Hierbei wird Suchmaschinen-Bots eine vorab gerenderte Seite bereitgestellt, während normale Benutzer weiterhin die vollständig dynamische, von JavaScript generierte Version der Seite erleben.

JavaScript-SEO beherrschen

SEO geht über die Optimierung von Schlüsselwörtern und die Sicherung von Backlinks hinaus. Beim Einstieg in die technische Suchmaschinenoptimierung müssen Sie auch darüber nachdenken, wie Ihre Website gerendert und den Suchmaschinen-Crawlern präsentiert wird.

Indem Sie sicherstellen, dass das JavaScript-Rendering die Zugänglichkeit des Crawlers nicht behindert, können Sie Ihre Sichtbarkeit in Suchergebnissen verbessern und den organischen Traffic auf Ihre Seiten steigern.

Wir wissen, wie viel Mühe Sie investieren, um großartige Links zu sichern und wirkungsvolle Inhalte für sich und Ihre Kunden zu erstellen. Lassen Sie nicht zu, dass diese Bemühungen durch schlechte technische SEO- und JavaScript-Probleme zunichte gemacht werden!