Alt-Attribut

Was ist ein Alt-Attribut?

Ein Alt-Attribut (Alternativtext) ist ein Text, der im HTML-Code eines Bildes hinterlegt wird und den Bildinhalt beschreibt. Dieser Text wird von Screenreadern vorgelesen, von Suchmaschinen ausgewertet und angezeigt, wenn ein Bild nicht geladen werden kann. Damit ist das Alt-Attribut zentral für Barrierefreiheit und SEO.

1. Definition: Was ist ein Alt-Attribut im HTML?

Das Alt-Attribut ist ein Bestandteil des HTML-Img-Tags und liefert eine schriftliche Beschreibung eines Bildes. Technisch sieht das zum Beispiel so aus: <img src=“produkt.jpg“ alt=“Schwarze Herren-Lederjacke mit Reißverschluss“>. Der Alternativtext ersetzt das Bild in Situationen, in denen es nicht angezeigt oder verstanden werden kann, etwa bei Screenreadern oder bei deaktivierten Bildern im Browser.

Im Kern verfolgt das Alt-Attribut drei Ziele: Zugänglichkeit (Barrierefreiheit), semantische Beschreibung des Inhalts und zusätzliche Kontextinformationen für Suchmaschinen. Richtig eingesetzt erhöht es die Nutzbarkeit einer Seite und unterstützt gleichzeitig die Suchmaschinenoptimierung.

2. Rolle des Alt-Attributs in SEO und Accessibility

Für Suchmaschinen und Nutzer mit Screenreader ist das Alt-Attribut eine der wichtigsten Informationsquellen zu Bildern. Während Nutzer das Bild visuell wahrnehmen, lesen Crawler und Screenreader den Alternativtext.

SEO-Signal: Suchmaschinen verstehen den Kontext von Bildern besser und können sie thematisch einordnen.
Barrierefreiheit: Screenreader lesen den Alt-Text vor und machen damit Bildinhalte für blinde und sehbehinderte Nutzer zugänglich.
Fallback: Wenn Bilder nicht geladen werden, sehen Nutzer den Alternativtext anstelle des Bildes.

In Kombination mit Dateinamen, Bildunterschriften (Caption) und umgebendem Text bildet das Alt-Attribut ein wichtiges Puzzleteil für die gesamte Seitenrelevanz.

3. Unterschied: Alt-Attribut, Title-Attribut und Bildunterschrift

Im Alltag werden verschiedene Bildtexte oft durcheinandergebracht. Das Alt-Attribut ist dabei klar von anderen Elementen abzugrenzen.

Element	Technische Position	Hauptzweck
Alt-Attribut	Attribut im <img>-Tag	Alternativtext bei Nichtanzeige; für Screenreader und SEO
Title-Attribut	Optionales Attribut im <img>-Tag	Tooltip beim Hover; geringerer SEO- und Accessibility-Wert
Bildunterschrift	Separates HTML-Element (z. B. <figcaption>)	Visuelle Erklärung oder Kommentar unterhalb des Bildes

Das Alt-Attribut ist in der Regel das einzige dieser Elemente, das für Barrierefreiheit zwingend empfohlen wird. Bildunterschriften können zusätzlich helfen, Inhalte zu erläutern, sind aber nicht zwingend.

4. Einsatz des Alt-Attributs im E-Commerce

In Onlineshops beeinflusst das Alt-Attribut nicht nur SEO, sondern auch Conversion Rate und Nutzererlebnis. Gerade bei großen Sortimenten (Shopware, Shopify Plus, Magento, Spryker, SAP Commerce etc.) ist ein skalierbarer Umgang mit Bild-Alt-Texten entscheidend.

Produktbilder (Freisteller, Anwendungsbilder, Varianten, Detailshots)
Kategoriebanner und Teaser-Grafiken
Branding-Elemente, Logos und Zertifikate
Icons in Einkaufswelten und Landingpages

Bei Produktbildern sollte der Alternativtext den konkreten Artikel wiedergeben, z. B. „Damen Laufschuh Nike Air Zoom Pegasus 40 in Blau, Seitenansicht“. So weiß ein Screenreader-Nutzer, welches Produkt dargestellt wird, und Suchmaschinen können Produkt- und Bildersuche besser zuordnen.

5. Wie du gute Alt-Attribute formulierst

Gute Alt-Texte sind präzise, beschreibend und nutzen relevante Keywords, ohne künstlich zu wirken. Sie ersetzen das Bild sprachlich, richten sich aber an Menschen, nicht an Suchmaschinen.

Kurz und präzise: Beschreibe das Wesentliche in einem kompakten Satz oder einer sinnvollen Phrase.
Relevant: Nutze Begriffe, die Nutzer tatsächlich verwenden (z. B. „Laufschuh Damen“, „Bohrmaschine 18V“).
Kontextbezogen: Passe den Text dem Inhalt der Seite an (Kategorie, Produktdetailseite, Ratgeber).
Keine Keyword-Listen: Alt-Attribute sind kein Ort für reine Keyword-Ansammlungen.
Keine überflüssigen Hinweise: Formulierungen wie „Bild von“ oder „Foto mit“ sind meist redundant.

Wenn du dir unsicher bist, ob ein Alt-Text gut ist, stelle dir die Frage: Würde ein Nutzer allein mit diesem Text den Bildinhalt ausreichend verstehen, wenn das Bild nicht sichtbar ist?

6. Typische Fehler bei Alt-Attributen

In der Praxis begegnen immer wieder dieselben Muster, die die Wirkung von Alt-Attributen deutlich schwächen oder komplett zunichtemachen.

Fehlende Alt-Attribute bei inhaltlich relevanten Bildern (z. B. Produktfotos)
Alt-Text = Dateiname („IMG_1234.jpg“) oder generische Wörter („Bild1“)
Keyword-Stuffing („Schuhe kaufen, Schuhe Damen, Schuhe günstig, Schuhe online“)
Gleiche Alt-Texte für viele unterschiedliche Bilder
Alt-Attribute bei rein dekorativen Grafiken, die keinen Mehrwert haben

Besonders problematisch ist es, Produktbilder mit identischen Alt-Attributen über verschiedene Varianten, Farben oder Größen hinweg zu versehen. Damit gehen wichtige Differenzierungsinformationen verloren, die sowohl für Nutzer als auch für Suchmaschinen relevant wären.

7. Dekorative Bilder: Wann darf das Alt-Attribut leer sein?

Nicht jedes Bild braucht eine ausführliche Beschreibung. Reine Dekorationen, Trennlinien oder optische Effekte sollten aus Sicht der Barrierefreiheit sogar „unsichtbar“ sein, damit Screenreader nicht mit unnützen Informationen überladen werden.

Reine Layout-Elemente (z. B. Linien, Hintergründe)
Design-Icons ohne Informationsgehalt (z. B. reine Schmuck-Icons)
Wiederholte Logos, wenn der Kontext bereits klar ist

In solchen Fällen wird das Alt-Attribut als leeres Attribut gesetzt: <img src=“linie.png“ alt=““>. Das unterscheidet sich bewusst von einem komplett fehlenden Alt-Attribut und signalisiert Screenreadern, dass dieses Bild ignoriert werden kann.

8. Alt-Attribut und Barrierefreiheit (WCAG/Screenreader)

Die Web Content Accessibility Guidelines (WCAG) empfehlen ausdrücklich aussagekräftige Alternativtexte für inhaltlich relevante Bilder. Für Screenreader-Nutzer sind Alt-Attribute oft die einzige Möglichkeit, Bildinhalte überhaupt wahrzunehmen.

Produktbild: Beschreibung des konkreten Artikels (Marke, Typ, zentrale Merkmale)
Infografik: Zusammenfassung der zentralen Aussage oder Daten
Buttons als Bild: Beschreibung der Funktion des Buttons (z. B. „In den Warenkorb“)

Gerade im E-Commerce ist eine gute Accessibility nicht nur eine Frage der Nutzerfreundlichkeit, sondern auch der rechtlichen Konformität, etwa im Kontext von Barrierefreiheitsanforderungen für digitale Produkte.

9. Alt-Attribute als SEO-Hebel für Produkt- und Bildersuche

Suchmaschinen werten Alt-Texte als relevanten Hinweis zur Bildbedeutung. Für Onlineshops ist das insbesondere in diesen Bereichen wichtig:

Google Bildersuche: Gute Alt-Attribute erhöhen die Chance, dass Produktbilder bei relevanten Suchanfragen erscheinen.
Longtail-Keywords: Kombinationen aus Marke, Modell, Farbe und Feature lassen sich ideal im Alt-Text abbilden.
Kontextsignale: Alt-Attribute ergänzen Title, Description und Überschriften und stärken die thematische Relevanz einer Seite.

In vielen Shops stammen Produktbilder direkt aus PIM- oder ERP-Systemen. Wenn du Alt-Attribute feedbasiert generierst und mit Attributen wie Marke, Kategorie, Material und Farbe kombinierst, kannst du tausende Bilder konsistent und SEO-tauglich beschriften.

10. Skalierung im E-Commerce: Alt-Attribute automatisiert pflegen

Manuell gepflegte Alt-Attribute stoßen bei großen Sortimentsumfängen schnell an Grenzen. Hier hilft ein datengetriebener Ansatz, der Produktfeeds, PIM-Daten und Templates kombiniert.

Produktdaten (z. B. aus PIM, ERP, Warenwirtschaft) als Ausgangsbasis
Klare Regeln je Kategorie, Marke oder Produkttyp
Template-Logik, die relevante Attribute zu einem sinnvollen Alternativtext kombiniert
Bulk-Generierung und Export in Shopsysteme wie Shopware, Shopify Plus, Magento oder Spryker

So entsteht etwa ein Alt-Attribut nach dem Muster „{Marke} {Produkttyp} {Modell} in {Farbe}, {Ansicht}“. Diese Struktur sorgt für Lesbarkeit und Klarheit, ist für Screenreader geeignet und liefert gleichzeitig starke SEO-Signale.

11. Praxisbeispiele: Gute und schlechte Alt-Attribute

Anhand konkreter Beispiele lässt sich schnell erkennen, wie stark die Qualität eines Alt-Attributs schwanken kann.

Alt-Attribut	Bewertung
schuh.jpg	Schlecht: reiner Dateiname, keine Information für Nutzer oder Suchmaschine.
Schuhe kaufen günstig online Sale	Schlecht: Keyword-Stuffing, keine Beschreibung des konkreten Bildes.
Roter Herren Laufschuh Adidas Ultraboost 23, Seitenansicht	Gut: Beschreibung von Marke, Produkttyp, Modell, Farbe und Ansicht.
Detailansicht Sohle Adidas Ultraboost 23 mit Profil	Gut: Spezifische Ansicht (Sohle), Mehrwert für Nutzer und Bildersuche.

Für Variantenbilder (z. B. unterschiedliche Farben) sollte das Alt-Attribut diese Varianten klar benennen, damit sowohl Nutzer als auch Suchmaschinen die Unterschiede erkennen.

12. Workflow-Tipps für Shop- und SEO-Teams

Damit Alt-Attribute nicht untergehen, solltest du sie fest in deinen Content- und Produktdaten-Workflow integrieren.

Alt-Text als Pflichtfeld im PIM oder in der Medienverwaltung definieren
Regeln je Kategorie oder Brand festlegen (z. B. Bausteine-Bibliothek)
Qualitätssicherung für kritische Bereiche (Top-Kategorien, Topseller, Marken-Landingpages)
Regelmäßige Crawls, um fehlende oder leere Alt-Attribute zu identifizieren

Bei automatisierten Prozessen ist wichtig, dass der Output regelmäßig stichprobenartig geprüft und bei Bedarf nachgeschärft wird. So vermeidest du, dass schlechte Daten systematisch im gesamten Shop ausgerollt werden.

13. Alt-Attribut im Kontext von KI-Suchen und GEO

Mit dem Aufkommen generativer Suchsysteme (GEO – Generative Engine Optimization) spielen strukturierte und beschreibende Inhalte eine noch größere Rolle. KI-Systeme analysieren nicht nur Fließtexte, sondern auch Metadaten wie Alt-Attribute, um Antworten zu generieren.

Alt-Texte liefern zusätzlichen Kontext zu visuellen Inhalten
Kombination aus Feed-Daten und Alt-Attributen erhöht Faktentreue
Sauber beschriebene Bilder können die Chance erhöhen, in KI-Antworten berücksichtigt zu werden

Ein datengetriebener, konsistenter Umgang mit Alt-Attributen ist damit nicht nur klassische SEO-Optimierung, sondern auch Vorbereitung auf die neue Suchwelt.

14. Checkliste: Alt-Attribute optimieren

Mit dieser kompakten Checkliste kannst du deine bestehenden Alt-Attribute systematisch prüfen und verbessern:

Sind alle relevanten Produkt- und Content-Bilder mit einem sinnvollen Alt-Text versehen?
Gibt es Bilder mit fehlendem oder generischem Alt-Attribut (z. B. „Bild1“, „Produktfoto“)?
Werden Marke, Produkttyp, Modell, zentrale Merkmale und ggf. Farbe konsistent abgebildet?
Vermeidest du Keyword-Listen ohne Beschreibung?
Sind dekorative Bilder korrekt mit alt=““ versehen, damit Screenreader sie ignorieren?
Gibt es klare Regeln und Templates je Kategorie/Marke, die sich skalieren lassen?
Werden neue Produkte und Bilder automatisch mit Alt-Attributen versehen (Feed/PIM-Logik)?

Wenn du diese Punkte im Griff hast, ist das Alt-Attribut kein „Nebenthema“ mehr, sondern ein fester Bestandteil deines E-Commerce-Setups.

15. Häufige Fragen zum Alt-Attribut

Was ist ein Alt-Attribut bei Bildern?

Das Alt-Attribut ist ein Textfeld im HTML-Img-Tag, das eine Alternative zum Bildinhalt bietet. Es beschreibt, was auf dem Bild zu sehen ist, damit Screenreader den Inhalt vorlesen können und Suchmaschinen den Kontext des Bildes besser verstehen.

Warum ist das Alt-Attribut wichtig für SEO?

Suchmaschinen können Bilder nicht wie Menschen sehen und nutzen daher das Alt-Attribut, um Bildinhalte einzuordnen. Ein guter Alternativtext stärkt die thematische Relevanz einer Seite, verbessert die Chancen in der Bildersuche und kann indirekt Rankings und Traffic positiv beeinflussen.

Wie sollte ich ein Alt-Attribut richtig formulieren?

Formuliere das Alt-Attribut kurz, präzise und beschreibend, so als würdest du einem Nutzer das Bild verbal erklären. Nutze relevante Keywords nur dann, wenn sie natürlich in die Beschreibung passen, und verzichte auf reine Keyword-Listen ohne sinnvollen Satzbau.

Braucht jedes Bild ein Alt-Attribut?

Inhaltlich relevante Bilder wie Produktfotos, Infografiken oder Teaser-Grafiken sollten immer ein sinnvolles Alt-Attribut erhalten. Rein dekorative Bilder, die keinen Informationswert haben, sollten ein leeres Alt-Attribut alt='' bekommen, damit Screenreader sie überspringen.

Welche Fehler sollte ich bei Alt-Attributen vermeiden?

Vermeide fehlende oder generische Alt-Texte, Dateinamen als Beschreibung, Keyword-Stuffing ohne inhaltlichen Mehrwert und identische Alt-Attribute für unterschiedliche Bilder. Ebenfalls kritisch ist es, dekorativen Bildern beschreibende Alt-Texte zu geben, da das Screenreader-Nutzer unnötig verwirrt.

Hat das Title-Attribut dieselbe Funktion wie das Alt-Attribut?

Nein, das Title-Attribut zeigt in vielen Browsern einen Tooltip beim Überfahren mit der Maus, ist aber weder für Barrierefreiheit noch für SEO so wichtig wie das Alt-Attribut. Screenreader und Suchmaschinen stützen sich primär auf den Alternativtext des Alt-Attributs, nicht auf den Title.

Wie kann ich Alt-Attribute in großen Onlineshops skalierbar pflegen?

In großen Shops empfiehlt sich ein datengetriebener Ansatz, bei dem Alt-Attribute auf Basis von Produktdaten wie Marke, Produkttyp, Modell, Farbe und weiteren Attributen automatisch generiert werden. Templates pro Kategorie oder Marke und eine Anbindung an PIM- oder Feed-Systeme ermöglichen eine skalierbare, konsistente Pflege der Alternativtexte.

16. Nächste Schritte: Alt-Attribute und Produktcontent automatisieren

Du möchtest Alt-Attribute, Produkttexte und weitere SEO-Elemente nicht mehr manuell pflegen, sondern direkt aus deinen Produktdaten generieren lassen? Sieh dir die Funktionen von feed2content.ai ® live an und teste das Tool mit deinem eigenen Produktfeed – von der ersten Kategorie bis zum kompletten Katalog.

Kostenlos starten

Du hast noch Fragen?

Kontakt