WordPress Alt Text: gute und schlechte Beispiele
Der WordPress Alt Text ist eine kurze Bildbeschreibung, die ein Screenreader vorliest und die Google hilft, das Bild zu verstehen. Sie tragen ihn in der Mediathek oder im Block Bild ein. Ein guter Alt-Text beschreibt in einigen bis gut zehn Wörtern, was man sieht. Ein in der Mediathek geänderter Alt-Text korrigiert Bilder nicht, die schon in Beiträge eingefügt sind.
Autor: Das TellMyShop-Team. Ein Ratgeber für Betreiber von WordPress-Websites und WooCommerce-Shops: die Ursache, die Lösung von Hand und dieselbe Arbeit im Gespräch mit dem Chat.
Zuletzt aktualisiert: · 6 Min. Lesezeit
Wer den Alt-Text liest und warum
Der Alt-Text hat zwei Leser. Der erste ist ein Mensch, der das Bild nicht sieht: blind, sehbehindert oder mit einer langsamen Verbindung, bei der das Bild nicht geladen hat. Der Screenreader liest statt des Bildes den Alt-Text vor. Ohne Alt-Text hört dieser Mensch oft den Dateinamen, etwa „IMG_4471“, oder gar nichts.
Der zweite Leser ist Google. Laut den Richtlinien von Google für Bilder ist der Alt-Text eine der wichtigen Informationsquellen darüber, was ein Bild zeigt, und er hilft der Google Bildersuche, es für die richtigen Suchanfragen zu zeigen. Google weist auch darauf hin, dass ein mit Keywords vollgestopfter Alt-Text schadet.
Diese beiden Bedürfnisse widersprechen sich nicht. Ein Alt-Text, der für einen Menschen geschrieben ist, ist meist auch für Google gut.
Gute und schlechte Alt-Texte, mit Beispielen
Die Beispiele stammen aus einem Shop für Gartenbeleuchtung. Jeder schlechte Alt-Text hat einen typischen Fehler, wie man ihn auf WordPress-Websites findet.
| Bild | Schlechter Alt-Text | Warum er schlecht ist | Guter Alt-Text |
|---|---|---|---|
| Laterne am Abend auf einer Terrasse | IMG_4471 | der Dateiname sagt nichts | Schmiedeeiserne Laterne, die abends auf einer Holzterrasse leuchtet |
| Dasselbe Bild | Gartenlaternen Laternen günstig Shop Laternen | vollgestopft mit Keywords | wie oben |
| Inhaberin am Tisch mit Mustern | Bild zeigt eine Frau | „Bild zeigt“ ist überflüssig, kein Inhalt | Die Inhaberin ordnet Lampenschirm-Muster auf einem Werkstatttisch |
| Produkt auf weißem Hintergrund | Produkt | zu allgemein | Graphitfarbene LED-Gartenwandleuchte, Seitenansicht |
| Zierlinie zwischen Abschnitten | Linie | dekorative Grafik | leerer Alt-Text |
| Diagramm in einem Leitfaden | Diagramm | verbirgt die Information | Diagramm: jährlicher Stromverbrauch von LED- und Halogenlampen, LED verbraucht weniger |
Häufiger als schlechte Alt-Texte finden Sie gar keine. Hat die Website Hunderte Bilder ohne Beschreibung, beginnen Sie mit denen auf Seiten mit Besuchern: Produkte, die Leistungsseite, die beliebtesten Beiträge.
Wann der Alt-Text leer bleiben sollte
Der Rat „jedes Bild braucht einen Alt-Text“ ist eine Vereinfachung. Grafiken, die nur schmücken, etwa Ornamente, Hintergründe oder ein Symbol neben einem Text, der dasselbe sagt, sollten einen leeren Alt-Text haben. Der Screenreader überspringt sie dann und ermüdet den Zuhörer nicht mit der Beschreibung einer Zierlinie. So empfiehlt es das Bilder-Tutorial des W3C.
Ein leerer Alt-Text ist etwas anderes als ein fehlender. Ein leerer sagt „das ist nur Schmuck“. Ein fehlender lässt den Leser raten, oft durch Vorlesen des Dateinamens.
Wo Sie den Alt-Text in WordPress eintragen
Sie haben drei Stellen. Jede funktioniert ein wenig anders.
- Mediathek. Medien → Mediathek, auf das Bild klicken und die Beschreibung ins Feld Alternativer Text tippen. WordPress speichert die Änderung selbst. Dieser Alt-Text wird bei jedem Einfügen des Bildes vorgeschlagen und meist für das Beitragsbild verwendet (mehr dazu im Leitfaden zum Beitragsbild in WordPress).
- Der Block Bild im Editor. Wählen Sie das Bild im Beitrag aus und tragen Sie im Einstellungsbereich des Blocks den Alternativen Text ein. Diese Änderung gilt nur für diesen einen Beitrag. Eine Beschreibung des Blocks finden Sie in der Dokumentation zum Block Bild.
- Produktbilder in WooCommerce. Hauptbild und Produktgalerie kommen aus der Mediathek, den Alt-Text tragen Sie also dort ein. In einem typischen Theme übernimmt die Produktseite ihn direkt aus der Mediathek.
Das Feld Titel in der Mediathek ist etwas anderes als der Alt-Text. Der Titel hilft vor allem Ihnen, Dateien zu finden, und ersetzt nicht die Beschreibung für einen Screenreader.
Die Falle: Ältere Beiträge sehen den neuen Alt-Text nicht
Hier verlieren viele Zeit. Sie füllen die Alt-Texte in der Mediathek aus, prüfen einen älteren Beitrag, und im Seitenquelltext steht immer noch ein leerer Alt-Text.
Der Grund ist technisch, aber einfach. Wenn Sie im Block-Editor ein Bild in einen Beitrag einfügen, kopiert WordPress den Alt-Text in den Inhalt des Beitrags. Ab dann hat der Beitrag seine eigene Kopie. Eine spätere Änderung in der Mediathek korrigiert Beitragsbilder und neue Einfügungen, ändert aber nicht die Kopie in älteren Beiträgen.
Bei ein paar Beiträgen öffnen Sie jeden, wählen das Bild und korrigieren den Alt-Text im Block. Bei vielen Beiträgen beginnen Sie mit denen, die die meisten Besucher haben.
Wie der Chat Alt-Texte in Paketen ergänzt
Die Aufgabe „Alt-Texte für Bilder“ im TellMyShop-Plugin für WordPress und WooCommerce beginnt bei der Mediathek. Ihr Chat (Claude oder ChatGPT) findet dort Bilder ohne Alt-Text und schlägt für jedes eine Beschreibung vor, ausgehend von Dateiname, Titel und der Seite, zu der das Bild gehört. Bei Produktbildern berücksichtigt er die Produktdaten. Kann er nicht erkennen, was auf dem Bild ist, rät er nicht und setzt die Datei auf eine Liste für Sie.
Sie: Ergänze die fehlenden Alt-Texte der Bilder.
Ihr Chat: Die Mediathek hat 37 Bilder ohne Alt-Text. Die ersten drei, damit Sie den Stil freigeben können:
Zwei Dateien kann ich aus Name und Zusammenhang nicht beschreiben, die lasse ich für Sie. Passt der Stil?
Sie: Ja, mach den Rest.
Ihr Chat: Vorschau des Pakets: 35 Alt-Texte. Ich speichere nach Ihrem „Ja“, und das ganze Paket können Sie im Änderungsverlauf rückgängig machen.
Status der Karte: wartet auf Ihr „Ja“schmiedeeiserne-laterne-02.jpg
alte Version: Alt-Text: keiner
neue Version: Alt-Text: Schmiedeeiserne Laterne mit offener Tür, Vorderansicht
glaslaterne-terrasse.jpg
alte Version: Alt-Text: keiner
neue Version: Alt-Text: Glaslaterne mit Kerze auf einem Terrassentisch
DSC_0193.jpg, gehört zum Produkt Kleine Hängelaterne
alte Version: Alt-Text: keiner
neue Version: Alt-Text: Kleine Hängelaterne in Schwarz an einer Kette
Im kostenlosen TellMyShop Free zeigt der Chat die Liste der Bilder ohne Alt-Text und vorgeschlagene Beschreibungen. Das Speichern braucht TellMyShop Pro. Dann ändert der Chat die Alt-Texte in der Mediathek, bis zu 50 Dateien in einem Paket, nachdem Sie die Vorschau freigegeben haben. Die Kopien der Alt-Texte in älteren Beiträgen sind eine eigene Änderung am Inhalt der Beiträge: Der Chat kann sie in ausgewählten Beiträgen korrigieren, ebenfalls mit einer Vorschau „vorher → nachher“ und der Möglichkeit, sie rückgängig zu machen.
Details und die Anmeldung finden Sie auf der Seite TellMyShop für WordPress und WooCommerce, die Preise unter Preise. Alt-Texte sind ein Punkt einer umfassenderen Prüfung der Website, die wir im Leitfaden zum WordPress SEO Audit beschreiben.
Ein kurzer Spickzettel
Beschreiben Sie, was Sie sehen, so wie Sie jemandem am Telefon das Bild beschreiben würden. Lassen Sie „Bild zeigt“ weg. Nutzen Sie ein Keyword nur, wenn es zum Bild passt. Geben Sie dekorativen Grafiken einen leeren Alt-Text. Prüfen Sie nach Änderungen in der Mediathek auch ältere Beiträge. Weitere Leitfäden finden Sie im Blog.
Fragen und Antworten
Wo trage ich den Alt-Text in WordPress ein?
An zwei Stellen. In der Mediathek, nach einem Klick auf das Bild, im Feld Alternativer Text, dann wird der Alt-Text bei jedem Einfügen des Bildes vorgeschlagen. Oder im Block Bild im Editor, im Einstellungsbereich des Blocks, dann ändern Sie den Alt-Text nur in diesem einen Beitrag.
Ich habe den Alt-Text in der Mediathek geändert, aber der Beitrag hat noch den alten. Warum?
Weil der Block-Editor den Alt-Text im Moment des Einfügens in den Inhalt des Beitrags speichert. Eine Änderung in der Mediathek wirkt bei Beitragsbildern und neuen Einfügungen, korrigiert aber früher eingefügte Bilder nicht. In älteren Beiträgen ändern Sie den Alt-Text im Block Bild oder im Inhalt des Beitrags.
Braucht jedes Bild einen Alt-Text?
Jedes Bild, das etwas vermittelt, ja. Rein dekorative Grafiken wie Zierlinien oder Hintergründe sollten einen leeren Alt-Text haben, damit der Screenreader sie überspringt. Ein leerer Alt-Text sollte eine bewusste Entscheidung für eine bestimmte Grafik sein.
Soll ich ein Keyword in den Alt-Text schreiben?
Nur wenn es natürlich beschreibt, was auf dem Bild ist. Google warnt davor, Alt-Texte mit Keywords vollzustopfen. Der Alt-Text „schmiedeeiserne Gartenlaterne auf einer Terrasse“ ist besser als „Gartenlaternen Laternen günstig Shop“.
Erkennt der Chat selbst, was auf dem Bild ist?
Der Chat schreibt den Alt-Text aus dem Dateinamen, dem Titel und der Seite, zu der das Bild gehört. Sagen ihm diese Daten nicht, was auf dem Bild ist, rät er nicht. Diese Dateien kommen auf eine Liste, die Sie beschreiben.
WordPress ist eine Marke der WordPress Foundation. WooCommerce ist eine Marke der Automattic Inc. Claude ist eine Marke der Anthropic PBC. ChatGPT und OpenAI sind Marken von OpenAI. TellMyShop ist mit diesen Unternehmen nicht verbunden.