Bilder-SEO – Alles, was du wissen musst!
In diesem Ratgeber lernst du, wie du SEO für Bilder machen kannst, was guter Bild Content ist und wie meine persönlichen Erfahrungen rund um Bilder im Web sind.
Bilder sind Content und Content ist relevant für das Ranking bei Suchmaschinen. Sprich, auch Bilder können für Suchmaschinen optimiert werden, um mehr Sichtbarkeit im Internet zu erhalten.
Google hat sogar Richtlinien für Bilder veröffentlicht, welche als Basis für Bilder SEO dienen. Diese Guidelines werden innerhalb des Beitrags immer wieder herangezogen.
Bilderstellung & Bildauswahl
Alles fängt an mit der Bilderstellung. Für die Inhalte der Website werden passende Grafiken oder Fotos gesucht. Dabei wird entweder auf eine individuelle Bildproduktion oder auf Stockfotos zurückgegriffen. Wichtig ist, dass das Bildmaterial zum Thema, zur Zielgruppe und zur Website passt – sowohl thematisch als auch qualitativ. Frage dich immer: Ist das Bildmaterial wirklich das beste Bildmaterial für den Nutzer?
Stelle sicher, dass du die Rechte an den Bildern hast, die du verwendest, oder du die Erlaubnis hast, sie zu verwenden. Urheberrechtsverletzungen können rechtliche Probleme verursachen und zu Abstrafungen von Suchmaschinen führen.
Bildnamen
Nachdem eine passende Bildauswahl getroffen wurde, muss das Bild auch passend abgespeichert werden. In dem Fall reden wir vom Bildnamen und nicht vom Dateiformat. Und damit meine ich, dass das Bild nicht als „IMG123“ abgespeichert werden soll. Der Bildnamen wird leider oft unterschätzt und eine spätere Änderung kann zu massivem Mehraufwand führen. Denn den Bildnamen zu bearbeiten, nachdem das Bild schon auf dem Server hochgeladen wurde, kostet viel Zeit und entsprechend Geld.
Du kannst für den Bildnamen gerne mehrere Wörter nutzen, die sowohl Bild als auch Thema beschreiben. Der Bildnamen sollte allerdings auch nicht zu lang sein.
Folgendes solltest du beim Bildnamen beachten:
Bilder und Pagespeed
Bilder im Web haben verschiedene Eigenschaften, die sie mit sich bringen. Da diese häufig verwechselt oder durcheinander gebracht werden, habe ich dazu eine passende Infografik erstellt:
Ergänzend möchte ich noch zum Thema Pagespeed und Bilder erwähnen, dass mithilfe der Verwendung eines CDN die Serverlast deutlich verringert werden kann. Wenn also alles andere nicht hilft oder zu viel Aufwand bedeutet, könnte auch ein CDN eine Option sein.
Dateiformate
Es gibt verschiedene Dateiformate, die sich besonders für Webprojekte eignen, ohne dabei lange Ladezeiten zu provozieren. Und dann gibt es da auch noch die alten Bildformate, die jeder kennt und gerne aus Gewohnheit genutzt werden.
- JPG
- Decken das volle Farbspektrum ab
- Bilder werden immer verlustbehaftet abgespeichert
- Keine Transparenz möglich
- PNG
- Decken das volle Farbspektrum ab
- Verlustfreie Kompression
- Transparenz
- Größere Dateien als bei JPG – primär bei Fotos
- Ideal für Illustrationen, Grafiken und Logos – aber nicht für Fotos
- SVG
- Vektorgrafiken, die stufenlos skalierbar sind, ohne dabei einen Qualitätsverlust zu erleiden
- Pfade können direkt im CSS hinterlegt werden
- Ideal für Logos, Icons, Piktogramme und Illustrationen
- Nicht geeignet für „klassische Bilder“
- GIF
- Transparenz
- Ideal für Bewegtbilder
- Beschränkung auf 256 Farben
- WebP
- Einsparung gegenüber JPEG 25-34% und gegenüber PNG 26-80% [1]
- Unterstützt nahezu verlustfreie Transparenz und Animation
- Kann ausschließlich fürs Web verwendet werden
- Benötigt spezielle Tools zur Umwandlung
- Wird bisher nicht von allen Browsern unterstützt (→ Zur Kompatibilitätsübersicht)
- AVIF
- Open-Source-Dateiformat: Lizenzprobleme können also keine Entwicklungsprobleme verursachen
- Sehr hohe Kompressionsrate und noch besser als WebP
- Unterstützt nahezu verlustfreie Transparenz und Animation
- Im Vergleich zu JPG sind Einsparungen von 50% möglich [2]
- Benötigt Spezielle Tools zur Umwandlung
- Wird bisher nicht von allen Browsern unterstützt (→ Zur Kompatibilitätsübersicht)
Gerade bei neueren Dateiformaten ist oft die Kompatibilität ein größeres Problem. Inzwischen werden wirklich schon viele Browser unterstützt, aber eben bisher nicht alle. Um in solchen Fällen abgesichert zu sein, eignet sich die Verwendung des HTML-Tags <picture>, um alternative Dateiformate anzubieten, falls das gewünschte Dateiformat nicht unterstützt wird (Fallback-Möglichkeit).
Ich persönlich werde zukünftig hauptsächlich auf das Dateiformat AVIF setzen – dabei aber zusätzlich mit Fallback Formaten wie JPG und PNG arbeiten.
Dateigröße
„Lisa, wie groß sollte denn ein Bild sein?“ – diese Frage erreicht mich immer und immer wieder. Und dabei möchte ich ungern mit konkreten Zahlen antworten, weil es immer darauf ankommt, wo das Bild platziert ist, in welcher Größe es auf der Website vorzufinden und was darauf zu sehen ist. Daher sage ich immer „So groß wie nötig, aber so klein wie möglich“.
Dabei spielt selbstverständlich auch das Dateiformat eine große Rolle. Wie wir oben bereits gelernt haben, lassen sich manche Formate besser komprimieren als andere. Wenn ich dir jetzt eine fixe Zahl verraten würde, könnte es sein, dass das Bild für deine Zwecke zu klein oder zu groß ist.
Im Idealfall solltest du bei deinen komprimierten Bildern unter 150KB bleiben. Überprüfe aber unbedingt, ob die Anzeige auch deinen Erwartungen entspricht.
Bildgröße
Die Bildgröße wird oft mit der Dateigröße verwechselt. Das ist mir sicher schon passiert, wenn ich einfach so drauflos geplappert habe. Dennoch geht es bei der Bildgröße nicht um den verbrauchten Speicherplatz (ich vergleiche das auch immer mit dem Gewicht der Datei), sondern eher um die Abmessung auf dem Bildschirm.
Dabei liegt die ideale Bildgröße im Web zwischen 600px und 1920px. Aber auch hier heißt es wieder: Es kommt darauf an! Handelt es sich nur um eine kleine Grafik oder um ein Bild, das im Fließtext platziert wird, reichen auch kleinere Bildgrößen locker aus.
Du kannst auch Bilder für verschiedene Bildschirmgrößen zur Verfügung stellen. WordPress kümmert sich zum Beispiel schon automatisch darum.
Lieferst du eine zu große Bildgröße aus, muss das Bild erst einmal herunterskaliert werden, was auch deine Ladezeit nochmals beeinträchtigt.
Auflösung
Die Auflösung eines Bildes ist ein gewisser Qualitätsfaktor. Bilder mit einer geringen Auflösung sind verpixelter als Bilder mit einer hohen Auflösung. Man könnte hier auch von der Schärfe des Bildes sprechen.
Jetzt ist das aber so, dass ein Bild fürs Web nicht so hoch aufgelöst sein muss, wie ein Bild, welches als Poster gedruckt wird. Hier gilt: So hochauflösend wie nötig.
Dabei spielt natürlich auch wieder das Dateiformat eine große Rolle: Durch eine gute Komprimierung muss man bei der Qualität des Bildes keine Einstriche machen.
EXIF-Daten
In den EXIF-Daten werden verschiedene Bildinformationen gespeichert. Diese Daten sind gewissermaßen der Fingerabdruck deines Bildes. Dort findest du Informationen über das Kameramodell, Aufnahmedatum, Einstellungen der Kamera …
Oft wird bei Pagespeed-Optimierungen oder Komprimierungen empfohlen, die EXIF-Daten zu löschen, da diese als „unnötig“ abgetan werden. Aus SEO-Sicht sehe ich das aber anders: Die EXIF-Daten können eine (wenn auch nur eine kleine) der vielen SEO-Stellschrauben sein. Denn durch diese kann die Suchmaschine das Bild noch besser verstehen. Zum Beispiel kann man in den EXIF-Daten Informationen über den Standort und die Aktualität des Bildes herausfinden. Auch das Thema Urheberrecht spielt hier eine große Rolle. [3]
Attribute für Bilder SEO
Die folgenden Attribute wurden natürlich nicht für die Suchmaschinenoptimierung erfunden, sondern sind Teil von HTML. Dennoch sind diese Attribute auch ein Teil der Suchmaschinenoptimierung und daher möchte ich auf diese etwas genauer eingehen. Doch erst eine kurze technische Hintergrundinformation zum Verständnis: Es gibt ein HTML Tag für Bilder, welches durch verschiedene Attribute beschrieben werden kann. Zum Beispiel das ALT-Attribut und das Title-Attribut.
ALT-Attribut
Das ALT-Attribut wird oft fälschlicher weiße als ALT-Tag bezeichnet. Das ist technisch nicht korrekt, da es sich hierbei nicht um einen Tag, sondern um ein Attribut handelt. Was allerdings korrekt ist, ist die Bezeichnung „ALT-Text“. Das Attribut steht für den alternativen Text, mit dem Bilder beschrieben werden können. Dabei wird das Attribut genutzt, um das Bild genauer zu beschreiben, wenn es für den User nicht sichtbar ist. Zum Beispiel aus gesundheitlichen oder technischen Gründen.
Doch oft wird das ALT-Attribut gar nicht oder falsch ausgefüllt. Ich habe in den vergangenen Jahren schon sehr abenteuerliche ALT-Texte gesehen. Auf vielen Websites sieht man zum Beispiel im ALT-Attribut die sinnlose Aneinanderreihung von Keywords, in der Hoffnung, dass das Bild oder die Seite so besser von der Suchmaschine gefunden wird. Andere wiederum verwenden unsinnvolle Textbrocken, die weder einen ganzen Satz noch eine Beschreibung darstellen.
Ich persönlich nutze für das ALT-Attribut gerne 1-2 vollständige Sätze, die das Bild beschreiben. Und wenn das Bild zum Text bzw. Thema passt, dann lassen sich Keywords auch wunderbar in den ALT-Text integrieren.
Meiner Erfahrung nach wird ein sinnvoll besetztes ALT-Attribut von Suchmaschinen honoriert. Hauptsächlich bei der Bildersuche, aber auch im großen Ganzen.
Das ALT-Attribut in den SERPs
Anfang des Jahres habe ich schon mal gelesen, dass es Google auch ALT-Attribute zur Generierung der Beschreibung in den Suchergebnissen heranziehen kann. Und jetzt ist es mir zum ersten Mal bei meinem eigenen Projekt aufgefallen. Der markierte Satz stammt eigentlich aus dem ALT-Attribut.
Eigentlich ist das ALT-Attribut innerhalb des HTML-Tags für die Beschreibung für Bilder verantwortlich. Das ALT-Attribut zählt auch zum Inhalt der Website und kann daher auch für die Beschreibung in den SERPs hinzugezogen werden.
Ein weiterer Grund, um auf unpassende ALT-Attribute zu verzichten und sich ein wenig mehr Mühe bei der Beschreibung des Bildes zu machen.
Title-Attribut
Das Title Attribut bezeichnet den Text, welcher erscheint, wenn man mit der Maus über das Bild fährt. Je nach verwendetem System kann es vorkommen, dass der Dateinamen als Platzhalter für das Title-Attribut genutzt wird. Peinlich ist es immer dann, wenn dort „IMG123“ steht.
Dabei zahlt das Title Attribut vorwiegend auf die Benutzerfreundlichkeit und weniger auf das SEO Konto ein. Aber nachdem Benutzerfreundlichkeit auch wichtig ist und zum Großen Ganzen gehört, ist das Thema auch nicht zu vernachlässigen.
Bildbeschreibung
Die Bildbeschreibung gehört direkt zum Bild und beschreibt es sichtbar für den Nutzer. Während das ALT-Attribut zum Beispiel erst mal unsichtbar für den Nutzer ist und nur bei Bedarf sichtbar ist, ist die Bildbeschreibung immer sichtbar. Sie wird, wie der komplette umliegende Text um das Bild, für das bessere Bilderverständnis von der Suchmaschine herangezogen. Sie sollte also passend gewählt werden.
Allerdings ist eine Bildbeschreibung nicht immer sinnvoll. Zum Beispiel dann, wenn sie Design oder Usability beeinträchtigt.
Bilder-Sitemap
Eine Sitemap ist gewissermaßen das Inhaltsverzeichnis deiner Website, mithilfe der eine Suchmaschine Inhalte deiner Website besser crawlen kann. In der Regel sind dort primär Seiten oder Beiträge deiner Website zu finden. Aber auch Bilder können auf der Sitemap aufgeführt werden. Laut Google kannst du Bilder einer vorhandene Sitemap hinzufügen oder eine extra Sitemap dafür erstellen – eine sogenannte Bilder-Sitemap.
Ein großer Vorteil ergibt sich daraus, dass die Suchmaschine in der Lage ist Bilder zu crawlen, die nicht direkt im HTML Quellcode erkannt werden. Zum Beispiel welche, die per Javascript oder via CSS als Background-Image eingebunden werden.
Bilder in den Suchergebnissen
Die Ausrichtung des Bildes spielt bei der Bildersuche eine Rolle, laut eigenen Aussagen von Google. Tendenziell wird ein Bild im Querformat häufiger als ein Bild im Hochformat geklickt, da es mehr Raum in den Suchergebnissen einnimmt und so auch einen größeren Fokus beim Nutzer erreicht. [4]
Neben der Bildersuche gibt es auch noch die Möglichkeit das Bild in den SERPs zu platzieren. Dabei zieht sich die Suchmaschine ein sogenanntes Image Thumbnail (Vorschaubild oder Miniaturbild) aus dem Content und zeigt dies neben Titel und Beschreibung an. Solch ein Image Thumbnail kann schnell die Aufmerksamkeit des Nutzers auf sich ziehen. Kann allerdings auch das Gegenteil bewirken, wenn es schlecht gewählt ist. Und hier ist auch schon das große Problem: Auf die Auswahl hast du als Website-Betreiber keinen Einfluss!
Letztlich entscheidet die Suchmaschine, ob und wie ein Bild in den Suchergebnissen dargestellt wird. Um Bilder in die SERPs zu bringen, kann es hilfreich sein, bestimmte Vorkehrungen für die Bilder zu treffen.
Wenn du ein Featured Snippet bekommst und KEINE passenden Bilder im Content hast, kann es sein, dass sich Google Bilder von anderen Websites zieht.
Verlinkte Bilder
Bilder können auch verlinkt werden. Das macht vor allem aus Usability-Gründen Sinn. Viele wittern hier auch eine gute Change für Backlinks. Da es in diesem Beitrag um Bilder und SEO geht, möchte ich ergänzend erwähnen, dass verlinkte Bilder nicht ganz so wertvolle Backlinks wie Links im Fließtext erzeugen.
Meine persönlichen Erfahrungen zu Bilder SEO
Ich verheimliche nicht, dass ich ein großer Fan von einzigartigen und passenden Inhalten bin. Und das gilt auch für Bilder – denn Bilder sind auch Inhalte. Also mache ich auch kein Geheimnis daraus, dass ich kein Fan von Stockfotos bin. Diese sind zwar manchmal passend, aber nicht einzigartig. Außerdem mag ich es, wenn Fotos Persönlichkeit aufweisen und einen Zusammenhang zum Text oder zur Website aufzeigen. Zum Beispiel das Firmenlogo auf dem Kuli, welchen eine Mitarbeiterin in der Hand hält. Oder wenn die Radhose, die im Text erwähnt wird, auch wirklich auf dem Foto abgebildet wird.
Für mich aus Lesersicht ist diese Art von passenden und einzigartigen Bildern einfach viel authentischer. Es wirkt echt und nahbar. Und genau das wollen wir doch auch mit den Inhalten auf unserer Website vermitteln. Daher verstehe ich nicht so ganz, warum viele auf die unpersönlichen 0815 Stockfotos zurückgreifen, die aus großer Entfernung schon als solche zu identifizieren sind.
Für meinen Blog erstelle ich auch regelmäßig selbst Fotos und das Feedback ist gigantisch. Zum Beispiel sprechen mich Leser gezielt auf die Bilder an oder verknüpfen automatisch gewisse Inhalte mit Fotos. Ich habe dir ein „Behind the Scenes“ beim Fotos machen herausgesucht und eingefügt.
Ich rate jedem Unternehmen eigene Fotos anzufertigen, die die Persönlichkeit des Unternehmens ausstrahlen. Und das tolle ist ja auch, dass diese Fotos wiederverwendet werden können: In Social Media, bei Werbekampagnen oder für interne Dokumente. Da lohnt es sich, mit anderen Abteilungen zusammenzuarbeiten, die eventuell auch Interesse an der Erstellung von eigenen Unternehmensfotos haben.
Lisa Augustin
Software-Entwicklerin, SEO-Expertin, Bloggerin, GenussbikerinLisa Augustin (geb. Lisa Rudolf) hatte schon immer eine Vorliebe für Algorithmen und technische Probleme. Nach ihrem Informatikstudium hat sie über 5 Jahre lang Berufserfahrung als Softwareentwicklerin gesammelt, während sie nebenher einen Blog über gesunde Ernährung und Radsport geschrieben hat. In dieser Zeit hat sich auch eine Leidenschaft für Suchmaschinenoptimierung (SEO) entwickelt. Und dieser Leidenschaft geht Lisa jetzt hauptberuflich nach. Ihre Mission ist es, SEO verständlich zu erklären und andere Selbstständige, Blogger und kleine Unternehmen dabei zu unterstützen.