Alt Text: Was ist das und wie schreiben Sie ihn richtig?

Was ist Alt Text und wozu dient er?

Alt Text (Alternativtext) ist eine kurze Beschreibung, die Sie im alt Attribut eines Bildes hinterlegen. Er erscheint, wenn das Bild nicht lädt, ein Screenreader liest ihn blinden Besuchern vor, und Suchmaschinen nutzen ihn, um den Bildinhalt zu verstehen.

In diesem Leitfaden betrachten wir Alt Text aus zwei Richtungen: Barrierefreiheit und Bild SEO. In unseren Audits sehen wir meist dasselbe Problem. Entweder bleibt das Attribut leer, oder es wird zu einer Keyword Liste, und beides hilft niemandem. Daher lohnt sich ein klarer Standard.

Stellen Sie sich zum Beispiel eine Produktseite vor, bei der das Hauptfoto keine Beschreibung hat. Ein blinder Kunde erfährt dann nie, wie die Jacke aussieht. Ein Suchroboter muss den Bildinhalt allein aus dem umgebenden Text erraten.

Eine gute Beschreibung kostet pro Bild nur wenige Sekunden. Entscheidend ist, dass Sie für jeden Bildtyp den passenden Ansatz wählen. Informative Bilder, Dekobilder, verlinkte Bilder und Diagramme folgen nämlich unterschiedlichen Regeln. Wir gehen sie nacheinander durch. Zunächst klären wir die Grundlagen.

Wie sieht Alt Text im HTML Code aus?

Die Beschreibung steht in einem Attribut des Bild Tags. Denken Sie an eine Zeile wie <img src="schwarze-lederjacke.jpg" alt="Schwarze Lederjacke im Bikerstil, Vorderansicht">. Der Text in den Anführungszeichen ist der Alt Text.

Kann der Browser die Datei nicht laden, zeigt er diesen Text stattdessen an. Ein Screenreader überspringt das Bild und liest den Text vor. Das Attribut ersetzt das Bild also für alle, die es nicht sehen können.

Ein fehlendes und ein leeres Attribut unterscheiden sich außerdem deutlich. Fehlt das Attribut, liest mancher Screenreader den Dateinamen vor. Ein leerer Wert (alt="") meldet dagegen, dass das Bild nur Dekoration ist, und der Screenreader überspringt es still. Folglich entscheidet ein einzelnes Zeichen über das Vorleseverhalten.

• Gefülltes Attribut: Das Bild trägt Information, der Screenreader liest die Beschreibung vor.
• Leeres Attribut: Das Bild ist Dekoration, der Screenreader überspringt es.
• Fehlendes Attribut: ein unklarer Zustand, den Prüfwerkzeuge als Fehler melden.

Somit gilt: Leer ist nicht dasselbe wie fehlend.

Warum ist Alt Text für die Barrierefreiheit wichtig?

Die Barrierefreiheit ist der Ursprung des Alt Textes. Blinde und sehbehinderte Menschen hören Webseiten über einen Screenreader. Der Reader liest die Beschreibung anstelle des Bildes vor, also fehlt ihnen ohne Alternativtext ein Teil des Inhalts.

Die Web Content Accessibility Guidelines (WCAG) regeln das im Erfolgskriterium 1.1.1 "Nicht textuelle Inhalte". Sie verlangen eine Textalternative für Inhalte ohne Text. Reine Dekobilder müssen so umgesetzt sein, dass assistive Technologien sie ignorieren können. Details finden Sie in der W3C Erläuterung zu Non text Content.

Zudem profitieren auch andere Gruppen davon. Besucher mit langsamer Verbindung, Nutzer mit abgeschalteten Bildern und Sprachassistenten verlassen sich auf Beschreibungen. Folglich verbessert Alt Text das Erlebnis für deutlich mehr Menschen, als viele Teams erwarten. Das ist vor allem für öffentliche Angebote ein Argument.

Den größeren Zusammenhang erklären wir in unserem Beitrag über barrierefreie Websites, WCAG und BFSG. Wie wir das Thema auf unserer eigenen Seite angehen, zeigt die Erklärung zur Barrierefreiheit.

Wie hilft Alt Text bei der Suchmaschinenoptimierung?

Google nutzt Alt Text zusammen mit Algorithmen der Bilderkennung und dem Seiteninhalt, um ein Bild zu verstehen. Das steht direkt im Google Search Central Leitfaden zur Bildersuche. Alt Text ist also kein Rankingschalter für sich, sondern ein Signal, das ein Bild in seinen Kontext einordnet.

Derselbe Leitfaden warnt davor, das Attribut mit Keywords vollzustopfen. Das erzeugt eine schlechte Nutzererfahrung und kann dazu führen, dass die Seite als Spam gilt. Daher sollten Sie das passende Wort natürlich in einem Satz verwenden, der das Bild wirklich beschreibt.

Alternativtext unterstützt zudem den Traffic aus der Google Bildersuche. Bei Themen mit visueller Suche, etwa Produkten, Rezepten und Orten, hat ein gut verstandenes Bild bessere Chancen auf eine Platzierung. Tempo oder Trafficmenge können wir nicht versprechen; Sie legen lediglich die richtige Grundlage. Dennoch lohnt sich der Aufwand, weil er mehrere Ziele zugleich erfüllt.

Dient ein Bild als Link, wirkt die Beschreibung schließlich wie der Ankertext dieses Links. Das bringt Ihrer internen Verlinkung einen kleinen, aber echten Vorteil. Das gilt allerdings nur, wenn der Link auch inhaltlich passt.

Wie schreiben Sie einen guten Alt Text?

Ein guter Alt Text klingt, als würden Sie das Bild am Telefon beschreiben. Fragen Sie zunächst, welche Aufgabe das Bild auf der Seite erfüllt. Schreiben Sie dann die wichtigste Information für diese Aufgabe in eine kurze Wendung.

1. Beschreiben Sie das sichtbare Motiv mit konkreten Nomen und Handlungen.
2. Ergänzen Sie das Detail, das im Kontext zählt, etwa Farbe, Modell oder Ort.
3. Nutzen Sie das Hauptkeyword einmal und nur, wenn es natürlich passt.
4. Halten Sie den Satz kurz und schließen Sie ihn mit einem Punkt ab.
5. Wiederholen Sie keine Information, die der Text daneben schon nennt.

Zum Beispiel ist "zwei Kolleginnen werten ein Analyse Dashboard am Laptop aus" besser als das Einzelwort "Analyse". Es gibt blinden Lesern und Suchmaschinen eine konkrete Szene.

Außerdem sollten Sie nicht mit "Bild von" oder "Foto von" beginnen. Screenreader kündigen ein Bild ohnehin an, daher beschreiben Sie nur den Inhalt. Das spart den Hörern Zeit.

Wie sehen gute und schlechte Alt Text Beispiele aus?

Die Tabelle stellt typische Fehler und bessere Varianten für dasselbe Bild gegenüber. Alle Beispiele sind erfundene Musterfälle, keine Daten eines echten Kunden.

Das Muster ist eindeutig. Guter Alternativtext ist kurz, konkret und an den Kontext gebunden, während schlechter Alt Text wie ein Dateiname oder eine Keyword Liste aussieht. Daher lohnt sich der Vergleich mit Ihren eigenen Seiten.

Wie lang sollte Alt Text sein?

Google veröffentlicht keine offizielle Zeichengrenze für Alt Text. In der Praxis halten wir ihn bei einem kurzen Satz, grob unter 100 bis 125 Zeichen. Das ist ein Startwert aus Felderfahrung, keine Regel und keine Garantie. Dennoch hilft die Zahl bei der Orientierung.

Warum kurz? Ein Screenreader liest die gesamte Zeichenkette ohne Pause vor, also ermüdet eine lange Beschreibung die Zuhörer. Zudem wirkt ein sehr langer Wert schnell wie Keyword Stuffing.

Dennoch ist kürzer nicht immer besser. Zeigt nur das Foto ein wichtiges Produktmerkmal, ist eine etwas längere Beschreibung sinnvoll. Ein nützlicher Test lautet: Bekommt jemand, der das Bild nicht sieht, dieselbe Information aus der Seite?

Bei komplexen Bildern, die eine lange Erklärung brauchen, halten Sie die Beschreibung kurz. Das Detail gehört dann in den Seitentext oder in eine Bildunterschrift. Wir zeigen das später am Beispiel von Diagrammen. Konkret hilft das bei Statistiken und Prozessgrafiken.

Brauchen dekorative Bilder einen Alt Text?

Nein, Sie beschreiben sie nicht, aber Sie behalten das Attribut und lassen es leer (alt=""). Ein Dekobild fügt keine Bedeutung hinzu. Es ist eine Trennlinie, ein Muster, ein Platzhalterfoto oder ein Hintergrundschmuck.

Ein leerer Wert ist der Standardweg, einem Screenreader zu sagen, dass er das Bild überspringen soll. Der Bilder Entscheidungsbaum des W3C empfiehlt dasselbe für Dekobilder. Sie finden ihn auf der Seite des W3C Entscheidungsbaums für Bilder.

Ohne diese Unterscheidung würden Besucher auf der ganzen Seite sinnlose Sätze wie "dekorative Linie, blauer Verlauf" hören. Kurz gesagt: Ziel ist nicht, jedes Bild zu beschreiben, sondern bei jedem Bild die richtige Entscheidung zu treffen. Dann bleibt die Seite für alle gut hörbar.

Sind Sie unsicher, ob ein Bild Dekoration ist, machen Sie diesen Test. Entfernen Sie das Bild gedanklich und fragen Sie, ob der Inhalt an Sinn verliert. Wenn ja, schreiben Sie eine Beschreibung; wenn nein, lassen Sie den Wert leer.

Was gehört in den Alt Text von Logos und verlinkten Bildern?

Ist ein Bild anklickbar, beschreibt der Alt Text das Linkziel und nicht das Aussehen. Ein Logo, das zur Startseite führt, sollte "Firmenname, Startseite" sagen statt "blaues Logo".

Dieselbe Logik gilt für funktionale Bilder wie Social Icons, ein Warenkorb Symbol oder eine PDF Schaltfläche. Besucher interessiert, was die Schaltfläche tut, nicht wie sie aussieht. Deshalb zählt die Funktion mehr als die Optik.

• Logo Link: Firmenname und Ziel.
• Warenkorb Symbol: "Warenkorb anzeigen".
• Social Icon: Name der Plattform, zum Beispiel "Unser Instagram Profil".
• PDF Symbol: "Preisliste als PDF herunterladen".

Steht neben dem Bild bereits sichtbarer Text mit derselben Aussage, können Sie die Bildbeschreibung leer lassen. So liest der Screenreader nicht zweimal denselben Satz. Außerdem wirkt die Seite dadurch ruhiger.

Wie schreiben Sie Alt Text für Diagramme und komplexe Bilder?

Ein Diagramm ist zu reichhaltig für eine einzige kurze Beschreibung. Deshalb arbeiten wir in zwei Ebenen: eine knappe Zusammenfassung im alt Attribut und die vollständigen Details im Seitentext oder in einer Tabelle.

Zum Beispiel kann ein Diagramm der monatlichen Besucher "Liniendiagramm, das einen stetigen Anstieg der Besucherzahl über sechs Monate zeigt" tragen. Direkt darunter nennen Sie die Monatswerte in einem Absatz oder einer Tabelle. Somit erreichen Screenreader Nutzer und Suchmaschinen dieselben Daten als Text.

Enthält das Diagramm eine Aussage, formulieren Sie diese zuerst als Satz. Ein Bild lässt sich in den Suchergebnissen nicht zitieren, ein klarer Satz dagegen schon. Das hilft auch, wenn Ihre Inhalte in KI gestützten Antworten genannt werden sollen.

Außerdem gehen die Hinweise des W3C in dieselbe Richtung: Trennen Sie die kurze von der langen Beschreibung. Die lange Beschreibung in einem sichtbaren Abschnitt zu platzieren, ist die sicherste Lösung.

Was gehört in den Alt Text von Bildern mit Text?

Enthält das Bild Wörter, sollte der Alternativtext diese Wörter wiederholen. Bei Bannern, Aktionsgrafiken und Screenshots übertragen Sie die Botschaft in die Beschreibung, damit niemand das Angebot verpasst.

Verwenden Sie daher nach Möglichkeit echten HTML Text statt Text im Bild. Eingebetteter Text macht Probleme bei Skalierung, Übersetzung und Lesbarkeit. Außerdem lesen Suchmaschinen normalen Text verlässlicher.

Ein Banner mit "Sommerrabatt: 20 Prozent auf ausgewählte Artikel" sollte genau diesen Satz als Beschreibung tragen. Lassen Sie die Aktionsbedingungen jedoch nicht nur in der Grafik stehen, sondern schreiben Sie sie auch in den Seitentext. Denn nicht jeder Besucher sieht das Bild.

Das gilt vor allem für Preise und rechtliche Angaben. Zeigen Sie diese nur im Bild, erreichen sie manche Besucher überhaupt nicht. Also gehört die Information in den Text.

Wie schreiben Sie Alt Text für Produktbilder im Online Shop?

Im Online Shop unterstützt Alt Text Barrierefreiheit, Google Bildersuche und Produktentdeckung zugleich. Ein Muster aus Produktname, Unterscheidungsmerkmal und Bildperspektive ist der praktischste Weg, hunderte Produkte einheitlich zu pflegen.

Unser Vorschlag für das Muster lautet: Produktname, Farbe oder Modell, Perspektive oder Verwendungskontext. "Schwarze Damen Lederjacke im Bikerstil, Rückansicht" passt dazu. Den Markennamen ergänzen Sie nur, wenn er den Artikel wirklich unterscheidet. Sonst wirkt der Text schnell überladen.

Den Produkttitel Wort für Wort zu wiederholen, reicht allerdings nicht. Zeigt jedes Bild etwas anderes, sollte sich auch jede Beschreibung unterscheiden. Sonst haben Sie zehn identische Beschreibungen für ein Produkt. Das nützt weder Kunden noch Suchmaschinen.

Zur Seite insgesamt lesen Sie unseren Beitrag zur E-Commerce SEO für Produkt und Kategorieseiten. Wenn Sie praktische Unterstützung wünschen, schauen Sie sich unsere E-Commerce Beratung an.

Wie unterscheiden Sie Alt Text bei Varianten und Galeriebildern?

Hat ein Produkt Farb, Größen und Perspektivvarianten, sollte jede Bildbeschreibung andere Informationen hervorheben. Sonst wird die Galerie für Screenreader Nutzer zur Wiederholung desselben Satzes.

Das Produkt in dieser Tabelle ist ein erfundenes Muster. Entscheidend ist, dass jedes Bild einen anderen Teil der Geschichte erzählt.

Bei Farbmusterbildern schreiben Sie den Farbnamen, damit Kunden wissen, welche Option sie ansehen. Bei hunderten Varianten bauen Sie eine Vorlage und automatisieren nur die wechselnden Felder wie Farbe und Perspektive. Somit bleibt der Aufwand überschaubar.

Was unterscheidet Alt Text, Title Attribut und Dateiname?

Diese drei Felder erfüllen verschiedene Aufgaben. Das alt Attribut ersetzt das Bild für Menschen, die es nicht sehen. Das title Attribut ist ein zusätzlicher Tooltip beim Darüberfahren. Der Dateiname ist schlicht der Name des Bildes auf dem Server.

• Alt: das wichtigste Feld für Barrierefreiheit und Bildverständnis, jedes informative Bild braucht es.
• Title: optional, auf Touchgeräten und in Screenreadern uneinheitlich, nie ein Ersatz für alt.
• Dateiname: ein zusätzlicher Hinweis für Google, also kurz und beschreibend halten.

Der Bilder Leitfaden von Google empfiehlt ebenfalls beschreibende Dateinamen. Wählen Sie daher schwarze-lederjacke-vorne.jpg statt IMG_4821.jpg. Ihre Beschreibung muss den Dateinamen nicht wiederholen; beide ergänzen sich. Zudem sparen Sie sich doppelte Arbeit.

Bildgröße und Format sind ein eigenes Thema. Wie Sie Dateien verkleinern, erklären wir im Beitrag Bilder für die Website optimieren: Ladezeit und SEO.

Welche Alt Text Fehler machen Teams am häufigsten?

In fast jedem Audit tauchen dieselben Fehler auf. Wenn Sie sie kennen, beheben Sie sie schneller.

• Das Attribut komplett vergessen.
• Den Dateinamen als Beschreibung stehen lassen, zum Beispiel "DSC0045.jpg".
• Dasselbe Keyword auf jedem Bild wiederholen.
• Mit "Bild von" oder "Foto von" beginnen.
• Lange Beschreibungen für Dekobilder schreiben.
• Bei anklickbaren Bildern das Aussehen statt des Ziels beschreiben.
• Den Text im Bild nicht in die Beschreibung übernehmen.

Ein weiterer häufiger Fehler ist, die Bildunterschrift wörtlich ins alt Attribut zu kopieren. Die Unterschrift wird ohnehin vorgelesen, also sagt der Screenreader dasselbe zweimal. Kürzen Sie die Beschreibung dann oder ergänzen Sie ein anderes Detail.

Dennoch wirkt jeder dieser Punkte klein. Über hunderte Seiten verteilt entsteht daraus jedoch ein ernster Verlust für Barrierefreiheit und Bildersuche. Bei Massenimporten von Katalogen vervielfachen sich die Fehler sofort, deshalb planen Sie das alt Feld von Anfang an in Ihre Importvorlage ein.

Wie prüfen Sie Alt Text in großen Mengen?

Manuelle Kontrollen stoßen bei wachsenden Seiten an Grenzen. Crawlen Sie die Seite zunächst mit einem Werkzeug und listen Sie jedes Bild mit fehlendem oder leerem Attribut auf. Sortieren Sie die Liste dann nach Wichtigkeit: Produktbilder, Startseitenbilder und zuletzt Blogbilder.

Für einen schnellen ersten Eindruck nutzen Sie unseren SEO Check. Für einen tieferen Crawl eignen sich ein Crawler oder ein Prüfwerkzeug für Barrierefreiheit.

1. Sammeln Sie die Bilder ohne Attribut.
2. Trennen Sie Dekobilder ab und geben Sie ihnen einen leeren Wert.
3. Schreiben Sie für informative Bilder regelbasierte Beschreibungen.
4. Testen Sie wichtige Seiten von Hand mit Screenreader oder Tastatur.

Deshalb sollten Sie den letzten Schritt nicht überspringen. Werkzeuge zeigen, ob eine Beschreibung existiert, aber nur ein Mensch kann beurteilen, ob sie sinnvoll ist. Deshalb gehört eine Stichprobe immer dazu.

Ist es richtig, Alt Text mit KI zu erzeugen?

KI Werkzeuge beschleunigen die Arbeit, doch ein Mensch muss das Ergebnis prüfen. Ein Modell erkennt Objekte im Foto, kennt aber vielleicht weder das Seitenziel noch den Produktnamen oder den Kampagnenkontext.

Ein sicherer Weg: Nutzen Sie das Werkzeug für einen ersten Entwurf. Passen Sie das Ergebnis danach an Ihre Markenbegriffe und Ihr Muster an. So gewinnen Sie Einheitlichkeit über tausende Bilder und fangen trotzdem falsche Bezeichnungen ab.

Vor allem bei Produktdetails ist das Risiko hoch. Ein Modell nennt eine Lederjacke zum Beispiel eine "Stoffjacke". Dieser kleine Fehler schadet dem Kundenvertrauen und der Barrierefreiheit gleichermaßen.

Kurz gesagt: KI ist ein Helfer, kein Entscheider. Prüfen Sie vor der Veröffentlichung einen Stapel Stichproben von Hand, denn so zeigen sich Massenfehler früh. Dann lässt sich die Vorlage rechtzeitig anpassen.

Wie fügen Sie Alt Text in WordPress und anderen Systemen ein?

In den meisten Redaktionssystemen erscheint beim Hochladen in die Mediathek ein Feld namens "Alternativtext". Was Sie dort eintragen, wird im Seitencode zum alt Attribut.

Dasselbe Feld sehen Sie beim Einfügen eines Bildes in einen Beitrag. In manchen Systemen verhält sich der Wert der Mediathek anders als der Wert im Beitrag. Legen Sie deshalb eine Testseite an und prüfen Sie die tatsächliche Ausgabe in Ihrem Setup.

Bei individuell programmierten Seiten prüfen Sie die Vorlage gemeinsam mit Ihrer Entwicklerin oder Ihrem Entwickler. Stellen Sie also sicher, dass die Produktliste das Attribut aus dem Produktnamen bildet, und kontrollieren Sie, dass nicht jedes Bild denselben Text erhält.

Bauen Sie eine neue Seite, richtet unser Webdesign die Vorlagen von Anfang an barrierefrei und SEO tauglich ein. Bei einer bestehenden Seite mit Lücken übernimmt unsere SEO Beratung das Audit.

Unterscheidet sich Alt Text je nach Seitentyp?

Ja, der Seitentyp verändert Ton und Detailgrad. Auf einer Produktseite steht das Unterscheidungsmerkmal vorn. In einem Blogartikel steht die Szene vorn, die das Thema stützt. Auf der Startseite zählen vor allem Bilder, die die Markenbotschaft tragen.

• Produktseite: Name, Farbe, Perspektive und Verwendungskontext.
• Blogartikel: das Beispiel, die Szene oder die Daten im Bild.
• Kategorieseite: eine kurze Wendung, die das Kategoriebild benennt.
• Startseite: Markenname, Leistung und die Aufgabe des Bildes.

Auf Kategorieseiten gibt es dagegen oft nur ein Titelbild. Beschreiben Sie die Kategorie statt einzelner Produkte, damit Besucher verstehen, wo sie sind.

Erscheint dasselbe Bild auf zwei Seiten, darf sich die Beschreibung ändern. Alt Text hängt schließlich vom Kontext ab, und ein Bild hat keine einzig richtige Beschreibung. Anders gesagt: Der Kontext entscheidet.

Wie verwalten Sie Alt Text auf mehrsprachigen Seiten?

Auf einer mehrsprachigen Seite muss die Beschreibung die Sprache der jeweiligen Seite nutzen. Bleibt auf der englischen Seite ein deutscher Alternativtext stehen, spricht der Screenreader ihn falsch aus, und Besucher verstehen ihn nicht. Zudem leidet die Glaubwürdigkeit der Seite.

Am einfachsten nehmen Sie die Beschreibungsfelder in Ihren Übersetzungsprozess auf. Geben Sie der Übersetzerin neben dem Fließtext auch die Bildbeschreibungen. Dateinamen müssen Sie nicht übersetzen, beschreibende Namen helfen aber weiterhin.

Übersetzen Sie Keywords außerdem nicht wörtlich. Wählen Sie die Begriffe, die Menschen in der Zielsprache wirklich nutzen. Den größeren Rahmen erklärt unser Leitfaden zu mehrsprachigen Websites und SEO.

Ist das Sprachattribut der Seite korrekt, wählt der Screenreader die richtige Stimme. Prüfen Sie daher Seitensprache und Beschreibungssprache gemeinsam.

Wie messen Sie das Ergebnis der Alt Text Arbeit?

Den Effekt messen Sie in der Google Search Console über den Suchtyp. Wählen Sie im Leistungsbericht den Suchtyp "Bild" und vergleichen Sie Klicks und Impressionen mit dem Vorzeitraum.

Zunächst beachten Sie einige Punkte. Nach einer Änderung braucht Google Zeit, um Bilder erneut zu crawlen, und eine genaue Tageszahl können wir nicht nennen. Treffen Sie daher keine Entscheidungen auf Basis kurzfristiger Schwankungen.

• Vergleichen Sie Zeiträume von mindestens mehreren Wochen.
• Beobachten Sie die Seiten mit verbesserten Bildern als eigene Gruppe.
• Berücksichtigen Sie saisonale Nachfrage, etwa Geschenksuchen vor den Feiertagen.
• Belegen Sie den Barrierefreiheitsgewinn mit Screenreader Tests, nicht mit Traffic.

Der Gewinn an Barrierefreiheit lässt sich allerdings selten in Zahlen fassen. Sie sehen ihn, wenn Sie eine Seite mit dem Screenreader anhören und das Produkt trotzdem verstehen. Das ist der ehrlichste Test.

Welchen Ton und welche Wortwahl sollte Alt Text haben?

Nutzen Sie eine schlichte, sachliche und beschreibende Sprache. Schreiben Sie keine Werbeslogans. Wörter wie "fantastisch", "einzigartig" oder "beste" beschreiben das Bild nicht, sie blähen nur den Text auf.

Schreiben Sie zum Beispiel "Schwarze Lederjacke mit breitem Revers und Metallreißverschluss" statt "Einzigartig hochwertige stilvolle Jacke". Die zweite Fassung sagt einem blinden Besucher nichts Konkretes.

Ihre Markenstimme gehört in den Seitentext. Den Markennamen dürfen Sie trotzdem nennen, wenn es zählt, etwa bei einem Logo Link oder wenn die Marke ein unterscheidendes Merkmal des Produkts ist.

Verzichten Sie zudem auf Emojis, Sonderzeichen und Betonung durch Großbuchstaben. Screenreader lesen sie womöglich einzeln vor und zerreißen den Satz. Ein schlichter Satz funktioniert immer besser. Zudem bleibt er beim Vorlesen verständlich.

Wie wirken Dateiname, Größe und Alt Text zusammen?

Alt Text allein reicht nicht. Dateiname, Dateigröße und Ladeverfahren gehören zum selben System. Der Bilder Leitfaden von Google empfiehlt beschreibende Dateinamen und schnell ladende Bilder.

1. Schreiben Sie kurze, beschreibende Dateinamen und trennen Sie die Wörter mit Bindestrichen.
2. Skalieren Sie das Bild nahe an die Größe, in der es auf der Seite erscheint.
3. Wählen Sie ein passendes modernes Format und testen Sie die Kompression ohne sichtbaren Qualitätsverlust.
4. Nutzen Sie Lazy Loading für Bilder unterhalb des sichtbaren Bereichs.
5. Ergänzen Sie zuletzt bei jedem informativen Bild eine Beschreibung.

Die Begründung ist einfach: Ein schnell ladendes und gut beschriebenes Bild überzeugt Besucher und Suchmaschine. Außerdem stützt die Ladezeit das Gesamterlebnis in den Bildergebnissen.

Eine ausführliche Anleitung bietet unser Beitrag zur Bildoptimierung für Ladezeit und SEO. Unsere kostenlosen Werkzeuge Bild verkleinern und Bildformat umwandeln helfen beim Testen. Außerdem sehen Sie sofort, wie viel Speicher Sie sparen.

Welche Checkliste sollten Sie vor der Veröffentlichung nutzen?

Die kurze Liste fasst die Kontrolle zusammen, die unser Team vor jeder Veröffentlichung für jedes Bild durchführt.

1. Trägt das Bild Information oder ist es Dekoration? Bei Dekoration setzen Sie alt="".
2. Ist es anklickbar? Dann beschreiben Sie das Ziel.
3. Enthält es Text? Dann übernehmen Sie den Text in die Beschreibung.
4. Ist es komplex? Schreiben Sie eine Kurzfassung und legen Sie das Detail in den Seitentext.
5. Ist der Satz kurz, konkret und frei von "Bild von"?
6. Klingt das Keyword natürlich, und kommt es nur einmal vor?
7. Ist der Dateiname beschreibend?

Prüfen Sie auch Ihre Einstellungen für Lazy Loading. Unser Beitrag Lazy Loading und SEO zeigt, wie das sicher gelingt.

Für die Bildstrategie insgesamt ist Bildsprache und UX im Online Shop eine gute Ergänzung. Zusammengefasst wirkt Alt Text wie ein kleines Detail, doch richtig gepflegt bringt er einen stetigen Gewinn für Barrierefreiheit, SEO und Conversion.