Wie man Alt-Texte richtig schreibt: Beispiele, Regeln & typische Fehler

Alt-Text – auch bekannt als Alt-Attribut oder alternativer Text – ist eines jener kleinen Details, das unverhältnismäßig viel Gewicht trägt. Richtig gemacht, verbessert er sowohl die Barrierefreiheit als auch die Sichtbarkeit in Suchmaschinen. Falsch gemacht, riskiert man, Screenreader zu verwirren, sehbehinderte Nutzer:innen zu frustrieren und Bildinhalte für Suchmaschinen unsichtbar zu lassen. 

Dieser Leitfaden deckt alles ab, was ihr wissen müsst:

• Was Alt-Text ist
• Warum er für SEO wichtig ist
• Die Regeln für gutes Schreiben
• Praxisbeispiele und die häufigsten Fehler
• Die es zu vermeiden gilt

Inhalt 

1. Was ist Alt-Text und warum ist er wichtig?
2. Das Alt-Attribut in HTML: eine kurze Erklärung
3. Alt-Text und SEO: Wofür Google ihn wirklich nutzt
4. Regeln für das korrekte Schreiben von Alt-Texten
5. Gute und schlechte Alt-Text-Beispiele
6. Typische Fehler und wie man sie behebt
7. Wann man Alt-Text leer lässt
8. Alt-Text für verschiedene Bildtypen
9. Tools und wie man seine Alt-Tags prüft
10. Alt-Text-Checkliste
11. Zusammenfassung: Alt-Tags sind der heimliche SEO-Hebel

Was ist Alt-Text und warum ist er wichtig? 

Alt-Text – kurz für alternativer Text – ist eine schriftliche Beschreibung eines Bildes, die in den HTML-Code eingebettet ist. Er erfüllt drei Kernzwecke: 

1. Barrierefreiheit: Screenreader lesen sehbehinderten Nutzer:innen Alt-Texte vor und ermöglichen es ihnen, den Inhalt eines Bildes zu verstehen. 
2. SEO: Suchmaschinen können Bilder nicht so sehen wie Menschen. Alt-Text teilt Crawlern mit, was ein Bild enthält, und hilft ihnen, es korrekt zu indexieren. 
3. Fallback-Anzeige: Wenn ein Bild nicht geladen werden kann, wird der Alt-Text an seiner Stelle angezeigt und bewahrt den Kontext der Seite. 

Sinnvolle Alt-Attribute für Bilder sind seit den frühesten HTML-Standards unverzichtbar. Schlechte oder fehlende Alt-Texte sind nach wie vor einer der häufigsten Barrierefreiheitsfehler im Web. 

Das Alt-Attribut in HTML: Eine kurze Erklärung 

Das Alt-Attribut sitzt innerhalb des <img>-Tags in HTML. Hier ist die grundlegende Syntax: 

A few important technical notes about the alt attribute: 

Einige wichtige technische Hinweise zum Alt-Attribut: 

• Es ist nicht dasselbe wie das Titelattribut, das beim Überfahren mit der Maus als Tooltip erscheint. 
• Es unterscheidet sich vom Bilddateinamen. Das Umbenennen der Datei erzeugt keinen Alternativtext. 
• Es ist nicht die Bildunterschrift, obwohl sich beide ergänzen können. 
• Es sollte bei jedem aussagekräftigen Bild vorhanden sein. Dekorative Bilder sollten ein leeres Alt-Attribut (alt=““) verwenden, anstatt das Attribut ganz wegzulassen. 

Das Alt-Attribut ist Teil der HTML-Spezifikation und ist für valides, barrierefreies Markup erforderlich. Es wegzulassen – anstatt es leer zu lassen – löst Barrierefreiheitsfehler aus und kann sich negativ darauf auswirken, wie Suchmaschinen die Seite interpretieren. 

Alt Text and SEO: Wofür Google ihn wirklich nutzt

Der Zusammenhang zwischen Alt-Text und SEO ist gut etabliert. Googles eigene Dokumentation bestätigt, dass Alt-Text der Suchmaschine hilft, den Inhalt von Bildern zu verstehen, was sowohl die Web- als auch die Google-Images-Rankings beeinflusst.

Folgendes tragen Alt-Tags aus SEO-Sicht bei: 

1. Rankings bei der Bildersuche
   Google Images ist für viele Webseiten eine bedeutende Traffic-Quelle. Gut geschriebene Alt-Attribute, die das Bild genau beschreiben und dabei relevante Begriffe natürlich einbinden, erhöhen die Wahrscheinlichkeit, dass das Bild in den Bildsuchergebnissen erscheint. 
2. Relevanzsignale auf Seitenebene
   Bilder mit beschreibendem Alt-Text stärken die thematische Relevanz des umgebenden Inhalts. Eine Seite über handwerkliches Brot, die Bilder mit Alt-Text enthält, der spezifische Laibe, Techniken und Zutaten beschreibt, sendet konsistente thematische Signale an Google.
3. Überschneidungen zwischen Core Web Vitals und Barrierefreiheit
   Googles Ranking-Systeme spiegeln zunehmend die Qualität der Nutzererfahrung wider. Barrierefreie Seiten – einschließlich solcher mit sinnvollem Alt-Text – schneiden oft besser bei einer Reihe von Erfahrungsmetriken ab. Alt-Text dient wirklich allen Nutzer:innen und funktioniert gleichzeitig als SEO-Taktik. 

Regeln für das korrekte Schreiben von Alt-Texten 

Diese Regeln spiegeln sowohl Best Practices für Barrierefreiheit als auch SEO-Leitlinien wider. Befolgt sie konsequent für die besten Ergebnisse. 

1. Seid spezifisch und beschreibend

Der Zweck von Alt-Text ist es, das Bild jemandem zu vermitteln, der es nicht sehen kann. Vage Beschreibungen erfüllen diesen Zweck nicht. Beschreibt, was wirklich zu sehen ist: das Motiv, den Hintergrund und alle relevanten Details. 

Schwach: Hund 

Besser: Ein Golden Retriever, der auf einem Holzboden neben einem Kamin sitzt 

2. Haltet euch kurz, aber vollständig

Die meisten Empfehlungen raten dazu, Alt-Text unter 125 Zeichen zu halten, da viele Screenreader an diesem Punkt abschneiden. Strebt nach einem einzigen Satz, der den wesentlichen Inhalt des Bildes abdeckt. 

3. Startet nicht mit „Bild von“ oder „Foto von“

Screenreader kündigen bereits an, dass das Element ein Bild ist. Kommt direkt zur Beschreibung. 

Vermeiden: Bild einer Frau mit einem Laptop 

Stattdessen: Eine Frau, die an einem Stehpult in einem hellen Büro an einem Laptop arbeitet 

4. Keywords natürlich einbinden

Wenn ein relevantes Keyword natürlich in die Beschreibung passt, verwendet es. Wenn nicht, lasst es einfach weg. Die Beschreibung sollte sich wie ein Satz lesen, der für Menschen geschrieben wurde, nicht für Suchmaschinen. 

Keyword-Stuffing: SEO Alt-Text Best Practices Alt-Tags Alt-Attribut SEO-Bild 

Natürlich: Ein Diagramm, das zeigt, wie Alt-Text in einem HTML-Bild-Tag verwendet wird 

5. Kontext der Seite berücksichtigen

Dasselbe Bild in verschiedenen Kontexten kann unterschiedliche Alt-Texte erfordern. Ein Foto einer Person, die Pasta kocht, auf einem Rezept-Blog benötigt anderen Alt-Text als dasselbe Foto auf einer Biografie-Seite. Schreibt Alt-Texte immer im Hinblick auf den Zweck der Seite. 

6. Bei funktionalen Bildern: Funktion beschreiben, nicht nur das Aussehen

Schaltflächen, Icons und verlinkte Bilder sollten Alt-Texte haben, die ihre Funktion beschreiben. Alt-Text für ein Lupensymbol als Suchschaltfläche sollte „Suchen“ sein, nicht „Lupensymbol“. 

7. Leeren Alt-Text für dekorative Bilder verwenden

Rein dekorative Bilder wie Trennlinien, Hintergrundtexturen und abstrakte Verzierungen, die keinen Informationswert tragen, sollten mit alt=““ (ein leeres Alt-Attribut) versehen werden. Dies teilt Screenreadern mit, das Bild zu überspringen, anstatt eine bedeutungslose Beschreibung anzukündigen. 

Alt-Text-Beispiele: Gut und schlecht 

Am einfachsten versteht man, wie guter Alt-Text aussieht, durch direkten Vergleich. Hier sind Beispiele für eine Reihe von Bildtypen. 

Typische Fehler und wie man sie behebt 

Die meisten Alt-Text-Fehler fallen in eine Handvoll Muster. Hier sind die häufigsten, zusammen mit Hinweisen zur Behebung. 

Fehler 1: Alt-Text leer lassen oder ganz weglassen 

Das vollständige Weglassen von Alt-Texten (ohne das Attribut im Tag) ist sowohl ein Barrierefreiheitsfehler als auch eine verpasste SEO-Chance. Jedes bedeutungstragende Bild sollte ein Alt-Attribut haben, auch wenn dieses Attribut für dekorative Bilder absichtlich leer gelassen wird. 

Lösung: Fügt alt=““ zu dekorativen Bildern sowie eine aussagekräftige Beschreibung zu allen Inhaltsbildern hinzu. 

Fehler 2: Den Dateinamen als Alt-Text verwenden 

Alt-Texte wie „IMG_4523.jpg“ oder „hero-banner-v3-final-FINAL.png“ sagen Nutzer:innen und Suchmaschinen nichts. CMS-Tools füllen Alt-Texte manchmal standardmäßig mit dem Dateinamen. 

Lösung: Schreibt für jedes Bild eine neue Beschreibung, die den Inhalt und Kontext auf der Seite widerspiegelt. 

Fehler 3: Keyword-Stuffing oder wiederholende Beschreibungen

Das Füllen von Alt-Texten mit Keywords wie „bester SEO Alt-Text Alt-Attribut Bild-SEO-Optimierung“ schadet mehr als es nützt. Es wird von modernen Suchmaschinen als Spam erkannt und stößt Screenreader-Nutzer:innen negativ auf. 

Lösung: Schreibt natürlich. Wenn das Ziel-Keyword in eine ehrliche Beschreibung des Bildes passt, verwendet es einmal. Passt es nicht, lasst ihr es weg

Fehler 4: Denselben Alt-Text für jedes Bild benutzen

Identische Alt-Texte über mehrere Bilder zu kopieren ist eine verbreitete Abkürzung, die sowohl die Barrierefreiheit als auch die Suchrelevanz untergräbt. Jedes Bild ist anders – jeder Alt-Text sollte es auch sein. 

Lösung: Nehmt euch die Zeit, für jedes Bild einzigartigen Alt-Text zu schreiben. Das ist besonders wichtig für Produktbilder, bei denen kleine visuelle Unterschiede für Nutzer:innen bedeutsam sein können. 

Fehler 5: Das Falsche beschreiben

Alt-Texte, die falsche Aspekte eines Bildes beschreiben (z. B. den Hintergrund statt des Motivs), bestehen den Barrierefreiheitstest nicht und können auch Suchmaschinen über die Relevanz des Bildes verwirren. 

Lösung: Konzentriert euch auf das Hauptmotiv des Bildes und relevante Details für den umgebenden Inhalt. 

Fehler 6: Alt-Text schreiben, der die Bildunterschrift dupliziert

Wenn ein Bild bereits eine sichtbare Bildunterschrift hat, die es beschreibt, muss der Alt-Text diese nicht Wort für Wort wiederholen, denn dies schafft eine redundante und frustrierende Erfahrung für Screenreader-Nutzer:innen, die dieselbe Beschreibung zweimal hören müssen. 

Lösung: Wenn eine Bildunterschrift vorhanden ist, schreibt einen komplementären Alt-Text, der Kontext hinzufügt, anstatt ihn zu wiederholen. Für rein dekorative Bilder mit Bildunterschrift ist alt=““ angemessen. 

Fehler 7: Alle Bilder gleich behandeln

Eine dekorative Hintergrundtextur, ein Produktfoto, eine Infografik, ein Team-Porträt und ein Diagramm erfordern unterschiedliche Ansätze für ihre Alt-Texte. Sie identisch zu behandeln, führt entweder zu Überbeschreibung (bei dekorativen Elementen) oder Unterbeschreibung (bei komplexen Informationsbildern). 

Lösung: Kategorisiert alle Bilder, bevor die Alt-Texte geschrieben werden, und wendet die entsprechenden Regeln auf jeden Typ an. 

Wann man Alt-Text leer lässt 

Leerer Alt-Text (alt=““) ist die richtige Wahl für Bilder, die: 

• Dekorativ sind – Rahmen, Trennlinien, Hintergrundmuster, ästhetische Verzierungen 
• Redundant sind – wenn das Bild von benachbartem Text begleitet wird, der dieselbe Information vermittelt 
• Nur für visuelle Abstands- oder Layoutzwecke verwendet werden 

Der wichtigste Unterschied besteht zwischen einem fehlenden Alt-Attribut und einem leeren. Ein fehlendes Alt-Attribut bedeutet, dass das Bild überhaupt keine Barrierefreiheits- oder SEO-Behandlung hat. Ein leeres Alt-Attribut ist ein bewusstes Signal: „dieses Bild ist dekorativ, ignoriert es.“ 

Example: 

Alt-Text für verschiedene Bildtypen 

Verschiedene Arten von Bildern erfordern unterschiedliche Ansätze. Hier ist eine Übersicht der häufigsten Kategorien. 

Produktbilder

Gebt den Produktnamen, die Farbe und alle im Bild sichtbaren charakteristischen Merkmale an. Für den E-Commerce ist dies besonders wichtig: Produktbilder ohne genauen Alt-Text erscheinen möglicherweise nicht, wenn Nutzer:innen Google Images nach bestimmten Artikeln durchsuchen. 

Beispiel: 

Infografiken und Datenvisualisierungen 

Für komplexe Infografiken reicht eine kurze Alt-Text-Zusammenfassung möglicherweise nicht aus. Überlegt, anderswo auf der Seite eine vollständige Textalternative bereitzustellen (z. B. in einem ausklappbaren Abschnitt) und verwendet den Alt-Text, um die wichtigsten Erkenntnisse zusammenzufassen: 

alt=“Infografik: Der 5-stufige Content-Marketing-Funnel von der Awareness bis zur Advocacy. Vollständige Textversion unten.“ 

Diagramme und Grafiken 

Beschreibt den Diagrammtyp, was gemessen wird und die wichtigste Erkenntnis oder den Trend. Bezeichnet es nicht nur als „Balkendiagramm“. 

Beispiel: 

Personen- und Teamfotos 

Für Mitarbeiter:innenfotos gebt ihr den Namen und die Rolle der Personen an, wo relevant. Bei generischen Stockfotos von Personen beschreibt ihr die Aktivität und den Hintergrund. 

Beispiel: 

Logos

Wenn ein Logo ein eigenständiges Bild ohne nahegelegenen Text ist, sollte der Alt-Text der Unternehmensname sein. Wenn ein Logo mit der Startseite verlinkt ist, beschreibt ihr auch bestenfalls die Funktion. 

Example:  

Screenshots

Beschreibt, was der Screenshot zeigt, einschließlich der Oberfläche und aller wichtigen darin sichtbaren Informationen. 

Beispiel: 

Wie man die eigenen Alt-Tags prüft 

Alt-Texte auf einer etablierten Website zu überprüfen kann sich entmutigend anfühlen. Diese Ansätze machen den Prozess handhabbar. 

Browser-basierte tools 

Chrome DevTools macht es möglich, das Alt-Attribut jedes Bildes direkt zu inspizieren. Klickt dazu mit der rechten Maustaste auf ein Bild, wählt „Untersuchen“ und sucht den Alt-Wert innerhalb des <img>-Tags. Dies eignet sich für die Überprüfung einzelner Bilder, ist aber nicht skalierbar. 

Screaming Frog SEO Spider 

Screaming Frog crawlt die Webseite und exportiert eine Tabelle aller Bilder, einschließlich ihres Alt-Texts. Filtert sie nach leeren oder fehlenden Alt-Attributen, um die dringendsten Korrekturen zu identifizieren. Das ist die effizienteste Methode für Webseiten mit Hunderten oder Tausenden von Bildern. 

Google Search Console 

Der Bereich Verbesserungen in der Search Console kann zwar einige bildbezogene Probleme aufzeigen, meldet aber nicht speziell Alt-Text-Probleme so wie ein dedizierter Crawler. 

Barrierefreiheitsprüfer 

Tools wie WAVE (Web Accessibility Evaluation Tool) und axe markieren Bilder ohne Alt-Text als Barrierefreiheitsfehler. Eine Seite durch WAVE laufen zu lassen ist eine schnelle Möglichkeit, auf einen Blick zu sehen, welche Bilder noch Aufmerksamkeit brauchen.  

CMS-Audits 

Wenn die eigene Webseite auf WordPress, Shopify oder einem ähnlichen CMS läuft, können die Medienbibliothek oder Massenbearbeitungstools es möglich machen, Alt-Texte direkt zu überprüfen und zu aktualisieren. Einige Plugins (wie Yoast SEO oder RankMath) fordern sogar dazu auf, Alt-Texte beim Hochladen von Bildern hinzuzufügen. 

Alt-Text-Checklist 

Verwendet diese Checkliste beim Schreiben oder Überprüfen von Alt-Texten: 

• Hat jedes bedeutungstragende Bild ein Alt-Attribut? 
• Verwenden rein dekorative Bilder alt=““? 
• Beschreibt der Alt-Text das Bild genau und spezifisch? 
• Ist der Alt-Text unter 125 Zeichen? 
• Beginnt er nicht mit „Bild von“ oder „Foto von“? 
• Enthält er Schlüsselwörter nur dort, wo sie natürlich passen? 
• Ist der Alt-Text jedes Bildes einzigartig? 
• Beschreibt er bei funktionalen Bildern (Icons, Schaltflächen) die Funktion? 
• Wird bei komplexen Bildern (Infografiken, Diagrammen) eine vollständige Textalternative bereitgestellt? 
• Enthält der Alt-Text bei verlinkten Logos das Ziel? 

Zusammenfassung: Alt-Tags sind der heimliche SEO-Hebel 

Alt-Texte sind eine kleine Investition mit großer Wirkung. Gut geschrieben, machen sie eure Webseite für Nutzer:innen zugänglich, die auf Screenreader angewiesen sind. Sie verbessern die Sichtbarkeit in Google Images, stärken die thematische Relevanz eurer Seiten und machen Inhalte zukunftssicher – denn die KI-gesteuerte Suche interpretiert das Web immer kontextueller

Die Regeln sind unkompliziert: 

• Seid spezifisch 
• Seid prägnant 
• Schreibt natürlich 
• Berücksichtigt den Kontext 
• Verwendet niemals Keyword-Stuffing 

Die häufigsten Fehler (leerer Alt-Text, Dateinamen-Standards, Wiederholungen und Keyword-Missbrauch) sind alle leicht zu beheben, sobald man weiß, wonach man suchen muss. 

Wenn die Alt-Attribute eurer Webseite noch nicht kürzlich geprüft wurden, ist jetzt ein guter Zeitpunkt. Führt einen Screaming-Frog-Crawl durch, filtert nach fehlendem oder unzureichendem Alt-Text und arbeitet die Ergebnisse systematisch durch. Es ist einer der schnellsten technischen Gewinne im SEO – und einer, der euren Nutzer:innen genauso zugutekommt wie den Suchmaschinen.