Dynamisches Rendering implementieren

Die Verarbeitung von JavaScript ist derzeit schwierig und nicht alle Suchmaschinen-Crawler können JavaScript sofort oder erfolgreich verarbeiten. Wir hoffen, dass dieses Problem künftig behoben wird. In der Zwischenzeit empfehlen wir als Umgehung für dieses Problem das dynamische Rendering. Beim dynamischen Rendering wird zwischen clientseitig gerenderten und vorgerenderten Inhalten für bestimmte User-Agents gewechselt.

Websites, für die dynamisches Rendering verwendet werden sollte

Dynamisches Rendering eignet sich gut für indexierbare, öffentliche, von JavaScript generierte Inhalte, die sich schnell ändern. Außerdem ist es für Inhalte geeignet, in denen JavaScript-Funktionen verwendet werden, die nicht von deinen bevorzugten Crawlern unterstützt werden. Dynamisches Rendering muss nicht auf allen Websites verwendet werden. Beachten Sie, dass es für Crawler eine Problemumgehung darstellt.

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 den Server, der dem Browser die anfänglichen HTML- und JavaScript-Inhalte direkt bereitstellt. Im Gegensatz dazu wird auch der Server gezeigt, der die anfänglichen HTML- und JavaScript-Inhalte einem Renderer bereitstellt, von dem sie in statisches HTML konvertiert werden. 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 Ihr dynamisches Rendering ähnliche Inhalte generiert, geht der Googlebot nicht von einem Cloaking aus.

Wenn Sie das dynamische Rendering einrichten, werden auf Ihrer 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 ist 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.

  1. Installiere und konfiguriere einen dynamischen Renderer, um deine Inhalte in statischen HTML-Code umzuwandeln, den Crawler einfacher verarbeiten können. Gängige dynamische Renderer sind u. a. Puppeteer, Rendertron und prerender.io.
  2. Wähle die User-Agents aus, die den statischen HTML-Code erhalten sollten, und sieh in deinen spezifischen Konfigurationsdetails nach, wie du User-Agents aktualisierst oder hinzufügst. Hier ist ein Beispiel für eine Liste gängiger User-Agents in der Rendertron-Middleware:
    export const botUserAgents = [
      'googlebot',
      'google-structured-data-testing-tool',
      'bingbot',
      'linkedinbot',
      'mediapartners-google',
    ];
  3. 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 prüfen, ob die Anfragen von legitimen Crawlern stammen.
  4. Finden Sie heraus, ob die User-Agents Desktopinhalte oder mobile Inhalte erfordern. Geben Sie mithilfe der dynamischen Bereitstellung die entsprechende Desktopversion oder die mobile Version an. Hier sehen Sie 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) }
  5. 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:
    • Übermittle 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.
    • Integrieren Sie 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 dynamisches Rendering implementiert hast, solltest du prüfen, ob alles erwartungsgemäß funktioniert. Dazu kannst du mit einer URL folgende Tests machen:

  1. Prüfe deine mobilen Inhalte mit dem Test auf Optimierung für Mobilgeräte, um zu kontrollieren, ob Google deine Inhalte abrufen kann.

    Erfolgreich: Deine mobilen Inhalte werden den Nutzern erwartungsgemäß angezeigt.

    Noch einmal versuchen: Falls die angezeigten Inhalte nicht deinen Erwartungen entsprechen, lies den Abschnitt zur Fehlerbehebung.

  2. Teste deine Desktopinhalte mit dem URL-Prüftool, um zu kontrollieren, ob sie auch auf der gerenderten Seite sichtbar sind. Die gerenderte Seite ist die Form, in der der Googlebot deine Seite sieht.

    Erfolgreich: Deine Desktopinhalte werden den Nutzern erwartungsgemäß angezeigt.

    Noch einmal versuchen: Falls die angezeigten Inhalte nicht deinen Erwartungen entsprechen, lies den Abschnitt zur Fehlerbehebung.

  3. Wenn du strukturierte Daten nutzt, überprüfe mit dem Testtool für strukturierte Daten, 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 beim Test auf Optimierung für Mobilgeräte Fehler in deinen Inhalten angezeigt werden oder deine Inhalte nicht in den Ergebnissen der Google-Suche erscheinen, versuche, die Probleme zu beheben. Die häufigsten Probleme sind unten aufgeführt. Falls weiterhin Probleme auftreten, kannst du auch ein neues Thema im Webmaster-Forum 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

  1. Richte einen Cache für die vorgerenderten HTML-Inhalte ein oder generiere im Rahmen deines Build-Prozesses eine statische HTML-Version deiner Inhalte.
  2. Kontrolliere, ob der Cache in deiner Konfiguration aktiviert ist. Verweise dazu beispielsweise die Crawler auf deinen Cache.
  3. Prüfe mithilfe von Testtools, wie dem Test auf Optimierung für Mobilgeräte oder dem WebPagetest, ob die Crawler deine Inhalte schnell abrufen können. Verwende dazu einem 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

  1. Sie haben die Möglichkeit, webcomponents.js-Polyfills für benutzerdefinierte Elemente und Shadow DOM zu laden.
  2. Mit dem Test auf Optimierung für Mobilgeräte 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-Skript-Tags in die Ausgabe aufgenommen werden, kann das zu Fehlern in den strukturierten Daten führen.

Problem beheben

  1. Prüfen Sie mithilfe des Testtools für strukturierte Daten, ob die strukturierten Daten auf der Seite vorhanden sind. Konfigurieren Sie anschließend den User-Agent für das Testtool für strukturierte Daten, um die vorgerenderten Inhalte zu testen.
  2. Kontrolliere, ob der dynamisch gerenderte HTML-Code deiner Inhalte JSON-LD-Skript-Tags enthält. Weitere Informationen findest du in der Dokumentation deiner Rendering-Lösung.