Dynamisches Rendering als Behelfslösung

Bei einigen Websites generiert JavaScript zusätzliche Inhalte auf einer Seite, wenn diese im Browser ausgeführt wird. Das wird als clientseitiges Rendering bezeichnet. Auch wenn die Google Suche JavaScript ausführt, gibt es JavaScript-Funktionen mit Einschränkungen in der Google Suche. Bei einigen Seiten können Probleme auftreten, bei denen die Inhalte nicht im gerenderten HTML angezeigt werden. Andere Suchmaschinen ignorieren JavaScript möglicherweise und sehen dann keine von JavaScript generierten Inhalte.

Dynamisches Rendering ist eine Behelfslösung für Websites, auf denen von JavaScript generierte Inhalte nicht für Suchmaschinen verfügbar sind. Ein Server für dynamisches Rendering erkennt Bots, die möglicherweise Probleme mit von JavaScript generierten Inhalten haben, und stellt ihnen eine servergerenderte Version ohne JavaScript bereit, während Nutzern die clientseitig gerenderte Version der Inhalte angezeigt wird.

Dynamisches Rendering ist eine Behelfslösung und stellt keine empfohlene Lösung dar, weil es zusätzliche Komplexitäten und Ressourcenanforderungen verursacht.

Websites, für die dynamisches Rendering verwendet werden sollte

Dynamisches Rendering ist gut für indexierbare, öffentliche, von JavaScript generierte Inhalte, die sich schnell ändern, oder auch für Inhalte mit JavaScript-Funktionen, die von deinen bevorzugten Crawlern nicht unterstützt werden. Nicht alle Websites müssen dynamisches Rendering verwenden. Außerdem gibt es bessere Lösungen als das dynamische Rendering, wie in diesem Artikel zum Rendering im Web beschrieben.

Wie dynamisches Rendering funktioniert

Für das dynamische Rendering muss der Webserver Crawler erkennen – z. B. durch Überprüfen des User-Agents. Anfragen von Crawlern werden an einen Renderer weitergeleitet, Anfragen von Nutzern werden bearbeitet. Bei Bedarf stellt der dynamische Renderer eine für den Crawler geeignete Version der Inhalte bereit, beispielsweise eine statische HTML-Version. Du kannst den dynamischen Renderer für alle Seiten oder seitenweise aktivieren.

Schaubild, das die Funktionsweise von dynamischem Rendering darstellt. Das Schaubild zeigt im oberen Teil den Server, wie er dem Browser die anfänglichen HTML- und JavaScript-Inhalte direkt bereitstellt. Im unteren Teil wird dagegen derselbe Server gezeigt, wie er die anfänglichen HTML- und JavaScript-Inhalte einem Renderer bereitstellt, der sie in statisches HTML konvertiert. Nach der Konvertierung stellt der Renderer die statischen HTML-Inhalte dem Crawler bereit.

Dynamisches Rendering ist kein Cloaking

Der Googlebot betrachtet dynamisches Rendern normalerweise nicht als Cloaking. Solange dein dynamisches Rendering ähnliche Inhalte generiert, geht der Googlebot nicht von Cloaking aus.

Wenn du das dynamische Rendering einrichtest, werden auf deiner Website möglicherweise Fehlerseiten angezeigt. Auch diese Fehlerseiten werden vom Googlebot nicht als Cloaking gewertet, sondern wie jede andere Fehlerseite behandelt.

Solltest du vollkommen unterschiedliche Inhalte für Nutzer und Crawler bereitstellen, kann dies als Cloaking betrachtet werden. Das wäre beispielsweise der Fall, wenn eine Website für Nutzer eine Seite mit Katzen, für Crawler jedoch eine mit Hunden bereitstellt.

Dynamisches Rendering implementieren

Lies dir bitte die Anleitung in unseren allgemeinen Richtlinien durch, wenn du das dynamische Rendering für deine Inhalte einrichten möchtest. Du musst dabei auch die Details deiner spezifischen Konfiguration beachten, da diese je nach Implementierung stark variieren können.

Installiere und konfiguriere einen dynamischen Renderer (z .B. Puppeteer, Rendertron oder prerender.io), um deine Inhalte in statischen HTML-Code umzuwandeln, den Crawler einfacher verarbeiten können.
Wähle die User-Agents aus, die den statischen HTML-Code erhalten sollen, und sieh in deinen spezifischen Konfigurationsdetails nach, wie du User-Agents aktualisierst oder hinzufügst. Hier ein Beispiel für eine Liste gängiger User-Agents in der Rendertron-Middleware:
```
export const botUserAgents = [
  'googlebot',
  'bingbot',
  'linkedinbot',
  'mediapartners-google',
];
```
Wenn der Server durch das Pre-Rendering langsamer wird oder du eine große Anzahl von Pre-Rendering-Anfragen siehst, solltest du eventuell einen Cache für vorgerenderte Inhalte implementieren oder überprüfen, ob die Anfragen von legitimen Crawlern stammen.
Finde heraus, ob die User-Agents Desktopinhalte oder mobile Inhalte erfordern. Gib mithilfe der dynamischen Bereitstellung die entsprechende Desktopversion oder die mobile Version an. Hier siehst du ein Beispiel dafür, wie mit einer Konfiguration ermittelt werden kann, ob ein User-Agent Desktopinhalte oder mobile Inhalte erfordert:
```
isPrerenderedUA = userAgent.matches(botUserAgents)
isMobileUA = userAgent.matches(['mobile', 'android'])


if (!isPrerenderedUA) {
} else {
  servePreRendered(isMobileUA)
}
```
In diesem Beispiel wird if (!isPrerenderedUA) {...} verwendet, um reguläre, clientseitig gerenderte Inhalte bereitzustellen. Mithilfe von else { servePreRendered(isMobileUA)} lässt sich bei Bedarf die mobile Version anbieten.
Konfiguriere deinen Server so, dass er den statischen HTML-Code an die von dir ausgewählten Crawler sendet. Je nach verwendeter Technologie hast du dazu mehrere Möglichkeiten. Hier einige Beispiele:
- Übermitteln Sie von Crawlern stammende Anfragen über einen Proxy an den dynamischen Renderer.
- Rendere Inhalte im Rahmen des Bereitstellungsprozesses vorab und achte darauf, dass dein Server den Crawlern den statischen HTML-Code bereitstellt.
- Integriere dynamisches Rendering in den benutzerdefinierten Code des Servers.
- Stelle den Crawlern statische Inhalte von einem Pre-Rendering-Dienst bereit.
- Verwende eine Middleware für deinen Server, z. B. die Rendertron-Middleware.

Konfiguration überprüfen

Nachdem du die Implementierung des dynamischen Renderings abgeschlossen hast, kontrolliere, ob alles erwartungsgemäß funktioniert. Prüfe dazu eine URL mit folgenden Tests:

Teste deine Desktop- und mobilen Inhalte mit dem URL-Prüftool darauf, ob sie auch auf der gerenderten Seite sichtbar sind. Die gerenderte Seite ist die Version, die auch Google sieht.
Erfolgreich: Deine Desktop- und mobilen Inhalte werden den Nutzern erwartungsgemäß angezeigt.

Noch einmal versuchen: Falls die angezeigten Inhalte nicht deinen Erwartungen entsprechen, lies den Abschnitt zur Fehlerbehebung.
Wenn du strukturierte Daten nutzt, prüfe mit dem Test für Rich-Suchergebnisse, ob sie richtig gerendert werden.
Erfolgreich: Die strukturierten Daten werden wie erwartet angezeigt.

Noch einmal versuchen: Falls die strukturierten Daten nicht wie erwartet angezeigt werden, lies den Abschnitt zur Fehlerbehebung.

Fehlerbehebung

Wenn im URL-Prüftool Fehler in deinen Inhalten angezeigt werden oder deine Inhalte nicht in den Ergebnissen der Google Suche erscheinen, versuche, die häufigsten Probleme zu beheben. Falls weiterhin Probleme auftreten, kannst du ein neues Thema in der Hilfe von Google Search Central posten.

Inhalte sind unvollständig oder sehen anders als erwartet aus

Problemursache: Möglicherweise ist der Renderer falsch konfiguriert oder deine Webanwendung ist nicht mit deiner Rendering-Lösung kompatibel. Manchmal können auch Zeitüberschreitungen dazu führen, dass Inhalte nicht korrekt gerendert werden.

Problem beheben: In der Dokumentation zu deiner spezifischen Rendering-Lösung erfährst du, wie du Fehler beim Einrichten von dynamischem Rendering beheben kannst.

Lange Antwortzeiten

Problemursache: Wenn du Seiten mit einem monitorlosen Browser auf Anfrage renderst, führt dies häufig zu langen Antwortzeiten und infolgedessen möglicherweise auch dazu, dass Crawler die Anfrage abbrechen und deine Inhalte nicht indexieren. Lange Antwortzeiten können auch dazu führen, dass Crawler beim Crawling und bei der Indexierung deiner Inhalte die Crawling-Frequenz verringern.

Problem beheben

Richte einen Cache für die vorgerenderten HTML-Inhalte ein oder generiere im Rahmen deines Build-Prozesses eine statische HTML-Version deiner Inhalte.
Kontrolliere, ob der Cache in deiner Konfiguration aktiviert ist. Verweise dazu beispielsweise die Crawler auf deinen Cache.
Prüfe mithilfe von Testtools, wie dem Test für Rich-Suchergebnisse oder dem WebPageTest, ob die Crawler deine Inhalte schnell abrufen können. Verwende dazu einen benutzerdefinierten User-Agent-String aus der Liste der Google-Crawler bzw. User-Agents. Bei deinen Anfragen sollte keine Zeitüberschreitung auftreten.

Webkomponenten werden nicht wie erwartet gerendert

Problemursache: Shadow DOM ist vom Rest der Seite isoliert. Rendering-Lösungen wie Rendertron können Inhalte im isolierten Shadow DOM nicht sehen. Weitere Informationen zu Best Practices für Webkomponenten

Problem beheben

Du hast die Möglichkeit, webcomponents.js-Polyfills für benutzerdefinierte Elemente und Shadow DOM zu laden.
Mit dem Test für Rich-Suchergebnisse oder dem URL-Prüftool kannst du prüfen, ob die Inhalte im gerenderten HTML deiner Rendering-Lösung erscheinen.

Strukturierte Daten fehlen

Problemursache: Wenn der User-Agent für strukturierte Daten fehlt oder keine JSON-LD-Script-Tags in die Ausgabe aufgenommen werden, kann das zu Fehlern in den strukturierten Daten führen.

Problem beheben

Prüfe mithilfe des Tests für Rich-Suchergebnisse, ob die strukturierten Daten auf der Seite vorhanden sind. Konfiguriere dann den User-Agent, um die vorgerenderten Inhalte mit dem Desktop- oder mobilen Googlebot zu prüfen.
Achte darauf, dass der dynamisch gerenderte HTML-Code deiner Inhalte JSON-LD-Script-Tags enthält. Weitere Informationen findest du in der Dokumentation deiner Rendering-Lösung.