Alt-Text
Alt-Text (Alternativtext) ist eine beschreibende Textzeichenfolge, die im alt-Attribut eines HTML-<img>-Tags geschrieben wird. Er wird anstelle des Bildes angezeigt, wenn das Bild nicht gerendert oder visuell wahrgenommen werden kann.
Alt-Text (Alternativtext) ist eine beschreibende Textzeichenfolge, die im alt-Attribut eines HTML-<img>-Tags geschrieben wird. Er wird anstelle des Bildes angezeigt, wenn das Bild nicht gerendert oder visuell wahrgenommen werden kann.
Warum es wichtig ist
Alt-Text spielt sowohl für die Barrierefreiheit als auch für SEO eine entscheidende Rolle.
Erstens lesen Screenreader den Wert des alt-Attributs vor und ermöglichen so sehbehinderten Nutzern, den Inhalt eines Bildes zu verstehen. Der Standard der WCAG (Web Content Accessibility Guidelines) Stufe A verlangt Alternativtext für alle Nicht-Text-Inhalte.
Zweitens können Suchmaschinen-Crawler Bilder nicht direkt "sehen" und verlassen sich daher auf das alt-Attribut, um das Thema eines Bildes zu verstehen. Google hat offiziell bestätigt, dass Alt-Text ein Ranking-Signal für die Bildersuche ist. Bilder mit gut geschriebenem Alt-Text erscheinen mit höherer Wahrscheinlichkeit in der Google Bildersuche und in Tools für die visuelle Suche wie Google Lens.
Drittens nutzen auch generative KI-Systeme wie ChatGPT und Perplexity Alt-Text als wichtige Informationsquelle bei der Analyse von Bildern, was ihn aus Sicht der GEO (Generative Engine Optimization) zunehmend wichtig macht.
Richtlinien zum Schreiben
- Seien Sie konkret. Schreiben Sie auf Basis der Frage: "Welche Information würde einem Nutzer entgehen, wenn er dieses Bild nicht sehen könnte?"
- Halten Sie ihn unter 125 Zeichen. Die meisten Screenreader schneiden Alt-Text ab etwa 125 Zeichen ab.
- Bauen Sie relevante Keywords natürlich ein. Verweben Sie ein oder zwei Keywords, die zum Kontext des Seiteninhalts passen.
- Lassen Sie Präfixe wie "Bild von", "Foto von" oder "Abbildung von" weg. Screenreader kündigen das Element bereits als
<img>an, sodass dies überflüssig ist. - Verwenden Sie ein leeres alt (
alt="") für dekorative Bilder. Beschreibungen zu dekorativen Bildern hinzuzufügen, die keinen inhaltlichen Zweck erfüllen, erzeugt unnötiges Rauschen für Screenreader-Nutzer.
Gute Beispiele vs. schlechte Beispiele
| Typ | Alt-Text | Begründung |
|---|---|---|
| Gut | Handgemachte vegane Schokoladentorte auf einem weißen Teller | Konkret, prägnant und vermittelt die wesentliche Information des Bildes |
| Gut | Liniendiagramm, das die monatliche Entwicklung des organischen Traffics im Jahr 2025 zeigt | Beschreibt klar den Diagrammtyp und das Datenthema |
| Schlecht | Torte | Zu vage, unmöglich zu erkennen, um welche Art von Torte es sich handelt |
| Schlecht | Torte Foto Bild Dessert lecker Torte Schokoladentorte handgemachte Torte vegane Torte | Keyword-Stuffing, kann als Spam markiert werden |
| Schlecht | IMG_20250301_142055.jpg | Ein roher Dateiname, der für Nutzer und Suchmaschinen gleichermaßen bedeutungslos ist |
Häufige Fehler
- Keyword-Stuffing: Das wiederholte Auflisten von Keywords im Alt-Text kann von Google als Spam eingestuft werden und schadet der Nutzererfahrung erheblich. Keywords sollten natürlich im Kontext eingebunden werden.
- Denselben Alt-Text für alle Bilder verwenden: Das Kopieren derselben Beschreibung über mehrere Bilder auf einer Seite hinweg kann dazu führen, dass Suchmaschinen sie als doppelten Inhalt behandeln. Jedes Bild sollte eine eindeutige Beschreibung haben, die seinen spezifischen Inhalt widerspiegelt.
- Alt-Text ganz weglassen: Wenn das alt-Attribut selbst fehlt, lesen Screenreader den Dateinamen vor, was die Barrierefreiheit erheblich verschlechtert. Selbst dekorative Bilder müssen ein leeres alt-Attribut (
alt="") enthalten. - KI-generierten Alt-Text ohne Prüfung verwenden: Von KI-Tools vorgeschlagener Alt-Text spiegelt den Kontext möglicherweise nicht vollständig wider. Eine menschliche Prüfung und Optimierung auf den Seiteninhalt ist stets notwendig.
- Fließtext wörtlich kopieren: Wenn dieselbe Bildunterschrift oder derselbe Fließtext, der neben einem Bild erscheint, in den Alt-Text übernommen wird, hören Screenreader-Nutzer denselben Inhalt zweimal. Alt-Text sollte den umgebenden Text ergänzen, nicht duplizieren.
Quellen:
- Best Practices für Bilder-SEO - Google Search Central
- Alt-Text für SEO: So optimieren Sie Ihre Bilder - Ahrefs
Verwandte inblog-Beiträge
Wie inblog hilft
Der Editor von inblog bietet beim Einfügen von Bildern ein Eingabefeld für Alt-Text und zeigt eine Warnung an, wenn es leer bleibt.