Was ist der Alt-Text? Der Alt-Text ist die „Beschreibung“ eines Bildes auf eurer Website. Da er sich im HTML-Code befindet, ist er auf der Seite selbst nicht sichtbar. Was macht den Alt-Text überhaupt zu einem wichtigen Faktor? Wie wirkt er sich auf die Search Engine Optimization (SEO) aus? Wie füge ich meinen Bildern einen Alt-Text hinzu? Wie verfasse ich überhaupt einen guten Alt-Text? Diese und viele weiter Fragen werden wir euch in diesem Blog beantworten.

Von der Bedeutung des Alt-Textes

Bevor wir uns den technischen Gründen des Alt-Textes widmen, ist anzumerken, dass Millionen Sehbehinderte Screenreader zum Browsen benutzen und der Alt-Text so zur Barrierefreiheit beiträgt. Bei Screenreadern werden Bilder und andere visuelle Inhalte in ein Audioformat umgewandelt, was die User von dem Alt-Text abhängig macht. Wenn man ihn weglässt, kann es sein, dass der ellenlange Dateiname des Bildes verlesen und der User somit vergrault wird. Beim technischen Aspekt ist es von äußerster Wichtigkeit zu beachten, dass der Text das Ranking erhöhen kann: Mit einem passenden Alt-Text kann es einem gelingen, von Google bevorzugt zu werden. Wenn ihr viele Bilder habt, die beispielsweise mit „Tesla“ oder „Volkswagen“ getaggt sind, sortiert Google eure Seite in die Kategorie „Elektroautos“. Kurzum: der Alt-Text kann Google und anderen Suchmaschinen dabei helfen zu verstehen, in welche Kategorie eure Website gehört und wie sie zu ranken ist. Um Verwirrung vorzubeugen: Alt-Text und Alt-Attribut meinen dasselbe.

Suchen, Rankings, Ergebnisse und der Anchor-Text

Über 20% aller Suchanfragen im Internet gehen über die Google-Bildersuche. Von daher bietet es sich an, über sie Traffic zu generieren. Ihr solltet bei der Gestaltung eurer Texte beachten, was der Anchor-Text ist: Der Anchor-Text meint die klickbaren Worte, die eine Website mit einer anderen Page verbinden und ist das Tool, das Google nutzt, um Inhalte zu analysieren. Weil ihr die Bilder auch als Links benutzen solltet, könnt ihr Google damit entgegenkommen. Die Plattform erfährt so mehr über euren Content und versucht ihn, so gut es geht, einzuordnen. Wenn ihr WordPress nutzt, könnt ihr den Alt-Text ohne den HTML-Code durchsuchen, euch wird ganz einfach ein Feld zur Verfügung gestellt, um den erwünschten Inhalt hinzuzufügen. Dies klappt glücklicherweise auch mit anderen verbreiteten CMS-Systemen.

Ist es richtig, zu jedem Bild einen Alt-Text hinzuzufügen?

Dies ist ein weit verbreiteter Irrtum. Wenn sich das Bild nur aus ästhetischen Gründen auf eurer Seite befindet, ist ein Alt-Text nicht zwingend notwendig. Genauso wenig wie bei Symbolen und Icons: der Eindruck für Screenreader und ähnlichen Tools verschlechtert sich, weil das Gerät auch hier vorlesen würde und so für einen negativen Eindruck sorgt. Ihr solltet ebenfalls auf Bilder verzichten, wenn ihr dekorative Stockfotos gebraucht, wie ihr sie zum Beispiel auf Pixabay findet. Bei vielen Inhalten ist es für den Gesamteindruck nun einmal besser, wenn der Screenreader sie ignoriert und übergeht. Wenn euer Bild keinen Alt-Text braucht, solltet ihr ganz einfach ein unausgefülltes Alt-Attribut hinzufügen, um die Screenreader daran zu hindern, den Dateinamen ganz vorzulesen.

Alt-Text schreiben in der Praxis

Zuallererst solltet ihr lernen, den Text so knapp und präzise zu halten wie es geht, ohne am Ausdruck zu sparen und ihn als natürlichen Bestandteil von SEO, sowie Ergänzuung der META-Daten zu sehen. Besonders User die Screenreader nutzen, sind oftmals genervt von viel zu langen Texten, deswegen müsst ihr dafür sorgen, dass eure Schreibe so aerodynamisch und schön gestaltet ist, wie es nur geht. Beschreibt den Bildinhalt so schlicht und treffend, wie es nur geht und verzichtet auf Experimente. Verzichtet an dieser Stelle bloß darauf, alles mit Keywords vollzustopfen, auch wenn die Versuchung groß ist. Des Weiteren müsst ihr besonders darauf achten, dass ihr keine großen Wiederholungen einbringt. Informationen, die im Kontext eurer Seite bereits vorhanden sind, müssen nicht extra noch im Alt-Text erwähnt werden. Wenn eure Seite eine Galerie von Michael Jackson ist, müsst ihr im Alt-Text nicht extra „Bild von Michael Jackson“ schreiben. Es ist sehr wichtig, die Buttons nicht zu vergessen und auch sie mit Alt-Attributen zu versehen, damit auch User, die Screenreader verwenden,e eure Page im vollen Umfang nutzen können.

Ein Beispiel für einen guten Alt-Text

Stellen wir uns ein Bild von einem Fernseher vor, der von einer Blue-Ray Sammlung umrahmt wird. Ein negatives Beispiel für einen Alt-Text wäre folgender: <img src=“Fernseher.png“ alt=Fernseher Blu-Ray regal wohnzimmer“> , damit lässt sich in der Tat wenig anfangen. Ein ausdrucksstarkes, positives Beispiel wäre folgendes: <img src=“Fernseher.png“ alt=Ein 8k Fernseher, mit einer Blu-Ray Sammlung“> . Dieser Text ist expressiv und auf den Punkt: Also genau das, was in dieser Disziplin gefragt ist. Wenn es sich um technische Produkte handelt und ihr einen Shop führt, könnt ihr auch die jeweilige Seriennummer angeben, diese Praxis ist im E-Commerce gang und gäbe.

Fehlende Alt-Attribute?

Wenn du Alt-Attribute suchst, stehen euch eine Vielzahl von Tools zu Verfügung, um sie ausfindig zu machen. Bevor ihr euch zu viele Sorgen um das Thema macht, müsst ihr, wie zuvor erwähnt, daran denken, dass der fehlende Alt-Text nicht immer ein Problem darstellt. (Merke: Dekorative, visuelle Elemente) ihr solltet auf keinen Fall nach der Nadel im Heuhaufen suchen und jede Seite nach fehlenden Attributen durchforsten. Konzentriert euch einfach auf die Inhalte, die am meisten Traffic erhalten und fangt an, die dortigen Alt-Texte zu optimieren. Manche von euch werden sich fragen, was solche kleinen Veränderungen schon bringen sollen. Doch haltet euch Folgendes vor Augen: wenn ihr höher rankt, kann das locker eine Trafficsteigerung von hunderten Usern bedeuten. Die Alt-Text Optimierung lohnt sich von daher fast immer.

Welche Tools lohnen sich für die Alt-Text-Optimierung?

Diverse Tools stehen euch zur Optimierung zur Verfügung: Für Google Chrome gibt es den Alt Text Tester und für WordPress Alt Text Tools. Ersteres Tool bietet euch die praktische Option, euch den Alt-Text eines Bildes anzuzeigen, wenn ihr mit der Maus drüberfahrt. Wann immer also ein Text fehlt, könnt ihr es ganz klar erkennen und handeln. Wenn ihr eure Bilder auf diese Weise durchgeht, entwickelt ihr schnell ein gutes Bauchgefühl dafür, was ihr ändern und hinzufügen müsst. Ihr spart euch auf diese Art und Weise sehr viel Zeit und Mühe. Um ein gutes Gefühl für das Schreiben von Alt-Texten zu bekommen, solltet ihr vielbesuchte Websites mit dem Alt Text Tester durchforsten und euch Notizen machen. So lernt ihr von den Besten und könnt euch rasch das Wissen der Profis aneignen. Bei komplexen Themen wie Seitenstrukturen lohnt sich die Zusammenarbeit mit Experten: Weil wir von eBakery eine über 10-jährige Expertise im E-Commerce vorweisen können, sind wir der ideale Partner, wenn es um eure Online-Belange geht. Vereinbart gerne einen unverbindlichen Gesprächstermin, wir werden euch mit Rat und Tat zur Seite stehen und euch alle Fragen beantworten. Wir freuen uns auf eure Nachricht!