Alt-Text und SEO: Wie du deine Bilder optimierst

Alt-Text und SEO: Wie du deine Bilder optimierst

Avatar
Head of Content @ Ahrefs (oder, in einfachen Worten, ich bin der Typ, der dafür sorgt, dass jeder Blog-Post EPISCH wird).
Ein Alt-Text (alternativer Text) beschreibt ein Bild auf einer Webseite. Er befindet sich im HTML-Code und ist normalerweise nicht auf der Seite selbst sichtbar. 

Aber warum ist der Alt-Text so wichtig? Und wie kannst du ihn nutzen, um SEO und User Experience zu verbessern?

In diesem Guide lernst du:

Der Alt-Text ist aus vier Hauptgründen von Bedeutung.

1. Der Alt-Text verbessert Barrierefreiheit

Millionen von Menschen sind sehbehindert und viele nutzen einen Screenreader, um Inhalte online zu konsumieren. Dabei werden abgebildete Inhalte inklusive Bildern in ein Audioformat umgewandelt.

Bilder ohne Alt-Texte stellen Probleme für Screenreader dar, da es keine Möglichkeit gibt, den Inhalt des Bildes gegenüber dem Nutzer zu kommunizieren. In der Regel werden diese Bilder übergangen, oder schlimmer, lange und nutzlose Dateinamen der Bilder verlesen.

Google verweist auf die Bedeutung von Alt-Texten für Nutzer mit Screenreader in ihrem SEO Starter Guide.

2. Der Alt-Text kann die ‘thematische Relevanz’ erhöhen

Google analysiert Wörter einer Seite, um deren Inhalt zu verstehen.

Wenn eine Seite zum Beispiel Pudel, Labradore und Retriever erwähnt, weiß Google dass es sich dabei um Hunderassen handelt.

Aber was hat das mit Bildern zu tun?

Manchmal ergibt sich der Kontext aus dem Bild, dessen Inhalt Google nicht analysieren kann.

Die Verwendung von Alt-Texten hilft Google Bilder zu verstehen, was zu einem besseren Verständnis deiner Seite und deren Inhalten führt.

3. Der Alt-Text hilft dir in der Google Bildersuche zu ranken

Die Google Bildersuche ist die zweitgrößte Suchmaschine der Welt. Sie ist verantwortlich für 20.45% aller Suchen online und erhält damit mehr Suchen als YouTube, Bing und andere Suchmaschinen zusammengefasst.

Damit ergibt sich eine Möglichkeit, Traffic von der Google Bildersuche zu generieren.

Siehe unten die Anzahl an Klicks zu unserem Ahrefs Blog von der Google Bildersuche innerhalb der letzten drei Monate:

1 search console image clicks

Laut Googles John Mueller ist der Alt-Text ein wichtiger Bestandteil der Optimierung für die Google Bildersuche:

4. Der Alt-Text dient als Anchor-Text für Bilder-Links

Der Anchor-Text bezeichnet die klickbaren Wörter, die eine Webseite mit einer anderen Seite verlinken. Google nutzt ihn, um mehr über eine Webseite und ihre Inhalte zu erfahren.

Aber nicht alle Links bestehen aus Text, manche bestehen aus Bildern.

Google erklärt:

Falls du dich entscheidest ein Bild als Link zu verwenden, hilft es Google mehr über die Seite zu erfahren, zu der du verlinkst, wenn ein Alt-Text existiert. Stell dir dabei vor, du erstellst ein Anchor-Text für einen Text-Link.

Füge einfach ein Alt-Attribut zum

<img>-Tag im HTML-Code.

Bild mit Alt-Tag: 

<img src=“Pie.jpg” alt=“Steak und Ale Pie”>

Wenn du ein modernes CMS nutzt, sollte es möglich sein, den Alt-Text hinzuzufügen, ohne dazu den HTML-Code zu durchsuchen.

WordPress beispielsweise bietet ein Feld für den Alt-Text an, wenn ein Bild zu einer Seite oder einem Beitrag hinzugefügt wird.

2 alt text wordpress

Dies funktioniert ähnlich in anderen CMS-Systemen.

Hier findest du Anleitungen für die beliebtesten Systeme:

Nein, das ist eine weit verbreitete falsche Annahme.

Wird das Bild ausschließlich aus optischen Gründen verwendet ohne wesentlichen Informationsgehalt, dann gibt es keine Notwendigkeit für einen Alt-Text.

Manche Websites nutzen beispielsweise Icons, um Inhalte zu differenzieren:

3 icons

Diese Icons dienen ausschließlich der Optik, weshalb du keinen Alt-Text verwenden solltest. In diesem Fall würdest du Nutzer mit Screenreadern verärgern und keinen SEO-Mehrwert für die Seite bieten.

Das Gleiche gilt für allgemeine Bilder und Stockfotos:

4 stock image

Die Verwendung eines Alt-Textes “Badewanne und Kerze” ist nicht hilfreich für Leser mit Sehbehinderung, da diese Information nicht notwendig ist. Eine besser Lösung wäre es, wenn der Screenreader das Bild komplett ignoriert.

Dabei gilt es einen wichtigen Punkt zu beachten…

Wenn ein Bild keinen Alt-Text benötigt, ist es Best Practice ein unausgefülltes Alt-Attribut zu ergänzen. Dies ist sinnvoll, da manche Screenreader Dateinamen verlesen, wenn kein Alt-Attribut vorhanden ist, während die meisten Screenreader Bilder mit inhaltsleeren Attributen übergehen.

Das sieht folgendermaßen aus:

<img src="Platzhalter.gif" alt="">

Lerne mehr über dieses Thema im Guide von WebAIM.

Das Erstellen des Alt-Textes ist kein Hexenwerk. Folge diesen fünf Vorgehensweisen für eine optimale Umsetzung.

  • Fasse dich kurz. Lange Alt-Texte sind nervig für Nutzer mit Screenreader. Nutze so wenig Wörter wie möglich (Nutze das Longdesc-Attribut, falls eine lange Beschreibung notwendig ist.).
  • Sei genau. Konzentriere dich darauf, das Bild zu beschreiben.
  • Vermeide Keyword-Stuffing. Dies ist nicht der richtige Ort, um möglichst viele Keywords zu integrieren.
  • Vermeide anzugeben, dass es sich um ein Bild handelt. Es gibt keine Notwendigkeit “Bild von…” oder “Foto von…” in der Beschreibung zu nennen. Sowohl Google als auch Screenreader können dies eigenständig erkennen.
  • Vermeide Überflüssiges. Wiederhole keine Informationen, die bereits im Kontext des Bildes existieren. Wenn du z.B. ein Foto von Steve Jobs nutzt und die Bildunterschrift unter dem Foto “Steve Jobs” lautet, gibt es keine Notwendigkeit, dies in dem Alt-Attribut zu wiederholen. Google sollte verstehen, dass die Bildunterschrift dem Alt-Text entspricht.

Denke auch daran, Alt-Texte für Buttons zu verwenden. Ansonsten kann es sein, dass Screenreader diese übergehen und Besucher nicht mit deiner Website interagieren können.

Lass uns anhand von ein paar Beispielen sicherstellen, dass wir verstehen was gut funktioniert und was nicht.

strawberry cheesecake with cream

Schlecht: <img src=“Käsekuchen.png” alt=“Foto eines Käsekuchens”>

Okay: <img src=“Käsekuchen.png” alt=“Käsekuchen”>

Gut: <img src=“Käsekuchen.png” alt=“Käsekuchen mit Erdbeeren”>

Am besten: <img src=“Käsekuchen.png” alt=“Käsekuchen mit Erdbeeren und Sahne”>

apple founder, steve jobs, holding the iphone 4

Schlecht: <img src=“Steve-Jobs.png” alt=“Steve Jobs Apple iphone ipad mac”>

Okay: <img src=“Steve-Jobs.png” alt=“Steve Jobs”>

Gut: <img src=“Steve-Jobs.png” alt=“Apple Gründer, Steve Jobs”>

Am besten: <img src=“Steve-Jobs.png” alt=“Apple Gründer, Steve Jobs, hält das iphone 4”>

orange AD30HTC - 30 watt amplifier

Schlecht: <img src=“amp.png” alt=“Bild4”>

Okay: <img src=“amp.png” alt=“Orange Verstärker”>

Gut: <img src=“amp.png” alt=“Orange Verstärker — 30 Watt”>

Am besten: <img src=“amp.png” alt=“Orange AD30HTC — 30 Watt Verstärker”>

Beachte die Nennung der Seriennummer im letzten Beispiel. Dies ist ein bewährtes Vorgehen, insbesondere für Bilder auf E‑Commerce Produktseiten.

Es gibt viele Tools mit denen du Seiten crawlen kannst, um fehlende Alt-Attribute ausfindig zu machen, einschliesslich Ahrefs Site Audit.

5 sa alt tags

Aber fehlende Alt-Texte sind nicht immer ein Problem, da nicht alle Bilder einen Alt-Text benötigen.

Siehe zum Beispiel die folgenden fehlenden Alt-Attribute:

6 no alt text needed

Aufgrund der Dateinamen wird deutlich, dass diese Bilder keinen Alt-Text benötigen. Sie dienen zum optischen Zweck, was bedeutet, dass Screenreader sie überspringen sollten.

Anstatt also Seiten zu crawlen, um jedes fehlende Alt-Attribut ausfindig zu machen (auf den meisten Seiten fehlen meist viele), ist es besser Seiten, die bereits Traffic erhalten zu überprüfen und Alt-Texte für diese Seiten zu optimieren.

Dafür gibt es zwei Gründe:

  1. Diese Seiten werden von Nutzern mit einer Sehbehinderung genutzt. 2,4% aller US Bürger haben eine Sehbehinderung. Das ist im Durchschnitt eine von 42 Personen und wenn deine Seite 10.000 Besucher im Monat erhält, können 240 von ihnen den Inhalt nicht richtig erfassen.
  2. Diese Seiten können möglicherweise mehr Traffic generieren. Alt-Texte können dazu führen, dass Bilder besser in Googles Bildersuche ranken, was wiederum zu mehr Traffic führt. Selbst eine Traffic-Steigerung von einem Prozent für eine Seite mit 10.000 Besuchern bringt 100 zusätzliche Nutzer.

So kannst du vorgehen:

Schritt 1: Finde die Seiten, die am meisten Traffic durch die organischen Suche erhalten

Überprüfe Google Analytics, Google Search Console oder den “Top pages”-Report in Ahrefs’ Site Explorer.

7 top pages ahrefs

Schritt 2: Überprüfe deine Alt-Attribute

Installiere die kostenlose Alt Text Tester Chrome Extension, lade die Seite mit dem meisten Traffic und aktiviere die Extension.

Du solltest den Alt-Text angezeigt bekommen, wann immer du mit dem Cursor über ein Bild fährst.

8 alt text chrome

Wenn ein Alt-Attribut fehlt, wird dir eine Warnung angezeigt.

9 alt text missing

Überprüfe den Alt-Text für ein paar Bilder auf der Seite. Du wirst schnell ein Gefühl dafür bekommen, ob diese optimiert sind oder Optimierungspotenzial besteht.

Es dauert beispielsweise nur wenige Sekunden, um beim Scrollen festzustellen, dass alle Bilder in dem folgenden Beitrag gut optimiert sind…

… während dies nicht auf die folgende Seite von The Mirror zutrifft:

Schritt 3: Wiederhole diesen Vorgang für mehr Seiten

Wiederhole diesen Vorgang für die Seiten deiner Website, die am häufigsten aufgerufen werden. Dies sollte dir einen Überblick geben, ob die Optimierung deiner Alt-Texte gut ist oder weiterer Arbeit bedarf.

Da die meisten Websites den Großteil ihres Traffics mit nur wenigen Seiten generieren, sollte sich der Aufwand hierfür in Grenzen halten.

Nur zehn Beiträge des Ahrefs Blogs generieren beispielsweise 51% allen organischen Traffics…

… daher können wir innerhalb von Minuten die Alt-Texte für die Seiten mit dem meisten Traffic überprüfen und optimieren.

Abschließende Gedanken

Die Optimierung von Alt-Texten ist wichtig, aber es handelt sich dabei nicht um das Allgemeinrezept für Bilder-SEO. Du solltest auch Dateinamen optimieren, responsive Bilder verwenden, das sogenannte Lazy Loading und viele weitere Punkte in Erwägung ziehen.

Lerne mehr zum Thema mit unserer Liste der 12 umsetzbaren Tipps für SEO-Bilder.

Übersetzt von Heike Radlanski. Heike beschäftigt sich mit allen Aspekten des Online Marketing und Product Managements.