Alt-Texte für Bilder: Kontext, Barrierefreiheit und Mehrwert für die Suchmaschinenoptimierung (SEO)

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 die RankScan-Massnahme «Bilder ohne Alt-TextEin Alt-Text ist eine Textalternative für ein Bild, die im alt-Attribut des img-Elements hinterlegt wird und Inhalt oder Funktion des Bildes beschreibt.Zum Glossareintrag →» an.

Die RankScan-Massnahme «Bilder ohne Alt-Text» bedeutet: Der CrawlBeim Crawling ruft ein Suchmaschinen-Bot eine URL ab und lädt deren Inhalte herunter. Es ist der erste Schritt, bevor eine Seite indexiert werden kann.Zum Glossareintrag → fand auf den betroffenen Seiten Bilder, deren <img>-Element gar kein alt-Attribut trägt. Ein leeres alt="" meldet RankScan nicht. Es kennzeichnet ein Bild als dekorativ. alt="" ist für tatsächlich dekorative Bilder korrekt; RankScan prüft diese inhaltliche Entscheidung nicht.

Einstufung in RankScan: Schwere mittel · Aufwand gering, ab 20 betroffenen Seiten mittel, ab 200 hoch · Arbeitsart Redaktion.

Fehlende Alt-Texte lösen selten allein ein Ranking-Problem aus. Sie schwächen aber Barrierefreiheit, Bildersuche und das maschinelle Verständnis der Bilder.

Wichtig ist die richtige Einordnung:

Alt-Text ist primär eine Textalternative für Menschen. SEOSuchmaschinenoptimierung (SEO) umfasst alle Maßnahmen, mit denen eine Website in den unbezahlten (organischen) Suchergebnissen besser sichtbar wird.Zum Glossareintrag → 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 die Massnahme abarbeitest, auch auf grossen Websites.

Was ist ein Alt-Text? #

Ein Alt-Text ist eine Textalternative für ein Bild. Er wird im HTMLHyperText Markup Language (HTML) ist die Auszeichnungssprache für Webseiten. Mit ihr werden Struktur und Inhalt einer Seite definiert, etwa Überschriften, Absätze, Links und Bilder.Zum Glossareintrag → (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 «Bilder ohne Alt-Text»? #

Die RankScan-Massnahme «Bilder ohne Alt-Text» zählt Seiten mit mindestens einem Bild ohne alt-Attribut. RankScan prüft dafür jedes <img>-Element mit Bildquelle im HTML der Seite. Das schliesst Logo, Icons und Bilder in Kopf- und Fussbereich ein.

So unterscheidet RankScan:

Die Qualität eines vorhandenen Alt-Texts prüft RankScan nicht. Diese Fälle findest du nur bei einer eigenen Durchsicht:

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

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

Der Begriff «Alt-Tag» ist trotzdem verbreitet, weil viele Nutzer danach suchen. Technisch korrekt bleibt «alt-Attribut».

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, RenderingJavaScript-Rendering bezeichnet den Vorgang, bei dem ein Browser oder Crawler JavaScript-Code ausführt, um daraus die fertige, sichtbare Seite zu erzeugen. Erst nach diesem Schritt entstehen Inhalte, die nicht bereits im ausgelieferten HTML stehen.Zum Glossareintrag → 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 AI OverviewsAI Overviews sind von Google KI-generierte Antwortboxen, die oberhalb der klassischen Suchergebnisse erscheinen. Sie fassen Informationen aus dem Web zusammen und können die Klickverteilung verändern.Zum Glossareintrag → 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

Alt-Text ist darum kein eigener Hebel der Generative Engine Optimization (GEOGenerative Engine Optimization (GEO) umfasst Massnahmen, die die Voraussetzungen verbessern, dass Inhalte einer Marke oder Website von generativen KI-Antwortsystemen gefunden, verstanden, extrahiert, eingeordnet und als Quelle verwendet werden. GEO ersetzt klassisches SEO nicht, sondern erweitert es.Zum Glossareintrag →). Er gehört zur sauberen Grundlage einer Seite.

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.

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

Eine feste Zeichengrenze brauchst du nicht. 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. Fehlt das Attribut ganz, lesen manche Screenreader stattdessen den Dateinamen vor.
Quelle: W3C WAI: Decorative Images

Genau diesen Fall meldet RankScan. Ein Schmuckbild mit alt="" erscheint nicht in der Massnahme.

Gute und schlechte Alt-Texte: Beispiele #

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 404-FehlerDer HTTP-Status 404 (Not Found) bedeutet, dass der Server erreichbar ist, die angeforderte URL aber nicht existiert. Einzelne 404-Fehler sind normal, problematisch sind interne tote Links.Zum Glossareintrag →:

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:

1. kurzer Alt-Text,
2. 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.

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.

Reihenfolge: Welche Bilder zuerst? #

Nicht jedes fehlende Alt-Attribut ist gleich dringend. Die folgende Tabelle ist eine allgemeine fachliche Einordnung. RankScan zeigt für die Massnahme eine einzige Schwere: mittel.

Die wichtigste Regel:

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

Vorgehen bei der Massnahme «Bilder ohne Alt-Text» #

RankScan wählt die Schritte nach der Zahl der betroffenen Seiten. Unter 20 Seiten arbeitest du Seite für Seite. Ab 20 Seiten beginnst du bei Vorlage und Mediathek, siehe nächster Abschnitt.

Unter 20 Seiten: Bilder auf der Seite beschreiben #

1. Öffne die betroffene Seite in der Bearbeitung deiner Website und gehe die Bilder durch.
2. Beschreibe bei jedem informativen Bild kurz, was es zeigt. Bei Bild-Links und Icon-Buttons beschreibst du die Funktion.
3. Lass den Alt-Text bei reinen Schmuckbildern leer. Leer heisst alt="", nicht weglassen:

<!-- korrekt: Schmuckbild, RankScan meldet es nicht -->
<img src="deko.svg" alt="">

<!-- falsch: kein Attribut, RankScan meldet die Seite -->
<img src="deko.svg">

<!-- unnötig: Schmuckbild mit Beschreibung -->
<img src="deko.svg" alt="dekoratives Bild">

4. Veröffentliche die Seite und melde die Massnahme als umgesetzt.

Prüfweg: Der nächste vollständige Crawl prüft alle betroffenen Seiten. RankScan meldet dann «Behoben» oder «Noch nicht behoben» mit der Zahl der Seiten, die noch fehlen.

Fachliche Hilfen beim Beschreiben #

Die folgenden Fragen sind allgemeines FachwissenExpertise bezeichnet die fachliche Kompetenz hinter einem Inhalt. Sie ist das zweite E in E-E-A-T und sollte über sichtbare Autorenangaben und Belege erkennbar sein.Zum Glossareintrag →. Sie helfen dir bei Schritt 2 und 3. RankScan prüft sie nicht.

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.

Informative Bilder beschreiben:

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

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?

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.

Publishing-Prozess anpassen. Alt-Texte sollten nicht erst im Audit entstehen. Nimm diese Punkte in den Workflow auf:

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

Ab 20 Seiten: Vorlage und Mediathek zuerst #

Fehlt der Alt-Text auf vielen Seiten, liegt die Ursache oft nicht im einzelnen Text. Häufig steht dasselbe Bild auf jeder Seite: Logo, Icons, Bilder in Kopf- und Fussbereich. Ein fehlendes Attribut in der Vorlage macht dann jede Seite zum Befund. Eine Korrektur in der Vorlage behebt alle diese Seiten auf einmal.

Darum wechselt RankScan ab 20 betroffenen Seiten die Schritte. Auch der Aufwand richtet sich nach der Zahl der Seiten:

Die Schwere bleibt in allen Fällen mittel. Ab 20 Seiten heisst das Ziel der Massnahme in RankScan «Alt-Texte in Vorlage und Mediathek für … ergänzen».

1. Prüfe zuerst die Bilder, die auf vielen Seiten stehen: Logo, Icons, Bilder in Kopf- und Fussbereich.
2. Lass Entwicklung oder Agentur diese Bilder in der Vorlage beschreiben. Reine Schmuckbilder erhalten dort einen leeren Alt-Text.
3. Ergänze die Alt-Texte der übrigen Bilder in der Mediathek deiner Website. Beschreibe kurz, was jedes Bild zeigt.
4. Manche Websites übernehmen den Alt-Text der Mediathek nur für neu eingefügte Bilder. Prüfe darum eine betroffene Seite.
5. Veröffentliche die Änderungen und melde die Massnahme als umgesetzt.

Prüfweg: Der nächste vollständige Crawl prüft alle betroffenen Seiten. RankScan meldet dann «Behoben» oder «Noch nicht behoben» mit der Zahl der Seiten, die noch fehlen. Bleiben Seiten übrig, sind es oft Bilder, die vor der Änderung in der Mediathek eingefügt wurden. Diese Seiten bearbeitest du einzeln.

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.

Allgemeine Checkliste für eine gründliche Alt-Text-Prüfung #

Diese Liste ist eine allgemeine Checkliste für eine eigene Durchsicht. RankScan prüft davon nur den ersten Punkt: Bilder ohne alt-Attribut.

• 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,
• Mehrsprachigkeit,
• Bilder aus der Vorlage.

Beispiel: Logo und Icons ohne Alt-Text im Shop #

Ausgangslage #

Ein Schweizer Outdoor-Shop hat hochwertige Produktfotos. RankScan meldet auf mehr als 20 Seiten:

Massnahme: «Bilder ohne Alt-Text»
Ziel: Alt-Texte in Vorlage und Mediathek für … Seiten ergänzen
Einstufung: Schwere mittel · Aufwand mittel · Redaktion

Analyse #

• Das Logo im Kopfbereich hat kein alt-Attribut. Es steht auf jeder Seite.
• Die Icons der Zahlungsarten im Fussbereich haben ebenfalls kein alt-Attribut.
• Viele Produktbilder haben in der Mediathek keinen Alt-Text. Das Shop-System gibt das Attribut dann gar nicht aus.
• Einige Produktbilder tragen den Dateinamen IMG_4421.jpg als Alt-Text. Diese meldet RankScan nicht, denn ein Alt-Text ist vorhanden. Das Team korrigiert sie trotzdem.

Lösung #

1. Die Agentur ergänzt in der Vorlage das Logo mit alt="Shopname Startseite".
2. Die Icons der Zahlungsarten stehen ohne Begleittext. Sie erhalten den Namen der Zahlungsart als Alt-Text.
3. Trennlinien und Schmuckgrafiken in der Vorlage erhalten alt="".
4. Die Redaktion ergänzt die Alt-Texte der Produktbilder in der Mediathek: Produktname, Farbe, Modell und Ansicht. Variantenbilder unterscheiden sich.
5. Die Redaktion öffnet eine ältere Produktseite und prüft, ob der neue Alt-Text dort erscheint.
6. Das Team veröffentlicht die Änderungen und meldet die Massnahme als umgesetzt.

Ergebnis #

Der nächste vollständige Crawl findet Logo und Icons mit Alt-Text. Damit fallen alle Seiten weg, die nur wegen der Vorlage betroffen waren. Übrig bleiben einige Blogartikel mit Bildern, die vor der Änderung eingefügt wurden. Die Redaktion bearbeitet diese Seiten einzeln.

Die Seiten werden zugänglicher, 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 IndexierungBei der Indexierung verarbeitet eine Suchmaschine gecrawlte Inhalte und entscheidet, ob eine URL in den Suchindex aufgenommen wird. Nur indexierte Seiten können in den Suchergebnissen erscheinen.Zum Glossareintrag → ab.

Häufige Fehler bei Alt-Texten #

Fehler 1: Alt-Attribut fehlt komplett #

Für informative Bilder ist das ein klares Problem. Auch bei Schmuckbildern fehlt dann das Signal für Screenreader. Diesen Fall meldet RankScan.

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 CMSEin Content-Management-System (CMS) ist eine Software zur Erstellung, Verwaltung und Veröffentlichung von Webinhalten, meist ohne Programmierkenntnisse. Bekannte Beispiele sind WordPress oder Shopify.Zum Glossareintrag →-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? Das prüft RankScan.
• 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?
• Hast du ab 20 betroffenen Seiten zuerst Vorlage und Mediathek bearbeitet?
• Hast du die Massnahme in RankScan als umgesetzt gemeldet?

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.

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.

Die RankScan-Massnahme «Bilder ohne Alt-Text» zeigt, wo das alt-Attribut ganz fehlt. Die Qualität vorhandener Alt-Texte prüfst du selbst.

Die beste Vorgehensweise lautet:

1. ab 20 betroffenen Seiten mit Vorlage und Mediathek beginnen,
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. die Massnahme als umgesetzt melden; der nächste vollständige Crawl prüft die Seiten.

So entsteht echter Mehrwert: bessere Barrierefreiheit, bessere Bildkontexte, bessere technische Qualität und stärkere Voraussetzungen für Image SEOBild-SEO umfasst alle Massnahmen, die Bilder für Suchmaschinen, die Bildersuche und maschinelle Systeme verständlicher machen. Dazu gehören Alt-Texte, sprechende Dateinamen und passender Kontext.Zum Glossareintrag → 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: Decorative Images
• 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