Geschrieben von

Rendering im SEO

MarTech/AdTech

Indexierung von URLs als Ziel im technischen SEO

Als SEO-Techniker verfolgt man als oberstes Ziel, Inhalte indexiert zu bekommen. Canonicals, Meta-Robots-Anweisungen, interne Links, XML-Sitemap, das Freigeben von wichtigen Ressourcen über die robots.txt sind die “Standard-Mechanismen”, die man dabei einsetzt.

Was bei einfachen Websites – die rein aus HTML und CSS bestehen – ausreicht, genügt beim Einsatz von komplexen Website-Technologien oft nicht aus. Je komplexer eine Website aufgebaut ist, desto mehr Probleme komplexer Art können bei der Indexierung entstehen.

Um den Problemen auf die Spur zu kommen ist es immer hilfreich zu verstehen, welchen Prozess der Bot durchläuft, um eine Website zu indexieren. Im Beitrag “Wie Suchmaschinen Antworten liefern” bin ich auf den Prozess eingegangen. Unter “Der Grob-Vorgang” habe ich folgende Steps erläutert:

  • Crawling: Der Crawler (Bot, Robot) wird vom Scheduler gesteuert, holt die Dokumente und legt sie ins Repository ab.
  • Indexierung: Der Indexer holt sich die Daten aus dem Repository, bereitet sie auf und übergibt sie an den Such-Index.

Da der Bot mittlerweile Websites auch wie ein echter Nutzer erfassen möchte (aus diesem Grund wird auch immer empfohlen keine CSS- und JavaScript-Dateien in der robots.txt zu sperren.), findet ein zusätzliches Rendering statt. Der Prozess läuft dann wie folgt ab:

  • Crawling
  • Indexierung
  • Rendering

Was ist Rendering?

Fordert der Browser eine Website an und antwortet der Server mit dem HTML-Dokument, dann liegt es zunächst als HTML-Code vor. Der Browser interpretiert den Code und “rendert” ihn. “Rendern” bedeutet in diesem Zusammenhang, dass das Website-Layout – so wie man die Website als Nutzer sieht – präsentiert wird. Einfach ausgedrückt: Rendering ist der Prozess, um die Website grafisch dazustellen. Diesen Prozess übernimmt der Renderer.

Wieso möchte der Bot rendern?

Wenn der Bot die Website erfasst, dann kann dieser anhand des Quellcodes erkennen, welches Thema die Website behandelt. Mit dem Rendering kann der Bot die User Experience der Seite erkennen. Zudem ist der Bot dadurch in der Lage die Website aus unterschiedlichen Perspektiven besser zu verstehen:

  • Wie schon genannt, kann der Bot die Seite wie ein Nutzer erfassen und somit die User Experience bewerten
  • Wichtiger Content kann erkannt werden
  • Der Bot sieht was Above-the-Fold ist
  • Mit Rendering versteht die Suchmaschine, welche Inhalte hinter einem Klick versteckt sind
  • Werbung und Banner können erkannt werden
  • Der Bot möchte verstehen, ob die Website mobiltauglich ist
  • Die Position von Inhalten und einzelnen Elementen kann erfasst werden

Wie rendert der Googlebot?

Bevor der Bot rendern kann, muss die Seite zunächst gecrawlt werden. Nach dem Crawling wird die Seite indexiert. Dann wird die Seite zum Rendering übergeben. Hierbei kommt der Web Rendering Service (WRS) von Google zum Einsatz. Seit Mai 2019 erfolgt das Rendering immer auf Basis der neuesten Chrome-Version (Evergreen Googlebot). Das heißt, dass das Rendering auf Basis der neuesten Technologie stattfindet und der Bot so in der Lage ist, die Website wie ein Nutzer zu erfassen.

Vom Prozess her erfolgt ein Rendering mit dem WRS wie folgt:

  • Google findet eine URL
  • Seite wird für das Crawling eingeplant
  • Seite wird gecrawlt
  • Die Inhalte werden indexiert
  • Die Seite kommt in die Rendering-Warteschlange
  • Seite wird gerendert

Ist die Seite nun an der Reihe erfolgt der Zugriff auf die Seite über einen Headless Browser (Browser ohne grafische Benutzeroberfläche) mit dem Web Rendering Service.

BOR (Batch-optimized Rendering)

Beim SEJ eSummit zeigte Bartosz Góralewicz hierzu sehr interessante Insights. Das Video ist auch auf YouTube zu sehen.

Das BOR (Batch-optimized Rendering) kommt vor allem bei großen Websites mit JavaScript-Einsatz zum Tragen. Dabei wurde beobachtet, dass viele JS-Websites selbst nach 2 Wochen nicht indexiert wurden. Auch gibt es große Indexierungsfluktuationen während Google-Updates.

Große Herausforderung für SEOs ist herauszufinden, ob eine URL indexiert ist oder nicht. Die site-Abfrage ist dabei nicht immer die beste und zuverlässigste Wahl, wie dieses Bild zeigt. Indexierungsprobleme mit JavaScript haben aber nicht immer damit zu tun, dass Google das JavaScript nicht indexieren kann. Oft gibt es Probleme beim Rendering, was dazu führt, dass Inhalte nicht indexiert werden können. Hier kommt BOR ins Spiel.

Grob betrachtet funktioniert BOR wie folgt:

  1. Alle Ressourcen, die für das Rendering nicht notwendig sind, werden übersprungen
  2. Eine virtuelle Uhr wird gesetzt
  3. Die Seite wird gerendert

BOR überspringt alle Ressourcen, die nicht wichtig sind, um eine Vorschau (bzw. das Layout) der Seite zu generieren. Dazu werden alle Tracking-Skripte, Werbung und auch Bilder ignoriert. Simuliert man dieses Verhalten nach (wie das geht, siehe weiter unten) lässt sich auch erkennen, dass die Seitenladegeschwindigkeit deutlich verbessert wird. Vor allem bei JS-lastigen Websites ist das für den Bot ein Segen, da hier Rechenleistung deutlich gespart wird.

Im Anschluss wird vom Googlebot eine virtuelle Uhr gesetzt (vereinfacht ausgedrückt). Wenn diese virtuelle Uhr abläuft wird das Website-Layout gerendert. Die virtuelle Uhr kann man in etwa dem Rendering-Budget gleichsetzen. Während die Uhr läuft wird das Rendering angehalten, um auf Dateien wie CSS, JS, etc. zu warten. Im Umkehrschluss bedeutet das für ein erfolgreiches Rendering, dass man bei schweren Websites dafür sorgen muss, dass man genug virtuelle Zeit hat.

Und auch hier: Um Ressourcen zu sparen, ist die Zeit begrenzt. Wie und woran die Limitierung seitens dem Bot gesetzt ist, kann man leider nicht sagen. Wenn die virtuelle Uhr abläuft, rendert Google also die Website und erzeugt das Layout, unabhängig davon, ob alle notwendigen Ressourcen geladen worden sind oder nicht. Das kann zu verschiedenen Problemen bei der SEO-Performance führen.

Wie kann man hier vorbeugen?
Da mit dem Rendering der Bot versteht, wo wichtiger Content steht und wo nebensächliche Inhalte zu finden sind, sollte man darauf achten, dass für den Index relevante Inhalte im Main Content-Bereich stehen. Hier kann man nachhelfen, indem man wichtigen Inhalt entsprechend auszeichnet: Im Above-the-Fold-Bereich platzieren, richtige Farbe und Größe wählen, etc.

Bei Bildern muss man zunächst verstehen, dass Google beim Rendering nicht die echten Bilder heranzieht, sondern nur Platzhalter, um die Seite zu rendern. Daher ist hier wichtig:

  • Bilder immer cachen
  • 404-Bilder überwachen und korrigieren (fehlerhafte Bilder können das Layout komplett zerschießen)
  • Bilder-Dimensionen immer mitangeben, damit es zu keinem Layout-Shift kommt

Damit wichtige Links erkannt werden, spielen folgende Faktoren eine Rolle:

  • Größe und gesetzte Farbe über CSS
  • Position des Links auf der Seite (Links im sichtbaren Bereich haben z.B. ein größeres Gewicht als Links im Footer)

Diese 2 Aspekte haben Auswirkungen darauf, ob der Bot dem Link folgt und welche Gewichtung dem Link beigemessen wird. Dabei muss man beachten, dass Links im Main Content-Bereich nicht automatisch die höchste Gewichtung bekommen. Der Bot geht bei Links nicht nach solchen Sektionen vor, sondern betrachtet den Link einzeln. Das heißt, dass auch ein Link im Main Content-Bereich unwichtig sein kann, wenn dieser z.B. als Werbe-Link erkannt wird. Das Rendering spielt also eine Rolle, ob und wie viel Link-Juice weitervererbt wird.

Im Video werden zudem folgende, wichtige Hinweise genannt:

  • Manche Inhalte ignoriert Google mehr als andere
  • Mit Boxen wie “ähnliche Produkte” o.ä. hat der Bot laut den Tests immer wieder Probleme
  • Bei schweren Websites wird Google versuchen nur den Main Content zu rendern und indexieren, den Rest wird der Bot versuchen zu ignorieren
  • JavaScript-Inhalte werden meist nicht indexiert, weil sie nicht gerendert werden, da sie wiederum meist bei eher unwichtigen Inhalten (in der Sidebar, am unteren Ende der Seite, etc.) eingesetzt werden. Das heißt wiederum, dass bei Indexierungsproblemen nicht JavaScript immer Schuld ist, sondern das Rendering.

Möchte man nun selbst prüfen, inwieweit BOR Auswirkungen auf die eigene Website hat, gibt es verschiedene Möglichkeiten BOR zu simulieren:

  • Developer-Console: Hierzu kann man in den Network-Panel wechseln und die Seite neu laden. Im Anschluss werden alle Ressourcen aufgelistet. Im nächsten Schritt können die Ressourcen, die der Bot bei BOR ausblendet, rausgelöscht werden. Dann sieht man im Browser die Seite so, wie sie der Bot beim Rendering auch sehen würde.
  • Virtuelle Uhr: Um diese virtuelle Uhr zu messen, kann das Tool von Onely dazu verwendet werden.