So optimierst du deine Website-Bilder richtig für Besucher und Suchmaschinen

von Regina

am 15. April 2020
Blogbeitrag Bilder für Website-Besucher und Suchmaschinen optimieren

Was wäre eine Website ohne Bilder? Mit hochwertigen Bildern kannst du überzeugen, Emotionen wecken und Informationen schnell vermitteln. Sie dienen der Ergänzung deiner Texte und lockern dein Design auf. Wenn du deine Bilder auch noch richtig optimierst, kannst du deine Website nutzerfreundlicher gestalten und wertvolle Punkte für die Suchmaschinenoptimierung sammeln.

 

Warum solltest du deine Bilder optimieren?

 

1. Für die Google-Suche

Neben der Textsuche wird in Google auch gerne die Bilder-Suche genutzt. Google erkennt mit seinen Filtern mittlerweile schon sehr gut Bildmotive. Sobald es aber um Details geht, braucht auch die Suchmaschine Unterstützung.

Damit Google weiß, um was es auf dem Bild genau geht, sollten die Informationen dazu sauber gepflegt werden.

Denn mit der richtigen Bild-Pflege lieferst du mehr indexierbare Inhalte und kannst dich suchmaschinentechnisch besser platzieren.

 

2. Für die Nutzerfreundlichkeit

Kann ein Bild deiner Website aus irgendeinem Grund nicht richtig dargestellt werden, wird der Alternativ-Text statt des Bildes geladen. Vorausgesetzt, das dieser zuvor eingepflegt wurde.

Dies dient der Nutzerfreundlichkeit. Der Besucher erhält also auch ohne Bild eine Information und wird nicht allein gelassen.

 

3. Für die Barrierefreiheit

Für blinde oder sehgeschädigte Webseiten-Besucher ist es enorm wichtig, dass Bilder ausreichende und detaillierte Informationen liefern. Diese Besucher lassen sich den Website-Inhalt von sogenannten Screen-Readern vorlesen.

Bei Bildern liest der Screen-Reader den eingepflegten Alternativ-Text vor. Wenn du dies berücksichtigst, beachtest du einen wichtigen Punkt der Barrierefreiheit.

 

4. Für die Einzigartigkeit

„Duplicate Content“ (doppelter Inhalt) wird von Suchmaschinen nicht gerne gesehen und sollte vermieden werden. Damit du keinen Duplicate Content im Bildbereich produzierst, solltest du besser eigene Bilder verwenden. Oft hat man die aber nicht zur Verfügung und muss daher auf kostenlose oder gekaufte Bilder von diversen Plattformen zurückgreifen.

Diese Bilder werden aber leider auch von vielen anderen verwendet. Und das erkennt auch Google. Es macht also Sinn, diese Bilder graphisch zu verändern (sofern erlaubt) und sie somit einzigartig zu machen.

 

 

Was kannst du tun, um deine Bilder zu optimieren?

 

1. Verwende das richtige Dateiformat

Deine Bilder lädst du am besten im jpg-Format hoch.
Für Grafiken kannst du das png- oder das gif-Format verwenden.

 

2. Lade das Bild in der richtigen Dateigröße hoch

Neben dem Dateiformat spielt auch die Dateigröße eine sehr wichtige Rolle. Deine Bilder sollten nicht zu groß sein, um die Ladezeit deiner Website nicht unnötig zu verlangsamen. Eine Größe von max. 200KB wäre ideal.

Am besten, du bringst deine Bilder vor dem Hochladen mit einem Bildbearbeitungsprogramm schon auf die richtige Größe. Viele Themes geben auch schon vor, welches Format Bilder für bestimmte Bereiche, wie zum Beispiel Blogbeiträge, haben sollten.

Solltest du kein Bildbearbeitungsprogramm haben, kannst ein Online-Tool wie picresize verwenden. Dort lädst du dein Bild hoch, schneidest es auf die gewünschten Maße zu und speicherst es anschließend in der richtigen Größe ab.

Du kannst auch ein WordPress-Plugin verwenden, dass die Bilder automatisch beim Upload auf deine Website komprimiert:

Hier einige Beispiele:

Smush
Imsanity
EWWW Image Optimizer
ShortPixel Image Optimizer
Compress JPEG & PNG images

 

3. Pflege die Bild-Meta-Angaben

Sobald du ein Bild hochgeladen hast, kannst du es über die Listen- oder Galerieansicht der WordPress-Mediathek bearbeiten.

Wenn du mit dem Gutenberg-Editor arbeitest, kannst du beim Einfügen eines Bildblocks alle diese Metadaten auch rechts im Blockbereich bearbeiten.

Hier siehst du das Fenster Anhang-Details beim Klick auf ein Bild in der Galerieansicht.

Punkt 1: URL

Beim Hochladen eines Bildes wird in WordPress automatisch eine Anhangseite für das Bild erstellt und somit eine eigene URL für das Bild vergeben.

Diese URL basiert auf dem Dateinamen und kann nachträglich nicht mehr geändert werden. Umso wichtiger ist es, dass die Bilddatei schon vor dem Upload einen sinnvollen und aussagekräftigen Namen bekommt.

Der Dateiname sollte den Inhalt des Bildes so gut wie möglich beschreiben und am besten schon ein relevantes Keyword enthalten.

Mehrere Wörter solltest du mit Bindestrichen verbinden. Umlaute und Sonderzeichen solltest du ganz vermeiden.

Beispiel hier: Sonnenblumenfeld.jpg

 

Punkt 2: Alternativer Text

Der Alternativ-Text (auch Alt-Text oder Alt-Attribut genannt) ist das wichtigste Feld in der Bildoptimierung. Wie schon erwähnt, steht hier der Text, den Suchmaschinen zur Indexierung auslesen.

Kann ein Bild nicht richtig dargestellt werden, wird an dessen Stelle dieser Text geladen. Blinden und sehgeschädigten Menschen wird dieser Text per Screen-Reader vorgelesen.

Umso wichtiger ist es, dass du hier den Inhalt des Bildes und seine Aussage in wenigen Worten und so gut wie möglich beschreibst. Der Alt-Text sollte auch wieder, wenn möglich, dein Keyword enthalten.

Bei Hintergrundbildern oder Bildern, die nur dem Design dienen, solltest du den Alt-Text weglassen. Dieser wird dann von Screen-Readern ignoriert und verwirrt nicht unnötig.

Beispiel: „Dieses Foto zeigt ein Sonnenblumenfeld.“

 

Punkt 3: Titel (Title-Tag)

Der Titel basiert auf dem Namen der hochgeladenen Bilddatei und wird automatisch erzeugt. Er kann aber neu vergeben werden und sollte kurz und bündig beschreiben, um was es auf dem Bild geht.

Er wird, je nach Browser, als tooltip (kleines Infofenster) angezeigt, wenn man mit der Maus über das Bild fährt. Da vermehrt über Tablet und Handy gesurft wird, wo dieses tooltip nicht angezeigt wird, sollte man sich nicht allein auf die Pflege dieses Feldes verlassen.

Für die Suchmaschinenoptimierung hat der Titel keine große Bedeutung. Du kannst ihn aber nutzen, um dein Keyword nochmal zu platzieren.

Beispiel: „Feld voller Sonnenblumen“

 

Punkt 4: Beschriftung

Der Text im Feld Beschriftung erscheint direkt unter dem Bild als Bildunterschrift.

Du kannst ihn beispielsweise für Copyright-Hinweise nutzen oder deinen Webseitenbesuchern auf diese Weise schnell und einfach Informationen zum Bild liefern. Denn gerade diese Bildunterschriften fallen beim Scannen der Seite schnell ins Auge.

Möchtest du keine Bildunterschrift, lässt du dieses Feld einfach frei.

Beispiel: „Feld mit gelben Sonnenblumen“

 

Punkt 5: Beschreibung

Im Feld Beschreibung kannst du das Bild mit zusätzlichem Text und auch HTML-Befehlen ergänzen. Du kannst hier eine ausführliche Beschreibung deines Bildes angeben oder auch Adressen und Links einpflegen. Dieser Text wird dann auf der Bildanhangseite und im Quellcode ausgegeben.

Damit du die HTML-Befehle siehst, musst du in den Anhang-Details unten auf „Weitere Details bearbeiten“ klicken.

Anschauen kannst du dir die Anhangseite über den Link „Anhang-Seite anschauen“.

Beispiel: „Photo by Jordan Cormack on Unsplash

 

Fazit:
Wenn du diese Punkte beim Hochladen deiner Bilder gleich berücksichtigst, hast du schon viel für die Suchmaschinenoptimierung deiner Website getan.

Das könnte dich auch interessieren:

1 Kommentar

  1. Liebe Regina, vielen Dank für die wirklich sehr guten und hilfreichen Tipps!

    Antworten

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Mit Absenden des Kommentars willigst du ein, dass die mitgeteilten Daten gespeichert und zusammen mit dem Blogbeitrag veröffentlicht werden. Du kannst deine Einwilligung jederzeit widerrufen. Mehr Informationen findest du in der Datenschutzerklärung.