Warum CSS-Hintergrundbilder nicht indexiert werden
Google hat kürzlich darauf hingewiesen, dass Bilder, die mit CSS-Hintergrundattributen hinzugefügt werden, nicht von Google Bildersuche indexiert werden. Stattdessen empfiehlt Google Entwicklern, wichtige Bilder über HTML-Tags, wie das img– oder picture-Tag, zu integrieren. Dies ist wichtig, um die Sichtbarkeit und Zugänglichkeit der Inhalte zu verbessern.
Das Problem mit CSS-Bildern
Laut Google gibt es ein Verständnisproblem bei einigen Entwicklern: Wenn sie Bilder mit CSS implementieren, erscheinen diese nicht in der Dokumentstruktur (DOM). Das bedeutet, dass diese Bilder für Google unsichtbar bleiben und nicht indexiert werden können.
„Wenn ein Bild zur Inhaltsbedeutung einer Webseite beiträgt, sollte es mit einem
img-Tag eingebettet werden, um von Google erkannt und indexiert zu werden.“ – Martin Splitt, Google-Such-Anwalt
Wann CSS-Bilder passen
CSS-Bilder sind ideal für dekorative Elemente, die keinen inhaltlichen Wert haben, wie z. B. Hintergrundmuster oder Animationen. Möchte man jedoch ein Bild als Teil der Webseite-Inhalte präsentieren, sollte das Bild direkt im HTML-Quellcode eingebaut werden.
Die technische Erklärung: Warum CSS unsichtbar bleibt
Martin Splitt erläutert, dass CSS-Bilder zwar für den Nutzer sichtbar sind, jedoch nicht im DOM gespeichert werden. Google analysiert hauptsächlich die DOM-Struktur der Webseite und ignoriert somit alle rein gestalterischen CSS-Elemente. Es gibt also eine klare Trennung zwischen Inhalt und Design.
Praktischer Tipp bei Stock-Fotos
Selbst wenn lizenzierte oder Stock-Fotos verwendet werden, empfiehlt Google diese Bilder ebenfalls in HTML einzubinden. Dadurch werden sie indexiert und bleiben suchmaschinenfreundlich.
Wichtige Beispiele für verlorene Sichtbarkeit
- Immobilienportale: Fotos von Häusern, die via CSS implementiert sind, erscheinen weniger in relevanten Suchanfragen.
- Nachrichtenportale: Diagramme oder Infografiken, die nicht in HTML eingebettet sind, können über Google nicht gefunden werden.
- E-Commerce-Plattformen: Produktbilder, die in CSS als Hintergrund geladen werden, sind schlechter sichtbar.
Best Practices: Das solltest du tun
- Nutze HTML-Bild-Tags für wichtige visuelle Inhalte.
- Verwende CSS-Bilder nur für Dekoration.
- Wenn du möchtest, dass ein Bild über die Suche auffindbar ist: Es muss im HTML stehen.
- Dies steigert nicht nur die SEO-Leistung, sondern verbessert auch die Barrierefreiheit der Webseite.
Der Ausblick
Abschließend betont Google, dass es essenziell ist, wie Bilder auf einer Webseite eingebettet werden. Während CSS weiterhin für das Design unentbehrlich bleibt, sollten Inhaltsbilder möglichst standardkonform über HTML eingebaut werden, um langfristige SEO-Erfolge zu sichern.
Höre dir den vollständigen Google Podcast an:
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
