ALT-Attribut
Mit dem Alt Tag (oder auch Alt-Attribut) können Bilder und Grafiken innerhalb eines HTML-Dokumentes markiert werden.
Ist die Bilddarstellung in einem Browser markiert, wird anstelle des Bildes der Alt-Tag angezeigt. Im Rahmen der Suchmaschinenoptimierung (SEO) ist es ein wichtiger Parameter bei der Onpage-Optimierung, da es für Google & Co. beschreibt, was auf dem Bild „zu sehen“ ist.
Wozu wird das ALT-Attribut benötigt?
Der Begriff Alt-Attribut besteht aus zwei Wörtern. „Alt“ ist dabei die Abkürzung für „alternativ“. Der Begriff „Attribut“ wird auch in der Grammatik verwendet. Hier ist das Attribut eine Beifügung zu einem Nomen, das dadurch noch exakter beschrieben wird. Der inzwischen ebenfalls gebräuchliche Begriff „Alt-Tag“ ist gleichbedeutend – das englische „tag“ bedeutet Markierung oder Auszeichnung. Im HTML-Code ist ein Attribut eine Ergänzung zu einem Befehl. Neben dem Alt Tag existieren noch weitere Tags wie H-Tags für Überschriften oder Title als Tags für Bilder.
Bei Bildgrafiken beschreibt der Alt-Text das Bild. Er dient primär diesem Zweck und nicht der Suchmaschinenoptimierung. Die im Alt-Text hinterlegten Informationen können dann als Alternative zur Grafik angezeigt werden. Das passiert zum Beispiel immer dann, wenn ein User-Agent keine Unterstützung für Bilder bietet oder User Bildgrafiken nicht automatisch von einem Browser oder einem Mail-Programm laden lassen. Ebenso können die Bilder-Attribute verwendet werden, wenn es Server-Probleme gibt und die Grafiken nicht geladen werden können. Darüber hinaus kann es vorkommen, dass Grafikadressen auf einer Website durch Verschieben der Bilderordner auf dem Server nicht mehr erreichbar sind. Auch dann greift der Alt Tag und wird anstelle des Bildes angezeigt.
Eine wichtige Rolle spielt der Alt Tag bei der Gestaltung von barrierefreien Websites. Auch in diesem Fall hat der Alternativtext für Bilder einen praktischen Nutzen: So können sich zum Beispiel blinde User mittels sogenannter „Screenreader“ Web-Inhalte vorlesen lassen. Da diese Reader keine Bilder interpretieren können, lesen sie die entsprechenden Alt-Tags vor. User mit Handicap haben auf diese Weise die Möglichkeit, nicht nur Texte, sondern auch Grafik-Elemente einer Website zu verstehen.
Beispiel für ein ALT-Attribut
Beispiel: Der Website-Auftritt von bild.de mit und ohne Bilder. Im Beispiel ohne Bilder sind lediglich einige Alt-Tags zu sehen – nämlich jene, die von den Redakteur*innen bzw. vom Redaktionssystem eingepflegt wurden.
ALT-Attribute als Inhalt für Suchmaschinen
Suchmaschine-Robots sind zwar sehr ausgereifte Datenerfasser, sie verfügen aber noch nicht über eine effiziente Bilderkennung und können nur Text lesen. Aus diesem Grund indizieren Suchmaschinen Bilddaten anhand zusätzlicher Informationen, die Crawler auf einer Website finden. Ein wichtiger Bestandteil zur Erkennung von Bildinhalten ist dabei das Alt-Attribut. Es hilft Suchmaschinen dabei, die Relevanz von grafischem Content für die Bildersuche und die organische Suche zu ermitteln.
Google selbst empfiehlt den Einsatz von Alternativtexten für Grafiken. In dem folgenden Video erläutert Matt Cutts (ehemals oberster Webspambekämpfer und Sprachrohr von Google), wie passende ALT-Texte erstellt werden können:
Wo wird das ALT-Attribut eingefügt?
Alt-Attribute werden als HTML-Elemente im Quelltext hinterlegt, und zwar direkt beim entsprechenden Bild-Link. Folgendes Beispiel zeigt einen Ausschnitt aus dem Quelltext, wo ein Alt Tag für eine Grafik hinterlegt wurde:
<img src=“/bilder/beispiel.jpg“ alt=“Beispiel für ein Alt-Tag“>
In Anführungszeichen hinter „alt“ steht der sogenannte Alt-Text. „img src“ gibt den Hinweis zur Grafik-URL an.
Welchen Inhalt sollten die ALT Tags haben?
Prinzipiell gibt es keine Beschränkung beim Ausfüllen des Alt-Attributs. Empfehlenswert ist es allerdings, das Bild so knapp und präzise wie möglich zu beschreiben. Als Anhaltspunkt gilt, dass man den Bildinhalt allein über die Textangabe wiedererkennen sollte. Vielfach reichen auch zwei Worte aus. Hat ein Bild keine Inhaltsfunktion, weil ein Webdesigner lediglich eine weiße Fläche einfügen wollte, kann das Attribut auch leer bleiben. Um Konfusionen beim Lesen des Quelltextes durch Browser zu vermeiden, sollte das Alt-Attribut auf jeden Fall gesetzt werden.
Ein leerer ALT-Tag würde dann so aussehen: alt=““
Wichtig ist, dass Webmaster, Writer oder SEOs den Tag nutzen, um darin auch das zentrale Keyword der Zielseite unterzubringen. In der Regel ergibt sich beim Beschreiben von Bildern automatisch eine Optimierung, indem ein wichtiges Keyword der entsprechenden Webseite darin vorkommt.
ALT-Tag vs. Title-Tag
Der Title Tag wird angezeigt, wenn User mit dem Cursor über ein Bild fahren. Ebenso kann das Title-Attribut auch Links näher beschreiben und Usern mehr Informationen über das Link-Ziel liefern.
Grundsätzlich unterscheiden sich Title Tag und Alt Tag also dadurch, dass der Title Tag Usern beim Mouseover Informationen anzeigt, während das Alt-Attribut üblicherweise für Besucher*innen nicht sichtbar ist und nur als Alternative zum Bild angezeigt wird. Denn wie bereits erwähnt: Das Alt-Attribut wird alternativ zur Bildbeschreibung genutzt. Wird der Title Tag eines Bildes jedoch nicht verwendet, erscheint in der Regel der Alt-Text beim Überfahren des Bildes mit der Maus.
Noch mehr Informationen: longdesc
Einige Browser, z. B. Firefox, unterstützten bislang ein zusätzliches Attribut, das noch über den Informationsgehalt von ALT-Attributen hinausgeht: longdesc. Der Internet Explorer muss für das Auslesen der Langbeschreibung extra konfiguriert werden. Allerdings wird longdesc im Zuge der Umsetzung von Websites mit HTML5 nicht mehr unterstützt und kann bei der Suchmaschinenoptimierung vernachlässigt werden.
Bei longdesc handelt es sich um eine längere Beschreibung, die Bildern hinzugefügt werden kann. Dies kann dann so aussehen:
<img src=“bilanzen2013.png“ alt=“Übersicht Bilanzen 2013″ title=“Hier sehen Sie die Bilanzen von xy aus dem Jahre 2013“ longdesc=“bilanzen2013-longdesc.html“>
Die lange Beschreibung wird nicht wie der Alt-Text unmittelbar in den Quelltext geschrieben, sondern als HTML-Dokument über einen Link hinterlegt. Wer sicherstellen will, dass longdesc auch von User Agents gelesen werden kann, die das Attribut nicht unterstützen, kann den Link zur ausführlichen Beschreibung auch separat im Quelltext hinterlegen.
Bei unserem Beispiel sähe das dann so aus:
<img src=“bilanzen2013.png“ alt=“Übersicht Bilanzen 2013″ title=“Hier sehen Sie die Bilanzen von xy aus dem Jahre 2013“ longdesc=“bilanzen2013-longdesc.html“>
<a href=“/bilanzen2013-longdesc.html“ title=“Beschreibung der Bilanzen aus 2013“>[D]</a>
Mit dem beigefügten [D] wird nochmals darauf verwiesen, dass es sich um die Beschreibung handelt.
Das ALT-Attribut und SEO
Auch wenn es auf den ersten Blick nur wenige Zeichen sind, die das Alt-Attribut umfasst, ist seine Wichtigkeit beim Optimieren von Websites jedoch nicht zu unterschätzen. So können Alt Tags vor allem bei der Bilderoptimierung helfen und für bessere Rankings z. B. in der Bildersuche bei Google und anderen Suchmaschinen sorgen. Neben Dateiname und Titel hat der Alt-Tag einen hohen Einfluss auf die Suchergebnisse in dieser vertikalen Suche.
Darüber hinaus helfen sinnvoll gesetzte Alt Tags im Zusammenspiel mit Title Tags im Sinne einer holistischen, also ganzheitlichen Suchmaschinenoptimierung, die Relevanz einer Webseite zu einem bestimmten Keyword zu stärken. Allerdings sollten sich Webmaster und SEOs dabei auf die Bildbeschreibung beschränken und das Attribut nicht zum Keyword Stuffing verwenden, was von Google & Co. schnell als Spamming ausgelegt werden könnte. Außerdem ist das Bildattribut nur eine von vielen Stellschrauben der Onpage-Optimierung und als Meta-Element nicht vergleichbar mit dem fürs Ranking relevanten Title.
