Alt-Text richtig schreiben.

Bilder machen das Web lebendig. Sie wecken Emotionen, erklären komplexe Sachverhalte und lockern dröge Textwüsten auf. Doch was passiert, wenn ein Bild nicht geladen werden kann? Oder wenn ein Besucher Ihrer Webseite blind ist und einen Screenreader nutzt, um sich zurechtzufinden?

In diesen Momenten wird ein kleines, oft vernachlässigtes Detail im Hintergrund zum entscheidenden Helfer: der Alt-Text.

Viele Marketer und Webseitenbetreiber sehen ihn nur als eine weitere SEO-Checkbox, die man mit Keywords vollstopfen muss. Das ist ein großer Fehler. Gute Alt-Texte sind in erster Linie ein Zeichen von Professionalität und Respekt gegenüber allen Nutzern. Sie sind das Fundament der Barrierefreiheit im Web. SEO-Vorteile sind dabei ein willkommener, aber sekundärer Effekt.

In diesem Leitfaden zeigen wir Ihnen, wie Sie Alt-Texte schreiben, die wirklich helfen – Ihren Nutzern, den Suchmaschinen und letztlich auch Ihrem Unternehmen.

Was ist Alt-Text – und wofür ist er da?

Der Alt-Text (kurz für „Alternativtext“) ist eine kurze, textliche Beschreibung eines Bildes, die im HTML-Code hinterlegt wird. Er wird für Nutzer sichtbar, wenn das Bild aus technischen Gründen nicht angezeigt werden kann. Sein primärer und wichtigster Zweck ist jedoch ein anderer: Er macht Webinhalte für Menschen mit Sehbehinderungen zugänglich.

Die drei Hauptfunktionen im Überblick:

1. Barrierefreiheit für Screenreader: Blinde und sehbehinderte Menschen nutzen Screenreader-Software, die ihnen Webseiteninhalte vorliest. Trifft der Screenreader auf ein Bild, liest er den Alt-Text vor. Ohne diesen Text ist das Bild für den Nutzer quasi unsichtbar und der Kontext geht verloren. Ein gut formulierter Alt-Text beschreibt, was auf dem Bild zu sehen ist, und ermöglicht so ein vollständiges Verständnis der Seite.
2. Platzhalter bei Ladeproblemen: Manchmal können Bilder nicht geladen werden – sei es wegen einer langsamen Internetverbindung oder eines Serverfehlers. In diesem Fall zeigt der Browser anstelle des Bildes den Alt-Text an. Der Nutzer weiß dann trotzdem, was dort hätte sein sollen.
3. Kontext für Suchmaschinen: Google ist zwar mittlerweile recht gut darin, Bilder zu „erkennen“, aber es ist immer noch eine Maschine. Der Alt-Text gibt Google einen klaren, unmissverständlichen Hinweis darauf, was das Bild darstellt und in welchem Kontext es steht. Dies hilft der Suchmaschine, das Bild in der Bildersuche besser zu ranken und den thematischen Fokus der gesamten Seite besser zu verstehen.

Stellen Sie sich vor, auf einer Seite ist ein Button, der nur aus einem Download-Pfeil-Icon besteht. Ohne einen funktionalen Alt-Text wie alt="Dokument herunterladen" wüsste ein blinder Nutzer nicht, was dieser Button tut. Barrierefreiheit ist hier also kein „Nice-to-have“, sondern essenziell für die Funktionalität.

Alt-Text Regeln: konkret, kurz, beschreibend

Guten Alt-Text zu schreiben, ist keine Raketenwissenschaft. Es erfordert lediglich ein wenig Empathie und das Befolgen einiger einfacher Regeln. Die Kernfrage lautet immer: Was würde ich einer Person am Telefon erzählen, die das Bild nicht sehen kann, damit sie den Inhalt versteht?

• Seien Sie konkret, aber kurz: Beschreiben Sie, was auf dem Bild zu sehen ist. Konzentrieren Sie sich auf die relevanten Details. Die meisten Screenreader schneiden Alt-Texte nach etwa 125 Zeichen ab, also fassen Sie sich kurz.
• Vermeiden Sie „Bild von …“ oder „Grafik zu …“: Der Screenreader kündigt bereits an, dass es sich um ein Bild handelt. Starten Sie direkt mit der Beschreibung.
• Kein Keyword-Spamming: Der Alt-Text ist nicht der Ort, um eine Liste von Keywords unterzubringen. Das schadet der Nutzererfahrung und wird von Google als Spam gewertet. Ein relevantes Keyword kann und sollte natürlich vorkommen, wenn es das Bild treffend beschreibt.
• Funktion vor Beschreibung: Wenn ein Bild eine Funktion hat (z.B. ein Link ist), beschreiben Sie die Aktion. Ein Bild eines Einkaufswagens, das zum Warenkorb verlinkt, sollte den Alt-Text alt="Zum Warenkorb" haben, nicht alt="Einkaufswagen-Icon".
• Kontext ist entscheidend: Der benötigte Detailgrad hängt vom umgebenden Text ab. Wenn im Fließtext bereits steht „CEO Max Mustermann hält einen Vortrag“, muss der Alt-Text nicht lauten alt="CEO Max Mustermann hält einen Vortrag". Hier würde alt="Max Mustermann auf der Bühne vor einem Publikum" reichen, um die Szene zu beschreiben.

Der Fokus der Beschreibung ändert sich je nach Bildtyp. Ein Produktfoto erfordert andere Details als ein Teamfoto. Beim Produktfoto sind Material, Farbe und Perspektive wichtig. Beim Teamfoto geht es um die Personen und die Atmosphäre.

10 Beispiele (gut vs. schlecht) nach Bildtyp

Theorie ist gut, Praxis ist besser. Hier sind konkrete Vorher-Nachher-Beispiele, die Sie direkt für Ihre eigene Webseite übernehmen können.

1. Produktbild (E-Commerce)

• Schlecht: alt="Roter Schuh"
• Gut: alt="Roter Nike Air Max Laufschuh für Herren, Seitenansicht"

2. Teamfoto

• Schlecht: alt="Team"
• Gut: alt="Das Marketing-Team der Weitmark lächelt in die Kamera im Stuttgarter Büro."

3. Infografik

• Schlecht: alt="Infografik SEO"
• Gut: alt="Infografik zeigt die drei Säulen der SEO: Technik, Content und Links." (Die Details gehören in den Fließtext.)

4. Screenshot (Anleitung)

• Schlecht: alt="Screenshot"
• Gut: alt="Screenshot der WordPress Mediathek mit markiertem Feld für den Alternativtext."

5. Symbolbild (Stockfoto)

• Schlecht: alt="Mann am Laptop Keyboard tippt Hände Business"
• Gut: alt="Person arbeitet konzentriert an einem Laptop in einem modernen Café."

6. Logo im Header (verlinkt zur Startseite)

• Schlecht: alt="Logo"
• Gut: alt="Weitmark - Zur Startseite"

7. Bild mit Text

• Schlecht: alt="Werbungs-Spruch"
• Gut: Der Text, der im Bild steht, wird wörtlich wiedergegeben, z.B. alt="Angebot des Monats: 20% Rabatt auf alle Beratungen."

8. Diagramm oder Chart

• Schlecht: alt="Umsatz Chart"
• Gut: alt="Balkendiagramm zeigt Umsatzsteigerung von 15% im Vergleich zum Vorquartal."

9. Button mit Icon

• Schlecht: alt="Pfeil rechts"
• Gut: alt="Weiter zum nächsten Schritt"

10. Rein dekoratives Bild

• Schlecht: alt="blauer Kringel"
• Gut: alt="" (leerer Alt-Text)

Ein leeres Alt-Attribut (alt="") signalisiert dem Screenreader, dass das Bild rein dekorativ ist und ignoriert werden kann. Das ist wichtig, um Nutzer nicht mit irrelevanten Beschreibungen wie „blaue geschwungene Linie“ zu nerven.

Prozess in WordPress: Wie du Alt-Texte skalierst

Die meisten Webseiten haben hunderte, wenn nicht tausende Bilder ohne korrekten Alt-Text. Alles auf einmal zu fixen, ist unrealistisch. Wir brauchen einen pragmatischen Prozess.

1. In der WordPress-Mediathek pflegen:
Der beste Ort, um Alt-Texte zu verwalten, ist direkt beim Hochladen in der Mediathek. Machen Sie es zur Regel, dass kein Bild ohne ausgefülltes Alt-Text-Feld hochgeladen wird. Sie finden das Feld auf der rechten Seite, wenn Sie ein Bild anklicken.

2. Verantwortlichkeit festlegen:
Bestimmen Sie, wer im Team für die Pflege verantwortlich ist. Ist es der Redakteur, der den Artikel schreibt? Oder gibt es einen zentralen Content-Manager? Klare Zuständigkeiten verhindern, dass die Aufgabe unter den Tisch fällt.

3. Priorisierung nach Wichtigkeit:
Starten Sie nicht mit den unwichtigsten Bildern im Blogarchiv von 2015. Priorisieren Sie!

• Phase 1: Alle Bilder auf den Top-10-Landingpages (Startseite, Leistungsseiten, Kontakt).
• Phase 2: Alle Bilder in den 20 wichtigsten Blogartikeln.
• Phase 3: Neue Bilder im laufenden Prozess immer korrekt pflegen.

4. Planen Sie einen „Alt-Text Sprint“:
Blocken Sie im Team einen Nachmittag, um gezielt die 50 oder 100 wichtigsten Bilder Ihrer Webseite zu optimieren. Der Fortschritt ist sofort messbar und motiviert.

5. Redaktions-Checkliste:
Nehmen Sie den Punkt „Alt-Texte geprüft?“ fest in Ihre Checkliste für neue Inhalte auf. So wird es zur Routine.

Die systematische Pflege von Medien ist ein wichtiger Teil von professioneller Onpage SEO. Es geht darum, viele kleine Details richtig zu machen, die in Summe einen großen Unterschied bewirken.

FAQ: Häufige Fragen zu Alt-Texten

Braucht wirklich jedes Bild einen Alt-Text?
Nein. Rein dekorative Bilder, die keinen inhaltlichen Mehrwert bieten (z.B. Schmuckelemente, Hintergrundmuster), sollten ein leeres Alt-Attribut (alt="") erhalten. So werden sie von Screenreadern ignoriert.

Was ist mit Icons?
Wenn das Icon eine reine Dekoration neben bereits vorhandenem Text ist (z.B. ein Telefon-Icon neben der Telefonnummer), braucht es einen leeren Alt-Text. Wenn das Icon aber allein steht und eine Funktion hat (z.B. ein Hamburger-Menü-Icon), muss der Alt-Text die Funktion beschreiben (alt="Hauptmenü öffnen").

Soll ich Keywords in den Alt-Text packen?
Nur, wenn es natürlich passt. Beschreiben Sie das Bild. Wenn das Hauptkeyword Ihrer Seite zufällig auch das Bild beschreibt, ist das perfekt. Beispiel: Auf einer Seite über „Wanderrucksack kaufen“ ist alt="Blauer Deuter Wanderrucksack mit 40 Litern Volumen" ein exzellenter und hilfreicher Alt-Text, der zufällig das Keyword enthält.

Was ist der Unterschied zwischen Alt-Text und Bildunterschrift (Caption)?
Der Alt-Text beschreibt, was auf dem Bild ist. Die Bildunterschrift gibt zusätzlichen Kontext, eine Quelle an oder interpretiert das Bild. Sie ist für alle Nutzer sichtbar. Beide können sich ergänzen.

Fazit: Kleine Mühe, große Wirkung

Alt-Texte sind kein Hexenwerk. Sie sind ein grundlegendes Werkzeug für eine inklusive und qualitativ hochwertige Webseite. Indem Sie sich die Zeit nehmen, Ihre Bilder korrekt zu beschreiben, helfen Sie nicht nur Menschen mit Sehbehinderungen und Suchmaschinen. Sie zwingen sich auch selbst, den Zweck jedes einzelnen Bildes zu hinterfragen.

Die Pflege von Alt-Texten ist ein zentraler Baustein einer soliden Content-Strategie, die Hand in Hand geht mit sauberen Headings und einer logischen URL-Struktur. Wer hier die Grundlagen beherrscht, legt das Fundament für nachhaltigen Erfolg. Die SEO Grundlagen sind eben oft Handwerk, keine Magie.

Ist Ihre Webseite ein Labyrinth aus fehlenden Alt-Texten und unklaren Bildkontexten?
Wir helfen Ihnen, Licht ins Dunkel zu bringen. Mit unserem Alt-Text & Medien-Review prüfen wir Ihre wichtigsten Seiten auf Barrierefreiheit und SEO-Potenziale. Wir zeigen Ihnen, wo die größten Hebel liegen und wie Sie einen effizienten Prozess für die Zukunft aufsetzen.