Was ist der Alt-Text?
Der Alt-Text (Alternativtext, englisch: alt text oder alt attribute) ist ein HTML-Attribut des <img>-Tags, das den Inhalt eines Bildes in Textform beschreibt. Er wird im Code so gesetzt:
<img src="team-foto.jpg" alt="Das Seopatra-Team bei der SEO-Konferenz 2024 in München">
Der Alt-Text erfüllt drei zentrale Funktionen:
- Barrierefreiheit: Screenreader lesen den Alt-Text sehbehinderten Nutzern vor – ohne ihn bleibt das Bild unsichtbar
- SEO: Suchmaschinen nutzen den Alt-Text, um Bilder thematisch einzuordnen und in der Bildersuche zu ranken
- Fallback: Wenn ein Bild nicht geladen werden kann (langsame Verbindung, fehlerhafte URL, deaktivierte Bilder), zeigt der Browser stattdessen den Alt-Text an
Man kann sich den Alt-Text wie die Bildunterschrift in einem Buch vorstellen – nur dass er nicht sichtbar ist, sondern im Code lebt. Für einen sehenden Nutzer bleibt er unsichtbar, aber für Screenreader, Suchmaschinen und Situationen ohne Bilddarstellung ist er die einzige Information darüber, was das Bild zeigt.
Warum ist der Alt-Text wichtig für SEO?
Google Bildersuche
Google Images ist die zweitgrößte Suchmaschine der Welt. Der Alt-Text ist das primäre Signal, das Google verwendet, um den Inhalt eines Bildes zu verstehen. Ohne Alt-Text kann Google ein Bild nicht thematisch einordnen und zeigt es in der Bildersuche nicht für relevante Suchanfragen an.
Beispiel:
- alt="Zahnarztpraxis Behandlungsraum mit moderner Ausstattung" → Google kann das Bild für Suchanfragen wie „Zahnarztpraxis Einrichtung" oder „moderner Behandlungsraum" anzeigen
- alt="" oder fehlendes Alt → Google muss den Bildinhalt aus dem umgebenden Text erraten – das ist unzuverlässig
Thematische Relevanz der Seite
Alt-Texte tragen zur Gesamtrelevanz einer Seite bei. Wenn es auf einer Seite um „Wandern im Allgäu" geht und die Bilder Alt-Texte wie „Wanderweg am Nebelhorn mit Blick auf die Alpen" tragen, bestätigt das Google, dass die Seite dieses Thema tatsächlich behandelt.
Barrierefreiheit als Rankingfaktor
Google hat wiederholt betont, dass Barrierefreiheit ein Qualitätssignal ist. Seiten, die WCAG-Standards einhalten – zu denen Alt-Texte gehören –, senden ein positives Signal. Fehlende Alt-Attribute sind ein Verstoß gegen WCAG 2.1 Level A, Erfolgskriterium 1.1.1 (Non-text Content) – die grundlegendste Stufe der Barrierefreiheit.
Gute Alt-Texte schreiben
Die Grundregeln
Ein guter Alt-Text beschreibt, was das Bild zeigt – nicht, was es ist. Stell dir vor, du beschreibst das Bild jemandem am Telefon:
- Konkret und beschreibend: Was zeigt das Bild? Welche relevanten Details sind erkennbar?
- Kontextbezogen: Wie passt das Bild zum Inhalt der Seite? Welche Information vermittelt es?
- Prägnant: Idealerweise 40–125 Zeichen. Lang genug für Kontext, kurz genug für Screenreader
- Ohne Redundanz: Nicht mit „Bild von", „Foto von" oder „Grafik zeigt" beginnen – der Screenreader kündigt das Element bereits als Bild an
Gute vs. schlechte Beispiele
| Bild | Schlecht | Gut |
|---|---|---|
| Produktfoto | alt="Bild" |
alt="Rote Leder-Handtasche mit Goldschnalle, Seitenansicht" |
| Team-Foto | alt="IMG_4521.jpg" |
alt="Das fünfköpfige Entwicklerteam im Büro München" |
| Infografik | alt="" |
alt="Infografik: 5 Schritte zum erfolgreichen SEO-Audit" |
| Logo | alt="Foto von Logo" |
alt="Seopatra Logo" |
| Stadtansicht | alt="bild stadt" |
alt="Panoramablick auf die Münchner Altstadt bei Sonnenuntergang" |
Alt-Text und Keywords
Der Alt-Text bietet eine natürliche Gelegenheit, relevante Keywords einzubauen – aber nur, wenn sie zum Bildinhalt passen:
- Natürlich:
alt="SEO-Audit-Report mit Ergebnisübersicht und Handlungsempfehlungen"– das Keyword „SEO-Audit-Report" beschreibt tatsächlich, was das Bild zeigt - Keyword-Stuffing:
alt="SEO Audit SEO Analyse SEO Check SEO Tool beste SEO Agentur"– das beschreibt nichts und wird von Google als Spam gewertet
Die Faustregel: Wenn der Alt-Text vorgelesen immer noch wie eine natürliche Bildbeschreibung klingt, ist er richtig. Wenn er wie eine Keyword-Liste klingt, ist er falsch.
Die optimale Alt-Text-Länge
Empfohlen: 40–125 Zeichen.
| Länge | Bewertung | Begründung |
|---|---|---|
| 0 (leer) | Nur für dekorative Bilder | Screenreader überspringt das Bild |
| 1–39 Zeichen | Oft zu kurz | Zu wenig Kontext für Screenreader und Google |
| 40–125 Zeichen | Optimal | Genug Detail, gute Screenreader-Erfahrung |
| Über 125 Zeichen | Zu lang | Screenreader lesen ohne Pause – schlechtes Hörerlebnis |
Screenreader lesen den Alt-Text in einem Stück vor, ohne Pause oder Möglichkeit zum Überspringen. Ein Alt-Text mit 300 Zeichen wird zu einem langen, ununterbrochenen Monolog. Wenn ein Bild eine ausführliche Erklärung braucht (z. B. ein komplexes Diagramm), verwende einen kurzen Alt-Text und ergänze die Details im umgebenden Text oder in einer <figcaption>.
Dekorative Bilder: Wann alt="" richtig ist
Nicht jedes Bild vermittelt Information. Dekorative Bilder – Hintergrundmuster, Trennlinien, Schmuckelemente, reine Designelemente – sollten ein leeres Alt-Attribut erhalten:
<!-- Dekoratives Bild – Screenreader überspringt es -->
<img src="trennlinie.svg" alt="">
<!-- Informatives Bild – Screenreader liest den Text vor -->
<img src="diagramm.png" alt="Umsatzentwicklung 2020-2024 mit 35 % Wachstum">
Wichtig: Ein leeres alt="" ist etwas anderes als ein fehlendes Alt-Attribut:
alt=""→ „Dieses Bild ist dekorativ, bitte überspringen" – bewusste Entscheidung- Kein
alt→ „Ich habe vergessen, das Bild zu beschreiben" – Fehler
Screenreader behandeln beide Fälle unterschiedlich: Bei alt="" wird das Bild ignoriert. Bei fehlendem Alt-Attribut liest der Screenreader häufig den Dateinamen vor – was zu unsinnigen Ausgaben wie „Bild: D-S-C-unterstrich-null-null-vier-zwei-punkt-jay-peg" führt.
Dateinamen als Alt-Text erkennen
Ein häufiges Problem entsteht, wenn CMS-Systeme beim Hochladen den Dateinamen automatisch als Alt-Text setzen. Das Ergebnis sind Alt-Texte wie:
alt="IMG_4521.jpg"alt="header-banner-v2.png"alt="foto-neu-final-2.webp"alt="screenshot_2024-03-15.png"
Diese Dateinamen vermitteln keinerlei Information über den Bildinhalt. Weder Screenreader-Nutzer noch Suchmaschinen können damit etwas anfangen. Das Audit erkennt Dateinamen anhand typischer Bildformate (JPG, JPEG, PNG, GIF, WebP, SVG, BMP, ICO, AVIF) im Alt-Text.
Lösung: Prüfe die Upload-Einstellungen deines CMS. WordPress beispielsweise verwendet den Dateinamen als Standard-Alt-Text, wenn beim Upload keiner eingegeben wird. Viele CMS bieten die Möglichkeit, beim Upload einen Alt-Text festzulegen – nutze diese Funktion konsequent.
Redundante Formulierungen vermeiden
Alt-Texte, die mit Formulierungen wie „Bild von", „Foto von", „Grafik zeigt" oder „Image of" beginnen, erzeugen eine doppelte Ansage im Screenreader:
„Bild: Bild von einer Katze auf dem Sofa"
Der Screenreader kündigt jedes <img>-Element bereits als „Bild" an. Wenn der Alt-Text dann nochmal mit „Bild von" beginnt, hört der Nutzer das Wort doppelt – das ist verwirrend und unprofessionell.
Redundante Formulierungen, die vermieden werden sollten:
- „Bild von …", „Image of …"
- „Foto von …", „Photo of …", „Photograph of …"
- „Grafik von …", „Graphic of …"
- „Icon von …", „Icon of …"
- „Screenshot von …", „Screenshot of …"
- „Bild:", „Photo:", „Picture:"
Stattdessen direkt beschreiben:
- ~~alt="Foto von einem Golden Retriever im Park"~~ → alt="Golden Retriever spielt mit Ball im Englischen Garten"
- ~~alt="Bild von unserem Büro"~~ → alt="Offener Arbeitsbereich mit sechs Schreibtischen und Panoramafenstern"
Alt-Text für verschiedene Bildtypen
Verschiedene Bildtypen erfordern verschiedene Beschreibungsansätze:
Produktfotos
Beschreibe das Produkt mit relevanten Merkmalen: Farbe, Material, Größe, Perspektive.
- alt="Schwarze Laufschuhe Nike Air Max 90, Seitenansicht auf weißem Hintergrund"
Infografiken und Diagramme
Fasse die Kernaussage zusammen – nicht jedes Detail, sondern die Hauptinformation.
- alt="Balkendiagramm: SEO-Traffic stieg 2024 um 42 % gegenüber dem Vorjahr"
Screenshots
Beschreibe, was der Screenshot zeigt und warum er relevant ist.
- alt="Google Search Console Dashboard mit Abdeckungsbericht und 15 indexierten Seiten"
Logos
Verwende den Firmennamen, optional mit Zusatz.
- alt="Seopatra Logo" oder alt="Logo der Zahnarztpraxis Dr. Müller"
Team- und Personenfotos
Nenne die Person(en) und den Kontext.
- alt="Dr. Anna Schmidt, Gründerin und SEO-Beraterin bei Seopatra"
Dekorative Bilder
Leeres Alt-Attribut – kein Text nötig.
- alt=""
Häufige Fehler
Fehlendes Alt-Attribut
Das <img>-Tag hat kein alt-Attribut. Das ist der grundlegendste Alt-Text-Fehler und ein Verstoß gegen WCAG 2.1 Level A. Screenreader versuchen ersatzweise den Dateinamen vorzulesen, was zu unverständlichen Ausgaben führt. Suchmaschinen können den Bildinhalt nicht einordnen. Füge jedem Bild ein alt-Attribut hinzu: beschreibend für informative Bilder, leer (alt="") für rein dekorative.
Leeres Alt-Attribut bei informativen Bildern
Das Bild hat alt="", obwohl es Information vermittelt. Leere Alt-Attribute sind nur für dekorative Bilder korrekt (Trennlinien, Hintergrundmuster, Schmuckelemente). Wenn das Bild Inhalt transportiert – ein Produktfoto, ein Diagramm, ein Screenshot –, braucht es einen beschreibenden Text.
Alt-Text zu lang (über 125 Zeichen)
Screenreader lesen den gesamten Alt-Text in einem Stück vor, ohne Pause. Bei über 125 Zeichen wird das zu einem langen, ununterbrochenen Monolog, der schwer zu verfolgen ist. Kürze den Text auf das Wesentliche. Wenn das Bild eine ausführliche Erklärung braucht, nutze eine <figcaption> oder den umgebenden Absatz.
Dateiname als Alt-Text
Der Alt-Text ist ein Dateiname wie „IMG_4521.jpg" oder „header-banner-v2.png". Das passiert häufig, wenn CMS-Systeme den Dateinamen automatisch als Alt-Text übernehmen. Dateinamen vermitteln keinen Inhalt – ersetze sie durch eine aussagekräftige Beschreibung dessen, was das Bild zeigt.
Redundante Formulierung
Der Alt-Text beginnt mit „Bild von", „Foto von", „Image of" oder ähnlichen Formulierungen. Da Screenreader das Element bereits als Bild ankündigen, erzeugt das eine doppelte Ansage: „Bild: Bild von …". Beschreibe stattdessen direkt den Inhalt, ohne die Art des Mediums zu nennen.