Bilder transportieren Informationen, Emotionen, Produkte, Belege und Orientierung. Für Nutzer, die ein Bild sehen können, ist der Inhalt oft sofort klar. Für Screenreader, Suchmaschinen, Crawler und Systeme mit Künstlicher Intelligenz (KI) ist ein Bild ohne Textalternative dagegen nur eingeschränkt verständlich.

Genau hier setzt der RankScan-Insight „Fehlende Alt-Texte“ an.

Der Insight bedeutet: RankScan hat Bilder gefunden, bei denen das alt-Attribut fehlt, leer ist oder nicht sinnvoll gepflegt wurde. Das ist ein Website-Health-Thema mit Priorität Mittel, weil fehlende Alt-Texte selten allein ein Ranking-Problem auslösen, aber Barrierefreiheit, Bildersuche, Content-Verständnis und technische Qualität schwächen können.

Wichtig ist die richtige Einordnung:

ist primär eine Textalternative für Menschen. ist ein zusätzlicher Nutzen – nicht der Hauptzweck.

In diesem Artikel erfährst du, wann ein Bild einen Alt-Text braucht, wann alt="" korrekt ist, wie du gute Alternativtexte schreibst und wie du fehlende Alt-Texte systematisch mit RankScan behebst.


  • Der Alt-Text steht im alt-Attribut eines <img>-Elements.
  • Er beschreibt den Zweck oder Inhalt eines Bildes, wenn das Bild nicht gesehen oder geladen werden kann.
  • Für Screenreader ist Alt-Text eine zentrale Textalternative.
  • Für Google hilft Alt-Text, Bilder und den Kontext der Seite besser zu verstehen.
  • Nicht jedes Bild braucht einen beschreibenden Alt-Text.
  • Dekorative Bilder sollten ein leeres alt="" erhalten, damit Screenreader sie überspringen.
  • Funktionale Bilder brauchen einen Alt-Text, der die Funktion beschreibt, nicht das Aussehen.
  • Komplexe Grafiken brauchen einen kurzen Alt-Text plus eine ausführliche Beschreibung im sichtbaren Text.
  • -Stuffing im Alt-Text schadet Barrierefreiheit und wirkt unprofessionell.
  • Ein guter Alt-Text-Check priorisiert nach Bildtyp, Seitentyp, Traffic, Bildersuche-Potenzial und Accessibility-Relevanz.

Was ist ein Alt-Text? #

Ein Alt-Text ist eine Textalternative für ein Bild. Er wird im (Hypertext Markup Language, der Auszeichnungssprache für Webseiten) im alt-Attribut des <img>-Tags hinterlegt.

Beispiel:

html
<img
  src="wanderstiefel-meindl-bhutan.jpg"
  alt="Brauner Meindl Bhutan Wanderstiefel aus Leder auf felsigem Untergrund"
  width="800"
  height="600"
>

Der Alt-Text wird genutzt, wenn:

  • ein Screenreader den Bildinhalt vorliest,
  • das Bild nicht geladen werden kann,
  • Suchmaschinen den Bildinhalt einordnen,
  • Crawler Kontext aus dem HTML extrahieren,
  • Bilder in der Bildersuche verstanden werden sollen.

Die W3C Web Accessibility Initiative (WAI) erklärt, dass Alt-Text je nach Bildtyp und Kontext unterschiedlich gewählt werden muss. Entscheidend ist nicht nur, was auf dem Bild zu sehen ist, sondern welche Funktion das Bild auf der konkreten Seite erfüllt.
Quelle: W3C WAI – Images Tutorial


Was bedeutet „Fehlende Alt-Texte“? #

Der RankScan-Insight „Fehlende Alt-Texte“ bedeutet: Auf einer Seite gibt es Bilder, deren alt-Attribut fehlt oder nicht sinnvoll gepflegt ist.

Typische Fälle:

  • alt fehlt komplett,
  • alt="" bei informativen Bildern,
  • Dateiname als Alt-Text,
  • Keyword-Stuffing,
  • generische Texte wie „Bild“ oder „Grafik“,
  • identischer Alt-Text für viele unterschiedliche Bilder,
  • Produktbilder ohne Produktbeschreibung,
  • Infografiken ohne erklärenden Kontext,
  • Icons mit unklarer Funktion,
  • Logos ohne funktionalen Alt-Text.

Wichtig: Ein leerer Alt-Text ist nicht automatisch falsch. Bei dekorativen Bildern ist alt="" korrekt und sogar erwünscht.


Alt-Text ist nicht gleich Alt-Tag #

Umgangssprachlich sprechen viele von Alt Tag Bilder oder Alt-Tag. Technisch korrekt ist aber:

alt-Attribut

Ein <img>-Element ist ein HTML-Tag. alt ist ein Attribut dieses Tags.

Korrekt:

html
<img src="bild.jpg" alt="Beschreibung des Bildes">

Unpräzise, aber verbreitet:

Alt-Tag

Für Suchverhalten und Content ist der Begriff „Alt-Tag“ trotzdem relevant, weil viele Nutzer danach suchen. Im Artikel sollte aber die korrekte technische Bezeichnung erklärt werden.


Warum Alt-Texte für Barrierefreiheit wichtig sind #

Der wichtigste Zweck von Alt-Text ist Barrierefreiheit.

Menschen, die Screenreader nutzen, können Bilder nicht visuell erfassen. Der Alt-Text liefert ihnen die relevante Information oder Funktion des Bildes.

Die Web Content Accessibility Guidelines (WCAG), die Richtlinien für barrierefreie Webinhalte, verlangen in Success Criterion 1.1.1 (Version 2.2), dass Nicht-Text-Inhalte eine Textalternative haben, damit Informationen in anderer Form wahrnehmbar sind.
Quelle: W3C – WCAG 2.2 Non-text Content

W3C beschreibt das Ziel von kurzen Textalternativen so: Die Textalternative soll denselben Zweck erfüllen und dieselbe Information vermitteln wie der Nicht-Text-Inhalt.
Quelle: W3C – Technique G94

Das bedeutet:

Ein guter Alt-Text beschreibt nicht immer jedes sichtbare Detail. Er vermittelt die relevante Information oder Funktion des Bildes im jeweiligen Kontext.


Warum Alt-Texte für SEO hilfreich sind #

Google empfiehlt, beschreibende Dateinamen, Alt-Texte und Kontext rund um Bilder zu nutzen. Alt-Text hilft Google, den Inhalt eines Bildes zu verstehen und kann besonders für Google Bilder relevant sein.
Quelle: Google Search Central – Image SEO best practices

Alt-Texte können SEO unterstützen, weil sie:

  • Bildinhalte beschreiben,
  • Google Bilder mehr Kontext geben,
  • den thematischen Kontext der Seite ergänzen,
  • bei Produktbildern relevante Details liefern,
  • bei Infografiken die Einordnung verbessern,
  • Barrierefreiheit und Nutzererfahrung stärken.

Realistisch ist aber:

Alt-Text ist kein Ranking-Hack. Ein guter Alt-Text macht ein Bild verständlicher. Er ersetzt keine gute Seite, keine passenden Bilder und keinen hilfreichen Content.


Alt-Texte und KI-Sichtbarkeit #

KI-Systeme und Suchsysteme arbeiten stark mit Text. Wenn wichtige Bildinformationen nur visuell vorhanden sind, können sie je nach Crawler, und System schwerer verarbeitet werden.

Alt-Texte können helfen, visuelle Inhalte textlich verfügbar zu machen. Das ist besonders relevant bei:

  • Produktbildern,
  • erklärenden Screenshots,
  • Diagrammen,
  • Infografiken,
  • Prozessgrafiken,
  • UI-Abbildungen,
  • Personen- oder Autorenbildern mit inhaltlichem Bezug.

Trotzdem gilt:

Alt-Text garantiert keine KI-Erwähnung oder Citation. Er verbessert nur die maschinenlesbare Beschreibung visueller Inhalte.

Google beschreibt und AI Mode als Suchfunktionen, in denen Inhalte aus dem Web erscheinen können. Website-Betreiber sollen hilfreiche, verlässliche Inhalte bereitstellen und die technische Zugänglichkeit sicherstellen.
Quelle: Google Search Central – AI features and your website

Für RankScan ist Alt-Text deshalb ein Baustein der AI-Readiness (Artificial Intelligence, englisch für Künstliche Intelligenz), aber kein isolierter Hebel der Generative Engine Optimization ().


Die wichtigste Frage: Welche Aufgabe hat das Bild? #

Bevor du einen Alt-Text schreibst, frage:

Welche Aufgabe erfüllt dieses Bild auf dieser Seite?

Je nach Antwort ändert sich der Alt-Text.

BildtypAufgabeAlt-Text
Informatives Bildvermittelt InhaltBildinhalt kurz beschreiben
Funktionales Bildlöst Aktion aus oder ist LinkFunktion/Ziel beschreiben
Dekoratives Bildnur Gestaltungalt=""
Komplexe Grafikenthält viele Datenkurze Zusammenfassung + lange Beschreibung im Text
Bild mit TextTextinhalt vermittelnsichtbaren Text als Text bereitstellen
LogoIdentität oder LinkMarkenname oder Linkziel
ProduktbildProdukt sichtbar machenProdukt und relevante Merkmale nennen

W3C WAI bietet dafür einen Alt-Decision-Tree, der hilft zu entscheiden, ob ein Bild informativ, dekorativ, funktional oder komplex ist.
Quelle: W3C WAI – Alt Decision Tree


Gute Alt-Texte schreiben: Die Grundregeln #

1. Zweck statt jedes Detail beschreiben #

Ein Alt-Text muss nicht alles beschreiben, was sichtbar ist. Er soll die relevante Information transportieren.

Beispiel im Shop:

html
alt="Roter Hilleberg Zwei-Personen-Tunnelzelt aufgebaut auf einer Wiese"

Nicht nötig:

html
alt="Rotes Zelt auf grüner Wiese mit drei Bäumen im Hintergrund, bewölktem Himmel, einem Stein links unten und einer Falte in der Plane"

2. Kurz, konkret und natürlich schreiben #

Ein guter Alt-Text ist meist ein kurzer Satz oder eine kurze Phrase.

W3C WAI empfiehlt, Alt-Texte so knapp wie möglich zu halten. Wenn mehr als ein kurzer Satz nötig ist, sollte zusätzlich eine längere Beschreibung im sichtbaren Text oder über andere Methoden bereitgestellt werden.
Quelle: W3C WAI – Images Tutorial: Tips and Tricks

Praktische Orientierung:

so kurz wie möglich, so lang wie nötig

Die oft genannte 125-Zeichen-Regel ist eine hilfreiche Faustregel, aber kein offizielles Limit. Entscheidend ist Verständlichkeit.


3. Keine Einleitung mit „Bild von“ #

Schwach:

html
alt="Bild von einem Hund auf einer Wiese"

Besser:

html
alt="Golden Retriever läuft über eine Wiese"

Warum? Screenreader kündigen Bilder oft bereits als Grafik oder Bild an. „Bild von“ ist deshalb meist redundant.

Ausnahme: Wenn die Bildart inhaltlich wichtig ist.

Beispiel:

html
alt="Satellitenbild des Gletscherrückgangs im Wallis"

Hier ist „Satellitenbild“ relevant.


4. Keywords nur verwenden, wenn sie wirklich passen #

Alt-Texte dürfen Keywords enthalten, wenn sie das Bild natürlich beschreiben.

Gut:

html
alt="Meta-Description-Feld im WordPress-SEO-Plugin"

Schlecht:

html
alt="meta description seo meta description länge meta beschreibung google snippet"

Keyword-Stuffing schadet Nutzererfahrung und wirkt spammy.


5. Funktionale Bilder nach Funktion beschreiben #

Wenn ein Bild als Link oder Button dient, zählt die Funktion.

Logo als Link zur Startseite:

html
<a href="/">
  <img src="logo.svg" alt="RankScan Startseite">
</a>

Such-Icon als Button:

html
<button type="submit">
  <img src="search.svg" alt="Suchen">
</button>

Nicht:

html
alt="Lupe"

wenn die Funktion „Suchen“ ist.


6. Dekorative Bilder mit leerem Alt-Attribut auszeichnen #

Dekorative Bilder liefern keine relevante Information.

Beispiele:

  • Hintergrundmuster,
  • Schmuckgrafiken,
  • Trennlinien,
  • rein dekorative Illustrationen,
  • Icons neben bereits vorhandenem Text,
  • abstrakte Formen ohne Aussage.

Korrekt:

html
<img src="linie.svg" alt="">

Nicht:

html
<img src="linie.svg">

Das alt-Attribut sollte vorhanden sein, aber leer. So können Screenreader das Bild überspringen.


Gute und schlechte Alt-Texte: Beispiele #

SituationSchlechtBesser
Produktbildalt="Schuh"alt="Brauner Meindl Bhutan Wanderstiefel aus Leder"
Dateinamealt="IMG_2843.jpg"alt="Frau repariert Fahrradreifen in einer Werkstatt"
Keyword-Stuffingalt="wanderschuhe kaufen schweiz outdoor trekking schuhe"alt="Wanderstiefel auf felsigem Bergpfad"
Dekoratives Bildalt="blauer Hintergrund"alt=""
Logo-Linkalt="Logo"alt="RankScan Startseite"
Such-Iconalt="Lupe"alt="Suchen"
Infografikalt="Grafik"alt="Balkendiagramm zum organischen Traffic nach Kanal"
Screenshotalt="Screenshot"alt="Google Search Console Bericht mit sinkenden Klicks"

Alt-Text für verschiedene Bildtypen #

Produktbilder #

Produktbilder sollten Produktname und relevante sichtbare Merkmale nennen.

Gut:

html
alt="Schwarze wasserdichte Ortlieb Fahrradtasche am Gepäckträger"

Nicht nötig:

html
alt="Produktbild"

Bei mehreren Produktbildern sollten die Alt-Texte nicht identisch sein.

Beispiel:

html
alt="Schwarze Ortlieb Fahrradtasche von vorne"
alt="Schwarze Ortlieb Fahrradtasche am Gepäckträger montiert"
alt="Innenfach der schwarzen Ortlieb Fahrradtasche"

Blog- und Ratgeberbilder #

Bei Ratgeberbildern zählt der Zusammenhang.

Artikel über :

html
alt="Abgebrochene Verbindung zwischen Webseite und Suchergebnis"

Artikel über JavaScript-SEO:

html
alt="Quellcode mit leerem App-Container vor JavaScript-Rendering"

Vermeide generische Texte wie:

html
alt="SEO Bild"

Screenshots #

Screenshots sollten beschreiben, was für die Aussage relevant ist.

Gut:

html
alt="PageSpeed Insights zeigt schlechten LCP-Wert für mobile Nutzer"

Bei komplexen Screenshots sollte der relevante Wert zusätzlich im Fliesstext stehen.


Infografiken und Diagramme #

Komplexe Grafiken brauchen zwei Ebenen:

  1. kurzer Alt-Text,
  2. ausführliche Beschreibung im sichtbaren Text.

Beispiel:

html
<figure>
  <img src="traffic-kanäle.png" alt="Balkendiagramm mit organischem Traffic als stärkstem Kanal">
  <figcaption>Organischer Traffic macht 48 % der Sitzungen aus, gefolgt von Direct mit 31 % und Paid Search mit 14 %.</figcaption>
</figure>

Noch besser bei Daten: eine HTML-Tabelle direkt unter der Grafik.

Wichtig:

Wichtige Daten sollten nicht nur im Bild stehen.


Bilder mit Text #

Text in Bildern ist problematisch, wenn er nicht auch als echter HTML-Text vorhanden ist.

Wenn ein Bild sichtbaren Text enthält, sollte dieser Text entweder:

  • im Alt-Text enthalten sein,
  • im umgebenden Fliesstext stehen,
  • als HTML-Text statt im Bild umgesetzt werden.

Beispiel für ein Zitatbild:

html
alt="Zitat: Gute Alt-Texte beschreiben den Zweck eines Bildes, nicht jedes Pixel."

Besser ist oft, das Zitat als echten Text auf der Seite auszugeben.


Icons #

Icons sind häufig dekorativ oder funktional.

Icon neben Text:

html
<img src="check.svg" alt="">
<span>Kostenlose Lieferung</span>

Icon ohne Text, als Button:

html
<button aria-label="Warenkorb öffnen">
  <img src="cart.svg" alt="">
</button>

Oder:

html
<button>
  <img src="cart.svg" alt="Warenkorb öffnen">
</button>

Wichtig ist, dass die Funktion für Screenreader verständlich ist.


Logos #

Ein Logo kann unterschiedliche Aufgaben haben.

Logo als Identität im Footer:

html
<img src="logo.svg" alt="RankScan">

Logo als Link zur Startseite:

html
<a href="/">
  <img src="logo.svg" alt="RankScan Startseite">
</a>

Logo rein dekorativ neben bereits sichtbarem Markennamen:

html
<img src="logo-symbol.svg" alt="">
<span>RankScan</span>

Alt-Text vs. Title-Attribut vs. Bildunterschrift #

Diese drei Elemente werden oft verwechselt.

ElementSichtbar?Zweck
altnur bei Ladefehler oder für ScreenreaderTextalternative für Bildinhalt oder Funktion
titlemeist als Hover-TooltipZusatzinfo, meist nicht nötig
figcaptionsichtbarBildunterschrift und Kontext für alle Nutzer

Alt-Attribut #

html
<img src="diagramm.png" alt="Balkendiagramm zeigt steigende organische Klicks">

Title-Attribut #

html
<img src="diagramm.png" alt="Balkendiagramm zeigt steigende organische Klicks" title="Klickentwicklung 2026">

Das title-Attribut sollte nicht als Ersatz für Alt-Text verwendet werden. Es ist für Accessibility und mobile Nutzung oft unzuverlässig.

Bildunterschrift #

html
<figure>
  <img src="diagramm.png" alt="Balkendiagramm zeigt steigende organische Klicks">
  <figcaption>Die organischen Klicks steigen nach dem Content Refresh über 12 Wochen.</figcaption>
</figure>

figcaption ist sichtbar und daher besonders wertvoll für Kontext.


Alt-Text und Dateiname #

Der Dateiname ist nicht dasselbe wie Alt-Text, kann aber zusätzlich helfen.

Schwach:

IMG_9921.jpg

Besser:

brauner-meindl-wanderstiefel-leder.jpg

Google empfiehlt auch beschreibende Dateinamen für Bilder.
Quelle: Google Search Central – Image SEO best practices

Trotzdem gilt:

Ein guter Dateiname ersetzt keinen Alt-Text.


Priorisierung: Welche Bilder sind wichtig? #

Nicht jedes fehlende Alt-Attribut hat dieselbe Priorität.

BildtypPrioritätWarum
Produktbild im ShopHochAccessibility, Bildersuche, Conversion
Infografik mit DatenHochwichtige Information sonst unsichtbar
Screenshot in AnleitungHochVerständnis des Guides
Logo-Link ohne TextHochFunktion unklar
Icon-Button ohne TextHochBedienbarkeit betroffen
Hero-Bild mit inhaltlicher AussageMittel bis hochKontext und Nutzererwartung
Blogbild ohne InformationswertMittelabhängig vom Kontext
dekoratives HintergrundbildNiedrigkorrekt mit alt=""
Trennlinie oder OrnamentNiedrigalt="" genügt
Social-Icon mit sichtbarem TextNiedrig bis mittelKontext prüfen

Die wichtigste Regel:

Zuerst Bilder bearbeiten, die Informationen, Funktionen oder Conversion-Relevanz tragen.


Was tun nach einem RankScan-Fund? #

Wenn RankScan „Fehlende Alt-Texte“ meldet, solltest du strukturiert vorgehen.

Schritt 1: Bilder exportieren #

Sammle pro Bild:

  • URL der Seite,
  • Bild-URL,
  • aktueller Alt-Text,
  • Bildtyp,
  • Seitentyp,
  • Bildposition,
  • Traffic der Seite,
  • Bildersuche-Potenzial,
  • dekorativ oder informativ,
  • funktional oder nicht.

Schritt 2: Bildtyp bestimmen #

Entscheide für jedes Bild:

informativ?
funktional?
dekorativ?
komplex?
Text im Bild?
Logo?
Icon?
Produktbild?

Ohne diese Entscheidung entstehen schnell falsche Alt-Texte.


Schritt 3: Dekorative Bilder korrekt leeren #

Für dekorative Bilder:

html
alt=""

Nicht:

html
alt="dekoratives Bild"

und nicht:

html
<img src="deko.svg">

Schritt 4: Informative Bilder beschreiben #

Für relevante Bilder:

  • kurz,
  • konkret,
  • sachlich,
  • im Kontext der Seite,
  • ohne Keyword-Stuffing,
  • ohne unnötiges „Bild von“,
  • mit wichtigen sichtbaren Details.

Schritt 5: Funktionale Bilder prüfen #

Für Bild-Links und Icon-Buttons:

  • beschreibt der Alt-Text die Funktion?
  • gibt es sichtbaren Text daneben?
  • gibt es ein aria-label?
  • ist die Bedienung per Tastatur möglich?
  • ist das Bild eventuell dekorativ, weil die Funktion schon anders beschrieben ist?

Schritt 6: Komplexe Grafiken ergänzen #

Für Diagramme und Infografiken:

  • kurzer Alt-Text,
  • sichtbare Zusammenfassung,
  • Daten im Fliesstext oder Tabelle,
  • Quellen nennen,
  • keine wichtigen Zahlen nur im Bild.

Schritt 7: Publishing-Prozess anpassen #

Alt-Texte sollten nicht erst im Audit entstehen.

In den Workflow aufnehmen:

  • Bild hochladen,
  • sprechenden Dateinamen prüfen,
  • Alt-Text schreiben,
  • Caption prüfen,
  • dekorative Bilder markieren,
  • Infografikdaten im Text ergänzen,
  • Review vor Veröffentlichung.

WordPress, Shopify und die Praxis im Content-Management-System (CMS) #

WordPress #

In WordPress kannst du Alt-Texte in der Mediathek oder direkt im Gutenberg-Editor pflegen.

Wichtig:

  • Der Alt-Text in der Mediathek wird nicht immer rückwirkend auf bereits eingefügte Bilder angewendet.
  • Prüfe bestehende Seiten nach dem Update.
  • Vermeide automatische Alt-Texte aus Dateinamen.
  • Für dekorative Bilder ist je nach Theme/Block ein leeres Alt-Attribut nötig.

Shopify #

In Shopify können Produktbilder direkt mit Alt-Texten versehen werden.

Wichtig:

  • Produktname und relevante Merkmale nennen,
  • Variantenbilder unterscheiden,
  • keine Keyword-Listen,
  • Alt-Texte in Bulk-Prozessen prüfen,
  • Übersetzungen für mehrsprachige Shops beachten.

Headless CMS und individuelle Systeme #

Bei Headless-Setups sollte das Bildmodell ein Alt-Text-Feld enthalten.

Prüfe:

  • ist Alt-Text Pflicht oder optional?
  • kann ein Bild je Kontext unterschiedlichen Alt-Text haben?
  • werden dekorative Bilder unterstützt?
  • wird alt="" korrekt gerendert?
  • gibt es Fallbacks?
  • werden Alt-Texte in allen Sprachen gepflegt?

Wichtig: Ein Bild kann je nach Kontext einen anderen Alt-Text brauchen. Ein globaler Mediathek-Alt-Text ist nicht immer ausreichend.


Worauf ein guter Alt-Text-Check achtet #

Ein guter Alt-Text-Check sollte mehr leisten als „alt fehlt“.

Ein guter Check prüft:

  • Bilder ohne alt-Attribut,
  • Bilder mit leerem alt,
  • ob leeres alt bei dekorativen Bildern plausibel ist,
  • Dateinamen als Alt-Text,
  • generische Alt-Texte,
  • sehr lange Alt-Texte,
  • Keyword-Stuffing,
  • identische Alt-Texte für unterschiedliche Bilder,
  • Produktbilder ohne Produktbezug,
  • Icons ohne zugängliche Funktion,
  • Bild-Links ohne sinnvollen Text,
  • Infografiken ohne umgebende Erklärung,
  • Bilder mit eingebettetem Text,
  • Seitentyp und Bildposition,
  • Traffic und Bildersuche-Potenzial,
  • Mehrsprachigkeit,
  • -Template-Probleme.

So wird „Fehlende Alt-Texte“ zu einer priorisierbaren Website-Health-Aufgabe.


Beispiel: Produktbilder ohne Alt-Text im Shop #

Ausgangslage #

Ein Schweizer Outdoor-Shop hat hochwertige Produktfotos. Die Bilder sind aber im CMS nur mit Dateinamen gepflegt.

RankScan meldet:

„Fehlende Alt-Texte“

Analyse #

  • Produktbilder haben fehlende Alt-Texte.
  • Einige Alt-Texte bestehen aus IMG_4421.jpg.
  • Variantenbilder sind nicht unterscheidbar.
  • Dekorative Icons haben teilweise unnötige Texte.
  • Bildersuche bringt kaum Klicks.
  • Screenreader-Nutzer erhalten wenig Produktinformation.

Lösung #

  1. Bestseller-Produkte priorisieren.
  2. Produktbilder nach Produktname, Farbe, Modell und Ansicht beschreiben.
  3. Variantenbilder differenzieren.
  4. Dekorative Icons auf alt="" setzen.
  5. Dateinamen für neue Bilder sprechend vergeben.
  6. Produktdaten und Bildbeschreibungen im CMS-Prozess verankern.
  7. RankScan erneut .
  8. Google Search Console Bildersuche über mehrere Wochen beobachten.

Ergebnis #

Die Produktseiten werden zugänglicher, Bilder sind besser beschrieben und Google erhält mehr Kontext für die Bildersuche. Mehr Traffic ist möglich, aber nicht garantiert – er hängt auch von Bildqualität, Nachfrage, Wettbewerb und ab.


Häufige Fehler bei Alt-Texten #

Fehler 1: Alt-Attribut fehlt komplett #

Für informative Bilder ist das ein klares Problem.


Fehler 2: Dekorative Bilder beschreiben #

Screenreader lesen dann irrelevante Gestaltungselemente vor.


Fehler 3: Keyword-Stuffing #

Alt-Texte sind keine Keyword-Ablage.


Fehler 4: Dateiname als Alt-Text #

IMG_1234.jpg hilft niemandem.


Fehler 5: Jede Bildvariante gleich beschreiben #

Variantenbilder im Shop brauchen unterscheidbare Beschreibungen.


Fehler 6: Funktionale Bilder nach Aussehen beschreiben #

Bei Icon-Buttons zählt die Aktion, nicht das Icon.


Fehler 7: Wichtige Daten nur im Bild zeigen #

Diagramme und Infografiken brauchen sichtbare Text- oder Tabellenbeschreibung.


Fehler 8: Alt-Text automatisch generieren und nie prüfen #

KI oder CMS-Fallbacks können helfen, aber Alt-Texte sollten redaktionell geprüft werden.


Checkliste: Gute Alt-Texte schreiben #

Nutze diese Checkliste:

  • Hat jedes <img> ein alt-Attribut?
  • Ist das Bild informativ, funktional, dekorativ oder komplex?
  • Hat jedes informative Bild eine konkrete Beschreibung?
  • Haben dekorative Bilder alt=""?
  • Beschreiben funktionale Bilder die Aktion oder das Ziel?
  • Sind Produktbilder nach Modell, Farbe, Ansicht oder Merkmal unterscheidbar?
  • Vermeidet der Alt-Text Keyword-Stuffing?
  • Vermeidet der Alt-Text unnötiges „Bild von“?
  • Sind komplexe Grafiken im Text oder in einer Tabelle erklärt?
  • Sind Bilder mit Text auch als echter Text verfügbar?
  • Gibt es keine Dateinamen als Alt-Text?
  • Sind Alt-Texte in allen Sprachversionen gepflegt?
  • Ist der CMS-Workflow angepasst?
  • Wurde nach dem Fix erneut gecrawlt?

Ergänzend dazu helfen semantisches HTML, Thin Content und hochwertige Inhalte, Schema Markup und E-E-A-T, um die Ursache sauber einzugrenzen und die nächsten SEO-Massnahmen zu priorisieren.

Häufig gestellte Fragen (FAQ) zu Alt-Texten für Bilder #

Was ist ein Alt-Text? #

Ein Alt-Text ist eine Textalternative für ein Bild. Er steht im alt-Attribut des <img>-Tags und beschreibt den Inhalt oder Zweck des Bildes.

Was ist der Unterschied zwischen Alt-Text und Alt-Attribut? #

Der Alt-Text ist der Inhalt. Das Alt-Attribut ist die HTML-Stelle, an der dieser Text hinterlegt wird.

Ist „Alt Tag“ korrekt? #

Technisch nicht ganz. Korrekt ist alt-Attribut. Der Begriff Alt-Tag ist aber verbreitet.

Braucht jedes Bild einen Alt-Text? #

Jedes <img> sollte ein alt-Attribut haben. Informative Bilder brauchen eine Beschreibung. Dekorative Bilder sollten alt="" haben.

Was bedeutet alt=""? #

Ein leeres Alt-Attribut signalisiert, dass das Bild dekorativ ist und von Screenreadern übersprungen werden kann.

Wie lang sollte ein Alt-Text sein? #

So kurz wie möglich und so lang wie nötig. Meist reicht eine kurze Phrase oder ein Satz. Die 125-Zeichen-Regel ist eine Faustregel, kein offizielles Limit.

Sollte ein Keyword im Alt-Text stehen? #

Nur wenn es das Bild natürlich und korrekt beschreibt. Keyword-Stuffing sollte vermieden werden.

Hilft Alt-Text bei SEO? #

Ja, vor allem für Google Bilder und als zusätzlicher Kontext. Alt-Text ist aber kein Ranking-Hack und ersetzt keinen guten Content.

Wie beschreibe ich eine Infografik? #

Nutze einen kurzen Alt-Text, der die Grafik zusammenfasst, und erkläre die wichtigen Daten im sichtbaren Text oder in einer HTML-Tabelle.

Was bedeutet „Fehlende Alt-Texte“ in RankScan? #

Der Insight bedeutet, dass Bilder ohne oder mit unzureichendem Alt-Attribut gefunden wurden. Danach sollte geprüft werden, ob die Bilder informativ, funktional, dekorativ oder komplex sind.


Fazit: Alt-Texte machen Bilder verständlich #

Alt-Texte sind kleine HTML-Attribute mit grosser Wirkung. Sie machen visuelle Inhalte für Screenreader, Suchmaschinen, Crawler und Nutzer mit Ladeproblemen verständlicher.

Der RankScan-Insight „Fehlende Alt-Texte“ zeigt, wo diese Textalternativen fehlen oder nicht sinnvoll gepflegt sind.

Die beste Vorgehensweise lautet:

  1. Bilder nach Seitentyp und Relevanz priorisieren,
  2. Bildtyp bestimmen,
  3. informative Bilder konkret beschreiben,
  4. funktionale Bilder nach Ziel oder Aktion benennen,
  5. dekorative Bilder mit alt="" auszeichnen,
  6. komplexe Grafiken im sichtbaren Text erklären,
  7. Keyword-Stuffing vermeiden,
  8. Alt-Texte im CMS-Workflow verankern,
  9. nach dem Fix erneut crawlen.

So entsteht echter Mehrwert: bessere Barrierefreiheit, bessere Bildkontexte, bessere technische Qualität und stärkere Voraussetzungen für und maschinenlesbare Inhalte.


Quellen und weiterführende Informationen #