Sichergehen, dass Lazy-Loading-Inhalte für Google sichtbar sind

Das Zurückstellen des Ladens nicht kritischer oder nicht sichtbarer Inhalte wird auch als "Lazy Loading" bezeichnet und ist eine gängige Best Practice, die zur Leistungssteigerung und zur Optimierung der Seitennutzung verwendet wird. Weitere Informationen findest du im Web Fundamentals-Leitfaden zum Lazy Loading von Bildern und Videos. Falls diese Technik nicht korrekt implementiert wird, kann es jedoch ungewollt dazu kommen, dass Inhalte für Google unsichtbar werden. Hier erfährst du, wie du dafür sorgst, dass Google Lazy-Loading-Inhalte crawlen und indexieren kann.

Inhalte laden, wenn sie im Darstellungsbereich sichtbar sind

Damit sämtliche Inhalte auf deiner Seite für den Googlebot sichtbar sind, müssen alle relevanten Inhalte für die Lazy-Loading-Implementierung dann geladen werden, wenn sie im Darstellungsbereich sichtbar sind. Hierfür zwei Beispiele:

  • IntersectionObserver API und Polyfill
  • Eine JavaScript-Bibliothek, die das Laden von Daten zu dem Zeitpunkt unterstützt, zu dem sie in den Darstellungsbereich gelangen

Teste außerdem deine Implementierung.

Laden von nummerierten Seiten für unendliches Scrollen unterstützen

Wenn du unendliches Scrollen implementierst, darfst du nicht vergessen, dabei auch die Unterstützung für das Laden von nummerierten Seiten einzurichten. Letzteres ist für Nutzer wichtig, da sie so die Möglichkeit haben, deine Inhalte zu teilen und wieder mit ihnen zu interagieren. Außerdem kann Google auf diese Weise auf einer Seite mit unendlichem Scrollen anstelle des Seitenanfangs einen Link zu einem bestimmten Punkt in den Inhalten anzeigen.

Wenn du das Laden von nummerierten Seiten unterstützen möchtest, gib einen eindeutigen Link zu jedem Abschnitt an, den die Nutzer direkt teilen und laden können. Wir empfehlen dir, die URL über die History API zu aktualisieren, wenn die Inhalte dynamisch geladen werden.

Test

Nachdem du die Implementierung eingerichtet hast, solltest du überprüfen, ob sie korrekt funktioniert. Du kannst sie beispielsweise mit einem Puppeteer-Skript lokal testen. Puppeteer ist eine Node.js-Bibliothek zur Steuerung der monitorlosen Chrome-Version. Zur Ausführung des Skripts benötigst du Node.js. Mit den folgenden Befehlen wird das Skript geprüft und ausgeführt:

git checkout https://github.com/GoogleChromeLabs/puppeteer-examples
cd puppeteer-examples
npm i
node lazyimages_without_scroll_events.js -h

Überprüfe nach der Ausführung des Skripts manuell, ob die dabei erstellten Screenshots sämtliche Inhalte enthalten, die sichtbar sein und von Googlebot indexiert werden sollen.

Du kannst auch mit dem URL-Prüftool in der Search Console kontrollieren, ob alle Bilder geladen wurden. Außerdem kannst du dir den Screenshot und den gerenderten HTML-Code ansehen.