Inhaltsverzeichnis
Alt Texte schreiben: Damit beschreibst du den Inhalt oder die Funktion eines Bildes für Menschen, die es nicht sehen. Screenreader lesen diese Texte vor. Suchmaschinen erhalten ebenfalls Hinweise zum Bild und zum Zusammenhang mit der Seite.
Ein guter Alt Text ist kurz, konkret und vom jeweiligen Kontext abhängig. Eine lange Liste aus Suchbegriffen hilft weder Menschen noch Suchmaschinen. Manche Bilder brauchen sogar bewusst einen leeren Alt Text.
Diese Anleitung zeigt dir, wie du Beitragsbilder, Produktfotos, Schaubilder und verlinkte Grafiken in WordPress richtig behandelst.
Welche Aufgabe ein Alt Text erfüllt
Der Alt Text steht im HTML Attribut alt eines Bildes. Er erscheint nicht wie eine normale Bildunterschrift. Hilfsmittel wie Screenreader geben ihn jedoch wieder. Außerdem wird er angezeigt, wenn das Bild nicht geladen wird.
Das Portal Barrierefreiheit des Bundes erklärt, dass Alternativtexte Inhalt und Funktion von Bildern für blinde Menschen zugänglich machen.
Der Text beschreibt deshalb nicht jedes sichtbare Detail. Er vermittelt die Information, die das Bild an dieser Stelle beiträgt.
Kontext verändert die Beschreibung
Dasselbe Laptopfoto braucht in verschiedenen Artikeln unterschiedliche Beschreibungen. In einem Beitrag über Homeoffice steht der Arbeitsplatz im Mittelpunkt. In einem Testbericht zählt vielleicht das abgebildete Gerät. In einem Artikel über Datensicherung ist die externe Festplatte entscheidend.
Frage dich: Welche Information fehlt dem Leser, wenn er dieses Bild nicht sieht? Die Antwort bildet den Kern des Alt Textes.
Informative und dekorative Bilder unterscheiden
Nicht jedes Bild braucht eine ausgeschriebene Beschreibung. Die Entscheidungshilfe der Web Accessibility Initiative unterscheidet unter anderem informative, funktionale, komplexe und dekorative Bilder.
Informative Bilder
Ein informatives Bild vermittelt einen Inhalt, der nicht vollständig im umgebenden Text steht. Dazu gehören Produktfotos, Bildschirmfotos eines Arbeitsschritts und Abbildungen eines Ergebnisses.
Beispiele:
- „WordPress Mediathek mit geöffnetem Feld für den Alt Text“
- „Schwarzer Gartenhäcksler mit Einfülltrichter und Fangbox“
- „Affiliate Dashboard mit Klicks, Verkäufen und Stornos“
Vermeide Einleitungen wie „Bild von“ oder „Foto von“. Der Screenreader kündigt das Element bereits als Bild an. Nenne die Bildart nur, wenn sie für das Verständnis zählt, etwa bei einer historischen Zeichnung oder einem Schaubild.
Dekorative Bilder
Ein rein dekoratives Bild trägt keine neue Information bei. Es schafft nur Stimmung oder gestaltet eine Fläche. Setze dort ein leeres Attribut: alt="".
Fehlt das Attribut komplett, liest ein Screenreader unter Umständen den Dateinamen vor. Ein leerer Alt Text zeigt dagegen bewusst, dass das Bild übersprungen werden soll.
Funktionale Bilder und Bilder mit Text behandeln
Ein Bild in einem Link oder einer Schaltfläche erfüllt eine Funktion. Der Alt Text beschreibt dann nicht das Motiv, sondern das Ziel oder die ausgelöste Handlung.
Beispiele:
- Logo mit Link zur Startseite: „Zur Startseite von Geld Solutions“
- Lupe als Schaltfläche: „Suche öffnen“
- Produktbild als Kaufknopf: „Produktdetails zu PromoPilot öffnen“
Google erklärt, dass bei verlinkten Bildern das Alt Attribut als Ankertext genutzt wird. Eine klare Funktionsbeschreibung hilft daher Nutzern und Suchmaschinen.
Text im Bild nicht verstecken
Enthält ein Bild wichtigen Text, der sonst nirgends steht, muss diese Information zugänglich sein. Bei einem einfachen Hinweis lässt sie sich in den Alt Text übernehmen. Längere Inhalte gehören als normaler Text auf die Seite.
Ein Beitragsbild mit der Aufschrift „7 Fehler beim Affiliate Marketing“ braucht nicht automatisch jedes sichtbare Wort im Alt Text, wenn die Überschrift direkt daneben steht. Wiederhole keine Information, die ein Screenreader bereits unmittelbar zuvor vorgelesen hat.
Diagramme und Bildschirmfotos beschreiben
Ein Diagramm enthält meist mehr Informationen, als in einen kurzen Alt Text passen. Nenne im Alt Text Art und Kernaussage. Stelle Werte und Zusammenhänge zusätzlich im normalen Seitentext oder in einer Tabelle bereit.
Beispiel:
„Liniendiagramm mit steigenden Blogaufrufen von Januar bis Juni. Genaue Monatswerte stehen in der folgenden Tabelle.“
Die W3C Anleitung zu komplexen Bildern empfiehlt eine kurze Alternative und eine getrennte ausführliche Beschreibung.
Nur den wichtigen Bereich eines Bildschirmfotos nennen
Bei einem Bildschirmfoto beschreibst du den Schritt, den der Leser erkennen soll. Menüleisten, Uhrzeit und unwichtige Symbole lässt du weg.
Statt „Screenshot einer Website mit weißem Hintergrund, schwarzer Schrift und vielen Menüs“ schreibst du: „Rank Math Eingabefeld für Fokus Suchbegriff und Meta Beschreibung“.
Wenn das Bild einen Ablauf erklärt, ergänze die Handlung auch als normalen Text. So bleibt die Anleitung nutzbar, wenn sich die Benutzeroberfläche ändert oder das Bild nicht angezeigt wird.
Alt Texte und Bilder SEO verbinden
Google empfiehlt nützliche und zum Seitenkontext passende Alt Texte. Suchbegriffe dürfen natürlich vorkommen. Keyword Listen und wiederholte Wortfolgen verschlechtern dagegen die Nutzung und wirken wie Spam.
Schlecht:
„Alt Texte schreiben SEO Alt Text WordPress Bilder SEO Google Ranking Alt Text“
Besser:
„Alt Text für ein Beitragsbild in der WordPress Mediathek eintragen“
Nutze den Fokus Suchbegriff nur, wenn er das sichtbare Motiv treffend beschreibt. Schreibe nicht bei jedem Bild denselben Text. Verschiedene Bilder brauchen eigene Beschreibungen.
Dateiname, Bildunterschrift und Alt Text trennen
Der Dateiname hilft bei der technischen Ordnung. Eine Bildunterschrift ist für alle Leser sichtbar und liefert Quelle oder zusätzliche Erklärung. Der Alt Text vermittelt Inhalt oder Funktion für Menschen, die das Bild nicht sehen.
Diese drei Felder dürfen zusammenpassen, müssen aber nicht denselben Satz enthalten. Weitere Hinweise zu Bildern in neuen Suchsystemen findest du im Beitrag Affiliate Blog für KI Suche.
Alt Texte in WordPress eintragen und prüfen
Öffne in WordPress die Mediathek und wähle das Bild aus. Trage die Beschreibung in das Feld „Alternativtext“ ein. Im Block Editor erreichst du das Feld zusätzlich über die Einstellungen des ausgewählten Bildblocks.
Prüfe den Alt Text immer im Zusammenhang mit dem konkreten Beitrag. WordPress speichert den Text zwar in der Mediathek. Dasselbe Bild kann an einer anderen Stelle aber eine andere Funktion erfüllen. Passe die Beschreibung im Bildblock an, wenn dein Editor dies unterstützt.
Deine kurze Prüfliste
- Vermittelt das Bild eine Information oder Funktion?
- Beschreibt der Text genau diese Bedeutung?
- Steht die wichtigste Information am Anfang?
- Vermeidest du Wiederholungen zum direkten Umfeld?
- Bleibt ein dekoratives Bild mit
alt=""leer? - Hat ein Diagramm eine ausführliche Beschreibung im Text?
- Verzichtest du auf Listen aus Suchbegriffen?
Prüfe verlinkte Bilder zusammen mit deinen übrigen internen Links. Der Beitrag Interne Verlinkung im WordPress Blog zeigt dir passende Ankertexte und Linkziele.
Wenn du KI Bilder verwendest, trennst du Bildbeschreibung und Herkunftshinweis. Der Artikel KI Inhalte kennzeichnen erklärt, wann ein zusätzlicher Hinweis zur künstlichen Erstellung nötig ist.
Alt Texte schreiben bedeutet, die Aufgabe des Bildes in wenigen klaren Worten zu vermitteln. Beschreibe informative Bilder. Benenne bei Schaltflächen die Handlung. Lass dekorative Bilder bewusst leer und erkläre komplexe Grafiken zusätzlich im normalen Text.
Beginne mit den wichtigsten Seiten und Beitragsbildern. Prüfe danach Produktfotos, Bildschirmfotos und verlinkte Grafiken. Eine verständliche Beschreibung hilft echten Menschen. Der Nutzen für die Bilder Suche kommt danach.
