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:
<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:
altfehlt 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:
<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.
| Bildtyp | Aufgabe | Alt-Text |
|---|---|---|
| Informatives Bild | vermittelt Inhalt | Bildinhalt kurz beschreiben |
| Funktionales Bild | löst Aktion aus oder ist Link | Funktion/Ziel beschreiben |
| Dekoratives Bild | nur Gestaltung | alt="" |
| Komplexe Grafik | enthält viele Daten | kurze Zusammenfassung + lange Beschreibung im Text |
| Bild mit Text | Textinhalt vermitteln | sichtbaren Text als Text bereitstellen |
| Logo | Identität oder Link | Markenname oder Linkziel |
| Produktbild | Produkt sichtbar machen | Produkt 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:
alt="Roter Hilleberg Zwei-Personen-Tunnelzelt aufgebaut auf einer Wiese"
Nicht nötig:
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:
alt="Bild von einem Hund auf einer Wiese"
Besser:
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:
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:
alt="Meta-Description-Feld im WordPress-SEO-Plugin"
Schlecht:
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:
<a href="/">
<img src="logo.svg" alt="RankScan Startseite">
</a>
Such-Icon als Button:
<button type="submit">
<img src="search.svg" alt="Suchen">
</button>
Nicht:
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:
<img src="linie.svg" alt="">
Nicht:
<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 #
| Situation | Schlecht | Besser |
|---|---|---|
| Produktbild | alt="Schuh" | alt="Brauner Meindl Bhutan Wanderstiefel aus Leder" |
| Dateiname | alt="IMG_2843.jpg" | alt="Frau repariert Fahrradreifen in einer Werkstatt" |
| Keyword-Stuffing | alt="wanderschuhe kaufen schweiz outdoor trekking schuhe" | alt="Wanderstiefel auf felsigem Bergpfad" |
| Dekoratives Bild | alt="blauer Hintergrund" | alt="" |
| Logo-Link | alt="Logo" | alt="RankScan Startseite" |
| Such-Icon | alt="Lupe" | alt="Suchen" |
| Infografik | alt="Grafik" | alt="Balkendiagramm zum organischen Traffic nach Kanal" |
| Screenshot | alt="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:
alt="Schwarze wasserdichte Ortlieb Fahrradtasche am Gepäckträger"
Nicht nötig:
alt="Produktbild"
Bei mehreren Produktbildern sollten die Alt-Texte nicht identisch sein.
Beispiel:
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 :
alt="Abgebrochene Verbindung zwischen Webseite und Suchergebnis"
Artikel über JavaScript-SEO:
alt="Quellcode mit leerem App-Container vor JavaScript-Rendering"
Vermeide generische Texte wie:
alt="SEO Bild"
Screenshots #
Screenshots sollten beschreiben, was für die Aussage relevant ist.
Gut:
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:
- kurzer Alt-Text,
- ausführliche Beschreibung im sichtbaren Text.
Beispiel:
<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:
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:
<img src="check.svg" alt="">
<span>Kostenlose Lieferung</span>
Icon ohne Text, als Button:
<button aria-label="Warenkorb öffnen">
<img src="cart.svg" alt="">
</button>
Oder:
<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:
<img src="logo.svg" alt="RankScan">
Logo als Link zur Startseite:
<a href="/">
<img src="logo.svg" alt="RankScan Startseite">
</a>
Logo rein dekorativ neben bereits sichtbarem Markennamen:
<img src="logo-symbol.svg" alt="">
<span>RankScan</span>
Alt-Text vs. Title-Attribut vs. Bildunterschrift #
Diese drei Elemente werden oft verwechselt.
| Element | Sichtbar? | Zweck |
|---|---|---|
alt | nur bei Ladefehler oder für Screenreader | Textalternative für Bildinhalt oder Funktion |
title | meist als Hover-Tooltip | Zusatzinfo, meist nicht nötig |
figcaption | sichtbar | Bildunterschrift und Kontext für alle Nutzer |
Alt-Attribut #
<img src="diagramm.png" alt="Balkendiagramm zeigt steigende organische Klicks">
Title-Attribut #
<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 #
<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.
| Bildtyp | Priorität | Warum |
|---|---|---|
| Produktbild im Shop | Hoch | Accessibility, Bildersuche, Conversion |
| Infografik mit Daten | Hoch | wichtige Information sonst unsichtbar |
| Screenshot in Anleitung | Hoch | Verständnis des Guides |
| Logo-Link ohne Text | Hoch | Funktion unklar |
| Icon-Button ohne Text | Hoch | Bedienbarkeit betroffen |
| Hero-Bild mit inhaltlicher Aussage | Mittel bis hoch | Kontext und Nutzererwartung |
| Blogbild ohne Informationswert | Mittel | abhängig vom Kontext |
| dekoratives Hintergrundbild | Niedrig | korrekt mit alt="" |
| Trennlinie oder Ornament | Niedrig | alt="" genügt |
| Social-Icon mit sichtbarem Text | Niedrig bis mittel | Kontext 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:
alt=""
Nicht:
alt="dekoratives Bild"
und nicht:
<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
altbei 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 #
- Bestseller-Produkte priorisieren.
- Produktbilder nach Produktname, Farbe, Modell und Ansicht beschreiben.
- Variantenbilder differenzieren.
- Dekorative Icons auf
alt=""setzen. - Dateinamen für neue Bilder sprechend vergeben.
- Produktdaten und Bildbeschreibungen im CMS-Prozess verankern.
- RankScan erneut .
- 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>einalt-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:
- Bilder nach Seitentyp und Relevanz priorisieren,
- Bildtyp bestimmen,
- informative Bilder konkret beschreiben,
- funktionale Bilder nach Ziel oder Aktion benennen,
- dekorative Bilder mit
alt=""auszeichnen, - komplexe Grafiken im sichtbaren Text erklären,
- Keyword-Stuffing vermeiden,
- Alt-Texte im CMS-Workflow verankern,
- 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 #
- Google Search Central – Image SEO best practices
- Google Search Central – AI features and your website
- W3C WAI – Images Tutorial
- W3C WAI – Alt Decision Tree
- W3C WAI – Images Tutorial: Tips and Tricks
- W3C – WCAG 2.2 Non-text Content
- W3C – Technique G94: Providing short text alternative for non-text content