Ein Bild kann Produkte erklären, Schritte zeigen oder Emotionen transportieren – nur: Suchmaschinen und Screenreader (Vorlese-Software) brauchen dafür Text. Genau hier setzt der Alt-Text an. Richtig eingesetzt verbessert er Barrierefreiheit, erhöht die Chance auf Sichtbarkeit in der Bildersuche und sorgt dafür, dass Inhalte auch dann verständlich bleiben, wenn Bilder nicht laden.
Dieser Leitfaden erklärt, wie Alt-Texte aufgebaut sein sollten, wann sie weggelassen werden dürfen und wie sich ein verlässlicher Qualitätsstandard im Alltag etablieren lässt.
Alt-Text: Was er ist – und wofür er nicht da ist
Kurze Definition und Abgrenzung
Der Alt-Text (Alternative Text) ist eine kurze Bildbeschreibung im HTML. Er wird genutzt, wenn ein Bild nicht angezeigt wird, und er wird von Screenreadern vorgelesen. Suchmaschinen nutzen ihn als Signal, um den Bildinhalt besser einzuordnen.
Wichtig: Alt-Text ist keine zweite Bildunterschrift und kein Ort für Keyword-Listen. Er ergänzt den Seiteninhalt, statt ihn zu wiederholen.
Warum Alt-Texte SEO und Nutzern helfen
- Barrierefreiheit: Menschen, die Bilder nicht sehen können, bekommen den Inhalt als Text.
- Bessere Einordnung: Suchmaschinen erhalten Kontext zum Motiv, zur Funktion und zur Beziehung zum Text.
- Robustheit: Wenn Bilder blockiert sind oder langsam laden, bleibt die Seite verständlich.
- Bildersuche: Gut beschriebene Motive können zusätzliche Einstiege bringen, besonders bei Produkten, Anleitungen oder Infografiken.
Welche Bilder brauchen Alt-Texte – und welche nicht?
Entscheidung nach Funktion des Bildes
Ein praktikabler Ansatz ist, Bilder nach ihrer Rolle zu bewerten. Die Frage lautet: „Welche Information geht verloren, wenn das Bild nicht sichtbar ist?“
| Bildtyp | Alt-Text? | Warum |
|---|---|---|
| Produktfoto (Shop) | Ja | Motiv beschreibt Produkt, Variante, ggf. wichtige Details. |
| Screenshot in Anleitung | Ja | Zeigt einen Schritt oder eine Einstellung, die verstanden werden muss. |
| Infografik/Diagramm | Ja (oft plus Text im Content) | Kerndaten müssen auch ohne Bild zugänglich sein. |
| Dekoratives Stimmungsbild | Nein oder leer | Trägt keine Information; sollte Screenreader nicht stören. |
| Icon mit Funktion (z. B. „Download“) | Ja | Beschreibt die Aktion, nicht das Aussehen. |
| Logo (Marke/Partner) | Meist ja | Benennung der Marke ist relevant; bei Link zusätzlich „Startseite“ o. ä. nur, wenn nötig. |
Dekorative Bilder: „Leer“ ist oft besser als „irgendwas“
Wenn ein Bild nur Gestaltung ist (z. B. Hintergrundwelle, Trennlinie, generisches Stockfoto ohne Aussage), sollte es keinen inhaltlichen Alt-Text bekommen. Ein unnötiger Alt-Text nervt Screenreader-Nutzer, weil er zusätzliche, irrelevante Inhalte vorliest. In vielen Systemen lässt sich ein Alt-Text bewusst leer lassen.
Alt-Texte richtig schreiben: Regeln, die im Alltag funktionieren
1) Erst beschreiben, dann präzisieren
Ein guter Alt-Text startet mit dem, was zu sehen ist, und ergänzt dann die Info, die für die Seite wichtig ist. Beispiel für einen Ratgeberartikel über Newsletter:
- Schwach: „Newsletter“
- Besser: „Anmeldeformular für Newsletter mit Feld für E-Mail-Adresse“
2) Kontext schlägt Keyword-Listen
Alt-Texte sollten zum Absatz passen, neben dem das Bild steht. Ein Foto von Kaffeebohnen kann in einem Shop „Espresso Bohnen 1 kg, Röstgrad dunkel“ heißen, in einem Blogartikel aber „Dunkel geröstete Kaffeebohnen in einer Schale“. Keyword-Stuffing (zu viele Keywords ohne Sinn) macht den Text schlechter lesbar und hilft selten.
3) Funktion bei UI-Elementen beschreiben
Bei Icons und Buttons zählt die Handlung. Ein Lupen-Icon ist nicht „Lupe“, sondern „Suche“. Ein Pfeil nach rechts ist nicht „Pfeil“, sondern „Weiter zur nächsten Seite“ – sofern das wirklich die Funktion ist.
4) Keine Dopplungen, wenn der Text direkt daneben steht
Wenn eine Bildunterschrift oder der Fließtext das Motiv bereits vollständig beschreibt, muss der Alt-Text nicht alles wiederholen. Er darf dann kürzer ausfallen oder sich auf das Wesentliche beschränken. Das vermeidet unnötige Wiederholung in Screenreadern.
5) Varianten und Details bei Produkten sauber abbilden
In Shops entsteht Mehrwert vor allem durch konkrete Varianten: Farbe, Material, Modellname, Ansicht (Vorderseite/Detailaufnahme). Das hilft Nutzern und kann auch die Zuordnung in der Bildersuche verbessern. Wer mit vielen ähnlichen Produktbildern arbeitet, sollte auf Duplicate Content im Sinne identischer Alt-Texte achten: Gleiche Formulierungen für unterschiedliche Motive sind verschenktes Potenzial.
Beispiele: gute vs. schlechte Alt-Texte (mit Begründung)
Produktbild
- Schlecht: „Sneaker kaufen günstig“
- Gut: „Weiße Sneaker aus Leder, Seitenansicht, Modell XY“
Begründung: Der gute Text beschreibt das Bild und enthält Produktdetails, ohne Werbesprache.
Screenshot in einem Tutorial
- Schlecht: „Einstellungen“
- Gut: „Screenshot der Cookie-Einstellungen mit Auswahl für Statistik und Marketing“
Begründung: Der Schritt wird nachvollziehbar, auch ohne Bild.
Dekoratives Headerbild
- Schlecht: „SEO Beratung München Top Agentur“
- Gut: (leer lassen)
Begründung: Das Bild trägt keine Information. Ein leerer Alt-Text reduziert Geräusch für Screenreader und vermeidet Spam-Signale.
Praktischer Ablauf für Teams: von Upload bis Qualitätskontrolle
Ein schlanker Prozess, der nicht nervt
Alt-Texte scheitern selten am Wissen, sondern am Workflow. Mit einem festen Ablauf bleibt die Qualität stabil, auch wenn mehrere Personen Inhalte pflegen.
- Beim Upload entscheiden: informativ oder dekorativ?
- Informativ: Motiv + Kontext in einem Satz formulieren.
- Produktbilder: Variante/Ansicht ergänzen (Farbe, Material, Perspektive).
- Icons: Aktion beschreiben („Suche“, „Download“, „Zum Warenkorb“).
- Vor Veröffentlichung Stichprobe: 10–20 Bilder prüfen (Alt-Text vorhanden, sinnvoll, nicht doppelt).
- Regel für Wiederholungen: Wenn 5 Bilder auf einer Seite identisch betitelt wären, braucht es bessere Unterscheidung oder leere Alt-Texte für rein dekorative Varianten.
Qualität prüfen, ohne in Tool-Fetisch zu verfallen
Für die Kontrolle reichen oft einfache Signale:
- Fehlende Alt-Texte bei wichtigen Bildern (Produkte, Grafiken, Screenshots).
- Offensichtliches Spam-Wording („kaufen“, „bestes“, viele Keywords).
- Alt-Texte, die nicht zum Motiv passen (häufig bei Copy-Paste).
- Viele identische Alt-Texte bei unterschiedlichen Bildern.
Wenn bereits ein technischer Qualitätscheck läuft, kann das Thema gut in bestehende Routinen integriert werden, etwa im Rahmen eines SEO-Audits oder bei regelmäßigen Pflegezyklen.
Häufige Sonderfälle: Logos, Grafiken, Stockfotos und PDFs
Logos und Marken
Ein Logo darf in vielen Fällen einfach den Markennamen tragen. Wenn das Logo verlinkt ist, kann der Linktext im Kontext wichtiger sein als das Logo selbst. Ziel ist: Nutzer sollen verstehen, wohin der Klick führt, ohne unnötige Wiederholungen.
Diagramme und Infografiken: Text im Inhalt ergänzen
Bei Diagrammen reicht ein Alt-Text allein oft nicht, weil komplexe Informationen nicht in einen kurzen Satz passen. Dann hilft eine Kombination: Alt-Text als Kurzbeschreibung plus eine verständliche Zusammenfassung im Fließtext (z. B. „Die Kurve steigt ab März deutlich an“). So wird die Information auch ohne Bild zugänglich.
Stockfotos: nur beschreiben, wenn sie etwas erklären
Stockfotos sind oft dekorativ. Wenn das Foto aber eine Szene zeigt, die Inhalt transportiert (z. B. „Mitarbeiter packt Ware in Versandkarton“ in einem Artikel über Versandprozesse), kann ein Alt-Text sinnvoll sein. Reine Stimmung ohne Aussage bleibt besser leer.
Wenn Bilder in PDFs stecken
Wer PDFs als Content anbietet, sollte daran denken: Alt-Texte für Bilder in PDFs funktionieren anders als im Web und hängen vom PDF-Aufbau ab. Für Sichtbarkeit und Nutzbarkeit ist oft entscheidend, ob das PDF sauber strukturiert ist und ob wichtige Inhalte zusätzlich als HTML vorhanden sind. Passend dazu hilft der Leitfaden SEO für PDFs.
Wie Alt-Texte mit anderen SEO-Bausteinen zusammenspielen
Dateiname, Bildtitel und Umfeld: der Kontext macht’s
Alt-Text ist ein Baustein. Ebenso wichtig sind ein sinnvoller Dateiname, ein passender umgebender Text und eine stabile technische Auslieferung. Wer Bilder grundsätzlich optimieren möchte, findet dazu weitere Praxispunkte unter SEO-Bilder optimieren.
Wenn mehrere Seiten um ähnliche Bilder konkurrieren
Bei großen Sites entsteht schnell Überschneidung: ähnliche Bilder, ähnliche Alt-Texte, ähnliche Zielseiten. Dann lohnt ein Blick auf die Seitenlogik, damit nicht mehrere URLs das gleiche Thema bedienen. Für diese Situation ist SEO-Cannibalisierung erkennen und beheben ein hilfreicher nächster Schritt.
Fragen, die in der Praxis oft auftauchen
Wie lang sollte ein Alt-Text sein?
So kurz wie möglich, so klar wie nötig. Ein Satz reicht in den meisten Fällen. Entscheidend ist, ob ohne Bild die Information verständlich bleibt.
Dürfen Keywords in den Alt-Text?
Ja, wenn sie natürlich zum Motiv passen und die Beschreibung präziser machen. Der Alt-Text sollte sich wie eine Beschreibung anfühlen, nicht wie eine Liste.
Sollte „Bild von …“ oder „Foto von …“ im Alt-Text stehen?
Meist nicht. Screenreader vermitteln bereits, dass es sich um ein Bild handelt. Besser direkt mit der Beschreibung starten.
Was tun, wenn ein Bild nur Text enthält?
Text im Bild ist problematisch für Barrierefreiheit. Wenn es nicht anders geht, sollte der Alt-Text die Kernaussage wiedergeben und der Inhalt zusätzlich als normaler Text im Dokument stehen. So bleibt er kopierbar, übersetzbar und durchsuchbar.
Wie geht man mit sehr vielen Bildern um (z. B. Shop-Kategorien)?
Priorisieren hilft: Zuerst Hero-Bilder, Kategoriebilder, Top-Produkte, Ratgeber-Grafiken. Danach die Masse über Vorlagen lösen (z. B. „Produktname + Variante + Ansicht“), aber mit Kontrolle, damit keine irreführenden oder doppelten Alt-Texte entstehen.
Bildersuche kann ein zusätzlicher Kanal sein, aber nur, wenn Bilder sauber beschrieben, gut eingebettet und technisch performant ausgeliefert werden. Alt-Texte sind dafür ein einfacher Hebel, der gleichzeitig die Nutzbarkeit für alle verbessert.
