Informationen zum dynamischen Rendering

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 Umgehungslösung 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

Das dynamische Rendering eignet sich gut für indexierbare, öffentliche, von JavaScript generierte Inhalte, die sich schnell ändern, oder für Inhalte, in denen JavaScript-Funktionen zur Anwendung kommen, die von den von Ihnen bevorzugten Crawlern nicht unterstützt werden. Dynamisches Rendering muss nicht auf allen Websites verwendet werden. Beachten Sie, dass dynamisches Rendering 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, Anforderungen 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. Sie können den dynamischen Renderer für alle Seiten oder seitenweise aktivieren.

Diagramm, in dem die Funktionsweise von dynamischem Rendering dargestellt ist. Das Diagramm zeigt den Server, der dem Browser die anfänglichen HTML- und JavaScript-Inhalte direkt bereitstellt. Umgekehrt zeigt das Diagramm auch den Server, der die anfänglichen HTML- und JavaScript-Inhalte einem Renderer bereitstellt, der diese in statisches HTML konvertiert. Nach der Konvertierung der Inhalte stellt der Renderer dem Crawler statisches HTML bereit.

Dynamisches Rendering implementieren

Beachten Sie unsere allgemeinen Richtlinien, um das dynamische Rendering für Ihre Inhalte einzurichten. Sehen Sie sich Ihre spezifischen Konfigurationsdetails an, da diese je nach Implementierung stark variieren können.

  1. Installieren und konfigurieren Sie einen dynamischen Renderer, um Ihre 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ählen Sie die User-Agents aus, die den statischen HTML-Code erhalten sollten, und sehen Sie in Ihren spezifischen Konfigurationsdetails nach, wie Sie User-Agents aktualisieren oder hinzufügen. Hier sehen Sie 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 Ihnen eine große Anzahl von Pre-Rendering-Anfragen angezeigt wird, sollten Sie eventuell einen Cache für vorgerenderte Inhalte implementieren oder überprü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, wie für eine Konfiguration ermittelt werden könnte, ob ein User-Agent Desktopinhalte oder mobile Inhalte erfordert:
    isPrerenderedUA = userAgent.matches(botUserAgents)
    isMobileUA = userAgent.matches(['mobile', 'android'])
    
    if (!isPrerenderedUA) { } else { servePreRendered(isMobileUA) }
  5. Konfigurieren Sie Ihren Server so, dass er den statischen HTML-Code an die von Ihnen ausgewählten Crawler sendet. Je nach Ihrer Technologie haben Sie hierzu mehrere Möglichkeiten. Hier einige Beispiele:
    • Übermitteln Sie von Crawlern stammende Anfragen über einen Proxy an den dynamischen Renderer.
    • Rendern Sie Inhalte im Rahmen des Bereitstellungsprozesses vorab und sorgen Sie dafür, dass Ihr Server den Crawlern den statischen HTML-Code bereitstellt.
    • Integrieren Sie dynamisches Rendering in den benutzerdefinierten Code des Servers.
    • Stellen Sie den Crawlern statische Inhalte von einem Pre-Rendering-Dienst bereit.
    • Verwenden Sie eine Middleware für Ihren Server, z. B. die Rendertron-Middleware.

Konfiguration prüfen

Nachdem Sie die Implementierung des dynamischen Renderings abgeschlossen haben, überprüfen Sie, ob alles erwartungsgemäß funktioniert. Dazu prüfen Sie eine URL mit folgenden Tests:

  1. Testen Sie Ihre mobilen Inhalte mit dem Test auf Optimierung für Mobilgeräte, um zu kontrollieren, dass Google Ihre Inhalte abrufen kann.

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

    error Noch einmal versuchen: Falls die angezeigten Inhalte nicht Ihren Erwartungen entsprechen, lesen Sie den Abschnitt zur Fehlerbehebung.

  2. Testen Sie Ihre Desktopinhalte mit dem Tool Abruf wie durch Google, um zu überprüfen, ob die Desktopinhalte auch auf der gerenderten Seite sichtbar sind. Bei der gerenderten Seite handelt es sich um die Form, in der der Googlebot Ihre Seite abruft.

    done Erfolgreich: Ihre Desktopinhalte werden den Nutzern erwartungsgemäß angezeigt.

    error Noch einmal versuchen: Falls die angezeigten Inhalte nicht Ihren Erwartungen entsprechen, lesen Sie den Abschnitt zur Fehlerbehebung.

  3. Wenn Sie strukturierte Daten nutzen, testen Sie mit dem Testtool für strukturierte Daten, ob Ihre strukturierten Daten korrekt gerendert werden.

    done Erfolgreich: Die strukturierten Daten werden wie erwartet angezeigt.

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

Fehlerbehebung

Falls beim Test auf Optimierung für Mobilgeräte Fehler in Ihren Inhalten angezeigt werden oder Ihre Inhalte nicht in den Ergebnissen der Google-Suche erscheinen, versuchen Sie, die Probleme zu beheben. Die häufigsten Probleme sind unten aufgeführt. Wenn weiterhin Probleme auftreten, posten Sie ein neues Thema im Webmaster-Forum.

Inhalte sind unvollständig oder sehen anders aus

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

done Problem beheben: Informationen zum Beheben von Fehlern bei der Einrichtung des dynamischen Renderings finden Sie in der Dokumentation zu Ihrer spezifischen Rendering-Lösung.

Lange Antwortzeiten

error Problemursache: Wenn Sie Seiten mit einem Browser ohne grafische Ausgabe auf Anfrage rendern, führt dies häufig zu langen Antwortzeiten und infolgedessen unter Umständen dazu, dass Crawler die Anfrage abbrechen und Ihre Inhalte nicht indexieren. Lange Antwortzeiten können auch dazu führen, dass Crawler beim Crawlen und Indexieren Ihrer Inhalte ihre Crawling-Frequenz verringern.

done Problem beheben

  1. Richten Sie einen Cache für die vorgerenderten HTML-Inhalte ein oder generieren Sie im Rahmen Ihres Erstellungsprozesses eine statische HTML-Version Ihrer Inhalte.
  2. Kontrollieren Sie, dass der Cache in Ihrer Konfiguration aktiviert ist. Verweisen Sie dazu beispielsweise die Crawler auf Ihren Cache.
  3. Überprüfen Sie mithilfe von Testtools wie dem Test auf Optimierung für Mobilgeräte oder dem WebPagetest (mit einem benutzerdefinierten User-Agent-String aus der Liste der Google-Crawler bzw. User-Agents), ob die Crawler Ihre Inhalte schnell abrufen können. Für Ihre Anfragen sollte keine Zeitüberschreitung auftreten.

Strukturierte Daten fehlen

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

done Problem beheben

  1. Überprü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. Kontrollieren Sie, dass der dynamisch gerenderte HTML-Code Ihrer Inhalte JSON-LD-Skript-Tags enthält. Weitere Informationen finden Sie in der Dokumentation Ihrer Rendering-Lösung.

Feedback geben zu...