Sichergehen, dass Lazy-Load-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 finden Sie 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 nicht sichtbar sind. Hier erfahren Sie, wie Sie dafür sorgen, dass Google Lazy-Load-Inhalte crawlen und indexieren kann.

Inhalte laden, wenn sie im Darstellungsbereich sichtbar sind

Damit sämtliche Inhalte auf Ihrer Seite für den Googlebot sichtbar sind, müssen alle relevanten Inhalte für die Lazy-Load-Implementierung im Darstellungsbereich geladen werden. Beispiele:

Testen Sie Ihre Implementierung.

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

Denken Sie bei der Implementierung von unendlichem Scrollen daran, auch die Unterstützung für das Laden von nummerierten Seiten einzuschließen. Letzteres ist für Nutzer wichtig, da sie dadurch die Möglichkeit haben, Ihre Inhalte zu teilen und wieder mit diesen zu interagieren. Außerdem kann Google anstelle des oberen Bereichs einer Seite mit unendlichem Scrollen einen Link zu einem bestimmten Punkt in den Inhalten anzeigen.

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

Test

Nachdem Sie Ihre Implementierung eingerichtet haben, sollten Sie überprüfen, ob sie korrekt funktioniert. Sie können sie beispielsweise mit einem Puppeteer-Skript lokal testen. Puppeteer ist eine Node.js-Bibliothek zur Steuerung von Headless Chrome. Zur Ausführung des Skripts benötigen Sie 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üfen Sie 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.

Sie können 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.