Update 23.09.2022 — Es gibt mindestens zwei Seiten wie man Bilder betrachten kann: die eine Seite ist rein von ästhetischer, fotographischer Natur: ist es ein schönes, ansehnliches, interessantes oder spannendes Bild? Goldener Schnitt, gut in Szene gesetzt und passend für den Einsatzzweck?
Die andere Seite ist die Sicht der Suchmaschinenoptimierung: wie bekomme ich meine Bilder nachhaltig und reichweitenwirksam sichtbar im Google Bilder Index untergebracht?
Nutzen von suchmaschinenoptimierten Bildern
Warum sollte man also seine Bilder suchmaschinengerecht optimieren und bereit stellen?
Zum einen greift die technischer Ebene mit Komprimierung & Skalierung und spielt eine große Rolle beim Page Speed Score von Google und der allgemeinen Ladezeit. Hier vor allem durch das 2021 er Google Core Web Vitals Update auch relevant: wie schnell lädt eine Seite sichtbar und wie lange dauert es, bis sie wirklich voll funktionsfähig ist? Der häufigste Grund, den auch wir in unseren SEO Optimierungen sehen sind: Bilder.
Zwar hat die Bildersuche aus SEO Sicht durch mehrere Updates seitens der Darstellung der einzelnen Images in der Google Bildersuche in 2017 – 2018 einen Großteil des vorher vorhandenen User Traffics einbrechen lassen (da nun das Bild direkt in der Bildersuche bei Google betrachtet werden kann, ein Besuch auf der eigentlichen Webseite ist daher oftmals nicht mehr relevant geworden), dennoch spielen Bilder auch in 2021 eine enorm wichtige Rolle!
Gerade unique, einzigartige Bilder über die nur Sie verfügen sind für Google sehr interessant und locken nach wie vor User:innen aufn Webseiten. Viel wichtiger noch sind für Google optimierte Bilder für Online Shops – gerade hier sind die Einstiege über die bezahlten und unbezahlten (Anzeigen/Shopping) Suchergebnisse zwar auf Platz 1 und 2 – jedoch steht auf Platz 3 bereits die gute alte Bildersuche!
Um also nicht nur das allgemeine SEO Profil und Performance des gesamten Online Shops oder Webseite zu stärken, sondern zusätzlich auch in der Google Bildersuche präsent zu sein, empfiehlt es sich aktiv die verwendeten Bilder, vor dem Hochladen idealerweise bereits, zu optimieren.
Wie das geht und worauf man achten muss, zeigen wir Ihnen!
Bilder SEO Leitfaden
Der Leitfaden geht auf die relevantesten Punkte bei Bildern ein und welcher Nutzen und Vorteil Ihrem Online Auftritt dabei entsteht.
Wenn Sie Fragen zu den einzelnen Punkten haben, SEO Beratung oder Unterstützung benötigen – rufen Sie uns gerne an unter 04101 – 85 48 239 oder schreiben uns eine E-Mail auf unserer Kontaktseite!
Optimales Dateiformat von Bildern für Webseiten
Dies gilt natürlich auch für Online Shops! Vorab: Google liebt und empfiehlt in den Webmaster Guidelines: horizontale Bilder mit mehr Breite als Höhe. Auch wenn wir genau genommen im horizontalen (Smartphone)Zeitalter sind – nach wie vor bevorzugen User die volle Breite, also liebt auch Google breite Bilder!
Empfohlen ist dabei das 4:3 Format für Bilder in voller Auflösung. Kleinere Vorschaubilder (sogenannte Thumbnails) sollten mindestens mit einer Breite von 300 Pixeln bereit gestellt werden um von Google indexiert zu werden.
Ansonsten sind generell die unterstützen und empfohlenen Formate von Bildern zur Online Verwendung:
- JPG, JPEG, GIF: für normale Bilder und Hintergrundgrafiken empfohlen. Bieten gute Komprimierungseigenschaften!
- SVG, PNG: diese eignen sich für aufwändige und detaillierte Infografiken und ähnliches und ebenfalls für Unternehmenslogos empfohlen.
- Sonderfall WebP: Google empfiehlt WebP Bilder zu verwenden, da diese noch einmal deutlich kleinere Dateigrößen als bei JPGs ermöglichen und gleichzeitig in die Qualität von SVG und PNG herankommen: bis 34% kleinere Dateigröße bei gleicher Qualität. Nachteil: aktuell wird das Format bei den gängigen CMS wie WordPress nicht unterstützt und es ist (teilweise nur aufwändig) manuell nachzupassen. Aktuell hat sich dieses Format unter anderem deshalb nicht durchsetzen können, jedoch werden die Entwicklungen der nächsten Jahre zeigen, ob sich hier das Blatt wendet oder gar andere, bessere Formate entwickelt werden!
Google liebt niedrige Dateigrößen bei Bildern
Je kleiner, je schneller geladen, je glücklicher User:innen und Suchmaschinen! Einfache Formel mit ein paar Haken.
Kleiner bedeutet meistens auch unschärfer und verpixelter und das ist weniger anschaulich und am Ende soll auch die Besucherschaft ein bestmögliches und vor allem positives Besuchererlebnis haben!
Daher
- Bilder skaliert bereit stellen. Also in möglichst der Größe, wie das Bild maximal angezeigt werden kann/muss. Die Kür ist hierbei eine Bildvariante für Desktop, Tablet und Mobil bereit zu stellen um so noch einmal zusätzlich einzusparen.
- Bilder komprimieren lassen. Normalerweise sind noch unzählige Zusatzinformationen in Bildern enthalten, die nicht optischer Natur sind. Dies sind Informationen von wer das Bild erstellt hat, wo die Fotogafie entstanden ist (Geo Koordinaten) und viele weitere Daten wie man beispielsweise in den Dateieigenschaften von Bildern am PC auslesen kann. Diese für den Webeinsatz unnötigen Informationen und ebenfalls eine gewisse Qualitätsminderung (in unserem Tipp gibt es dafür einen Schieberegler) die jedoch optisch nur im Nahvergleich sichtbar wird können mit sogenannten Minifyern oder Bildkomprimierung Software erreicht werden.
50Kb und kleiner ist für die meisten Bilder eine anstrebenswerte Dateigröße – für Hero und Headerbilder beispielsweise, sollten es maximal 150 Kb sein.
Unser Tipp, da kostenlos und neben der Komprimierung ist auch eine Skalierungsoption vorhanden – so können Sie auch ohne Photoshop / Bildbearbeitungsprogramm schnell, leicht und sicher Bilder komprimieren:
Squoosh.app
Bilder bei Google indexieren – Best Practice SEO Tipps
Damit Bilder technisch gut erfasst werden können und ebenfalls vom Inhalt und der Themenrelevanz verstanden und eingeordnet wird, kann man Google auf mehreren Weisen die hierfür nötigen Informationen zukommen lassen. Daher sollte, wenn ein Bild mehrmals verwendet werden soll – also auf verschiedenen Seiten wie z.B. das Logo, bei Mehrfachnutzung immer das gleiche Bild unter derselben URL genutzt werden! Weitere Unterstützungsfaktoren:
- Bild Dateiname: Ein sprechender, beschreibender Bildname sorgt für nötige Keywords und Inhalte. In der Kürze liegt hierbei die Kunst und betreiben Sie kein Keywordstuffing (z.B. soetwas wie lampe-gluehbirne-leuchtmittel-strahler.jpg). Anhänge wie z.B. 300×300 oä Markierungen um Bilder gleichen Inhalts auseinander zu halten sind in Ordnung!
- Umlaute und Sonderzeichen: Google kommt kurzgesagt nach wie vor damit nicht wirklich zurecht – die englische (Programmier)Sprache kennt weder ä,ö,ü (jeweils in ae etc. umschreiben) noch ß (=ss) oder Dächer auf Bûchstaben (û = u). Lösung: Umlaute und Sonderzeichen „international“ umschreiben!
- Buchstaben & Worttrennung: Wörter immer mit Bindestrichen, keine Unterstriche, trennen und nur kleine Buchstaben oder Zahlen verwenden.
- ALT Text: ein kurzer, beschreibender Text zum Bild oder der Symbolik im eingesetzten Kontext hilft nicht nur Menschen mit Sehschwäche (Stichwort: Barrierefreies Internet), sondern unterstützt auch den Google Bilder Algorithmus.
- Spezielle Themenkategorien für Bilder: diese unterstützen in der URL Struktur über den Pfad und darüber weiteren Keywords nicht nur Google bei der Entscheidung!
- Title Attribut: Soll zusätzlich, vor allem für User:innen relevant, noch eine Beschreibung als Hovereffekt wenn man mit der Maus aufs Bild fährt erscheinen, kann hier ein Bild Title gesetzt werden. Dieser kann inhaltlich – muss aber nicht – identisch mit dem ALT Text sein.
Praktisches Beispiel: Das Cafe Meyer verkauft in seinem Online Shop Kaffee. Das Bild der Kaffeesorte „Cafe Meyer: Arabica 02 – Geröstet“ hat folgenden Bildnamen:
- Beispiel A: schlechter Dateiname:
- www.cafe-meyer.de/ARABICA_Kaffee0289032e80image+Geröstet.jpg
- Beispiel B: guter Dateiname:
- www.cafe-meyer.de/medien/kaffeespezialitaeten/cafe-meyer-arabica-02-kaffee-geroestet.jpg
Hosting & Indexierung von Bildern
- Gerade bei Shops oder Webseiten mit einer enormen Anzahl von Bildern, lohnt sich die Überlegung auf ein CDN – Content Delivery Network – zurück zu greifen. Bei einem solchen externen Hoster/Speicher für Bilder handelt es sich um spezielle Server die Bilder technisch zusätzlich aufbereiten und auf die schnelle Bereitstellung von Bildern für Browser sorgen.
- Mittels speziellen strukturierten Daten (Structured Data) für beispielsweise Produkte und Rezepte, können zusätzliche Rankings erzeugt werden, die direkt in der normalen Suche erscheinen.
- XML Bilder Sitemap, die sie in der Robots.txt Datei hinterlegen und idealerweise in der Google Search Console einreichen, helfen Google dabei jedes Bild zu finden und zu crawlen. Gerade bei Bildern die von der Klicktiefe und internen Verlinkung mehrere Schritte benötigen, können sich so lange vor Google „verbergen“, was gerade für bilderlastige Webprojekte hinderlich ist.
Bonus Tipp für Technik Profis: Hotlinking unterbinden
Hotlinking bezeichnet gewissermaßen einen „Bilderklau“, ohne das fremde Bild hierbei selber zu hosten. Ein altes Problem aus den Anfangszeiten der Suchmaschinen, welches jedoch auch heute noch immer vor kommt und gerade bei Produkten oder künstlerischen Fotografien und ähnlichen Bildermedien noch weit verbreitet ist. Hierbei wird die URL des Bildes, wo es original gehostet ist, genommen und darüber auf einer fremden Webseite eingebunden. So wirkt es als ob das Bild der fremden Webseite gehört, versacht schlimmstenfalls auf der eigenen Webseite längere Ladezeiten und sorgt im Supergau-Fall sogar dafür, dass unter bestimmten Umständen Google die fremde Seite in der Bildersuche ranken lässt!
Wer alle Seiten, außer Google (ansonsten gibt es keine Bilderrankings!), technisch vom Hotlinking ausschließen möchte, trägt folgenden Beispielcode (bitte individuell anpassen + nur für Apache Server verwendbar) in der .htaccess Datei im Rootverzeichnis ein [Achtung! Wer technisch hier nicht versiert ist, bitte vorher Sicherungskopie der Datei anlegen oder lassen!]:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?DOMAIN\.DE(/.*)?$
[NC]
RewriteCond %{HTTP_REFERER} !google\. [NC]
RewriteCond %{HTTP_REFERER} !search\?q=cache [NC]
RewriteRule \.(gif|jpg|GIF|JPG|png|PNG)$ – [F]
Beispielcode, wenn man zusätzlich im Falle eines Hotlinkings ein Bild anzeigen (z.B. mit Inhalt: „Bitte kein Hotlinking! www.meine-domain.de“) lassen möchte, nutzt folgenden Code für die .htaccess Datei [Achtung! Wer technisch hier nicht versiert ist, bitte vorher Sicherungskopie der Datei anlegen oder lassen!]:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?DOMAIN\.DE(/.*)?$
[NC]
RewriteCond %{HTTP_REFERER} !google\. [NC]
RewriteCond %{HTTP_REFERER} !search\?q=cache [NC]
RewriteRule \.(gif|jpg|GIF|JPG|png|PNG)$
https://DOMAIN.DE/dummy-bild.jpg [R,L]
Fazit Bilder SEO 2021: Sinnvoll & Nützlich!
Zusammenfassend können wir aus täglicher Erfahrung nur sagen und empfehlen: vernachlässigen und unterschätzen Sie nicht die Power (oder das Handicap bei unoptimierten Bildern) welche die Bilder und Fotos auf Ihrem Online Auftritt haben können und nutzen Sie diese zu Ihrem Vorteil aus!
Haben Sie bereits Ihre Bilder optimiert oder wurden Sie bereits Hotlinking Opfer? Schreiben Sie uns gerne einen Kommentar – wir freuen uns auf Ihr Feedback!
Nachtrag und Update vom 1. Februar 2023
Gerne veröffentlichen wir hier einen brandaktuellen Tipp von einer unserer geschätzen Blog-Leserinnen Virgy, die wir wie folgt zitieren:
„Während squoosh.app gute Arbeit leistet, wollte ich nur über ein anderes Tool berichten, das meiner Meinung nach besser aussieht. Nach einigem Stöbern fand ich dieses andere Tool und ich wollte vorschlagen, dass Sie es zusammen mit diesem zeigen. https://www.websiteplanet.com/de/webtools/imagecompressor/
Mit diesem Tool können Sie sowohl JPEG- als auch PNG-Dateien komprimieren und jedes Bild kann bis zu 50 MB groß sein!“
Danke Virgy, für Deinen super Tipp. Wir haben das Tool in den vergangenen Tagen selber genutzt und können Deine Empfehlung nur bestätigen.