Was ist der Nutzen von Bilder SEO?

Es sind die Bilder einer Website, die bei den Besucher/innen binnen Sekundenbruchteilen Emotionen wecken und mitentscheiden, ob weitergelesen wird oder ein Absprung droht. Anders sieht es bei den maschinellen Besuchern von Websites aus: die Google Bots können Bilder nicht sehen und sie haben auch keine Gefühle. Bilder SEO hilft dem Bot, Bilder zu verstehen und einzuordnen. Und wenn die Website schnell lädt, dann kann sich das positiv aufs Ranking auswirken. Und das wiederum verhilft Ihnen zu mehr Traffic.

Tipp 1: Einzigartige Bilder verwenden

Der erste Tipp mag trivial klingen: wenn immer möglich sollten Sie einzigartige Bilder verwenden. Kaum etwas mindert den Wert eines Beitrages so sehr wie ein abgelutschtes Stock-Bild, das die Leser/innen schon oft gesehen haben.

Deshalb: Machen Sie selber Fotos oder erstellen Sie Ihre eigenen Grafiken. Ihr Bild muss in der Bildersuche aus der grossen Masse der anderen Bilder herausstechen und zum Klicken einladen. Setzen Sie also auf Bilder, die einen echten Mehrwert für die Leser/innen bieten und stellen Sie sicher, dass jedes eingesetzte Bild eine Funktion hat.

Tipp 2: Das richtige Dateiformat – JPEG, GIF, PNG, SVG oder gar WebP verwenden?

Die meist verwendeten Dateiformate für Bilder sind JPEG und PNG. Während JPEG das Format der Wahl für Fotos ist, wird PNG primär für Grafiken verwendet und für transparente Bilder.

PNG Dateien können in unterschiedlicher Qualität entweder als PNG-8 oder PNG-24 gespeichert werden. Früher wurde GIF vor allem für Logos verwendet, heute wird dafür meist ein PNG verwendet oder gar eine SVG-Datei, wenn es gestochen scharf sein soll. SVG-Dateien lassen sich allerdings nicht ohne weiteres in WordPress hochladen, da es sich eigentlich nicht um eine Datei sondern im Code handelt. Es braucht dafür einige Tricks.

SVG im Theme Divi nutzen:

Hier findet sich eine Anleitung von Elegant Themes, wie man ein SVG-Logo in einen globalen Divi Header einbindet: https://www.elegantthemes.com/blog/divi-resources/how-to-add-animate-your-svg-logo-inside-your-global-header-with-divis-theme-builder-anime-js

SVG als Datei in der Mediathek

Wer die SVG-Datei in die Mediathek hochladen möchte, findet bei Divi Lover eine Anleitung zur Anpassung der function.php. Diese Anleitung funktioniert auch für andere Themes – nicht nur für Divi: https://divilover.com/how-to-add-svg-images-to-wordpress-library/

Was ist WebP?

Wer seine Website durch das Google Tool “Pagespeed Insights” hat laufen lassen, hat mit grösster Wahrscheinlichkeit folgenden Tipp erhalten: “Bilder in modernen Formaten bereitstellen” und die Vorschläge gesehen: JPEG 2000, JPEG XR und WebP.

WebP ist ein von Google entwickeltes Bildformat, das ein äusserst attraktive Komprimierung bietet. Das Problem von WebP liegt darin, dass nach wie vor nicht alle Browser WebP unterstützen – insbesondere Safari gehört zu den Verweigerern.

Aus diesem Grund können Stand heute (10.10.2020) nicht ausschliesslich WebP-Bilder in die Mediathek hochgeladen werden. Eine mögliche Lösung geht über die Verwendung von Plugins, die je nach verwendetem Browser, den Nutzern entweder JPEG und PNG-Bilder oder dann eben ein WebP-Bild zur Verfügung stellt. Plugins, die diese Funktion zur Verfügung stellen sind beispielsweise: ShortPixel oder Imagify. 

Tipp 3: Bilder richtig bemessen: skalieren und komprimieren

Die Bildgrösse ist absolut relevant für die Ladezeit eines Bildes. Es macht keinen Sinn ein Bild in einer Breite von 2680 Pixel hochzuladen, wenn die maximale Breite 1080px beträgt. Idealerweise werden die Bilder bereits vor dem Hochladen in die WordPress Mediathek auf die passende Grösse zugeschnitten bzw. skaliert.

Das kann entweder über entsprechende Offline Anwendungen wie Photoshop, Photoshop Elements oder GIMP (ein kostenloses Bildbearbeitungsprogramm)  gemacht werden. Es gibt auch einige online Bildbearbeitungstools wie der PIXLR Editor.

In Photoshop sollte zum Speichern immer die Funktion “Exportieren” > “Für Web speichern” genutzt werden. Anschliessend kann der Dateityp und die Qualität gewählt werden. Hier empfiehlt sich ein Wert zwischen 60 und 80.

Weil jede Komprimierung mit einem Qualitätsverlust einhergeht, gilt es die richtige Mischung zu finden. Es ist leider schwierig zu sagen, wie schwer ein Bild maximal sein darf, weil dieser Wert sowohl von der Auflösung als auch der Farbtiefe abhängt. Bilder in Beiträgen, die in der Regel nicht über die gesamte Breite laufen, sind idealerweise unter 250KB. Bitte beachten Sie auch Tipp 5.

Tipp 4: Keywords im Dateinamen verwenden

Nicht selten haben Bilder hieroglyphische Dateinamen – bestehend aus einer losen Abfolge von Zahlen und Buchstaben. Aber mit „IMG20150711.jpg“ kann der Google-Bot wenig anfangen. Geben Sie deshalb Ihren Bildern einen sprechenden Namen, der idealerweise wichtige Keywords enthält. Beachten Sie dabei folgende Richtlinien:

• keine Leerschläge: Worttrennungen mit Bindestrich. Bindestriche werden besser verstanden als Unterstriche (Underline).
• keine Umlaute: machen Sie aus ä – ae, ö – oe, ü- ue usw.
• alles klein schreiben, weil dadurch die Gefahr von Duplicate Content vermindert wird.

Tipp 5: Bilder komprimieren – am besten vor dem Upload

Für die reine Bildkomprimierung (sprich ohne Skalierung) gibt es mehrere Online Tools. Oftmals lässt sich mit diesen Tools auch nach der Skalierung nochmals etwas rausholen. Zwei Beispiele:

• TinyPNG:
  Dieses Tool komprimiert PNGs und JPEGs. Diese Funktion gibt es auch als Photoshop-Plugin, sodass die Komprimierung direkt in Photoshop optimiert werden kann.
• Compressor:
  Mit diesem Tool lassen sich JPEGs und PNGs komprimieren: verlustfrei (lossless) als auch verlustbehaftet (lossy). Das Tool überzeugt durch seine intuitive Handhabung.

Es gibt verschiedene WordPress-Plugin, das die Komprimierung beim Hochladen in die Mediathek ausführen. So gibt es für TinyPNG ein WordPress Plugin. Bildkomprimierung können aber auch die bereits weiter oben erwähnten Plugins Shortpixel und Imagify sowie viele weitere.

Die Dienstleistung der Bildkomprimierung ist bei allen Anbietern nur bis zu einem bestimmten Umfang kostenlos. Denn auch bei den WordPress-Plugins findet die eigentliche Rechenleistung auf den Servern der Anbieter statt. Das benötigt Server-Ressourcen und ist mit entsprechenden Kosten verbunden. Es lohnt sich, die Preismodell zu vergleichen basierend auf den eigenen Bedürfnissen.

Tipp 6: Alt Tags richtig setzen

Der Alt Tag bzw. der Alternativ-Text hat die Aufgabe zu beschreiben, was auf dem Bild zu sehen ist. Denn das Alt Attribut enthält jene Info, die blinden oder sehbehinderten Usern beim Besuch einer Website angezeigt bzw. von Screenreadern vorgelesen wird. Verwenden Sie auch hier Keywords, doch beachten Sie, dass dem Alt Text eine wichtige beschreibenden Funktion zukommt. Auf jeden Fall ist Keyword Stuffing an dieser Stelle unbedingt zu vermeiden.

Guter Alternativ-Text: Blaue Socken mit gelben Kreisen von WebSENNsation
Schlechter Alternativ-Text: Socken Verlosung

Tipp 7: Title anpassen

Der Title Tag wird automatisch mit dem Dateinamen befüllt. Für SEO hat der Titel kaum eine Bedeutung. Er ist hilfreich bei der Bildersuche innerhalb der Mediathek. Den Website-Besucher/innen wird er anzeigt, wenn man mit der Maus über ein Bild fährt (Tooltip). Aus diesem Grund ist es in der Regel sinnvoll, den Titel Tag anzupassen und die gängige Rechtschreibung zu nutzen. Oder falls gewünscht, den Titel ganz zu löschen.

Hinweis an alle Divi-Nutzer: Bei der Nutzung einer Bildergalerie kann der Titel unter jedem Bild angezeigt werden.

Tipp 8: Bildbeschriftung (Caption) nutzen

Die Beschriftung (auch Caption genannt) wird direkt unterhalb des Bildes angezeigt. Leider wird es zu oft nicht verwendet. Das ist schade, denn Studien belegen, dass diese Bildunterschriften wesentlich häufiger gelesen werden als der Fliesstext – insbesondere wenn ein Betrag gescannt wird.
Hinweis für Divi-Nutzer/innen: Bitte beachte, dass wenn die Bildbeschiftung in Divi angezeigt werden soll, das Bild über eine Text-Modul (!) eingebunden werden muss und nicht über das Bild-Modul.

Hinweis an alle Divi-Nutzer: Bei der Nutzung einer Bildergalerie kann der Titel unter jedem Bild angezeigt werden.

Tipp 9: Lazy Load – ab WordPress 5.5. Teil des WordPress Core

Lazy Load ist eine Technik zur Optimierung der Ladezeiten. Dabei werden Inhalte, die im sichtbaren Bereich der Website liegen sofort geladen. Inhalte die noch nicht gebraucht werden, werden dagegen verzögert geladen. Das ist insbesondere für das Laden von Bildern hilfreich. Dessen sind sich auch die WordPress-Entwickler bewusst, weshalb die Funktion in das Core von WordPress 5.5. eingebaut haben. Wer diese Funktion bisher über ein Plugin gelöst hat, sollte prüfen, ob das Plugin noch benötigt wird.

Tipp 10: Bilder in der XML Sitemap mitgeben

Je nach verwendetem SEO Plugin ist es möglich, eine separate XML Sitemap für Bilder zu erstellen. Wer Yoast SEO nutzt, findet keine solche separate Image XML Sitemap. Das ist aber kein Problem – im Gegenteil: die Bilder direkt über die XML Sitemaps des jeweiligen Pagetypes mitgegeben werden.

Fazit Bilder SEO

Bilder SEO findet bereits vor dem Upload der Bilder in die Mediathek statt – das haben die Tipps 1 bis 5 gezeigt.

Das macht die Optimierung von bestehenden Bildern nicht einfach. Deshalb ist es besser Bilder SEO von Anfang an zu machen oder heute damit beginnen und beim Erstellen von neuen Inhalte die Tipps beherzigen. Ob es sinnvoll ist, bestehende Inhalte zu optimieren, ist von Fall zu Fall zu entscheiden.

1. Weil gut gekennzeichnete Bilder in die Google Bildersuche aufgenommen werden. Die Bildersuche ist ein nicht zu unterschätzender Traffic-Lieferant.

2. Weil Bilder aufgrund der dazugehörigen Attribute eine gute Möglichkeit zur Platzierung von Keywords bieten.

3. Weil schnellere Ladezeiten gut für SEO sind: Bilder sind ein häufiger Grund für langsame Ladezeiten, deshalb lohnt sich Skalierung und Komprimierung von Bildern für SEO.

Checkliste Bilder SEO