Suchmaschinenoptimierung – ein Wort, das bei vielen Website-Betreibern Angstschweiß auf die Stirn treibt. Geht es darum, Bilder, Fotos und Grafiken zu optimieren, wird das oft sogar erst gar nicht gemacht. Dabei ist es gar nicht so schwer, SEO für WordPress zu machen. Und Bilder für WordPress zu optimieren ist ein guter Anfang für die Suchmaschinenoptimierung deiner Website.

Mit diesem Let’s do gebe ich dir eine detaillierte Schritt-für-Schritt-Anleitung an die Hand, mit der du das ganz easy selbst erledigen kannst, ohne im SEO-Frust unterzugehen.

Schritt 1: Passe die Größe deiner Bilder an

Für das Web reicht eine Auflösung von 72 oder 96 ppi (pixel per inch). Eine höhere Auflösung, wie sie aus der Kamera kommt (300 ppi) ist im Web nicht notwendig und erhöht nur die Dateigröße.

Die Bilder, die aus einer Digitalkamera kommen, sind auch von den Maßen her viel zu groß für deine WordPress-Website. Dort brauchst du nicht mehr als 2000 px, in der Regel reichen 600 Pixel bis 1800 Pixel Breite.

Du benötigst also bei deinen Fotos

  • im Text (z. B. im Blog-Beitrag): 600 bis 800 px,
  • für Seitentitel (Page Header): 1200 bis 1800 px,
  • und für deinen Webshop mit WooCommerce: 900 px

maximale Breite.

Öffne deine Fotos in einem Bildbearbeitungsprogramm oder einer App deiner Wahl (z. B. Gimp, Photoshop). Dann passe die Größe so an, dass die längste Seite deines Bildes entsprechend der Empfehlungen breit oder hoch ist (je nachdem, ob du ein Quer- oder Hochformat benutzen möchtest). Die jeweils andere (kürzere) Seite lässt du automatisch anpassen, damit das Seitenverhältnis erhalten bleibt.

Untenstehendes Beispiel zeigt dir die Vorgehensweise im kostenpflichtigen Photoshop. Allerdings wirst du in anderen Bildbearbeitungsprogrammen ähnlich vorgehen können.

Auflösung in Photoshop anpassen

In Photoshop wähle über das Menü den Reiter Bild und öffne dann Bildgröße.

Auflösung und Größe von Fotos in Photoshop anpassen

Ändere zunächst die Auflösung deines Seiten- oder Beitrag-Bildes auf eine Auflösung von 72 ppi, für deine Shop-Bilder empfehle ich dir 96 ppi.

WICHTIG: Ändere immer erst die Auflösung und dann die Größe!

Bildgröße in Photshop anpassen

Achte darauf, dass Breite und Höhe miteinander verknüpft sind, damit das Seitenverhältnis beibehalten wird.

Ändere den jeweils höheren Wert. Achte auf die Verknüpfung von Breite und Höhe.

Ändere jetzt den jeweils höheren Wert (in der Regel die Breite) auf die gewünschte Größe. Der andere Wert wird vom Programm automatisch errechnet.

An den übrigen Werten musst du keine Änderungen vornehmen. Bestätige deine Eingabe mit OK.

WICHTIG: Bitte bewahre die Original-Fotos auf jeden Fall auf! Vielleicht benötigst du später einmal eine höhere Auflösung.

Bildgrößen aus Templates herausfinden

Oft hat man bei der Installation eines Themes die Möglichkeit ein Design-Beispiel, ein sog. Template, zu installieren. Dabei erhält man eine fertig gebaute Website, die man anschließend nur noch entsprechend mit den eigenen Inhalten füllen muss.

Du hast mit deinem Theme so ein Template installiert, das Beispiel-Bilder enthält? Dann kannst du die benötigt Größe ganz einfach herausfinden.

Öffne deine Webseite, die das Beispiel-Bild enthält und mache mit deiner Maus einen Rechts-Klick auf das Bild. Wähle Bild speichern unter … (Chrome) und speichere das Bild auf deinem PC oder Mac. Öffne anschließend den Dateiexplorer, wähle das Bild dort aus und schau dir die Infos an.

Unter Windows 10 siehst du die Abmessungen, wenn du im Explorer das Bild auswählst und mit dem Cursor deiner Maus darüber „schwebst“. Der nun sichtbare Tooltip enthält die Informationen zu dem Bild.

Die Abmessungen des Bildes siehst du auf deinem Mac, indem du im Finder oben rechts die drei Punkte anklickst und auf Informationen gehst. Im sich öffnenden Fenster unter Weitere Informationen stehen die Abmessungen deines Bildes.

Schritt 2: Bilder für WordPress richtig benennen

Um Google und somit auch deinen Website-Besucher zu zeigen, was sie bei dir finden können, benenne deine Bilder nach folgendem Schema. Beachte dabei, dass der Dateiname möglichst kurz und prägnant ist, also sofort ersichtlich ist, worum es auf der jeweiligen Seite/dem jeweiligen Bild geht.

WICHTIG: Dein Fokus-Keyword sollte sowohl im Datei-Namen deines Bildes, als auch im Titel der Seite/des Beitrages auftauchen.

Überlege bei der Benennung, wonach deine Kunden bei Google suchen würden (z. B. Bilder optimieren für WordPress) und benutze diese Worte im Dateinamen.

Damit es nicht zu Einbindungs- und Darstellungsproblemen kommt, beachte auch folgende Punkte:

  • Benutze ausschließlich Kleinschreibung,
  • trenne Wörter nur mit Bindestrich,
  • und schreibe Umlaute aus (ä=ae, ü=ue usw.).

Beispiel:
bilder-optimieren-wordpress-sabrina-koegler-webdesign.jpg

Bei einem Bild für einen Artikel aus deinem Webshop empfehle ich dir folgendes Schema zur Bildbenennung:

artikelbezeichnung-evtl. noch eine Eigenschaft (Keyword)-farbedeinemarke.jpg

Schritt 3: Fotos komprimieren

Um Speicherplatz zu sparen und damit die Ladegeschwindigkeit deiner Website niedrig zu halten, solltest du deine Fotos nicht nur passend zuschneiden, sondern sie auch komprimieren.

Beim Komprimieren werden Daten aus den Bildern entfernt, die in der Regel nicht nötig sind, um sie richtig darzustellen. So wird die Dateigröße teilweise erheblich verkleinert und einem durchschnittlichen Betrachter wird den Unterschied kaum oder gar nicht wahrnehmen.

Du kannst deine Fotos mit einem WordPress-Plugin, wie z. B. dem ShortPixel Image Optimizer automatisch beim Hochladen optimieren. Solltest du kein Plugin dafür nutzen wollen, empfehle ich dir die Komprimierung über ein Browser-Tool wie TinyPNG.

Mit dem Browser-Tool TinyPNG kannst du deine Bilder komprimieren.

Ziehe die Fotos dazu einfach per Drag-and-drop in das Browser-Fenster oder öffne den Datei-Explorer, indem du das Feld anklickst. Bei TinyPNG kannst du bis zu 20 Fotos (max. 5 MB) auf einmal hochladen und komprimieren lassen. Lade im Anschluss das vom Tool erstellte Zip-Archiv auf deinen PC und entpacke es.

Schritt 4: Fotos in WordPress hochladen

Gehe im Backend deiner Website auf Medien und klicke auf den Button Datei hinzufügen. Lade deine Fotos per Drag-and-drop oder über den Datei-Explorer in deine Mediathek.

Tipp: Solltest du das Plugin Real Media Library oder ein anderes Plugin zur Organisation deiner Mediathek benutzen, kannst du vorher schon eine passende Ordnerstruktur anlegen und deine Fotos direkt in die entsprechenden Ordner hochladen. Du kannst die Bilder aber auch erst hochladen und anschließend in die Ordner sortieren.

Schritt 5: Meta-Daten in WordPress eingeben

Ich empfehle, dass du dir bereits vor dem Bearbeiten der Fotos Gedanken zu den Meta-Daten machst, insbesondere dann, wenn du viele Bilder auf deiner WordPress-Website benutzt.

Lege dir dafür zum Beispiel eine Excel-Datei an. Benenne vier Spalten nach Dateinamen, Alt-Text, Titel, Beschriftung und ggf. Beschreibung. Trage hier nun alle Texte ein. So brauchst du sie später nur noch in WordPress kopieren und hast sie außerdem jederzeit übersichtlich zur Hand, falls du Änderungen daran vornehmen möchtest.

Die Anhang-Details in WordPress

Die sogenannten Anhang-Details öffnest du in der WordPress-Mediathek, indem du eines deiner dort hochgeladenen Bilder anklickst. Hier findest du die verschiedenen Felder zur Eingabe deiner Meta-Daten.

Screenshot der Anhang-Details in WordPress mit den Feldern zur Eingabe deiner Meta-Daten
Die Anhang-Details in WordPress mit den Feldern zur Eingabe deiner Meta-Daten

Alternativer Text

Der Alternative Text (auch Alt-Text oder Alt-Tag) wird von Suchmaschinen verwendet, falls Bilder oder Grafiken einmal nicht angezeigt werden oder Menschen mit Sehschwäche die Sprachausgabe benutzen, um sich die Seite beschreiben zu lassen.

Der hinterlegte Alternativtext ist eine Beschreibung des Bildes. Er gehört zu den Meta-Angaben und ist für den User im Normalfall nicht sichtbar. Beschreibe hier das Foto kurz, aber möglichst detailliert. Stelle dir dabei vor, dass du jemandem das Foto beschreiben möchtest, der es nicht sehen kann. Neben dem Datei-Namen deines Fotos ist der Alternativ-Text der für SEO wichtigste Tag deines Bildes. Fülle diesen also immer aus.

Titel

Der Titel wird von WordPress automatisch mit dem Datei-Namen deines Bildes ausgefüllt. Je nach Theme erscheint der Titel aber als Tooltip-Bubble, wenn man auf der Website über das Bild fährt.
Nutzt du diese Funktion, hinterlege im Titel eine kurze Beschreibung des Bildes, ähnlich der des Alt-Textes. Der Titel muss allerdings nicht so detailliert sein.

Beschriftung

Trägst du hier etwas ein, wird dies auf der jeweiligen Seite bei dem Bild dargestellt, sofern du das nicht deaktiviert hast. Die genaue Platzierung der Beschriftung ist allerdings abhängig von deinem benutzten Theme.

Übrigens belegen Studien, dass Bildbeschriftungen wesentlich häufiger als der normale Fließtext gelesen werden. Auch sie sind relevant für die SEO, da du so die Besucher länger auf deiner Website halten kannst. Und eine lange Verweildauer signalisiert den Suchmaschinen die Relevanz deines Contents und führt zu verbesserten Rankings deiner Website.

Benutze auf jeden Fall auch hier Keywords, auch solche, die du nicht im Datei-Namen und dem Alt-Text verwendet hast.

Beschreibung

Die Beschreibung wird nur auf der Dateianhang-Seite angezeigt, also auf der Seite, die nur das Bild enthält.  Ob die Dateianhang-Seite angezeigt wird, entscheidest du beim Einfügen des Bildes in die jeweilige Seite. Dort kannst du die Einstellungen unter den Bildinformationen vornehmen.

Du kannst auf die Beschreibung verzichten, wenn du die Dateianhang-Seite nicht anzeigen lässt.

Tada! Glückwunsch, du hast es geschafft! Deine Bilder sind jetzt für deine WordPress-Website und für Suchmaschinen optimiert. Fandest du dieses Let’s do hilfreich? Hinterlasse mir gerne deine Meinung in den Kommentaren.

Zeige deine Leidenschaft für deine Arbeit
auf deiner individuellen & authentischen Website.

  • mit professionellem Design,
  • ganz ohne Technikfrust,
  • inklusive Onpage-Suchmaschinenoptimierung,
  • und vielem mehr.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht.

Scroll to Top WordPress Cookie Plugin von Real Cookie Banner