Die Vorteile des dynamischen Renderings für SEO

JavaScript-Webseiten erschweren die Suchmaschinenoptimierung erheblich, was ziemlich schwierig ist. SEO gilt als grundlegender Bestandteil des digitalen Marketings. Aber wenn Sie Ihrer Fantasie freien Lauf lassen, kann es Sie an eine berühmte Zirkusnummer erinnern, bei der ein Jongleur mehrere Teller an einer Stange dreht. Was ist mit technischem SEO? Stellen wir es uns vor wie auf dem Drahtseil zu gehen… und zu jonglieren.

Was ist JavaScript-SEO? Wenn es eine Zirkusnummer wäre, was wäre es? Vielleicht auf dem Drahtseil gehen und jonglieren… mit Feuerbällen. Und das wäre eine genaue Definition. Dank dieser verständlichen Assoziationen können Sie sehen, dass es sich um einen kniffligen Abwägungsprozess handelt. Ihre Website sollte für Suchmaschinen einfach zu handhaben sein, besser funktionieren und gleichzeitig schneller laden als die Konkurrenz.

Und jetzt ist die gute Nachricht, dass technisches SEO einer der Ranking-Faktoren ist, die Sie kontrollieren können. Schließlich macht es Ihre JavaScript-Website für Google leicht lesbar und verständlich und bietet Besuchern ein gutes Weberlebnis. Das ist ein großer Vorteil, finden Sie nicht? Darüber hinaus werden wir die Vorteile des dynamischen Renderings für SEO, seine Bedeutung für die SEO-Gesundheit Ihrer Website und Möglichkeiten zu seiner Implementierung erläutern. Aber zuerst, was ist dynamisches Rendern in einfachen Worten?

Google besucht Ihre Webseite. Was kommt als nächstes?

Wie Sie wissen, ist Googles bester Helfer ein automatisiertes Programm oder ein Bot, der jede Webseite im World Wide Web indiziert und katalogisiert. Google versucht, dem Nutzer das bestmögliche Ergebnis für eine bestimmte Anfrage zu liefern. Dazu analysiert es sorgfältig SEO-dynamische Inhalte auf einer bestimmten Webseite und bewertet ihre relative Bedeutung im Vergleich zu anderen Webseiten zum selben Thema.

Die meisten modernen Webentwicklungen verwenden drei primäre Programmiersprachen: HTML und JavaScript. Google verarbeitet HTML, indem es es crawlt und indiziert. Zunächst sieht sich der Googlebot den HTML-Code auf der Seite an. Dann achtet es auf den Text, ausgehende Links auf der Seite und Schlüsselwörter. Der nächste Schritt besteht darin, die Seite zu indizieren. Google und andere Suchmaschinen priorisieren Inhalte, die in statischem HTML präsentiert werden.

Das Rendering von JavaScript ist komplexer, da es aus drei Schritten besteht:

• Kriechen
• Machen
• Index

Google verarbeitet JavaScript-Inhalte mehrfach, um deren Inhalt vollständig zu verstehen. Dies ist die Essenz des Site-Renderings. Wenn Google auf einer Webseite auf JavaScript trifft, stellt es es in die Warteschlange. Dann rendert Google es, wenn es die Ressourcen dafür hat.

Was ist die Schwierigkeit bei JavaScript-SEO?

HTML fungiert als Standard in der Webentwicklung. Erstens können Suchmaschinen darauf basierende Inhalte effizient verarbeiten. Beispielsweise ist Javascript ressourcenintensiver, sodass Suchmaschinen schwieriger zu verarbeiten sind. Dies zeigt, dass Suchmaschinenbudgets für JavaScript-Webseiten ausgegeben werden. Google behauptet, dass seine Suchmaschine mit JavaScript umgehen kann. Dies ist jedoch noch keine Tatsache.

Das Crawlen, Indizieren und Seitenrendering erfordern deutlich mehr Ressourcen. Noch schlimmer sieht es bei anderen Suchmaschinen wie Bing und DuckDuckGo aus. Das liegt daran, dass sie überhaupt nicht mit JavaScript umgehen können. Infolgedessen benötigen Suchmaschinen noch mehr Ressourcen, um Ihre JavaScript-Seiten wiederzugeben. Leider bedeutet dies, dass viele Elemente Ihrer Seite überhaupt nicht indexiert werden.

Beispielsweise könnten Google und andere Suchmaschinen Ihre Metadaten und kanonischen Tags verpassen, die für SEO unerlässlich sind. Tatsache ist, dass Javascript eine großartige Benutzererfahrung bietet, mit der Sie dynamische Websites erstellen können, die Benutzer in unbeschreibliche Begeisterung versetzen. Die Frage bleibt jedoch. Wie schafft man ein modernes Weberlebnis, ohne SEO zu schaden? Viele Entwickler entscheiden sich für das serverseitige Rendering.

Clientseitiges/serverseitiges Rendering VS.

Viele JavaScript-Frameworks wie Angular, Vue und React verwenden clientseitiges Rendering. Sie warten, bis der Inhalt Ihrer Webseite vollständig geladen ist, bevor sie dies im Browser auf der Benutzerseite tun. Einfach ausgedrückt, sie rendern den Inhalt für Benutzer, nicht auf dem Server, damit Suchmaschinen ihn anzeigen können. Infolgedessen ist das clientseitige Rendering billiger als andere Alternativen. Mit dem Preis sinkt auch die Belastung von Servern und Entwicklern.

Allerdings ist nicht alles glatt, da sich die Benutzererfahrung verschlechtern kann. Zum Beispiel erhöht es die Ladezeit der Seite, was zu einer hohen Absprungrate führt. Clientseitiges Rendern wirkt sich auch auf Bots aus. Der Googlebot verwendet ein Zwei-Wellen-Indexierungssystem. Der erste Schritt besteht darin, statisches HTML zu crawlen und zu indizieren, und der zweite Schritt besteht darin, JavaScript-Inhalte zu crawlen. Auch hier kann ein Bot Ihren JavaScript-Inhalt während des Indizierungsprozesses übersehen.

Was also tun? Für die meisten Entwicklungsteams ist es serverseitiges Rendering: Sie konfigurieren JavaScript so, dass der Inhalt auf dem Server Ihrer Website gerendert wird, nicht in einem clientseitigen Browser. JavaScript-Inhalte werden im Voraus gerendert, sodass sie für Bots lesbar sind. SSR hat auch Leistungsvorteile. Bots und Benutzer erhalten eine schnellere Erfahrung ohne das Risiko einer unvollständigen Indizierung oder fehlender Inhalte.

Serverseitiges Rendering: Sein oder Nichtsein?

Um diese Frage zu beantworten, denken Sie zuerst: Ist serverseitiges Rendering einfach für SEO? Die Antwort ist nein. Andernfalls wäre JavaScript-SEO kein Problem, und jede Website würde es tun. Leider erfordert die Implementierung von SSR ein kompetentes Webentwicklungsteam, und der Implementierungsprozess selbst wäre teuer, langwierig und kompliziert. Außerdem funktioniert es nicht mit JavaScript von Drittanbietern.

Websites, die serverseitiges Rendering verwenden, erfordern häufig externe JavaScript-Bibliotheken oder Plugins, die schwierig einzurichten sind. Beispielsweise benötigt Angular die Angular Universal Library, um serverseitiges Rendern zu ermöglichen. Daher beinhaltet die Aktivierung von SSR in Angular viele bewegliche Teile. Und das ist ein erhebliches Risiko, da ein verrutschtes Teil dazu führen kann, dass die Suchergebnisse fehlschlagen.

Auf der anderen Seite verwendet React die Next.JS-Bibliothek, um serverseitiges Rendering bereitzustellen. Infolgedessen benötigen Entwickler einen zusätzlichen Server, wodurch zusätzliche Kosten entstehen. Wie also gestalten Sie Frameworks wie React SEO-freundlich, um Ihre Kunden und Suchmaschinen zufrieden zu stellen? Wieder einmal kommt dynamisches Rendering zur Rettung.

Dynamisches Rendering auf den Punkt gebracht

Dynamisches Rendering liefert Inhalte basierend auf der Anforderung des Benutzeragenten. Mit anderen Worten, es ist eine universelle Lösung, die das Beste aus beiden Welten bietet. Es fungiert als statisches HTML für Bots und als dynamisches JavaScript für Benutzer.

Als Ergebnis erhalten Bots eine maschinenlesbare, abgespeckte Version Ihrer Webseite, die nur aus Text und Links besteht. Dies erleichtert ihnen das Crawlen und Analysieren der Seite. Die Benutzer wiederum erhalten eine nutzbare, vollständig optimierte Webseite, die die Dauer ihrer Interaktion mit einer Website verlängert.

Der Weg zur Implementierung von dynamischem Rendering

Das Implementieren von dynamischem Rendern besteht aus drei Schritten.

1. Installieren eines dynamischen Renderers, um den dynamischen Inhalt in statisches HTML umzuwandeln.
2. Auswahl der User Agents, die statische Inhalte erhalten sollen (Googlebot, Bingbot, LinkedInbot und andere). Als Nebenbemerkung wird die Implementierung eines Caches oder die Erhöhung der Anzahl von HTTP-Anforderungen zum Speichern von Inhalten die langsame Arbeit Ihres Servers lösen. Überlegen Sie auch, ob Ihre Kunden Inhalte für Desktop- oder Mobilgeräte benötigen. Die Verwendung von Dynamic Serving hilft ihnen bei der Bereitstellung einer geeigneten Lösung.
3. Konfigurieren von Servern zum Bereitstellen von statischem HTML.

Überprüfung Ihrer Konfiguration

Um zu überprüfen, ob das dynamische Rendering ordnungsgemäß funktioniert, müssen Sie Folgendes ausführen:

• Mobile-Friendly-Test: Dies ist eine Funktion der Tool-Suite der Google Search Console. Im September 2020 wechselte Google für alle Websites zur Mobile-First-Indexierung. Mit anderen Worten, Google berücksichtigt die mobile Version Ihrer Website vor der Desktop-Version. Daher sollten Sie Ihre Seite für mobile Endgeräte optimieren.
• URL-Inspektionstool: Sie müssen sicherstellen, dass Ihre Website ordnungsgemäß indexiert ist. Das URL-Checker-Tool hilft Ihnen dabei.
• Abruf wie durch Google: Erforderlich, um die Effektivität Ihres dynamischen Renderings zu bestimmen. Damit können Sie sicherstellen, dass einzelne URLs korrekt zur Indexierung gesendet werden.
• Testtool für strukturierte Daten: Es ist praktisch, Schema-Markup auf Ihrer Website zu verwenden. Es stellt sicher, dass Ihr dynamisches Rendering das Schema-Markup nicht beschädigt.

Anwendungsfälle

Dynamisches Rendering löst alle JavaScript-SEO-Probleme perfekt. Dies ist ein wesentlicher Vorteil. Dynamisches Rendering löst Crawl-Budget-Probleme schnell und ist gleichzeitig kostengünstig. Ein Bonus ist die Tatsache, dass keine fortgeschrittenen technischen Kenntnisse erforderlich sind. Wann sollten Sie dieses hilfreiche Tool verwenden?

• Eine große Website mit vielen Inhalten, die sich häufig ändern, eignet sich perfekt für dynamisches Rendering. Dies liegt daran, dass große Websites oft und schnell indiziert werden. Daher ist es wichtig, dass alle Seiten indexiert und angemessen in den SERPs abgebildet werden. Das dynamische Rendering leistet hier hervorragende Arbeit.
• Dynamisches Rendering wird auch ein Lebensretter für Websites mit eingebetteten Social-Media-Wänden oder Widgets sein.

Ist dynamisches Rendering Cloaking?

Cloaking ist die Praxis, Suchmaschinen-Bots und Menschen deutlich unterschiedliche Inhalte bereitzustellen. Es ist eine Black-Hat-SEO-Taktik. Während die kurzfristigen Vorteile der Tarnung verlockend sind, sind die potenziellen Risiken es immer noch nicht wert. Dynamisches Rendering ist keine Maskierung, wenn es Suchmaschinen und Benutzern denselben endgültigen Inhalt bereitstellt. Es ist jedoch ein Cloaking, wenn Sie für jede Seite völlig unterschiedliche Inhalte bereitstellen.

So optimieren Sie eine JavaScript-Site für Suchmaschinen

Viele der Prozesse ähneln denen, die SEO-Profis gewohnt sind, mit einigen Unterschieden.

OnPage-SEO

Die üblichen On-Page-SEO-Regeln für Inhalte: Titel- und Meta-Beschreibungs-Tags, Alt-Attribute, Meta-Roboter-Tags und weitere Anwendungen. Ein paar Probleme, auf die die Entwickler bei der Arbeit mit JavaScript-Websites stoßen, sind, dass Titel- und Beschreibungs-Tags wiederverwendet werden können und Bilder selten auf Alt-Attribute gesetzt werden.

Crawlen zulassen

Blockieren Sie den Zugriff auf Ressourcen nicht. Google muss auf Ressourcen zugreifen und diese laden, um Seiten korrekt darzustellen.

URLs

Ändern Sie URLs, wenn Sie Inhalte aktualisieren. Sie sollten wissen, dass JavaScript-Frameworks einen Router verwenden, der die Zuordnung zu reinen URLs ermöglicht. Verwenden Sie keine Octotorps (das #-Symbol) für das Routing. Dies ist hauptsächlich ein Problem in Vue und einigen frühen Versionen von Angular. In einer URL wie abc.com/#something ignoriert der Server normalerweise vollständig den Teil nach dem #-Symbol.

Doppelter Inhalt

Bei JavaScript können mehrere URLs zum gleichen Inhalt führen, was zu Problemen mit Duplicate Content führt. Dies kann durch unterschiedliche Register, Bezeichner, Parameter in Bezeichnern verursacht werden. Alle unten aufgeführten Varianten können existieren.

• domain.com/Abc
• domain.com/abc
• domain.com/123
• domain.com/?id=123

Die Lösung ist einfach. Wählen Sie eine Version aus, die Sie indizieren möchten, und setzen Sie kanonische Tags.

SEO-Plugins

In JavaScript-Frameworks werden diese normalerweise als Plugins bezeichnet. Es gibt Versionen für die gängigsten Frameworks wie React, Vue und Angular. Du findest sie, indem du nach „Framework + Modulname“ suchst, zum Beispiel „React Helmet“. Meta-Tags, Helm und Kopf, sind Beispiele für beliebte Module mit ähnlicher Funktionalität, mit denen Sie viele beliebte Tags installieren können, die für SEO benötigt werden.

Fehlerseiten

Da JavaScript-Frameworks nicht serverseitig ausgeführt werden, können sie keinen serverseitigen Fehler wie z. B. 404 verursachen. Bei Fehlerseiten haben Sie verschiedene Möglichkeiten:

• Verwenden Sie eine JavaScript-Umleitung zu der Seite, die mit einem 404-Statuscode antwortet
• Fügen Sie der nicht antwortenden Seite ein No-Index-Tag und eine Fehlermeldung hinzu, z. B. „404-Seite nicht gefunden“.

Seitenverzeichnis

JavaScript-Frameworks haben normalerweise Router für die Abbildung auf reine URLs. Die meisten dieser Router verfügen über ein Zusatzmodul, das auch Sitemaps erstellen kann. Sie finden sie, indem Sie nach „Ihr System + Router-Sitemap“ suchen, z. B. „Vue-Router-Sitemap“ (Vue-Router mit Sitemap). Darüber hinaus verfügen viele Rendering-Lösungen möglicherweise auch über eine Sitemap-Option. Googeln Sie sie also noch einmal nach „System + Sitemap“, z. B. „Gatsby-Sitemap“, und Sie werden mit Sicherheit eine bereits vorhandene Lösung finden.

Weiterleitungen

SEO-Profis sind serverseitige 301/302-Weiterleitungen gewohnt. Auf der anderen Seite wird JavaScript normalerweise auf der Client-Seite ausgeführt. Dies ist kein Problem, da Google die durch die Weiterleitung empfangenen Seiten verarbeitet. Redirects geben jedoch immer noch alle Signale weiter, wie z. B. den PageRank. Diese Weiterleitungen sind normalerweise im Code unter „window.location.href“ zu finden.

Internationalisierung

Es gibt einige Optionen für verschiedene Frameworks, um einige der für die Internationalisierung erforderlichen Funktionen zu unterstützen, z. B. hreflang . Diese werden normalerweise auf andere Systeme portiert und beinhalten Lokalisierung und Internationalisierung oder dieselben Module, die für Header-Tags verwendet werden, wie Helm, mit denen die gewünschten Tags hinzugefügt werden können.

Verzögertes Laden

Es gibt Module zum Umgang mit verzögertem Laden. Falls Sie es noch nicht bemerkt haben, es gibt Module für fast alles, was Sie bei der Arbeit mit JavaScript-Frameworks benötigen. Lazy und Suspence sind die beliebtesten Module für verzögertes Laden. Es wäre ratsam, das Laden von Bildern zu verzögern, aber verzögern Sie nicht das Laden von Inhalten. Dies kann mit JavaScript erfolgen, aber Inhalte werden auf diese Weise möglicherweise nicht korrekt von Suchmaschinen erstellt.

Fazit

JavaScript SEO ist ein sehr komplexer digitaler Marketingmechanismus. Ansonsten ist JavaScript ein Werkzeug, das mit Bedacht eingesetzt werden sollte, was SEOs nicht vermeiden müssen. Aber wenn man sich anstrengt, findet man immer eine Lösung. Und hier ist es dynamisches Rendering, das Ihr Webentwicklungsteam entlastet und Ihr Budget schont. Also lass Google endlich mit dir arbeiten statt gegen dich.

Steigen Sie in das Top-Google-Ranking ein