Besser in der Bildersuche: Bilder für Suchmaschinen optimieren

Gute Gründe für die Optimierung von Bildern

Vielleicht fragen Sie sich, wozu das gut sein soll – schließlich bekommt die Google Bildersuche nur ein halbes Prozent des Gesamt-Traffic von Google. Trotzdem spricht viel für die Optimierung Ihrer Bilder. Benutzer, die anhand bestimmter Keywords in Google Bilder suchen, veranlassen Sie damit vielleicht zu einem Besuch Ihrer Seite. Außerdem können Sie mit Bildoptimierung die Ladezeiten Ihrer Seite reduzieren und so vielleicht auch ein höheres Ranking bei der Websuche erzielen.

Das Beste daran: Es kostet nicht viel Aufwand, um von allen diesen Vorteilen zu profitieren. In diesem Beitrag beschreiben wir Schritt für Schritt, wie Sie ein Bild optimieren. So können Sie genau nachvollziehen, wie Sie Ihre Bilder suchmaschinenfreundlich machen.

Das Bild während der Erstellung optimieren

• Vergeben Sie einen aufschlussreichen Dateinamen Wenn Sie ein Bild von Ihrem Smartphone, von Ihrer Digitalkamera oder auch von einer Stock-Foto-Seite auf Ihre Webseite oder in Ihren Blog hochladen, hat es wahrscheinlich einen automatisch generierten numerischen Dateinamen wie DCMIMAGE10.jpg oder mt_fuji_477832_1280.jpg. Suchmaschinen können daraus natürlich nicht auf das Bildmotiv schließen. Soll die Suchmaschine aber wissen, um was es auf dem Bild geht, sollten Sie die Datei entsprechend benennen. Wählen Sie aufschlussreiche Dateinamen mit vielen Keywords, die genau erklären, was auf dem Bild zu sehen ist. Ein guter Name für ein Bild mit schwarzen Damenlederschuhen wäre beispielsweise „damen-leder-schuh-schwarz.jpg“. Ein prägnanter, klarer und aufschlussreicher Dateiname dient den Suchmaschinen als Hinweis auf den Bildinhalt.
• Reduzieren Sie die Größe Hinsichtlich der Bilddateigröße sind zwei Faktoren zu beachten: Abmessungen und Speicherplatzbedarf. Je größer das Bild bei der Optimierung ist, desto besser. Ihr Bild soll schließlich auf den Bildschirmen Ihrer Besucher in guter Qualität angezeigt werden. Vermeiden Sie also kleine Bilder im Thumbnail-Format. Die Bilder sollen aber nicht nur groß genug für eine gut sichtbare Anzeige auf den meisten Monitoren sein, sondern sie sollten auch ein möglichst geringes Dateivolumen haben. Größere Bilder erfordern nämlich längere Ladezeiten und verlangsamen unter Umständen Ihre Seite. Das ist ein entscheidender Punkt, denn die meisten Kunden warten nur drei Sekunden, bis die Seite geladen ist. Zudem ist die Ladezeit auch ein Faktor im Ranking-Algorithmus von Google. Das heißt, dass Sie mit zu langen Seitenladezeiten nicht nur Kunden, sondern auch Rankingplätze verlieren können. Mit Software wie Adobe Photoshop oder GIMP können Sie die Größe einer Bilddatei auf Ihrer Webseite reduzieren, ohne dass dies zulasten der Darstellungsqualität geht – schließlich möchten Sie das Bild ja sicherlich nicht so weit komprimieren, dass es nicht mehr gut aussieht.

Das Bild beim Einfügen in die Seite optimieren

Nachdem Sie Ihrem Bild einen entsprechenden Dateinamen gegeben und seinen Umfang so reduziert haben, dass es sich nicht negativ auf die Ladezeiten Ihrer Seite auswirkt, können Sie es in Ihre Webseite einbinden.

ALT-und Title-Attribut

Der erste Schritt bei der Einbindung des Bildes auf Ihrer Webseite ist, ein ALT-Attribut und ein Title-Attribut dafür zu definieren. Im Regelfall fragt die Software, die Sie zur Erstellung Ihrer Homepage nutzen, schon beim Upload des Bildes direkt nach diesen Informationen.

Ein Title-Attribut ist die Textbeschreibung für Bilder, die ein Browser nicht korrekt darstellen kann. Sie wird als Mouseover eingeblendet oder anstelle des Bilds angezeigt, falls es aus irgendeinem Grund nicht geladen werden kann.

Mit dem ALT-Attribut wird eine Alternativinformation angegeben. Da der Googlebot die Bilder nicht wirklich „sehen“ kann, nutzt er die Informationen zum Bild, die Sie beim ALT-Attribut angeben. Wenn der Name Ihrer Bilddatei "schwarzer-leder-damen-schuh.jpg" ist, dann könnte das ALT-Attribut lauten: „Ein Paar schwarze Damenlederschuhe“.

[actioncard]Im Übrigen ist das ALT-Attribut auch sehr wichtig für Screenreader. Denken Sie also daran, dass Sie mit dem ALT-Attribut auch Menschen mit eingeschränktem Sehvermögen beschreiben, was auf dem Bild zu sehen ist. Schildern Sie es daher ruhig ausführlich, statt nur mit ein oder zwei Stichpunkten.[/actioncard]

Wie der Dateiname Ihres Bildes sollte auch das beschreibende ALT-Attribut ein Keyword mit direktem Bezug zum Content enthalten. Wenn Sie für ein Bild unpassende Keywords im ALT-Attribut definieren und so Besucher anlocken, die eigentlich etwas ganz anderes erwarten, schadet das unter Umständen wesentlich mehr als es nutzt.

CSS-Sprites und Icon-Fonts

Zwei weitere beachtenswerte Punkte in diesem Zusammenhang sind CSS-Sprites und Icon-Fonts. Sie sind besonders nützlich zur Beschleunigung der Ladezeiten, wenn Sie viele Pfeile, Logos, Symbole, Buttons und andere Grafikelemente auf Ihren Webseiten haben, die keine Content-Bilder sind.

Das CSS (Cascading Style Sheets) greift gezielt nur auf den relevanten Bereich eines Sprite zu, um eine bestimmte Grafik auf der Seite anzuzeigen. Sprites sind sehr nützlich, denn je weniger Grafiken der Browser abrufen muss und je kleiner die zu übertragende Byte-Menge ist, desto schneller lädt die Seite. Weitere Informationen über CSS-Sprites und ihre Funktionsweise finden Sie hier: https://de.wikipedia.org/wiki/CSS-Sprites

Ähnliches gilt für Icon-Fonts. Das sind Gruppen von Vektorgrafiken, die zu einem speziellen Font (also einer Schriftart) zusammengestellt sind. Ihre Größe passt sich problemlos an jede Bildschirmauflösung an und Sie können damit arbeiten wie mit einer ganz normalen Schrift. Einige kostenfreie Icon-Fonts finden Sie hier:

http://t3n.de/news/10-kostenlose-icon-fonts-450651/

💡 Wir nutzen im Blog übrigens die "Font Awesome" z.B. für die Social Media Icons rechts neben dem Beitrag (, , ), wenn wir ein Video als solches kennzeichnen () und für die Anzeige der Kommentare ().

Weitere Optimierung außerhalb der Webseite

Wenn Sie die Benutzeroberfläche Ihrer Webseite mit JavaScript-Galerien, Grafik-Popups oder anderen visuellen Gestaltungselementen aufwerten, sollten Sie Google über diese Grafikelemente informieren. Erstellen Sie dazu eine Bilder-Sitemap, die die Suchmaschinen zu Bildern leitet, die unter Umständen schwer zu finden sind.

Google ermöglicht Ihnen jetzt die Erstellung von Bilder-Sitemaps. Diese sind im Prinzip wie Standard-Sitemaps, nur eben ausschließlich für Bilder. Für jedes Bild können Sie einen Untertitel (caption), Titel (title) und geografischen Standort (geo_location) mit einfachen XML-Markups angeben.

Falls Sie nicht wissen, wie Sie die Google Search Console (früher Google Webmaster Tools) nutzen, finden Sie hier einige hilfreiche Hinweise: https://www.google.de/intl/de/webmasters/

Fazit

Wenn Sie noch keine Suchmaschinenoptimierung für Ihre Bilder durchführen, dann sollten Sie das nachholen. Es spricht nämlich vieles dafür: Sie können nicht nur Nutzer, die spezifische Keywords bei der Google Bildersuche angegeben haben, zu Ihrem Internetauftritt leiten, sondern auch ihre Webseite beschleunigen. Selbst wenn einige Maßnahmen für sich genommen noch keinen großen Unterschied beim Bild-Ranking machen, können sie alles in allem eine Verbesserung des Rankings bewirken.