Alt-Text: Bedeutung für SEO und Barrierefreiheit

Übersicht

Alt-Text (attribute: alt) ist das primäre, explizite Textsignal für ein <img>-Element im HTML. Er beschreibt den sichtbaren Inhalt eines Bildes in Worten, damit Screenreader und Suchmaschinen den Kontext verstehen, und fungiert als Fallback, wenn Bilder nicht geladen werden.

Wichtig zu unterscheiden: Crawling, Indexierung und Ranking sind separate Schritte. Alt-Text hilft Suchmaschinen, den Inhalt eines Bildes zu interpretieren (Indexierungsrelevanz), aber alleiniger Alt-Text bestimmt nicht die Reihenfolge einer Seite in den organischen Suchergebnissen—Ranking ist das Ergebnis vieler Signale.

Schritt-für-Schritt: effektiven Alt-Text schreiben

1) Beschreibe, was auf dem Bild tatsächlich zu sehen ist. Kurz und präzise: wer, was, wo, gegebenenfalls warum. Beispiel: <img src="kaffee.jpg" alt="Rote Kaffeetasse auf Holztisch">.

2) Kontexthinweis hinzufügen, wenn nötig: Bei Bildern, die Informationswert über den sichtbaren Inhalt hinaus haben (Diagramme, Screenshots), füge eine längere Beschreibung im Fließtext oder verlinkte Beschreibung hinzu und verwende aria-describedby, falls erforderlich.

3) Vermeide Keyword-Stuffing: Ein natürlich formulierter Alt-Text mit einem relevanten Stichwort ist sinnvoll; Wiederholung oder Aneinanderreihung von Keywords schadet eher.

4) Dekorative Bilder: Wenn ein Bild rein dekorativ ist und keine informationelle Funktion hat, setze alt="" (leeres Alt-Attribut) so, dass Screenreader das Bild überspringen.

5) Vermeide title-Attribute als Ersatz: title kann zusätzliche Hinweise geben, wird aber nicht zuverlässig von Screenreadern oder Suchmaschinen als Ersatz für Alt-Text verwendet.

Praktische Beispiele

Schlecht: <img src="produkt.jpg" alt="Produkt123"> (liefert keinen beschreibenden Kontext)
Gut: <img src="produkt.jpg" alt="Blauer Regenmantel, Modell 'Atlas', Frontansicht">

Alt-Text prüfen: technische Checklist

**Alt vorhanden** — HTML-Quelle prüfen — passes when das <img>-Tag enthält ein alt-Attribut (auch leer bei dekorativen Bildern).

**Alt-Text sinnvoll** — gerendertes DOM prüfen — passes when der Text beschreibt den Bildinhalt und ist nicht ein Dateiname/ID.

**Dekorativ korrekt markiert** — Quelle oder DevTools prüfen — passes when dekorative Grafiken alt="" haben.

**Keine Keyword-Überladung** — Stichprobenprüfung in HTML/Content — passes when Alt-Text liest sich natürlich ohne wiederholte Keywords.

**Responsives Verhalten** — gerendertes DOM + srcset prüfen — passes when das sichtbare Bild auf verschiedenen Viewports ein sinnvollen Alt-Text behält.

Tools & Schritte zur Überprüfung

HTML-Quelle prüfen (curl): Verwende curl, um die vom Server gelieferte HTML-Quelle einzusehen: curl -L https://example.com/page | grep -i '<img'. Beachte: curl zeigt die rohe HTML-Quelle, nicht das gerenderte DOM.

Gerendertes DOM prüfen: Öffne Chrome DevTools → Elements, um zu sehen, ob JavaScript Alt-Attribute nachlädt oder verändert. Wenn das Alt-Attribut erst nach clientseitigem Rendering erscheint, ist das gerenderte DOM für Nutzer und Suchmaschinen relevant.

Barrierefreiheitsscans: Nutze Lighthouse (Chrome DevTools Audits) oder axe DevTools, um automatisierte Checks für fehlende/ungenügende Alt-Texte durchzuführen. Diese Tools zeigen oft genaue Fundstellen und Vorschläge.

Indexationssignale prüfen: Für externe Seiten kann der site:-Operator ein Hinweis sein, ob die Seite bekannt ist; für Ihre eigene Seite nutzen Sie die URL-Inspection in Google Search Console, um zu sehen, ob Google die Seite (und gegebenenfalls die Bilder) kennt. Erinnerung: site:-Ergebnisse sind nur indikativ, nicht definitiv.

Lazy-loading und Sichtbarkeit: Prüfen Sie im Network-Tab, ob Bilder durch lazy-loading erst später geladen werden; stellen Sie sicher, dass Alt-Attribute auch bei nachträglich geladenen <img>-Elementen korrekt gesetzt sind.

Zum Technical-SEO-Guide

Häufige Probleme

1) Alt ist leer oder fehlt bei inhaltlich relevanten Bildern — führt zu schlechterer Zugänglichkeit und weniger klaren Signalen für Suchmaschinen.

2) Keyword-Stuffing in Alt-Texten — sichtbares Muster und schlechte UX; Suchmaschinen können solche Manipulationen als geringwertig behandeln.

3) Title-Attribute statt Alt verwenden — title wird nicht als Ersatz für Alt-Text angesehen und ist für Screenreader weniger zuverlässig.

4) Gleichlautende Alt-Texte über viele Bilder hinweg — reduziert Informationswert; jedes Bild sollte eine eigene, korrekte Beschreibung haben.

Häufig gestellte Fragen

Autorität durch hochwertige Backlinks aufbauen
Technische SEO wie korrekt gesetzte Alt-Texte verbessert die Auffindbarkeit Ihrer Inhalte; zusätzliche Autorität erhalten Seiten oft durch relevante Backlinks. Autorität durch hochwertige Backlinks aufbauen (link zur marketplace-Seite), um die Sichtbarkeit Ihrer korrekt optimierten Seiten weiter zu unterstützen.