Alt-Text: Bilder im Onlineshop brauchen ihn, und in meinem Demoshop hatte kein einziges der 55 Produktfotos einen.
Dazu fehlten bei 851 von rund 1.300 Produkten SEO-Titel und Meta-Beschreibung. So sieht es in vielen Shops aus, wenn ich eine Zusammenarbeit beginne. Ich baue seit über zehn Jahren Onlineshops für den Mittelstand und lasse heute KI-Agenten echte Shop-Operationen ausführen.
Das Füllen dieser Felder ist Fleißarbeit, die neben dem Tagesgeschäft liegen bleibt, und genau dafür taugt ein KI-Agent.
Du bekommst hier die Grundregeln für gute Alt-Texte, einen Test, ob die KI das Produktfoto wirklich ansieht, und drei Regeln, damit sie nichts überschreibt, was dein Team schon gepflegt hat.
TL;DR
📌 TL;DR: Kurzfassung des Artikels
- Ein Alt-Text beschreibt ein Bild für Menschen, die es nicht sehen können. Screenreader lesen ihn vor, Suchmaschinen werten ihn aus.
- In meinem Demoshop hatte keines der 55 Produktfotos einen Alt-Text, bei 851 von 1.301 Produkten fehlten SEO-Titel und Meta-Beschreibung.
- Ein guter Alt-Text beschreibt in einem Satz, was zu sehen ist, konkret bei Farbe und Machart, ohne Werbetext und ohne Keyword-Liste.
- Claude hat die Fotos wirklich angesehen und ein Zopfmuster beschrieben, das nur auf dem Foto zu sehen ist.
- Drei Regeln schützen gepflegte Texte: Leer ist das Kriterium, erst die Inventur, dann die Arbeit, und eine Stichprobe von 10 Produkten vor der Masse.
Was ist ein Alt-Text bei Bildern, und wofür braucht ihn ein Onlineshop?
Der Alt-Text in einem Satz
Ein Alt-Text bei Bildern ist eine kurze Beschreibung, die an die Stelle des Fotos tritt, wenn jemand es nicht sehen kann. Der Fachbegriff dafür lautet Alternativtext. Im Onlineshop beschreibt er das Produkt so, wie es auf dem Foto aussieht.
Wer den Alt-Text liest
Drei Leser nutzen das Feld. Screenreader lesen blinden und sehbehinderten Menschen den Text an der Stelle des Bildes vor. Der Browser zeigt ihn, wenn ein Bild nicht lädt, etwa bei schwacher Verbindung. Suchmaschinen erfahren über den Text, was ein Bild zeigt.
Das Alt-Attribut und das Feld in Shopify
Technisch ist der Alt-Text ein Attribut im img-Tag, geschrieben als alt="…". Oft heißt es Alt-Tag, obwohl es kein eigener Tag ist. In Shopify brauchst du dafür kein HTML. Du öffnest im Admin das Produkt, klickst unter Medien auf ein Bild und findest dort das Feld für den Alt-Text.
Leeres oder fehlendes Attribut?
Ein leeres und ein fehlendes Attribut bedeuten Verschiedenes. Ein leeres alt="" markiert ein Bild bewusst als dekorativ, der Screenreader überspringt es dann. Fehlt das Attribut ganz, gilt das als Fehler, und manche Screenreader lesen dann den Dateinamen vor, der selten etwas über das Produkt verrät.
Alt-Texte und Barrierefreiheit
Alt-Texte gehören zu den Grundanforderungen der Barrierefreiheit, die WCAG setzen sie schon in der niedrigsten Konformitätsstufe A voraus (Erfolgskriterium 1.1.1). Laut barrierefreies.design sind sie damit auch nötig, um das Barrierefreiheitsstärkungsgesetz (BFSG) über die Norm EN 301 549 zu erfüllen. Ob und wie dein Shop unter das BFSG fällt, lässt du am besten rechtlich prüfen. Ich bin kein Anwalt.
Warum fehlen in so vielen Shops die Alt-Texte?
Der Befund in meinem Demoshop
In so vielen Shops fehlen die Alt-Texte, weil niemand die Zeit hat, Hunderte Bilder einzeln zu beschreiben. Die Bestandsaufnahme in meinem Demoshop ergab:
- kein einziges der 55 Produktbilder mit Alt-Text,
- 851 von 1.301 Produkten ohne SEO-Titel und Meta-Beschreibung,
- 450 Produkte, bei denen beide Felder schon gepflegt waren.
Die Falle im Shopify-Admin
Ein leeres SEO-Feld sieht im Shopify-Admin nicht leer aus. Shopify zeigt in der Vorschau für Suchmaschinen einen Ersatztext aus dem Produkttitel und dem Anfang der Beschreibung. Diesen Text hat kein Mensch ausgewählt, und er verdeckt, dass das Feld fehlt.
Selbst prüfen mit dem Export
Zieh dir einen Produktexport aus deinem Shop und sieh dir die Spalten für SEO-Titel, SEO-Beschreibung und den Alt-Text der Bilder an. Jede leere Zelle ist eine Lücke, die du sonst im Admin leicht übersiehst.
Warum die Arbeit liegen bleibt
Bei rund 1.300 Produkten wären das von Hand Wochen an stumpfer Arbeit. Kein Team priorisiert so etwas neben dem Tagesgeschäft. Genau diese Art Fleißarbeit gebe ich an einen KI-Agenten.
Wie schreibt man gute Alt-Texte für Produktbilder?
Beschreiben, was zu sehen ist
Gute Alt-Texte für Produktbilder beschreiben in einem Satz, was auf dem Foto zu sehen ist. Bei Produktfotos zählen vor allem Farbe, Machart und die Szene. Der KI gebe ich dafür eine klare Regel mit: ein Satz, konkret bei Farbe und Machart, kein Werbetext, keine Aufzählung von Suchbegriffen.
Wie lang sollte ein Alt-Text sein?
Ein Alt-Text sollte so kurz wie möglich und so lang wie nötig sein. Ein festes Zeichenlimit gibt es in den WCAG nicht. Als Orientierung nennt Wikipedia für Deutsch 115 Zeichen, nach einem Vorschlag der Universität Toronto. Für ein Produktfoto reicht meist ein Satz.
Was nicht in den Alt-Text gehört
- Einleitungen wie „Bild von …“ oder „Foto zeigt …“, weil der Screenreader selbst ansagt, dass ein Bild folgt.
- Dateinamen, Copyright-Hinweise und Fotografennamen.
- Was direkt daneben schon steht, etwa der Produkttitel oder eine Bildunterschrift.
Text, der im Bild selbst steht, gehört dagegen hinein.
Beispiele aus meinem Demoshop
Für die zwei Fotos der Merino-Mütze in Bordeaux hat Claude diese Alt-Texte vorgeschlagen:
- Freisteller: „Weinrote Strickmütze mit breitem, längsgeripptem Umschlag und einem Zopfmuster in der Mitte, frei vor hellem Hintergrund.“
- Stimmungsbild: „Weinrote Zopfstrick-Mütze mit geripptem Umschlag liegt schräg auf einem hellen Leinentuch auf einem runden Holztisch.“
Die Endungen habe ich für den Artikel korrigiert, Claude hatte „längsgerippten“ und „gerippten“ geschrieben. Solche Kleinigkeiten korrigierst du beim Lesen der Stichprobe.
Logo, Icons und Deko im Shop
Nicht jedes Bild im Shop ist ein Produktfoto. Ein verlinktes Logo oder ein Icon beschreibt seine Funktion, etwa „zur Startseite“ oder „Suche starten“. Rein dekorative Grafiken bekommen ein leeres Alt-Attribut, damit der Screenreader sie überspringt.
Gehören Keywords in den Alt-Text?
Alt-Texte sind kein Keyword-Lager
Keywords gehören in den Alt-Text, wenn sie das Bild beschreiben, eine Liste von Suchbegriffen dagegen nicht. In meiner Folge sage ich es so: Alt-Texte sind kein Keyword-Lager.
Was gestopfte Suchbegriffe anrichten
Wer Suchbegriffe in das Feld stopft, macht die Seite für Screenreader-Nutzer schlechter. Sie hören eine Reihe von Begriffen statt einer Beschreibung. Der Screenreader liest den Text am Stück, zurückspringen können sie dabei nicht.
Was der Alt-Text für SEO bringt
Für Suchmaschinen bleibt der Alt-Text ein Hinweis darauf, was ein Bild zeigt, auch in der Google-Bildersuche. Eine gute Beschreibung enthält die wichtigen Begriffe ohnehin, weil sie das Produkt benennt. Wikipedia weist darauf hin, dass Google gehäufte Keywords als Spam werten kann. Einen Vorteil durch Keyword-Listen gibt dir Google aus meiner Sicht kaum noch. Beschreib, was zu sehen ist, das reicht.
Erkennt die KI wirklich, was auf dem Produktfoto ist?
Generator oder Agent am Shop
Die KI erkennt, was auf dem Produktfoto ist, in meinem Test ziemlich genau. Für einzelne Bilder gibt es kostenlose Alt-Text-Generatoren, auch auf Deutsch. Du lädst ein Foto hoch und bekommst einen Vorschlag. Für einen Katalog mit Hunderten Bildern ist das mühsam. Ich arbeite deshalb mit einem KI-Agenten, der direkt im Shop liest, mit Claude und dem Shopify-Connector.
Mein Test: Beschreibt die KI das Foto oder den Titel?
Bevor die KI Alt-Texte schreibt, lasse ich sie beweisen, dass sie die Bilder sieht. Dafür habe ich Claude die zwei Fotos der Merino-Mütze Beanie Haselnuss beschreiben lassen. Claude erkannte im ersten Bild einen Freisteller und beschrieb die Mütze als längs gerippt und gestrickt, mit einer deutlich sichtbaren Naht oder Rippenlinie mittig oben, ohne Umschlag und ohne Bommel. Das zweite Bild ordnete Claude als Stimmungsbild in der Draufsicht ein und bemerkte sogar Tageslicht von links.
Die Gegenprobe mit dem Zopfmuster
Den Beweis lieferte die Mütze in Bordeaux. Claude schrieb in ihren Alt-Text ein Zopfmuster in der Mitte. In der Gegenprobe im Shop steht das Zopfmuster weder im Produkttitel noch in der Beschreibung, dort steht nur „Merino-Mütze mit Umschlag Bordeaux. Hochwertige Qualität aus Merinowolle.“ Claude hat das Muster also auf dem Foto gesehen.
Wo die KI an Grenzen stößt
Die KI kennt den Zusammenhang nicht, in dem ein Bild auf der Seite steht, und sie kann Details falsch deuten. Der Anbieter barrierefreies.design weist bei seinem Generator zudem darauf hin, dass Sprachmodelle Objekte auf Bildern nicht zuverlässig zählen. Deshalb lese ich immer erst eine Stichprobe, bevor die KI in Masse arbeitet.
Schritt für Schritt: So bin ich die Lücken im Demoshop mit Claude angegangen
Das Werkzeug
Ich arbeite in der Claude-Desktop-App mit dem Modell Sonnet 5.5 und dem Shopify-Connector, nur mit Prompts, ohne Code. Die Lesezugriffe gebe ich am Anfang bewusst frei. Wie du den Connector einrichtest, zeige ich in Shopify mit Claude verbinden und steuern.
Schritt 1: Inventur, nur lesend
Der erste Prompt ändert nichts, er zählt nur:
Mache eine Bestandsaufnahme über alle Produkte. Wie viele haben keinen SEO-Titel, keine Meta-Beschreibung, wie viele Bilder haben keinen Alt-Text, und genauso wichtig, welche Produkte haben diese Felder schon gepflegt? Die fasst du später nicht an. Ändere noch nichts.
Claude meldete rund 850 Produkte ohne SEO-Titel und Meta-Beschreibung, keines der 55 Bilder mit Alt-Text und rund 450 Produkte mit gepflegten Feldern.
Schritt 2: Das Sperrgebiet festhalten
Die rund 450 gepflegten Produkte hat Claude in einer eigenen Datei festgehalten. Diese Liste nenne ich Sperrgebiet. Die KI fasst diese Produkte nicht an, und nach dem Lauf lässt sich genau diese Liste prüfen.
Schritt 3: Alt-Texte für die ersten 10 Produkte
Erst danach kommen die Alt-Texte, und zwar als Vorschlag:
Schreib Alt-Texte für die Produktbilder ohne Alt-Text. Regel: Beschreib, was zu sehen ist, in einem Satz, konkret bei Farbe und Machart. Kein Werbetext, keine Suchbegriff-Aufzählung, das Feld ist für Menschen, die das Bild nicht sehen können. Fang mit 10 Produkten an, ich will die erst sehen.
Claude hat die 11 Bilder der ersten 10 Produkte angesehen und für jedes einen Alt-Text vorgeschlagen. Eingetragen hat es noch nichts.
Schritt 4: SEO-Titel und Meta-Beschreibung nur, wo sie leer sind
Danach ging es an SEO-Titel und Meta-Beschreibung für dieselben 10 Produkte, ausdrücklich nur dort, wo die Felder leer waren. Claude hat selbst erkannt, dass das nur bei 6 Produkten zutraf, und dort Texte eingetragen, mit Titeln bis 51 und Beschreibungen bis 133 Zeichen. Die 4 übrigen Produkte blieben unangetastet, weil sie schon gepflegt waren. Die Alt-Texte blieben im Video Vorschläge im Chat, eingetragen habe ich sie nicht.
Was dabei schiefging
Im Video sage ich vor diesem Schritt „nur lesend“. Mein Prompt hat Claude aber zum Füllen aufgefordert, und Claude hat bei 6 Produkten wirklich geschrieben. Das Ergebnis passte trotzdem, nur die Ansage im Video war falsch. Lies deshalb vor jedem Lauf den Prompt und jede Freigabe, die du erteilst, Wort für Wort.
Im Video siehst du die Schritte in Claude und die Gegenprobe mit dem Zopfmuster im Shopify-Admin.
Diese Folge ist Teil der Serie „KI im Shop-Betrieb". Schau sie dir in voller Länge auf YouTube an oder abonniere den Kanal für neue Folgen.
Drei Regeln, damit die KI nichts Gutes überschreibt
Der Merksatz
Mein Merksatz für solche Läufe lautet: Die KI darf Lücken füllen, aber nichts Gutes überschreiben. Daraus folgen drei Regeln.
Regel 1: Leer ist das Kriterium
Der Agent fasst nur Felder an, die wirklich leer sind. Schlecht oder verbesserbar zählt nicht. Leer ist ein hartes, prüfbares Kriterium, über das niemand diskutieren muss.
Regel 2: Erst die Inventur, dann die Arbeit
Die Liste aus dem ersten Prompt ist dein Sperrgebiet. Nach dem Lauf prüfst du, ob genau diese Produkte unverändert sind.
Regel 3: Stichprobe vor Masse
Lass die KI erst 10 Produkte bearbeiten und lies die Ergebnisse. Erst danach gibst du den Rest frei. In meinem Demoshop blieben danach 845 Produkte offen, und Claude schlug vor, sie in Chargen nach Freigabe abzuarbeiten.
Warum das so wichtig ist
In gepflegten Texten steckt Wissen, das in keinem Datenfeld steht. Bei einem Bestseller hat eine Texterin die Beschreibung vielleicht schon zwei- oder dreimal überarbeitet. Macht der Agent so einen Text platt, ist der Schaden größer als der Nutzen von Hunderten gefüllten Lücken.
Wenn du wissen willst, wie viele solcher Leerstellen dein Shop hat und was ein Agent davon gefahrlos übernehmen kann, buch dir 30 Minuten bei mir. Ich sage dir auch, wo es sich nicht lohnt.
Häufige Fragen
Was sind Alt-Texte bei Bildern?
Alt-Texte bei Bildern sind kurze Beschreibungen, die an die Stelle eines Fotos treten, wenn jemand es nicht sehen kann. Screenreader lesen sie blinden und sehbehinderten Menschen vor, der Browser zeigt sie, wenn ein Bild nicht lädt. Suchmaschinen erfahren über den Alt-Text, was ein Bild zeigt.
Wie schreibt man Alt-Texte?
Alt-Texte schreibt man, indem man in einem Satz beschreibt, was auf dem Bild zu sehen ist, bei Produktfotos konkret bei Farbe und Machart. Einleitungen wie „Bild von …“, Dateinamen und Keyword-Listen gehören nicht hinein. Ein festes Zeichenlimit gibt es nicht, für ein Produktfoto reicht meist ein Satz.
Welche Beispiele gibt es für Alt-Texte?
Beispiele für Alt-Texte aus meinem Demoshop sind „Weinrote Strickmütze mit breitem, längsgeripptem Umschlag und einem Zopfmuster in der Mitte, frei vor hellem Hintergrund.“ für einen Freisteller und „Weinrote Zopfstrick-Mütze mit geripptem Umschlag liegt schräg auf einem hellen Leinentuch auf einem runden Holztisch.“ für ein Stimmungsbild. Bei einem verlinkten Logo beschreibt der Alt-Text die Funktion, etwa „zur Startseite“.
Gibt es einen Alt-Text-Generator auf Deutsch?
Einen Alt-Text-Generator auf Deutsch gibt es, auch kostenlos für einzelne Bilder. Für viele Produktfotos ist ein KI-Agent direkt am Shop praktischer, in meinem Fall Claude mit dem Shopify-Connector. Bei beiden Wegen liest du eine Stichprobe, bevor die Texte live gehen.
