Alt-Texte und Bilder-SEO im Shop: Anleitung mit Beispielen

Bei Produktfotos entscheidet sich zweierlei: ob Menschen mit Screenreader deinen Shop bedienen können und ob Google versteht, was auf dem Bild zu sehen ist. Beides läuft über dieselben Felder, und beides wird in Shops meist automatisch mit dem Produktnamen gefüllt. Dieser Artikel zeigt, wie du Alt-Texte, Dateinamen, Formate und Auslieferung so aufsetzt, dass sie ihren Zweck erfüllen – mit Beispielen für gute und schlechte Alt-Texte.

Barrierefreiheit zuerst, SEO folgt

Der Alt-Text existiert nicht für Google. Er existiert, damit ein Bild auch ohne Bild funktioniert: für Menschen, die einen Screenreader nutzen, bei langsamen Verbindungen und wenn eine Bild-URL kaputt ist.

Das ist mehr als eine Haltungsfrage, es ist der praktische Maßstab. Wenn du dir bei einem Alt-Text unsicher bist, stell dir vor, du liest die Seite jemandem am Telefon vor. Was würdest du über dieses Bild sagen? Genau das ist der Alt-Text. Wer so schreibt, erfüllt die SEO-Anforderung automatisch mit, denn Google will dasselbe wissen.

Der Umkehrschluss gilt auch: Wer Alt-Texte mit Suchbegriffen füllt, macht die Seite für Screenreader-Nutzer schlechter und riskiert, dass Google die Auszeichnung als Keyword-Stuffing behandelt.

Die drei Sonderfälle

• Dekorative Bilder bekommen alt="". Ein leeres Attribut ist eine Aussage: Screenreader überspringen das Bild. Ein fehlendes Attribut ist keine Aussage – dann liest der Screenreader manchmal die Datei-URL vor.
• Bilder in Links beschreiben das Ziel, nicht das Bild. Ist ein Produktfoto der Link zur Produktseite und steht daneben kein Text, lautet der Alt-Text sinnvollerweise wie der Produktname.
• Bilder mit Text brauchen den Text im Alt-Attribut. Eine Grafik „Versandkostenfrei ab 50 Euro“ ist für Screenreader sonst nicht vorhanden. Besser wäre ohnehin echter Text im Layout.

Alt-Texte: Beispiele gut und schlecht

Drei Regeln, die daraus folgen: Jedes Bild bekommt seinen eigenen Text, nicht denselben wie das Nachbarbild. Keine Aufzählung von Suchbegriffen. Und du musst nicht „Bild von“ oder „Foto von“ schreiben – dass es ein Bild ist, weiß der Screenreader schon.

Dateinamen: einmal richtig beim Hochladen

Sprechende Dateinamen sind ein schwaches, aber kostenloses Signal – und sie helfen dir selbst beim Verwalten.

• Gut: wanderrucksack-trailhead-32-schwarz-front.webp
• Schlecht: DSC_0912.JPG, bild-3-final-v2-KOPIE.png

Praxisregeln: Kleinbuchstaben, Bindestriche statt Unterstriche, keine Umlaute und keine Leerzeichen. Wichtig ist der Zeitpunkt: Benenne die Datei vor dem Hochladen. Änderst du den Namen später, ändert sich die Bild-URL, und alle vorhandenen Verweise auf das Bild – auch in der Google-Bildersuche – gehen verloren. Für hunderte alte Bilder lohnt das Umbenennen darum selten; setze die Regel für neue Bilder und lass die alten in Ruhe.

Formate und Größen

Bilder sind in den meisten Shops das größte Gewicht auf der Seite und damit der wichtigste Hebel für Ladezeit und Core Web Vitals.

Zur Größe: Liefere nicht ein Bild für alle Geräte aus. Ein Produktfoto, das auf dem Desktop 900 Pixel breit dargestellt wird, braucht auf dem Handy oft nur 400. Mit srcset und sizes gibst du dem Browser mehrere Varianten und die Information, wie breit das Bild im Layout erscheint; der Browser wählt dann selbst. Für Displays mit hoher Pixeldichte reicht in der Regel die doppelte Breite der Darstellung – mehr bringt sichtbar nichts und kostet Datenvolumen.

Zwei Attribute, die immer gesetzt sein müssen: width und height. Der Browser reserviert damit den Platz, bevor das Bild geladen ist. Ohne sie springt das Layout, und der CLS-Wert verschlechtert sich.

Lazy Loading richtig einsetzen

loading="lazy" sagt dem Browser, ein Bild erst zu laden, wenn es in die Nähe des sichtbaren Bereichs kommt. Für eine Kategorieseite mit 40 Produktbildern ist das ein großer Gewinn.

Der klassische Fehler: Das Attribut steht auch am Hauptproduktbild oder am Kategorie-Hero. Dann verzögerst du genau das Bild, auf das Google für den LCP-Wert schaut.

Die Regel lautet: alles, was ohne Scrollen sichtbar ist, nicht lazy laden. Für das wichtigste Bild kannst du zusätzlich fetchpriority="high" setzen, damit der Browser es vor anderen Ressourcen holt. Für den Rest gilt Lazy Loading als Standard. Prüfe das auf dem Handy, denn dort ist der sichtbare Bereich kleiner – ein Bild, das auf dem Desktop unter der Kante liegt, kann auf dem Handy trotzdem sofort sichtbar sein. Oder umgekehrt.

Ein Hinweis zu Slidern: Wenn dein Produktbild in einem Karussell liegt, laden viele Bibliotheken alle Bilder sofort. Zeige das erste Bild als normales img und lade den Slider erst danach.

Bilder-Sitemap und Indexierung

Google findet Bilder normalerweise über die Seiten, in denen sie eingebunden sind. Eine Bilder-Sitemap ist deshalb kein Muss, hilft aber in zwei Fällen: wenn Bilder erst per JavaScript geladen werden oder wenn sie auf einem anderen Host oder CDN liegen.

Du kannst die Bildangaben in deine bestehende XML-Sitemap aufnehmen, indem du je URL die Bild-Einträge ergänzt. Details dazu stehen in der Google-Dokumentation zu Bilder-Sitemaps.

Wichtiger als die Sitemap sind zwei andere Punkte:

• Bilder dürfen nicht blockiert sein. Prüfe, dass deine robots.txt den Bildordner oder das CDN nicht sperrt. Das passiert versehentlich häufiger als man denkt – eine Zeile in der robots.txt kann den kompletten Auftritt in der Bildersuche kosten.
• Bilder brauchen Kontext. Ein Bild rankt besser auf einer Seite, die dasselbe Thema im Text behandelt. Alt-Text, Bildunterschrift, Überschrift und umgebender Text sollten zusammenpassen.

Schritt für Schritt: Bilder-SEO im Shop aufräumen

1. Zustand messen. Prüfe eine Produkt- und eine Kategorieseite mit PageSpeed Insights auf dem Handy. Notiere das Gesamtgewicht der Bilder und ob das LCP-Element ein Bild ist.
2. Vorlagen finden. Bilder werden im Shop über Templates ausgegeben. Du reparierst also drei bis vier Vorlagen, keine 4.000 Seiten: Produktseite, Kategorieliste, Startseite, Ratgeberartikel.
3. Technik im Theme prüfen. Für jede Vorlage: Formate, srcset/sizes, width/height, Lazy Loading, fetchpriority am wichtigsten Bild.
4. Alt-Text-Quelle klären. Woher kommt der Alt-Text im Shopsystem? Bei Shopify pflegst du ihn je Bild in der Produktverwaltung (siehe die Shopify-Hilfe zu Bildern). Wenn dein Theme stattdessen automatisch den Produktnamen einsetzt, haben alle Bilder eines Produkts denselben Text – das ist der Standardzustand, den du auflösen musst.
5. Priorisieren statt alles anfassen. Beginne mit den umsatzstärksten 50 Produkten und den wichtigsten Kategorieseiten. Bei Produkten mit vielen Bildern zählt vor allem das erste.
6. Alt-Texte schreiben. Je Bild ein Satz, der beschreibt, was zu sehen ist. Dekoratives auf alt="".
7. Neue Bilder regeln. Lege fest: Dateiname vor dem Hochladen, Alt-Text beim Anlegen des Produkts, maximale Ausgangsbreite. Sonst wächst der Rückstand weiter.
8. Nachmessen. Dieselben zwei Seiten erneut testen. Bei Bildern ist der Effekt auf die Ladezeit meist sofort im Labortest sichtbar.

Checkliste

• Jedes inhaltlich relevante Bild hat einen eigenen, beschreibenden Alt-Text.
• Dekorative Bilder haben alt="", nicht ein fehlendes Attribut.
• Kein Alt-Text besteht aus einer Aufzählung von Suchbegriffen.
• Dateinamen sind sprechend, klein geschrieben, mit Bindestrichen.
• Produktfotos liegen als WebP oder AVIF vor, Logos als SVG.
• srcset und sizes sind gesetzt, nicht ein Bild für alle Geräte.
• width und height sind an jedem img vorhanden.
• Bilder im ersten Bildschirm sind nicht lazy geladen.
• robots.txt blockiert weder Bildordner noch CDN.
• Bildunterschriften und umgebender Text passen zum Bild.

Wo KI hilft und wo nicht

Alt-Texte für hunderte Produktbilder von Hand zu schreiben, ist genau die Art Arbeit, die liegen bleibt. Modelle, die Bilder ansehen, können hier einen brauchbaren ersten Entwurf liefern – in ecomando macht das der KI-Optimizer für Alt-Texte, vergleichbare Funktionen gibt es in vielen Shop-Apps.

Wichtig ist, was danach passiert. Ein Modell sieht das Bild, kennt aber nicht die Produktbezeichnung, die deine Kunden verwenden, und kann Material oder Modellnamen nicht raten. Behandle generierte Alt-Texte als Vorschlag: prüfen, Produktnamen ergänzen, Falsches korrigieren. Und lies bei den ersten zwanzig genau mit, um zu sehen, welche Fehler das Werkzeug systematisch macht. Das gilt für Bildtexte genauso wie für Produktbeschreibungen; den größeren Rahmen dazu beschreibt der Artikel über KI für Produkttexte.

Wenn du Bilder-SEO als Teil eines größeren Aufräumens angehst, sortiere die Reihenfolge nach Wirkung: erst die Seiten, die Umsatz bringen. Der Leitfaden zu SEO für Online-Shops ordnet Bilder in das Gesamtbild ein, und für Kategorieseiten lohnt zusätzlich der Artikel zum Optimieren von Kategorieseiten.