Alt-Text: Bilder richtig beschreiben für SEO und Barrierefreiheit
Alt-Text richtig schreiben: was Google empfiehlt, wann das alt-Attribut leer bleibt, Beispiele für gute Bildbeschreibungen und typische Fehler.
Der Alt-Text ist eine kurze Beschreibung eines Bildes im HTML-Code, das sogenannte alt-Attribut. Screenreader lesen ihn Menschen vor, die das Bild nicht sehen. Browser zeigen ihn, wenn das Bild nicht lädt. Und Google nutzt ihn, um zu verstehen, was auf dem Bild zu sehen ist und wozu es auf der Seite gehört.
<img src="dachsanierung-essen-vorher.jpg" alt="Steildach mit beschädigten Ziegeln vor der Sanierung" />Was Google zum Alt-Text sagt
Google nennt das alt-Attribut das wichtigste Attribut für zusätzliche Bildinformationen (Google Search Central, Bilder-SEO). Google wertet es zusammen mit Computer-Vision-Verfahren und dem Text der Seite aus. Die Empfehlung: nützliche, informative Beschreibungen mit passenden Begriffen, die sich auf den Seiteninhalt beziehen.
Das Beispiel aus der Google-Dokumentation zeigt die Abstufung gut:
| Variante | Bewertung |
|---|---|
<img src="puppy.jpg"> | kein Alt-Text |
alt="Welpe" | besser |
alt="Dalmatiner Welpe apportieren" | am besten |
Ausdrücklich warnt Google davor, Alt-Texte mit Keywords zu füllen. Das sei nicht nutzerfreundlich und könne dazu führen, dass die Seite als Spam gewertet wird.
Wann ein Alt-Text nötig ist und wann er leer bleibt
Nicht jedes Bild braucht eine Beschreibung. Die Web Accessibility Initiative des W3C unterscheidet nach Funktion des Bildes (W3C-Entscheidungsbaum):
| Bildart | Alt-Text |
|---|---|
| informatives Bild, z. B. Produktfoto, Projektfoto | beschreiben, was zu sehen ist und warum es wichtig ist |
| verlinktes Bild oder Icon-Button | das Ziel oder die Funktion, z. B. „Startseite“ oder „Warenkorb öffnen“ |
| Bild mit Text, z. B. Banner mit Angebot | den Text aus dem Bild |
| reine Dekoration, Trennlinie, Hintergrundmuster | leer: alt="" |
| Diagramm, Infografik | kurze Aussage im Alt-Text, die Daten im Fließtext oder in einer Tabelle |
Wichtig ist der Unterschied zwischen leerem und fehlendem Alt-Attribut. alt="" sagt dem Screenreader: überspringen. Fehlt das Attribut ganz, lesen manche Screenreader stattdessen den Dateinamen vor, etwa „IMG unterstrich 4711 punkt jpg“.
Bei verlinkten Bildern hat der Alt-Text eine zusätzliche Rolle: Google verwendet ihn wie einen Ankertext. Ein Logo, das zur Startseite führt, sollte deshalb den Namen der Firma tragen, nicht „Logo“.
Gute Alt-Texte schreiben: Beispiele
| Situation | schwach | besser |
|---|---|---|
| Referenz eines Malerbetriebs | „Malerarbeiten Essen Maler günstig Fassade“ | „Frisch gestrichene Altbaufassade in Hellgrau mit weißen Fensterrahmen“ |
| Produktfoto im Shop | „Schuh“ | „Laufschuh Damen in Dunkelblau, Seitenansicht mit Sohlenprofil“ |
| Teamfoto | „Bild“ | „Das Team der Praxis vor dem Empfangstresen“ |
| Screenshot im Ratgeber | „Screenshot“ | „Search Console, Bericht Seitenindexierung mit 120 nicht indexierten Seiten“ |
Die Faustregeln dahinter:
- Beschreiben, was zu sehen ist, so konkret wie nötig. Was würden Sie am Telefon sagen, wenn jemand fragt, was auf dem Bild ist?
- Den Zusammenhang der Seite berücksichtigen. Dasselbe Foto braucht im Produktshop eine andere Beschreibung als im Blogartikel über Fotografie.
- Kurz bleiben. Google nennt keine Grenze, aber ein Satz reicht fast immer. Lange Erklärungen gehören in den sichtbaren Text oder in eine Bildunterschrift.
- Nicht mit „Bild von“ beginnen. Screenreader sagen ohnehin an, dass ein Bild folgt.
- Suchbegriffe nur, wenn sie das Bild wirklich beschreiben. Ein Ortsname gehört hinein, wenn das Bild dort entstanden ist, nicht als Pflichtwort.
Dateiname, Bildunterschrift und Umfeld
Der Alt-Text ist nicht das einzige Signal. Google empfiehlt außerdem kurze, aussagekräftige Dateinamen wie schwarze-katze.jpg statt IMG00023.JPG und Bilder in der Nähe von passendem Text. Eine sichtbare Bildunterschrift hilft Menschen und Suchmaschinen gleichermaßen. Für eingebettete SVG-Grafiken nennt Google das <title>-Element als Ersatz für den Alt-Text.
Wie Bilder, Überschriften und Text auf einer Seite zusammenspielen, beschreibt unsere Onpage-Optimierung. Ob die Überschriften einer Seite sauber gegliedert sind, zeigt der Überschriften-Checker.
Alt-Text und Barrierefreiheit
Für Menschen mit Sehbehinderung ist der Alt-Text oft die einzige Information über ein Bild. Die Richtlinien für barrierefreie Webinhalte (WCAG) verlangen für Nicht-Text-Inhalte eine Textalternative. Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz für viele Angebote an Verbraucher, etwa Onlineshops. Kleinstunternehmen, die Dienstleistungen anbieten, sind ausgenommen. Ob das Gesetz für eine bestimmte Website gilt, sollte im Einzelfall geprüft werden. Unabhängig davon sind gute Alt-Texte ein einfacher Schritt, der allen Besuchern hilft.
Häufige Fehler
- Alt-Texte fehlen komplett, oft bei Bildern, die über ein Website-System oder einen Slider eingebunden werden.
- Derselbe Alt-Text für alle Bilder, etwa der Firmenname auf jedem Foto.
- Keyword-Listen statt Beschreibung.
- Dekorative Bilder mit Text, die Screenreader-Nutzer mit überflüssigen Ansagen aufhalten.
- Wichtige Informationen nur im Bild, etwa Öffnungszeiten oder Preise als Grafik ohne Text auf der Seite.
Wenn Sie prüfen lassen möchten, wo auf Ihrer Website Alt-Texte, Überschriften oder Metadaten fehlen, ist das Teil unseres SEO-Audits.
FAQ: Alt-Text
Was ist ein Alt-Text?
Eine kurze Textbeschreibung eines Bildes im alt-Attribut des HTML-Codes. Screenreader lesen sie vor, Browser zeigen sie, wenn das Bild nicht lädt, und Suchmaschinen nutzen sie, um den Bildinhalt zu verstehen.
Ist der Alt-Text wichtig für SEO?
Ja, vor allem für die Bildersuche. Google nennt das alt-Attribut das wichtigste Attribut für Bildinformationen und nutzt es zusammen mit dem Seitentext. Bei verlinkten Bildern dient er zusätzlich als Ankertext.
Wie lang sollte ein Alt-Text sein?
Google nennt keine feste Länge. Meist reicht ein kurzer Satz, der beschreibt, was zu sehen ist. Längere Erklärungen gehören in den sichtbaren Text oder eine Bildunterschrift.
Braucht jedes Bild einen Alt-Text?
Jedes Bild braucht ein alt-Attribut, aber nicht jedes eine Beschreibung. Rein dekorative Bilder bekommen ein leeres Attribut, alt="", damit Screenreader sie überspringen.
Sollte das Keyword im Alt-Text stehen?
Nur, wenn es das Bild tatsächlich beschreibt. Google warnt ausdrücklich davor, Alt-Texte mit Keywords zu überladen, weil das als Spam gewertet werden kann.