Bilder und Grafiken sind neben dem Text die wichtigsten sichtbaren Bestandteile des Contents Deiner Webseite. Wenn Du also den Content Deiner Website optimierst, solltest Du auch Bilder-SEO nicht vernachlässigen. Dabei spielen vor allem die Bilddateinamen, die ALT-Tags der Bilder (im Deutschen auch ALT-Texte) und der Bild-Titel eine Rolle. Doch warum ist das so wichtig?
Ein Bild, das Deinen Content passend beschreibt. Ein Foto von einem Gericht, zu dem Du auf Deinem Blog ein Rezept zur Verfügung stellst, oder aber ein Produktbild, das Dein Angebot veranschaulicht. Für Deine User bieten diese optischen Elemente einen Mehrwert. Stell Dir aber vor, dass Deine Website-Bilder nicht angezeigt werden können. Das kann verschiedene Gründe haben. Technische Probleme seitens der User, grafische Elemente mit einer großen Dateigröße strapazieren die DSL-Leitung oder aber es gibt Serverprobleme. Das Bild verschwindet auch, wenn die Datei auf dem Server nicht mehr erreichbar ist, weil versehentlich ein Bildordner im Stammverzeichnis entfernt oder verschoben wurde. Außerdem zeigen manche Browser und mobile Anwendungen keine Grafiken an.
Was sehen die User, wenn die Bilder nicht oder nicht gleich geladen werden? Richtig, nichts. Und denke noch eine Ecke weiter: Ein Suchmaschinen-Crawler, der die Inhalte Deiner Website scannt, um sie bei Google zu indexieren, liest nur den Quellcode und sieht die Bilder nicht so wie wir sie sehen. Wie soll Google verstehen, was das für ein Bild ist, das Du dort auf der Website platziert hast? Was zeigt das Bild, was ist sein Inhalt, wofür steht es? Google erkennt nur, dass dort ein Bild ist. Damit die Suchmaschine auch versteht, was auf dem Bild zu sehen ist, musst Du die wichtigen Bestandteile wie Bilddateiname, Alt-Attribut und den HTML Image Title richtig auszeichnen. In diesem Artikel erfährst Du, wie Du Deine Bilder fit für SEO machst und Bildbeschreibungen richtig einsetzt.
Ableiten kann man die Empfehlung für sprechende Bilddateinamen daraus, dass es auch für URLs hinsichtlich der Platzierung in den Google Suchergebnissen zu empfehlen ist, sie sprechend zu gestalten. Im Bereich des Bilder SEO ist es wichtig, sprechende Bilddateinamen zu verwenden, da diese für die Google Bildersuche einen Rankingfaktor darstellen – zu empfehlen ist deshalb, das Keyword auch im Bilddateinamen einzubauen. Kryptische Dateinamen, die nicht auf den Inhalt schließen lassen, sind demnach auch für die Bildersuche nicht relevant. Die Regeln für die Benennung sind dieselben wie auch für URLs. Kleinschreibung, Umlaute umcodieren, Bindestriche statt Leerzeichen, keine Sonderzeichen, optional Größe des Bildes. Um auch die Bilddateipfade zu kurz wie nur möglich zu halten, empfiehlt sich eine Dateibenennung mit ein bis fünf Wörtern.
Der Bilddateiname sieht im Quellcode wie folgt aus:
<img src="verzeichnis/sprechender-bilddateiname.jpg" alt="Das ist eine sinnvolle Bildbeschreibung.">
Bei einem ALT-Attribut handelt es sich um einen alternativen (ALT) Text der Bilder, weshalb es auch oftmals ALT-Text genannt wird. Im CMS wie WordPress wird dieses ALT-Attribute bei Bilddateien hinterlegt und beschreiben den Inhalt der jeweiligen Grafik. Falls ein Bild aus bestimmten Gründen nicht angezeigt werden kann, erscheint der Text des hinterlegten ALT-Tags des Images. Suchmaschinen benutzen dieses Attribut, um den Bildinhalt zu erkennen, da Bilddateien in der Regel nicht direkt ausgelesen werden können.
Im CMS wie WordPress können die Image ALT-Attribute wie folgt aussehen:
<img src="verzeichnis/sprechender-bilddateiname.jpg" alt="Das ist eine sinnvolle Bildbeschreibung.">
Tipp: In WordPress kannst du die ALT-Tags entweder direkt in der Text-Ansicht mit HTML Funktion eintippen. Oder aber Du bearbeitest Dein Bild, indem Du es in der Medienübersicht anklickst und den Bereich “Alternativer Text” oder “Alt-Tag” Dein optimiertes ALT-Attribut hinzufügst.
Warum ist es wichtig, Images mit ALT-Texten zu versehen?
Alternative Beschreibungen für Bilder und Grafiken spielen nicht nur eine große Rolle für das Bilder-SEO der OnPage-Optimierung, sondern auch für die Barrierefreiheit im World Wide Web. Menschen mit Seheinschränkungen nutzen anstelle des Textmodus oder einer grafischen Benutzeroberfläche bestimmte Voice-Browser oder Screenreader (Vorlese-Anwendung), um im Internet zu surfen. Attribute wie “alt” bei Images, Animationen und Videos, die der Beschreibung der visuellen Inhalte dienen, werden dann vorgelesen. Fehlt das Image ALT-Attribut, sagen einige Screenreader lediglich Teile des Dateinamens an.
Das Title-Tag (oder Universal-Attribut) zeigt dem Nutzer mit kurzer Verzögerung Informationen zum Bild per Mouseover an. Nicht zu verwechseln mit dem für das Snippet relevanten Meta-Title, das jeder URL einen eigenen Titel gibt und rankingrelevant ist. Das Image Title-Attribut dient vorrangig der Usability und wird verwendet, wenn keine Bildunterschrift vorhanden ist.
Der HTML Image Title kann folgendermaßen eingebunden werden:
<img src="verzeichnis/sprechender-bilddateiname.jpg" alt="Das ist eine sinnvolle Bildbeschreibung." title="Magazine-Artikel zu Bilder-SEO" />
Es gibt im Prinzip keine Beschränkung für die Textlänge des ALT-Attributs. Oft reichen aber wenige Worte, um das Bild aussagekräftig zu beschreiben und Suchmaschinen wichtige Hinweise zu geben.
Überprüfe daher die Qualität Deiner alternativen Bildtexte mit folgenden Fragen:
Nehmen wir das folgende Beispiel, um zu verdeutlichen, wie alles bisher Beschriebene aussehen könnte. Wir haben ein Bild, das zu diesem Thema passt und verlinken über dieses Bild auf diesen Magazine-Beitrag. Idealerweise wird dieses Bild folgendermaßen im Browser abgebildet:
Abbildung 1: Korrekte Anzeige der Grafik im Browser.
Wenn die Seite nicht richtig lädt, sieht der Nutzer nur einen Platzhalter sowie die Bildattribute insofern Du Dein Bilder-SEO korrekt umgesetzt hast. Statt des Bildes erscheint jetzt das ALT-Attribut „Darstellung, wie User und wie der Googlebot ein Bild auf der Website sehen“ sowie das Title-Attribut „Magazine-Artikel zu Bilder-SEO“. Beschreibe innerhalb Deines Title-Tags, was die Leser erwarten können, wenn Sie auf den Link bzw. die leere Fläche klicken. In unserem Beispiel gelangen sie zu dem Magazine-Beitrag und können mehr über Bilder-SEO erfahren.
Abbildung 2: Platzhalter für ein nicht angezeigtes Bild.
Im Seitenquelltext wird zunächst die URL des Magazine-Beitrags angegeben. Der Image-Tag beginnt anschließend mit der Bildquelle, also der entsprechenden Datei in Deinem Stammverzeichnis (img src). Hinter dem HTML img alt= steht in Anführungszeichen der ALT-Text des Bildes. Darauf folgen die Angaben zur Höhe (width) und Breite (height). Im folgenden Beispiel misst das Bild 700 mal 500 Pixel.
<p><a href="https://de.ryte.com/magazine/bilder-seo-alt-title-tags" target="_blank"><img src="/magazine/wp-content/uploads/2019/11/website-content-user-vs-bot.png" alt="Darstellung, wie User und wie der Googlebot ein Bild auf der Website sehen" width="700" height="500" title="Magazine-Artikel zu Bilder SEO"/></a></p>
Auch andere Designelemente brauchen ein ALT-Attribut. Manche Grafiken – sogenannte Dekorations- oder Schmuckgrafiken – dienen wie der Name sagt nur zu dekorativen Zwecken und sollen keine Inhalte vermitteln. Das können zum Beispiel Hintergrundbilder sein, Buttons oder Linien. Lass bei diesen den ALT-Text nicht einfach leer, sondern befülle ihn mit einem Platzhalter (alt=““). Denn Suchmaschinen und Screenreader ignorieren Bilder ohne SEO wie ALT-Tag, da sie offenbar für das Verständnis der Seite nicht wichtig sind. Schmuckgrafiken sind optimalerweise nicht eingebettet in den Code, sondern mittels CSS als Hintergrundbilder definiert. Ein Bild ohne ALT-Attribut erscheint im Browser als nichtssagendes Icon.
Wie die OnPage-Optimierung der Webseite spielt sich auch die Suchmaschinenoptimierung der Bilder auf verschiedenen Ebenen ab: der sichtbaren Ebene, der Metaebene sowie der Bildebene selbst. Achte auf folgende Faktoren beim Bearbeiten und Speichern Deiner Bilder:
1. Qualitativ hochwertige Bilder sind professionell und dienen zudem der Suchmaschinenoptimierung: Google bestätigt zur Qualität von Bildern:
„Hochwertige, scharfe Bilder werden auch in den Miniaturansichten in unseren Suchergebnissen besser angezeigt. Dies erhöht die Wahrscheinlichkeit, dass Nutzer darauf klicken.“
2. Unter der Qualität darf jedoch nicht die Ladegeschwindigkeit Deiner Webseite leiden. Stelle Bilder nur so groß wie nötig ins Netz und komprimiere sie gegebenenfalls mittels eines Tools wie tiny png. Skaliere die Bilder in einem Bildbearbeitungsprogramm auf die richtige Größe und füge Sie eins zu eins im Quellcode ein. In diesem Magazin-Artikel zeigen wir Dir, worauf es bei der Komprimierung von Bildern ankommt!
3. Überlege gut, welches Bildformat für Dich das beste ist. JPG ist meist aufgrund der effektiven Komprimierung ideal. Das PNG bietet eine verlustfreie Komprimierung, braucht aber mehr Speichervolumen. GIF ist nur noch für Animationen sinnvoll. Das SVG-Format eignet sich gut für Vektorgrafiken.
4. Gib für alle Bilder Höhe und Breite (height and width) an. Wenn der Webbrowser die Abmessungen kennt, beginnt er mit der Darstellung einer Seite, noch bevor alle Bilder heruntergeladen sind. So optimierst Du also auch Deine Ladezeiten. Noch sinnvoller ist es natürlich, die Bildgröße “relativ” anzugeben. So empfiehlt es Google für das Responsive Webdesign. Damit passen sich Deine Bilder bestmöglich an die Devices Deiner Nutzer an.
5. Benenne Deine Bildquelle richtig: Urheber und Copyrightzeichen sollten in der Bildunterschrift genannt werden, ein Versteck im Mouseover ist nicht ausreichend.
Eine zusätzliche Unterstützung für Suchmaschinen ist die Erstellung einer Bilder-Sitemap, in der man bis zu 1.000 Bilder pro URL betiteln kann. Google gibt hierzu in seinem Support Forum ein klares Statement:
„Sie können die Wahrscheinlichkeit erhöhen, dass Ihre Bilder in den Ergebnissen der Bildersuche erscheinen, indem Sie die Richtlinien für Webmaster und die Best Practices für die Veröffentlichung von Bildern beachten. Darüber hinaus können Sie Google-Bilderweiterungen für Sitemaps verwenden, um Google mehr Informationen zu den auf Ihren Seiten verfügbaren Bildern bereitzustellen.“
Indem Du alle Bild-URLs in einer separaten XML Sitemap hinterlegst und diese in der Google Search Console hochlädst, kannst Du in wenigen Schritten die Indizierung von Bilddateien fördern.
Eine Bilder-Sitemap ist wie folgt aufgebaut:
Abbildung 3: Beispiel einer Bilder-Sitemap (Google Support Forum).
Du bist dir nicht sicher, ob all Deine Website-Bilder korrekt benannt und deren ALT-Attribute gepflegt sind? Die Ryte Suite hilft Dir dabei, es herauszufinden. Und das auf ganz einfache Weise.
Zum einen bekommst du im Modul Website Succes über die “kritischen Fehler” in der Übersicht angezeigt, ob es Bilder auf Deiner gesamten Website gibt, die nicht barrierefrei sind (fehlendes ALT-Tag). Bei Klick auf diesen Fehler erfährst Du auch ganz genau, um welche Bilder es sich dabei handelt und wo auf der Website diese vorkommen. Ein weiterer Weg zu Deinen Bildern mit Optimierungspotenzial ist über “Dateien > Bilder > ALT-Texte”.
Für die Suchmaschinenoptimierung ist das korrekte Einbinden von Bildern ein klarer Vorteil. Mit ALT- und Title-Attribut ausgezeichnete Bilder stärken die Themenrelevanz der URL, wodurch die Chancen auf bessere Rankings steigen können.
Mit einer guten Bilder-SEO kannst Du aber nicht nur die Sichtbarkeit Deiner Webseite erhöhen, sondern auch Traffic über die Google Bildersuche gewinnen. Für Google ist das ALT-Attribut ein wichtiger Parameter bei der OnPage-Optimierung. Durch eine korrekte Auszeichnung mit den relevanten Keywords erhöht sich die Chance, dass diese Images in der Universal Search zu diesem Hauptkeyword ranken: Es kann vorkommen, dass eine Website zu einem entsprechenden Keyword nicht mit der URL in den Top-Rankings zu finden ist, aber mit einem Bild.
Qualität und Komprimierung der Bilder haben positiven Einfluss auf die Usability und den Pagespeed Deiner Webseite. Die Komprimierung ist vor allem im Rahmen der Mobilen Optimierung wichtig, da Smartphones unterwegs meist über weniger Bandbreite verfügen. Große Bilddateien verzögern den Seitenaufbau unnötig.
Um ein barrierefreies Surfen am Desktop und an Screenreadern für Deine Besucher zu garantieren, kommst Du beim Einbinden von Bildern an ALT- und Title-Attributen nicht vorbei. Nimm Dir also die Zeit, um all Deine Bilder mit geeigneten alternativen Texten auszustatten. Für ein schnelleres Crawlen und die richtige Einordnung Deiner Grafiken ist das Setzen von sinnvollen Beschreibungen Gold wert. Damit verbesserst Du nebenbei Deinen Page Speed und somit die Usability – wichtige Faktoren für das Surfen auf mobilen Anwendungen.
Sind Deine Website-Bilder korrekt gepflegt?
Veröffentlicht am 20.11.2019 von Pauline Mitifiot.
Nach ihrem Studium der Geschichte und des Projektmanagements zog Pauline nach München, da sie auf ihre tägliche Dosis Brezen nicht verzichten konnte. Seit 2016 ist sie Teil des Marketing-Teams von Ryte und betreut leidenschaftlich die Content Assets, Social Media Accounts und die Präsenz von Ryte auf verschiedenen Messen und Konferenzen.