Lazy-Loaded-Inhalte korrigieren

Das Verzögern des Ladens von nicht kritischen oder nicht sichtbaren Inhalten, auch bekannt als „Lazy Loading“, ist eine gängige Best Practice für Performance und UX. Weitere Informationen finden Sie unter Ressourcen von web.dev zum Lazy Loading von Bildern und Videos.
Wenn diese Technik jedoch nicht korrekt implementiert wird, kann sie Inhalte versehentlich vor Google verbergen. Dieses Dokument erklärt, wie Sie sicherstellen können, dass Google Lazy-Loaded-Inhalte crawlen und indexieren kann.

Inhalte laden, wenn sie im Viewport sichtbar sind

Um sicherzustellen, dass Google alle Inhalte auf Ihrer Seite sieht, stellen Sie sicher, dass Ihre Lazy-Loading-Implementierung alle relevanten Inhalte lädt, sobald sie im Viewport sichtbar sind. Hier sind einige Methoden zur Implementierung von Lazy Loading:

• In Browser integriertes Lazy Loading für Bilder und Iframes
• IntersectionObserver API und ein Polyfill
• Eine JavaScript-Bibliothek, die das Laden von Daten unterstützt, wenn sie in den Viewport gelangen

Die genannten Methoden sind nicht auf Benutzeraktionen wie Scrollen oder Klicken angewiesen, um Inhalte zu laden, was wichtig ist, da die Google Suche nicht mit Ihrer Seite interagiert.

Fügen Sie kein Lazy Loading zu Inhalten hinzu, die beim Öffnen einer Seite durch den Benutzer voraussichtlich sofort sichtbar sind. Dies könnte dazu führen, dass das Laden und Anzeigen der Inhalte im Browser länger dauert, was für den Benutzer sehr spürbar ist.

Stellen Sie sicher, dass Sie Ihre Implementierung testen.

Paginiertes Laden für Infinite Scrolling unterstützen

Auf einer hohen Ebene ist Infinite Scrolling eine Technik, die beim Herunterscrollen des Benutzers auf einer langen Seite weitere Inhalte, also weitere eigenständige Seiten, lädt. Dies kann ein langer Artikel sein, der in mehrere Abschnitte unterteilt ist, oder eine Sammlung von Elementen, die ähnlich in Abschnitte unterteilt ist. Um Infinite Scrolling indexierbar zu implementieren, stellen Sie sicher, dass Ihre Website das paginierte Laden dieser Abschnitte unterstützt, indem Sie Folgendes tun:

• Geben Sie jedem Abschnitt eine eigene persistente, eindeutige URL.
• Stellen Sie sicher, dass der auf jeder URL angezeigte Inhalt jedes Mal derselbe bleibt, wenn er in einem Browser geladen wird. Eine Möglichkeit hierzu besteht darin, absolute Seitenzahlen in der URL zu verwenden, zum Beispiel durch die Verwendung von
  ?page=12 als Abfrageparameter.
• Vermeiden Sie die Verwendung relativer Elemente wie ?date=yesterday in diesen URLs. Dies ermöglicht es Suchmaschinen und Benutzern, dieselben Inhalte konsistent unter einer bestimmten URL zu finden, erleichtert es Suchmaschinen, die Inhalte ordnungsgemäß zu indexieren, und ermöglicht es Benutzern, diesen Teil Ihrer Inhalte zu teilen und erneut aufzurufen.
• Verlinken Sie sequenziell auf die einzelnen URLs, damit Suchmaschinen die URLs in einem paginierten Set entdecken können. Erfahren Sie mehr über
  Best Practices bei der Implementierung von Paginierung.
• Wenn als Reaktion auf das Scrollen des Benutzers ein neuer Seitenabschnitt geladen wird und dieser zum primär sichtbaren Element für den Benutzer wird, aktualisieren Sie die angezeigte URL mithilfe der
  History API. Dies ermöglicht es dem Benutzer, die im Browser angezeigte aktuelle URL zu aktualisieren, zu teilen und darauf zu verlinken.

Testen

Stellen Sie nach dem Einrichten Ihrer Implementierung sicher, dass sie ordnungsgemäß funktioniert. Sie können das URL-Prüftool in der Search Console verwenden, um zu sehen, ob alle Inhalte geladen wurden. Überprüfen Sie den gerenderten HTML-Code, um sicherzustellen, dass Ihre Inhalte im gerenderten HTML-Code vorhanden sind, indem Sie im URL-Prüftool danach suchen. Wenn Ihre Bild- oder Video-URLs im src Attribut der <img> oder <video> Elemente im gerenderten HTML-Code erscheinen, funktioniert Ihre Einrichtung ordnungsgemäß.