Wir zeigen dir im Folgenden, wie Bilder aus SEO-Sicht richtig auf Websites verwendest. Wir gehen dabei auf mehrere Punkte ein, die deine Website nicht nur besser, sondern auch schneller machen. Ziel ist es, dass deine Seiten dadurch einen kleinen Schub im Ranking erhalten und zusätzlich, dass deine Bilder besser über die Google Websuche zu finden sind.
Dieser Beitrag gliedert sich in folgende Bereiche auf. Du kannst jeweils auf die Punkte klicken um zu diesem Abschnitt zu gelangen.
1. Bilder für SEO richtig benennen
Wenn Bilder mit der Kamera gemacht werden, haben die Bilder oft Dateinamen, wie beispielswiese IMG_0426.jpg. Kameras nutzen als Dateinamen fortlaufende Nummern, die für Mensch und Suchmaschine unverständlich sind und somit keinen Mehrwert bieten. Wir empfehlen aus diesem Grund alle Bilder, bevor sie auf einer Website eingebunden werden, sinnvoll umzubenennen.
Vergleichbar ist die Datei-Umbenennung in etwa mit einer sprechenden URL (oder auch Clean URL genannt). Mit sinnvoller Umbenennung meinen wir, dass im Bild-Dateinamen entweder ein Keyword der Seite (Beispiel: bilder-seo.jpg) oder zumindest ein beschreibender Ausdruck dessen verwendet wird, was auf dem Bild zu sehen ist (Beispiel: baum-mit-gruenen-blaettern.jpg).
Für einen einheitlichen Stil und eine problemfreie Einbindung empfehlen wir die Bilder, wie die sauberen URLs auch, nur in Kleinbuchstaben und ohne Sonderzeichen zu verwenden. Das bedeutet konkret:
- Großbuchstaben werden zu Kleinbuchstaben (A zu a, B zu b, usw.)
- Leerzeichen werden zur – (Minus bzw. Bindestrich)
- Umlaute werden zu Buchstaben mit Trema (ä zu ae, ö zu oe und ü zu ue)
- Das ß (scharfes s) wird zu ss
- Satzzeichen werden ausgelassen
- Optional: Wörter wie und, oder, mit und auf können ausgelassen werden um kürzere Dateinamen zu haben
2. Bildgröße (Auflösung und Komprimierung)
Bilder sollten immer nur so groß genutzt werden, wie es überhaupt nötig ist. Davon profitiert nicht nur der Kunde durch eine kürzere Ladezeit der Seite sondern auch du als Betreiber der Seite, da die Ladezeit der Seite ein direkter Ranking Faktor bei Google ist. Es ist daher aus doppelter Sicht sinnvoll, die Bilder vor dem Verwenden der Seite in Hinsicht auf die Bildgröße, die Auflösung und die Komprimierung zu optimieren.
Bildgröße
Die optimale Bildgröße hängt stark von dem Einsatzort ab. Das CMS WordPress beispielsweise legt beim Upload eines Bildes mehrere kleinere Versionen (sogenannte Thumbnails) in verschiedenen Auflösungen an. Somit kannst du ein und dasselbe Bild an unterschiedlichen Orten einsetzen. Als maximale Bildgröße empfehlen wir die Full HD Auflösung (1920 Pixel an der längsten Kante des Bildes). Bei einem Bild im Querformat ergibt sich je nach Bild eine Endgröße von beispielsweise 1920 x 1280 Pixel.
Komprimierung
Was viele nicht wissen: Bei der Aufnahme eines Bildes nimmt die Kamera deutlich mehr Details auf, als das menschliche Auge überhaupt erkennen kann. Unser Ziel für das Bilder SEO ist es daher eine nahezu verlustfreie Komprimierung der Bilder vorzunehmen, nachdem wir die Bilder in der Größe angepasst haben.
Tools wie Smush und ImageOptim entfernen zusätzlich die Meta-Tags der Bilder, die ebenfalls einige KB bei einem Bild ausmachen können. In den Meta-Tags der Bilder stehen Informationen über die Kamera, den Aufnahmeort, die benutzten Einstellungen und viele mehr. Diese Informationen werden nur in Ausnahmefällen auf einer Website benötigt. Daher können wir diese getrost entfernen um eine kleinere Bildergröße zu erzielen.
Für die Komprimierung der Bilder nutzen wir folgende (teils kostenlose) Tools:
- ImageOptim (Mac App oder Webservice, kostenlos)
- ImageAlpha (Mac App, kostenlos)
- Smush (WordPress Plugin, kostenlos)
- Photoshop (Export-Funktion „Für Web speichern“, kostenpflichtig)
Auch eine Kombination mehrerer Tools kann manchmal sinnvoll sein. Probiere es einfach aus.
3. Sinnvollen Alt-Tag und Title-Tag vergeben
Für jedes Bild gehört es zum Standard, dass mindestens ein Alt-Tag benutzt wird. Leider wird dieser oftmals außer Acht gelassen. Ursprünglich für einen barrierefreien Zugang entwickelt, hat sich Google den Alt-Tag zu Nutze gemacht, damit die Suchmaschine besser den Inhalt eines Bildes verstehen kann.
Kleiner Exkurs: Die maschinelle Bilderkennung ist hoch aufwändig und auch nicht immer eindeutig. Bei 4 von 5 Bildern ist Google in der Lage zu erkennen, ob sich auf einem Bild eine Katze befindet. Ein 5-jähriges Kind kann mit nahezu 100% Wahrscheinlichkeit eine Katze auf einem Bild erkennen.
Aus diesem Grund ist es wieder aus doppelter Sicht von Vorteil, die Tag-Attribute bei den Bildern zu nutzen. Zum einen um den barrierefreien Coding Standard der Website zu erfüllen und zum anderen sich die Tatsache zu Nutze machen, dass Google diese Meta-Tags ausliest. Du hast also wieder die Möglichkeit in der Alt-Beschreibung und im Title-Tag des Bildes Keywords effektiv einzusetzen.
Im HTML5 Code sehen die beiden Tags wie folgt aus:
<img title="Bilder aus SEO-Sicht richtig auf Websites verwenden" src="/wp-content/uploads/bilder-seo.jpg" alt="Bilder Suchmaschinen-Optimierung effektiv nutzen">
Die Nutzung des Alt-Attributs und des Title-Attributs im IMG-Tag sind ein sehr effektives Mittel um Bilder SEO zu betreiben. Wir empfehlen daher dringend den Einsatz dieser technischen Mittel für optimale Ergebnisse in Google.
Alt-Attribut und Title-Attribut in WordPress vergeben
Wer die beiden Tags in WordPress nutzen möchte kann beim Upload der Bilder oder in der Mediathek nachträglich insgesamt 4 Felder ausfüllen:
- Alternativer Text (dieser wird als Alt-Tag genutzt)
- Titel (dieser wird als Title-Tag genutzt)
- Beschriftung
- Beschreibung
Gerade die ersten beiden Felder sind wichtig, da diese als Alt-Attribut und als Title-Tag genutzt werden.
Hinweis: Nicht jedes Theme nutzt die Attribute gleichermaßen. Im Zweifel überprüft euer Theme und den Code, der das Bild letztendlich ausgibt. Bei manchen WordPress Themes kann man die Tags auch zusätzlich oder ausschließlich über ein Widget pflegen.
4. Bilder mit Lazy Load performant laden
Zu guter Letzt verleihen wir unserem Webauftritt nun noch das i-Tüfpelchen. Mit einigen WordPress Plugins und Themes kannst du die Ladezeit deiner Seite nachträglich beschleunigen, indem du Lazy Loading bei den Bildern nutzt. Lazy Loading beschreibt eine Technik, bei der die Bilder nach dem Laden der Seite asynchron geladen werden.
Das Lazy Loading macht vor allem dann Sinn, wenn du viele Bilder auf deiner Seite nutzt. Dann werden zu Beginn nur die Bilder geladen, die im sichtbaren Bereich des Nutzers liegen (Stichwort above the fold). Alle anderen Bilder werden nach und nach, manchmal auch abhängig vom aktuellen Scroll-Status, nachgeladen. Der Nutzer der Seite bekommt davon oft gar nichts mit.
Wir nutzen bei unseren WordPress Websites folgende (teils kostenlose) Plugins um das Lazy Loading zu bewerkstelligen.
Ein netter Nebeneffekt beim Lazy Loading: Sobald das Bild geladen wurde kann man es per Fade In einblenden. Das sorgt für einen schönen Seitenaufbau, während der Nutzer scrollt.
Bei den von uns entwickelten Websites ist Lazy Loading Standard.
