ALT-Attribute: Was ist das und wie kann ich sie optimieren?

Von Steffen Grigori
Aktualisiert am 17.03.2024 | Lesezeit ca. Min.

Wer seine ALT-Attribute optimieren möchte, sollte zunächst wissen, worum es sich bei diesen überhaupt handelt. Das Wort stammt aus dem Webseiten-Jargon und gehört zur Webseitenbeschreibungssprache HTML (Hypertext Markup Language).

Funktionsweise des ALT-Attributs

Schon die frühen Versionen von HTML erlaubten das Einfügen von Bildern aus verschiedenen Quellen. Allerdings kam es immer wieder vor, dass die Quelle nicht geladen werden konnte. Dann war die entsprechende Stelle in der Webseite einfach leer.

Um das zu verhindern, können die Designer der Webseite dem Bild ein ALT-Attribut geben. ALT steht in diesem Zusammenhang für "Alternativ" und bedeutet nichts anderes, als dass der eingegebene String alternativ zum eigentlichen Bild angezeigt wird. Und zwar immer dann, wenn entweder die Quelle nicht verfügbar ist oder der Nutzer eingestellt hat, dass Bilder nicht geladen werden sollen. Letzteres kam in der Anfangszeit des mobilen Internets öfter vor, wird heute aber eher von sehbehinderten Personen genutzt, die darauf angewiesen sind, dass Texte vorgelesen werden.

Um ein ALT-Attribut zu erstellen, muss man dieses im HTML-Code definieren. Dies geht folgendermaßen:

[strong]<img src="Abbildung_1.jpeg" alt="ALT Tags optimieren ist einfach!">[/strong]

Wie man deutlich sieht, ist die Implementierung nicht schwierig. Aber das Optimieren von ALT-Attributen ist in vielerlei Hinsicht eine bewährte Methode, um die eigene Webseite zu verbessern. Und zwar nicht nur in den Augen der Nutzer, sondern auch in den Augen der Suchmaschinen.

In technischer Hinsicht ist das ALT-Attribut vom "longdesc"-Attribut abzugrenzen. Dabei handelt es sich um die sogenannte "long description", also eine ausführliche Beschreibung, die Nutzern als Tooltip angezeigt wurde. Neuere Browser zeigen als Tooltip hingegen das "Title"-Attribut, das eher als Kurzbeschreibung angesehen werden kann. Das W3C-Konsortium empfiehlt in den "Best Practices" nicht nur, die ALT-Tags zu optimieren, sondern möglichst auch einen entsprechenden Titel zu vergeben.

Nutzt man ein sogenanntes CMS, also ein "Content-Management-System", oder arbeitet mit WYSIWYG-Editoren ("What you see is what you get"), muss man nicht zwangsläufig den HTML-Code bearbeiten, um die ALT-Attribute hinzuzufügen. WordPress bietet dafür eine eigene Funktion im Bereich "Medien", wo für die Bilder ein "Alternativtext" eingegeben werden kann. Bei den verschiedenen Editoren gibt es häufig Werkzeuge, die es erlauben, die Attribute beim Einfügen der Bilder zu definieren.

ALT-Tags optimieren für SEO und Nutzer

ALT-Tags haben in der Suchmaschinenoptimierung eine besondere Bedeutung. Dies liegt daran, dass Bilder von den Index-Bots noch immer nicht richtig ausgelesen und analysiert werden können. Sie sind also darauf angewiesen, dass die Betreiber ALT-Attribute optimieren, damit man auch ohne das Bild weiß, was sich darauf befindet. Die Nutzer profitieren spätestens dann von einem guten ALT-Attribut, wenn sich das Bild nicht anzeigen lässt oder nicht geladen werden soll.

Dies kann natürlich ganz unterschiedliche Gründe haben. Zum Beispiel, weil die Quelle (aus dem Internet) nicht mehr verfügbar ist oder weil sich auf dem Server ein Verzeichnis geändert hat.

Wie sieht ein guter ALT-Tag aus?

Um seine ALT-Tags zu optimieren, sollte man sich grob an die in der folgenden Infografik beschriebenen Tipps und Ratschläge halten.

Tipps für gute ALT-Tags

Man sieht deutlich: die ALT-Tags zu optimieren, ist nicht besonders schwierig, wenn man sich an ein paar Regeln hält und sich eine passende Beschreibung ausdenkt. Dabei sollte man auch immer den Zweck des Bildes im Auge behalten: Handelt es sich um ein Bild in einem Zeitungsartikel, das dem Leser weitere Informationen bieten soll? Oder ist es ein Blogbeitrag, bei dem als Füller ein Stockfoto verwendet wurde?

Natürlich brauchen diese beiden Bilder völlig unterschiedliche ALT-Attribute, die es ebenfalls zu optimieren gilt. Nicht empfohlen wird übrigens, Beschreibungen zu verwenden, die mit "Bild von" oder "Foto von" beginnen, da man dadurch eine übermäßige Wiederholung hat, die schnell als Keyword-Stuffing aufgefasst werden kann.

icon

Keyword-Stuffing

Keyword-Stuffing, also die übermäßige Verwendung von Keywords, sollte unbedingt vermieden werden. Finden sich nämlich zu viele irrelevante Keywords in den ALT-Attributen, geht der Google-Bot (oder Bing, Yahoo etc.) davon aus, dass die Webseite nur zum Zwecke des Keyword-Spammings aufgebaut wurde. Die Strafen dafür sind empfindlich hoch und nicht selten findet sich eine eigentlich gute Webseite schnell ganz weit unten im Ranking wieder.

Der Zweck des Bildes ist entscheidend

Bilder können auf Webseiten zu unterschiedlichen Zwecken eingesetzt werden. Dementsprechend sollte man auch die ALT-Attribute optimieren. Zwar ist es den Suchmaschinen-Bots nicht immer möglich, den Zweck des Bildes zu erahnen, spätestens der Nutzer freut sich aber, wenn ein zweckgebundenes ALT-Attribut verwendet wurde.

Zur Veranschaulichung ein paar Beispiele:

  • Man verwendet auf einem Blog für Katzenbesitzer ein Bild in einem Artikel, um diesen aufzuwerten. Ein mögliches ALT-Attribut könnte so aussehen: "Graue Katze mit Hut"
  • In einem Artikel wird ein Diagramm oder Graph eingebunden, der dem Leser einen Mehrwert bietet und mit weiteren Informationen versorgt. Hier könnte man die ALT-Attribute so optimieren, dass Folgendes entsteht: "Kuchendiagramm: Marketing während Industriewende"
  • Bilder können auch als Buttons verwendet werden. In diesem Fall sollte die Beschreibung in jedem Fall auch die Funktion beinhalten, damit der Screenreader weiß, dass es sich hierbei um einen Link handelt. Mögliches ALT-Attribut: "Button: Navigation zur Hauptseite"
  • Ränder, Hintergründe oder Rahmen sollten nicht in der HTML-Datei auftauchen, sondern in der CSS-Datei verwendet werden. Verwendet man statisches HTML, lässt sich das aber nicht vermeiden. In diesem Fall ist die Empfehlung, das ALT-Attribut leer zu lassen. Dann wird es von den Screenreadern und den Suchmaschinen ignoriert.
  • Bilder anstelle von Text zu verwenden, wird generell nicht empfohlen, da das weder von den Suchmaschinen noch von Screenreadern ausgelesen werden kann. Möchte man seine ALT-Attribute optimieren, hat aber Bilder mit Text verwendet, sollte man diesen, unabhängig von der Länge, auf jeden Fall wiedergeben. "Alle unsere Träume können wahr werden, wenn wir nur den Mut haben, diese zu verfolgen", sollte also so auch unverändert in den ALT-Attributen verwendet werden.

Programme zur Unterstützung

Wer seine ALT-Attribute optimieren möchte, kann das manuell durchführen oder die Hilfe von Programmen in Anspruch nehmen. Dies nennt sich "Onpage-Optimierung", da jegliche Veränderungen nur an der eigenen Webseite durchgeführt werden, im Gegensatz zur "Offpage-Optimierung", wo die Optimierung indirekt stattfindet und andere Webseiten den Content so optimieren, dass die eigene gestärkt wird.

Ein paar der Tools für die Onsite-Optimierung wollen wir uns einmal genauer ansehen:

Yoast SEO

Eigentlich nur ein WordPress-Plugin, kann Yoast SEO den Nutzer nicht nur dabei unterstützen, die ALT-Attribute zu optimieren, sondern die diversen Richtlinien und "Best Practices" in der SEO im Allgemeinen einzuhalten. Es gibt eine kostenlose und eine kostenpflichtige Version, aber schon die kostenlose Variante bringt viele nützliche Features mit, unter anderem die Keyword-Optimierung, zu der auch die ALT-Attribute zählen.

ALT-Tags-Checker

Stellvertretend für ähnliche Tools sei der "ALT Tags Checker" erwähnt, der eine Webseite nach Bildern durchforstet und überprüft, ob diese mit relevanten ALT-Attributen ausgestattet sind. Er übernimmt allerdings keine Analyse, ob es sich dabei um relevante Inhalte handelt. Dies muss weiterhin manuell durchgeführt werden. Dafür sind die Tools komplett kostenlos und können bei kleineren Seiten dabei helfen, die ALT-Tags zu optimieren.

Lighthouse

Google selbst stellt mit Lighthouse die sogenannten "Chrome Developer Tools" zur Verfügung, die eine Reihe von Werkzeugen mitbringen, mit denen sich Webseiten darauf analysieren lassen, ob sie die von Google gewünschten Richtlinien für gute Webseiten einhalten. Das Tool ist kostenlos und kann unter Umständen auch dabei helfen, die ALT-Attribute zu optimieren. Lighthouse kann als Erweiterung für Chrome oder auf einer Node.js-Installation verwendet werden.

FAQ

An dieser Stelle möchten wir einige häufig gestellte Fragen zum Thema beantworten.

Weitere Artikel