Was ist ein Alt-Text und warum ist er ein entscheidender Faktor für deine Website?

Ein Alt-Text (auch Alt-Attribut oder Alternativtext genannt) ist eine textliche Beschreibung eines Bildes, die im HTML-Code hinterlegt wird. Er wird angezeigt, wenn ein Bild nicht geladen werden kann, von Screenreadern für sehbehinderte Menschen vorgelesen und von Suchmaschinen ausgewertet, um Bildinhalt und Seitenkontext zu verstehen.

Warum Alt-Texte unverzichtbar sind: Der doppelte Nutzen

Der Alt-Text ist weit mehr als eine technische Pflichtübung im HTML-Code. Er erfüllt zwei gleichwertig wichtige Funktionen, die beide direkten Einfluss auf den Erfolg deiner Website haben.

Barrierefreiheit: Deine Bilder für alle Menschen zugänglich machen

Menschen, die auf assistierende Technologien wie Screenreader angewiesen sind, können Bilder nicht visuell wahrnehmen. Der Alt-Text ist ihre einzige Möglichkeit, den Inhalt und die Bedeutung eines Bildes zu verstehen. Screenreader lesen das Alt-Attribut laut vor und ermöglichen es so blinden und sehbehinderten Nutzern, den vollständigen Kontext deiner Inhalte zu erfassen.

Aber auch in anderen Situationen ist der Alternativtext wertvoll: Bei langsamen Internetverbindungen, wenn Bilder nicht vollständig geladen werden, oder wenn ein Nutzer Bilder im Browser deaktiviert hat, wird anstelle des Bildes der Alt-Text angezeigt. So bleibt deine Website auch unter widrigen Bedingungen verständlich.

Die rechtliche Dimension solltest du ebenfalls nicht unterschätzen. Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet ab 2025 viele Unternehmen zu digitaler Barrierefreiheit. Alt-Texte sind dabei eine der grundlegendsten Anforderungen der WCAG 2.1 (Web Content Accessibility Guidelines), konkret Erfolgskriterium 1.1.1 („Nicht-Text-Inhalte“). Websites ohne korrekte Alt-Texte können abgemahnt werden.

SEO: Google versteht deine Bilder nur durch Alt-Texte

Suchmaschinen können Bilder nicht „sehen“ wie Menschen. Sie sind auf textuelle Signale angewiesen, um zu verstehen, was auf einem Bild dargestellt ist. Der Alt-Text ist das wichtigste Signal dafür. Google nutzt ihn, um:

• Bilder thematisch einzuordnen und in der Google Bildersuche zu ranken
• Den Gesamtkontext deiner Seite besser zu verstehen (topische Relevanz)
• Deine Website für relevante Suchanfragen zu bewerten

Eine gut optimierte Bildersuche-Präsenz kann erheblichen Traffic bringen. Besonders in visuell geprägten Branchen wie E-Commerce, Handwerk, Interior Design oder Gastronomie ist die Bildersuche oft ein unterschätzter Traffickanal. Produkte, Portfolio-Arbeiten oder Dienstleistungen können über aussagekräftige Alt-Texte gefunden werden.

Wichtig: Google kann mittlerweile durch KI-basierte Bilderkennung (Google Lens, Vision AI) Bildinhalte analysieren. Dennoch bleibt der Alt-Text das primäre textuelle Signal und sollte nie vernachlässigt werden.

Die Anatomie eines perfekten Alt-Textes

HTML-Syntax: So bindest du Alt-Texte ein

Das Alt-Attribut wird direkt im <img>-Tag im HTML-Code hinterlegt. Die Syntax ist simpel:

<img src="pfad/zum/bild.jpg" alt="Präzise Bildbeschreibung">

In WordPress wird das Alt-Attribut über die Mediathek gepflegt. Beim Hochladen oder Bearbeiten eines Bildes findest du das Feld „Alternativtext“ in den Bilddetails. Sobald du das Bild in einen Beitrag oder eine Seite einfügst, wird der Alt-Text automatisch in den HTML-Code übernommen.

Was macht einen guten Alt-Text aus?

Ein optimaler Alt-Text erfüllt diese Kriterien:

1. Präzision und Kontext
Beschreibe genau, was auf dem Bild zu sehen ist – aber immer im Kontext der umgebenden Inhalte. Ein Bild einer Kaffeemaschine kann verschiedene Alt-Texte haben, je nachdem, ob es in einem Produkttest, einer Kaufberatung oder einem Rezeptartikel erscheint.

2. Natürliche Sprache
Schreibe für Menschen, nicht für Maschinen. Vermeide roboterhaft wirkende Keyword-Aufzählungen. Der Text sollte flüssig und verständlich klingen, wenn ein Screenreader ihn vorliest.

3. Relevante Keywords integrieren
Nutze dein Fokus-Keyword oder semantisch verwandte Begriffe, aber nur, wenn sie natürlich zum Bildinhalt passen. Keyword-Stuffing schadet sowohl der Barrierefreiheit als auch dem SEO-Ranking.

4. Länge: 125 Zeichen als Richtwert
Viele Screenreader schneiden nach etwa 125 Zeichen ab. Versuche, die wichtigsten Informationen in diesem Rahmen unterzubringen. Bei komplexeren Bildern kannst du auch auf das longdesc-Attribut zurückgreifen, das jedoch heute kaum noch verwendet wird.

5. Keine unnötigen Phrasen
Verzichte auf Füllwörter wie „Bild von…“, „Foto von…“ oder „Grafik, die zeigt…“. Das Alt-Attribut signalisiert bereits, dass es sich um ein Bild handelt. Nutze den Platz für beschreibende Informationen.

Praxisbeispiele: Von schlecht zu optimal

Die Qualität eines Alt-Textes zeigt sich am besten im direkten Vergleich. Hier sind Beispiele aus unterschiedlichen Kontexten:

Beispiel 1: Produktbild im E-Commerce

Bild: Rote Laufschuhe auf weißem Hintergrund

❌ Schlecht:
<img src="schuhe.jpg" alt="Schuhe">
Problem: Zu generisch, kein SEO-Wert, keine hilfreiche Beschreibung.

⚠️ Mittel:
<img src="nike-laufschuhe.jpg" alt="Nike Laufschuhe rot">
Besser, aber immer noch zu knapp und ohne Kontext.

✅ Optimal:
<img src="nike-air-zoom-pegasus-40-rot.jpg" alt="Nike Air Zoom Pegasus 40 Laufschuhe in Rot, Seitenansicht auf weißem Hintergrund">
Perfekt: Marke, Modell, Farbe, Perspektive – alle relevanten Infos für Nutzer und Suchmaschinen.

Beispiel 2: Team-Foto auf Agentur-Website

Bild: Teammitglieder bei einem Workshop im Büro

❌ Schlecht:
<img src="team.jpg" alt="Team">
Problem: Nichtssagend, kein Mehrwert.

⚠️ Mittel:
<img src="team-mainagentur.jpg" alt="Unser Team bei der Arbeit">
Besser, aber zu vage.

✅ Optimal:
<img src="team-mainagentur-workshop-seo.jpg" alt="Das Team der mainagentur bei einem SEO-Workshop im Büro in Hanau">
Perfekt: Beschreibt die Situation, nennt relevante Kontextinformationen (Ort, Aktivität) und integriert Keywords natürlich.

Beispiel 3: Infografik oder Diagramm

Bild: Balkendiagramm mit Website-Traffic-Entwicklung

❌ Schlecht:
<img src="diagramm.jpg" alt="Statistik">
Problem: Gibt keine Auskunft über den Inhalt.

⚠️ Mittel:
<img src="traffic-statistik.jpg" alt="Website Traffic Statistik">
Besser, aber nicht aussagekräftig genug.

✅ Optimal:
<img src="website-traffic-2024-vergleich.jpg" alt="Balkendiagramm: Website-Traffic-Entwicklung 2024 im Monatsvergleich, mit 45% Steigerung im Dezember">
Perfekt: Erklärt Diagrammtyp, Inhalt und wichtigste Erkenntnisse – auch ohne das Bild sehen zu können, versteht man die Aussage.

Beispiel 4: Dekorative Bilder

Nicht jedes Bild transportiert Informationen. Rein dekorative Elemente wie Hintergrundmuster, Schmucklinien oder Icons ohne Bedeutung sollten ein leeres Alt-Attribut erhalten:

<img src="deko-muster.png" alt="">

Das leere alt=""-Attribut signalisiert Screenreadern, dass dieses Bild übersprungen werden kann. Das verbessert die Nutzererfahrung, weil keine irrelevanten Beschreibungen vorgelesen werden.

Achtung: Fehlt das Alt-Attribut komplett, lesen viele Screenreader stattdessen den Dateinamen vor („deko-unterstrich-muster-punkt-png“), was irritierend und unprofessionell wirkt. Ein leeres Alt-Attribut ist daher immer besser als gar keines.

Häufige Fehler und wie du sie vermeidest

Keyword-Stuffing: Der häufigste SEO-Fehler

Viele versuchen, durch übertriebene Keyword-Wiederholungen im Alt-Text bessere Rankings zu erzielen. Das Ergebnis ist meist kontraproduktiv:

❌ Beispiel Keyword-Stuffing:
<img src="pizza.jpg" alt="Pizza bestellen Pizza Lieferservice Pizza Frankfurt beste Pizza italienische Pizza online bestellen">

Google erkennt solche Manipulationen und wertet sie als Spam. Zudem ist die Nutzererfahrung für Screenreader-Nutzer katastrophal.

✅ Richtig:
<img src="pizza-margherita-frisch.jpg" alt="Frisch gebackene Pizza Margherita mit Mozzarella und Basilikum auf Holzbrett">

Redundante Formulierungen vermeiden

Beginne nie mit Phrasen wie:

• „Bild von…“
• „Foto zeigt…“
• „Grafik, die darstellt…“

Das HTML-Tag <img> kennzeichnet bereits, dass es sich um ein Bild handelt. Nutze die wertvollen Zeichen für Beschreibungen, die Mehrwert bieten.

Fehlende Alt-Texte: Der größte Barrierefreiheits-Fehler

Viele Websites haben bei einem Großteil ihrer Bilder gar keine Alt-Texte. Das ist ein gravierender Verstoß gegen Barrierefreiheitsstandards und verschenkt SEO-Potenzial.

Checkliste für deine Website:

• Prüfe jedes Bild einzeln in der Mediathek (WordPress) oder im HTML-Code
• Nutze Browser-Tools wie die Web Developer Extension oder axe DevTools, um fehlende Alt-Attribute automatisch zu finden
• Achte besonders auf nachträglich eingefügte Bilder in älteren Beiträgen

Automatisch generierte Alt-Texte

Einige Systeme oder Plugins generieren automatisch Alt-Texte aus Dateinamen:

<img src="IMG_20241215_143022.jpg" alt="IMG_20241215_143022">

Das hilft niemandem. Nimm dir die Zeit, aussagekräftige Alt-Texte manuell zu erstellen – oder nutze KI-Tools wie die Bildbeschreibungsfunktion in WordPress (ab Version 6.4 experimentell verfügbar), aber prüfe die Ergebnisse immer manuell.

Alt-Text-Optimierung in verschiedenen CMS

WordPress: Alt-Texte in der Mediathek pflegen

In WordPress kannst du Alt-Texte an zwei Stellen bearbeiten:

1. Beim Upload in der Mediathek:
Nach dem Hochladen eines Bildes öffnet sich das Detailfeld. Hier findest du das Feld „Alternativtext“. Fülle es sofort aus – so vergisst du es nicht.

2. Nachträglich in der Mediathek:
Gehe zu „Medien“ → „Mediathek“, klicke auf das Bild und bearbeite das Alt-Text-Feld.

Tipp: Plugins wie SEO Framework oder Rank Math zeigen dir in der Beitragserstellung an, welche Bilder noch keinen Alt-Text haben. Das erleichtert die Kontrolle.

Shopify, Wix und andere Systeme

Die meisten modernen Website-Baukästen bieten dedizierte Felder für Alt-Texte:

• Shopify: Im Produkteditor unter „Media“ → Bildname anklicken → „Alt text“
• Wix: Im Bildeditor unter „Einstellungen“ → „Alt-Text“
• Squarespace: Beim Hochladen in den Bildeinstellungen

Alt-Texte und SEO: Die Rolle in der Bildersuche

Die Google Bildersuche ist ein unterschätzter Traffickanal. Besonders in visuell dominierten Branchen (Mode, Interior Design, Handwerk, Gastronomie) stammt ein signifikanter Anteil des organischen Traffics aus Bildersuchergebnissen.

Wie Alt-Texte das Ranking in der Bildersuche beeinflussen

Google bewertet Bilder anhand mehrerer Faktoren:

1. Dateiname: Ein beschreibender Dateiname (seo-workshop-frankfurt.jpg statt IMG_1234.jpg) hilft.
2. Alt-Text: Der wichtigste Rankingfaktor für Bilder.
3. Umliegender Text: Der Kontext, in dem das Bild eingebettet ist (Überschriften, Absätze).
4. Bildqualität und Größe: Hochauflösende Bilder werden bevorzugt.
5. Structured Data: Schema Markup (z. B. ImageObject) kann zusätzlichen Kontext liefern.

Best Practices für Bildersuche-Optimierung

• Einzigartiger Alt-Text pro Bild: Auch ähnliche Bilder sollten individuell beschrieben werden.
• Fokus-Keyword natürlich integrieren: Wenn es zum Bildinhalt passt.
• Lokale Keywords verwenden: Für lokal agierende Unternehmen kann die Integration von Städtenamen sinnvoll sein („Hochzeitsfotograf München“).
• Mobile Optimierung: Bilder sollten responsiv eingebunden sein, da die Bildersuche stark mobil genutzt wird.

Alt-Texte und strukturierte Daten (Schema Markup)

Für zusätzlichen SEO-Boost kannst du Alt-Texte mit strukturierten Daten kombinieren. Das ImageObject-Schema ermöglicht es, zusätzliche Informationen wie Bildunterschriften, Lizenzen oder Credits zu hinterlegen:

{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "contentUrl": "https://example.com/bild.jpg",
  "description": "Team der mainagentur bei einem SEO-Workshop",
  "name": "SEO-Workshop Hanau 2024",
  "author": {
    "@type": "Person",
    "name": "Tim Ehling"
  }
}

Diese zusätzliche Strukturierung kann die Sichtbarkeit in Rich Results erhöhen.

Alt-Texte automatisiert prüfen: Tools und Workflows

Manuelles Durchgehen jeder Seite ist bei größeren Websites unpraktikabel. Diese Tools helfen:

Browser-Extensions

• Web Developer Extension (Chrome/Firefox): Zeigt alle Alt-Texte auf einer Seite an.
• axe DevTools: Prüft automatisch auf fehlende oder problematische Alt-Texte.
• WAVE (WebAIM): Kostenlose Accessibility-Evaluierung direkt im Browser.

SEO-Tools

• Screaming Frog SEO Spider: Crawlt deine gesamte Website und listet Bilder ohne Alt-Text auf.
• Google Search Console: Zeigt Indexierungsprobleme bei Bildern (indirekt).
• Rank Math / Yoast SEO (WordPress): Weist in der Beitragsbearbeitung auf fehlende Alt-Texte hin.

Automatisierte Tests

Wenn du regelmäßig neue Inhalte veröffentlichst, solltest du einen wiederkehrenden Check etablieren:

1. Crawl mit Screaming Frog: Wöchentlich oder nach größeren Inhalts-Updates.
2. Manuelle Stichproben: Besonders bei neuen Landingpages oder Kategorien.
3. Accessibility-Audits: Quartalsweise mit Tools wie Lighthouse (Chrome DevTools).

Alt-Texte in mehrsprachigen Websites

Bei mehrsprachigen Websites muss jede Sprache individuelle Alt-Texte erhalten. Eine simple Übersetzung des deutschen Alt-Textes reicht oft nicht aus, da kulturelle Kontexte und Suchintentionen variieren können.

Beispiel:

Deutsch:
alt="Traditionelle bayerische Brezel mit grobem Salz auf Holzbrett"

Englisch:
alt="Traditional Bavarian pretzel with coarse salt on wooden board"

Achte darauf, dass auch lokalisierte Keywords in der jeweiligen Zielsprache verwendet werden.

Checkliste: Alt-Texte richtig implementieren

✅ Jedes informative Bild hat einen Alt-Text
✅ Dekorative Bilder haben ein leeres Alt-Attribut (alt="")
✅ Alt-Texte sind präzise und beschreibend (max. 125 Zeichen)
✅ Keine Keyword-Stuffing-Praktiken
✅ Keine redundanten Phrasen („Bild von…“)
✅ Fokus-Keywords natürlich integriert
✅ Dateinamen sind beschreibend
✅ Bilder in hoher Qualität, aber komprimiert (PageSpeed)
✅ Responsive Einbindung für mobile Geräte
✅ Regelmäßige Audits mit Tools (Screaming Frog, axe DevTools)

Alt-Texte und die Zukunft: KI-gestützte Bildbeschreibungen

KI-Modelle wie GPT-4 Vision oder Google Cloud Vision API können automatisch Bildbeschreibungen generieren. WordPress experimentiert ab Version 6.4 mit solchen Features. Doch Vorsicht: KI-generierte Alt-Texte sollten immer manuell geprüft werden, da sie:

• Kontext nicht immer korrekt erfassen
• Über- oder unterdetailliert sein können
• Keywords nicht sinnvoll integrieren

Nutze KI als Ausgangspunkt, aber verfeinere die Texte manuell.

Rechtliche Aspekte: BFSG, WCAG und Abmahnrisiken

Seit 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG), das digitale Barrierefreiheit für viele Unternehmen verpflichtend macht. Alt-Texte sind Teil der WCAG 2.1 Level AA-Konformität.

Wer ist betroffen?

• Unternehmen mit mehr als 10 Mitarbeitenden
• Öffentliche Einrichtungen (sowieso seit BITV 2.0)
• E-Commerce-Anbieter

Abmahnrisiko:
Fehlende Alt-Texte können als Diskriminierung nach AGG (Allgemeines Gleichbehandlungsgesetz) abgemahnt werden. Zwar sind Abmahnungen wegen fehlender Barrierefreiheit aktuell noch selten, aber die Tendenz steigt.

Empfehlung: Behandle Barrierefreiheit nicht als Compliance-Übung, sondern als Chance, mehr Nutzer zu erreichen und bessere Rankings zu erzielen.

Fazit: Alt-Texte sind Pflicht, keine Kür

Ein durchdachter Alt-Text ist weit mehr als ein technisches Detail. Er ist die Brücke zwischen deinen visuellen Inhalten und zwei kritischen Zielgruppen: Menschen mit Sehbehinderungen und Suchmaschinen.

Die Investition lohnt sich mehrfach:

• Bessere SEO-Performance durch höhere thematische Relevanz und Rankings in der Bildersuche
• Erhöhte Barrierefreiheit und inklusivere Nutzererfahrung
• Rechtssicherheit im Hinblick auf BFSG und WCAG-Konformität
• Professionelleres Erscheinungsbild deiner Website

Nimm dir die Zeit, Alt-Texte bewusst zu formulieren. Deine Nutzer – und Google – werden es dir danken.

Du möchtest deine Website auf fehlende Alt-Texte prüfen lassen?

Unser kostenloser Website-Check deckt nicht nur fehlende Alt-Texte auf, sondern analysiert auch weitere SEO- und Barrierefreiheits-Aspekte. Lass uns gemeinsam herausfinden, welches ungenutzte Potenzial in deiner Website steckt.

Jetzt kostenlosen Website-Check anfragen