von Florian Kolbe
Es gibt kaum eine Webseite oder einen Onlineshop ohne Fotos oder Grafiken. Sie verleihen der Webseite Leben und helfen zudem, Inhalte zu strukturieren. Außerdem unterstützen sie deren Aussage.
Doch Bilder für Suchmaschinen wie Google und Bing zu optimieren, ist ein wichtiger Aspekt, der oft vernachlässigt wird. Viele unterschätzen, dass mit den richtigen Stellschrauben auch über Bilder wichtiger Traffic generiert werden kann.
In diesem Gastbeitrag zeigt SEO-Experte Florian Kolbe auf, wie SEO-Bildoptimierung funktioniert und was dabei aus technischer Sicht zu beachten ist.
Du willst mehr über SEO erfahren? Kein Problem!
Kostenlos für dich: Unsere SEO Checkliste
Bist du unzufrieden mit deinem Ranking bei Google und Co.? Verbessere dein Ranking mit unserer SEO Checkliste.
Hol dir die kostenlose SEO Checkliste direkt in deine Inbox. Gib unten deine Email ein.
Dein Download ist nur noch einen Klick entfernt. Fülle schnell noch dieses Feld aus und du bekommst dein Dokument sofort.
Wir hassen Spam und werden deine Daten niemals weitergeben.
SEO zur Bildoptimierung - Die Grundlagen
Wie auch Texte werden Bilder oft über einen HTML-Code eingebunden. In den letzten Jahren hat sich dieser nicht stark verändert. Vielmehr werden Bilder mittlerweile automatisiert über ein Content-Management- oder Shopsystem eingebunden. Einfach die Datei per Drag and Drop oder über eine Eingabemaske hinzufügen und fertig. Die technische Einbindung geschieht im Hintergrund. Dabei werden häufig die Attribute "src" (= Source, Quelle), "alt" (= Alternativ) und "title" (= Titel) verwendet. Zusätzliche Angaben wie Breite und Höhe des Bildes können ebenfalls eingepflegt werden. Der Code kann dann beispielsweise so aussehen:
<img width="800" height="600" src="https://www.beispiel.de/bilder/beispiel-bilddatei.jpg" alt="der Alt-Tag" title="der Titel-Tag"/>
Es empfiehlt sich, Bilder stets auf dem eigenen Server zu hosten. Zudem besteht nicht die Gefahr des Verlust eines Bildes, weil sich der Zugriffspfad ändert oder das Bild schlicht und einfach nicht mehr verfügbar ist.
Ordnerstruktur und Benennung der Bilddateien für eine solide Basis
Wird ein CMS oder Shopsystem genutzt, legt dies die Ordnerstruktur automatisch fest. Die Bilder werden beispielsweise nach Upload-Datum sortiert. Dieser Aspekt ist für die Bildoptimierung im SEO nicht von höchster Relevanz, solang die Ordner über dem Stammverzeichnis der Webseite oder Domain liegen.
Mit unserem Domain-Check findest du gute Domains - inklusive Verfügbarkeitsprüfung!
Generell wird nicht direkt auf die Ordner, sondern auf die Bilddateien selbst zugegriffen. Daher sollten die Bilddateien entsprechend geschützt werden. Eine Möglichkeit hierfür bietet die HTC-Access-Datei. Sie regelt die Zugriffsrechte von Endnutzern und Programmen wie Webbrowsern.
Der Dateiname liefert den Suchmaschinen einen ersten Hinweis über den Inhalt des Bildes.
Bei der Bildoptimierung im SEO spielt die Benennung der Bilddateien eine wichtige Rolle. Es ist natürlich bequem und einfach die Dateien nicht umzubenennen und den ursprünglichen Dateinamen beizubehalten. Schließlich ist dies für die reine Funktion der Webseite oder des Shops unerheblich. Im Hinblick auf die Indexierung durch Google (und andere Suchmaschinen) und damit auch für Bildoptimierung im SEO besitzt der Dateiname jedoch hohe Relevanz. Er liefert den Suchmaschinen einen ersten Hinweis über den Inhalt des Bildes.
Lesetipp: Das Einmaleins der Hashtags für Instagram und welche besonders beliebt sind, erklären wir dir hier.
Ein Beispiel: Ein Nutzer sucht nach einem bestimmten Schuhmodell. Er gibt in die Suchmaske Schuh XY ein. Da er das Modell nicht kennt, klickt er auf die Ergebnisse der Bildersuche im Universal Search, um sich einen Eindruck zu verschaffen. Bilder, deren Dateiname das Keyword "Schuh XY" enthalten, werden nun grundsätzlich an einer höheren Position angezeigt als Bilder mit einem generischen Dateinamen.
Titel und Alt-Tag spielen eine wichtige Rolle.
Das Thema, Produkt oder generell der Inhalt der Webseite sollte sich auch im Dateinamen des Bildes widerspiegeln. Somit solltest du die Bilder auch in den passenden Textpassagen platzieren. So wird den Bots der Suchmaschinen der Zusammenhang zwischen Text- und Bildinhalt nochmals verdeutlicht. Zudem spielen in diesem Zusammenhang auch der Title- und Alt-Tag eine wichtige Rolle. So empfiehlt Google selbst diese Elemente unbedingt zu verwenden, damit dein Bild in der Google-Bildersuche erscheint. Zu guter Letzt dient eine ordentliche Benennung der Bilddateien auch der Organisation Ihrer Webseite oder Ihres Shops.
Weitere Artikel zum Thema SEO:
- SEO im Onlineshop: So optimierst du deinen Onlineshop für Google, Bing und Co.
- Warum Überoptimierungen in Sachen SEO Onlinehändler viel Geld kosten und wenig Erträge bringen
- Wie Voice Search das User-Verhalten verändert und was das für dein Unternehmen bedeutet
Bildinhalte für Suchmaschinen lesbar machen: Title-Tag, Alt-Tag und Sitemap für Bilder
Die Einbindung und Benennung von Bilddateien ist nun geklärt. Jetzt geht es darum die Bildinhalte für Suchmaschinen lesbar zu machen. Dabei spielen der Title-Tag und Alt-Tag in der Bildoptimierung im SEO eine wichtige Rolle. Der Alt- und Title-Tag werden korrekterweise als Alt- und Title-Attribut bezeichnet. Sie stellen die zwei wichtigsten Elemente in der Bildoptimierung für Suchmaschinen dar, denn sie liefern den Suchmaschinen wichtige Anhaltspunkte über den Inhalt der Bilder. Viele Crawler und Bots der Suchmaschinen sind noch nicht dazu in der Lage, Inhalte von Bildern oder auch Videos auszulesen. Sie nutzen textbasierte Informationen aus den Tags und dem Dateinamen. Ebenso nutzen Bildschirmlesegeräte diese Informationen, primär aber den Alt-Tag.
Kostenloses Ebook: Die besten Apps für Onlineshops
In diesem Ebook stellen wir Apps und Integrationen vor, die für Online-Händler in Deutschland, Österreich und der Schweiz unerlässlich sind.
Hol dir das Ebook!Der Title-Tag
Der Title-Tag ist ein Teil des img-Tags. Er ist für die Bildoptimierung im SEO weniger ausschlaggebend, da er von den Suchmaschinen eher nachrangig behandelt wird. Der Tag sollte jedoch gepflegt werden, um die Usability und User Experience der Webseite auf einem hohen Niveau zu halten. Der Inhalt des Tags erscheint, wenn der Nutzer mit der Maus über das Bild fährt und für kurze Zeit dort verharrt.
Der Alt-Tag
Der Alt-Tag ist Teil ebenfalls ein Teil des img-Tags. Seine Aufgabe ist es einen Text auszugeben, der die Funktion des Bildes im Zusammenhang mit dem Textinhalt vollständig ersetzen könnte. Der Alt-Text für einen Button "In den Warenkorb" könnte somit einfach "In den Warenkorb" lauten. Komplexere Bilder, mit Textbestandteilen, können dagegen komplexere Alt-Beschreibungen besitzen. Der Alt-Tag trägt maßgeblich zur Barrierefreiheit bei, da er von Bildschirmlesegeräten genutzt wird. Aus Sicht des der Bildoptimierung im SEO ist der Alt-Tag unbedingt zu pflegen.
Der Alt-Tag trägt maßgeblich zur Barrierefreiheit bei, da er von Bildschirmlesegeräten genutzt wird.
Die Sitemap für Bilder
Für größere Websites empfiehlt sich das Anlegen einer Sitemap. Sie dient dazu den Crawlern eine schnelle Übersicht der Struktur einer Domain/Website zu geben. Sitemaps speziell für die Suchmaschinen sind in der Auszeichnungssprache XML formatiert. Gibt es Änderungen an der Struktur der Seite, wurden beispielsweise Seiten hinzugefügt oder entfernt, ist dies über die Sitemap schnell ersichtlich. Zudem kann eine Sitemap auch auf weitere Sitemaps verweisen, beispielsweise auch für Bilder.
Eine Sitemap für Bilder unterscheidet sich in ihrer Struktur kaum von einer regulären Sitemap. Ergänzend wird lediglich ein zusätzlicher Image-Tag zu jeder Unterseite aufgeführt. Der Nutzen für die Suchmaschinenoptimierung für Bilder ist jedoch klar. Der Ort des Bildes und die dazugehörige Website werden dem Suchmaschinencrawler schnell aufgezeigt. So kann wertvolles Crawlbudget gespart werden und Inhalte werden effektiver indexiert.
Technische Aspekte der Bildoptimierung im SEO
Die Dateigröße der Bilddatei ist ein weiterer entscheidender Aspekt der Bilder-SEO.
Die Bilddateien sind nun korrekt und sinnvoll benannt. Die Tags sind erstellt sowie gepflegt. Die inhaltliche Optimierung der Bilddateien ist abgeschlossen. Kann das Bild nun auf der Website eingebunden werden? Die Antwort ist ein klares Nein. Den auch technische Aspekte spielen beim Bildoptimierung im SEO eine Rolle. Entscheidender Faktor ist hierbei die Dateigröße der Bilddatei. Denn jedes Bild, welches auf der Webseite eingebunden ist, muss auch beim Aufruf geladen werden. Zu große Bilddateien verlängern die Ladezeit unnötig. Dies hat negative Auswirkungen auf die User Experience und damit auch auf die Nutzersignale. Diese werden von Google, neben der Ladezeit, als Rankingfaktoren genutzt. Zu lange Ladezeiten und eine schlechte User Experience können also das Suchmaschinenranking negativ beeinflussen.
Zu lange Ladenzeiten können sich negativ auf das Ranking bei Google auswirken.
Welche Abmessungen sollten Bilder haben?
Generell sollten Bilder auf einer Webseite nie weitaus größer sein als das Element in dem sie platziert werden. Hierbei handelt es sich um die dargestellte Größe des Bildes. Hat der Bildcontainer beispielsweise eine Kantenlänge von 400 Pixeln, muss das dort platzierte Bild nicht eine Kantenlänge von 1500 Pixeln besitzen. Die 1500 Pixel Kantenlänge stellen die tatsächliche Größe des Bildes dar.
Die Bilddatei mit einer Kantenlänge von 1500 Pixeln ist um einiges größer als eine Datei mit 400 Pixeln Kantenlänge. Die größere Dateien hängt maßgeblich von deren Kantenlänge ab. Optimal ist es in diesem Beispiel ein Bild mit einer Kantenlänge von 600 Pixeln. Generell sollte die tatsächliche Größe des Bildes nicht mehr als das 1,5-fache der dargestellte Größe überschreiten. Jedoch stellen moderne und hochauflösende Displays von Smartphones und Laptops eine neue Herausforderung für die Bildoptimierung dar.
Lesetipp: Hier findest du unsere 12 Tipps, um mehr YouTube-Abonnenten zu gewinnen.
Der Umgang mit Retina Displays
Seit dem Jahr 2010 und dem iPhone 4 finden hochauflösende Displays auf Smartphones und Tablets immer stärker Verbreitung. Die "Retina Displays" genannten Anzeigen liefern Auflösungen jenseits des Full-HD-Standards. Um diese Darstellungen zu ermöglichen, müssen die entsprechenden Bilder und Grafiken mindestens in doppelter Auflösung zur Verfügung gestellt werden, optimalerweise sogar in drei- bis vierfacher Auflösung. Die Dateien dieser Bilder sind somit um einiges größer und müssen daher komprimiert werden. Zudem ist es bei vielen CMS und Shopsystemen möglich, Bilder in verschiedenen Auflösungen zu hinterlegen. So können Bilder in Retina-Auflösung für Geräte mit diesen Listen ausgeliefert werden. Eine weitere Möglichkeit sind adaptive Bildgrößen. Diese passen sich automatisch und serverseitig der Auflösung des Endgerätes an.
Lesetipp: In diesem Beitrag haben wir 22 Plattformen für dich zusammengestellt, auf denen du kostenlose Bilder für deine Website, deinen Blog, den kommerziellen Gebrauch o. Ä. finden kannst.
Welche Faktoren beeinflussen die Bilddateigröße noch?
Das Bilddateiformat
Ein wichtiger Faktor auf die Dateigröße einer Bilddatei ist dessen Dateiformat. Das allseits bekannte JPEG-Format kann zwar sehr viele Farben darstellen, jedoch sind JPEG-Dateien sehr groß. Zudem verlieren sie bei der Komprimierung an Qualität. Außerdem können JPEGs keinen transparenten Hintergründe darstellen. So sollte beispielsweise bei Produktbildern der Hintergrund exakt mit dem Hintergrund der Webseite übereinstimmen, um ein ansprechendes optisches Gesamtbild zu erzeugen.
Im Gegensatz zu JPEG-Dateien sind Dateien vom Typ PNG dazu in der Lage transparente Bereiche darzustellen. Zudem lassen sich PNGs verlustfrei komprimieren. Jedoch ist zu beachten, dass es bei den PNGs zwei Arten gibt.
Das PNG8-Format kann lediglich 256 Farben darstellen, da es nur eine Farbtiefe von acht Bit besitzt. Das PNG24-Format kann ebenfalls, wie das JPEG-Format, 16,7 Millionen Farben darstellen. Produktbilder im PNG-Format und mit einem transparenten Hintergrund fügen sich harmonisch in die Webseite ein.
Beiden genannten Dateiformaten ist eine Eigenschaft gemein. Es sind Rastergrafiken. Das heißt, die Pixel, aus denen sich das Bild zusammensetzt, sind an einem Rastern angeordnet. Wird dieses Raster nun durch vergrößern oder verkleinern gestaucht oder gestreckt, leidet die Bildqualität. Dies ist bei Vektorgrafiken, wie dem SVG-Format nicht der Fall. Hier werden die Bildinhalte über Vektoren definiert. Diese lassen sich verlustfrei skalieren. Ein weiterer Vorteil von SVG-Dateien ist, dass sie in der Auszeichnungssprache XML geschrieben sind. Somit können sie direkt in den HTML-Code integriert werden. Dies wirkt sich positiv auf die Ladezeiten aus. Dateien dieses Typs sind besonders für Logos oder Grafiken geeignet.
Die Komprimierung
Neben den Abmessungen hat auch die Komprimierung der Bilddatei Einfluss auf deren Größe. Generell sind Dateien nicht komprimiert und entsprechend groß. Mit kostenlosen Webtools lassen sich Bilddateien ohne merkliche Verluste komprimieren. So kann beispielsweise die Dateigröße um 70 Prozent reduziert werden, ohne dass die Qualität leidet. Bei großen Shops und Shopsystemen oder Content-Mangement-Systemen gibt es die Möglichkeit, über Plugins diesen Prozess zu automatisieren.
Lesetipp: Hier erfährst du, wie du einen Blog erstellen und diesen in eine effektive Einnahmequelle verwandeln kannst.
Das Ziel der Bildoptimimerungs-SEO: Die Bildersuche als Quelle für mehr Traffic
Neben der optimalen technischen Bereitstellung der Bilder und der Reduktion der Ladezeit soll über Bilder und die Google-Bildersuche Traffic generiert werden. Damit die eigenen Bilder in der Bildersuche erscheinen, müssen die genannten Tags und der Dateiname sinnvoll gepflegt werden. Wenn Google eine Seite mit seinen Bots durchsucht, werden auch die Informationen aus Alt-Tags und Dateinamen gespeichert. Aus diesen Informationen und der generellen Relevanz der Website an sich setzt sich das Ranking in der Google-Bildersuche zusammen. Über entsprechende Optimierungen steigen die Chancen auf gute Platzierungen in der Bildersuche und zusätzlichen Traffic.
Für Suchmaschinen wie Google besitzen optimierte Bilder einen hohen Stellenwert.
Die Bildoptimierung für Suchmaschinen ist ein wichtiger Baustein eines ganzheitlichen SEO-Konzepts. Für Suchmaschinen wie Google besitzen optimierte Bilder einen hohen Stellenwert. Der Dateiname und der Alt-Tag dienen nicht nur dazu, den Inhalt des Bildes zu interpretieren, sondern dieses auch in Relation zum umliegenden Text zu setzen.
Starte deinen eigenen Onlineshop mit Shopify!
Kostenlos testen—keine Kreditkarte erforderlich.
Über den Autor: Florian Kolbe ist Online Marketing Manager bei der Online Solutions Group in München. Er ist Spezialist für SEO, SEA und App Marketing.