Was ist das ALT-Attribut?
Das ALT-Attribut (auch ALT-Tag genannt) wird dafür verwendet, um Bilder und Grafiken einer Website mit kurzen Worten zu beschreiben.
Das „ALT“ steht dabei als Abkürzung für „alternativer“ Text.
Sinn und Zweck des ALT-Attributs hinsichtlich SEO
Den Begriff „ALT-Attribut“ hört man meistens im Bereich der Suchmaschinenoptimierung.
Suchmaschinen können in der Regel nur Text auswerten und Bilder als solche nicht interpretieren. Google ist deshalb nicht in der Lage zu erkennen, was auf den Bildern einer Website abgebildet ist. Mithilfe des ALT-Attributs können wir unseren Bildern und Grafiken aber eine kurze Beschreibung mitgeben. Diese Beschreibung wird auch vom Googlebot und anderen Suchmaschinencrawlern registriert und hilft ihnen dabei zu erkennen, was auf einem Bild abgebildet ist. So kann die Suchmaschine den Inhalt eines Bildes besser verstehen und einem Thema zuordnen.
Die Angabe des ALT-Attributs wird von Google ebenfalls als Text ausgewertet und sollte daher im Idealfall auch das Hauptkeyword der Seite beinhalten. Jedoch sollten Sie jetzt nicht zwanghaft bei jedem Bild versuchen das Keyword unterzubringen, sondern nur dann, wenn es auch tatsächlich zum Motiv des Bildes passt. Eine grüne Kaffeetasse mit dem ALT-Attribut „Steuerberater Frankfurt“ auszuzeichnen wäre also suboptimal. Zudem kann es schnell passieren, dass Sie in den Bereich Keyword Stuffing rutschen, wenn Sie jedes Bild Ihrer Website mit Ihrem Hauptkeyword versehen.
In folgendem Video erklärt Google Mitarbeiter Matt Cutts, wie ALT-Attribute erstellt werden sollten:
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Weitere Gründe für die Verwendung eines ALT-Attributs
Auch außerhalb der Suchmaschinenoptimierung gibt es viele Gründe, weswegen Sie Ihren Bildern ALT-Attribute vergeben sollten. Kann ein Bild oder eine Grafik bspw. aufgrund technischer Probleme oder langer Ladezeiten auf einer Website nicht angezeigt werden, erscheint stattdessen der im ALT-Attribut hinterlegte Text. So können sich Nutzer dennoch vorstellen, welche Bilder auf der Website eigentlich dargestellt werden sollten. Zudem gibt es einige Internetuser, die die Darstellung von Bilddateien auf einer Website bewusst blockieren oder die über einen Browser surfen, der rein textbasiert ist und Bilder daher allgemein nicht darstellen kann.
Gleichzeitig trägt das ALT-Attribut auch zur Barrierefreiheit und damit zur Usability einer Internetseite bei. Sehbehinderte Menschen sind beispielsweise auf Screenreader angewiesen, die ihnen die Inhalte einer Seite vorlesen. Ähnlich wie Suchmaschinen können auch Screenreader Bilder als solche nicht interpretieren und daher nicht vorlesen. Ist jedoch ein ALT-Attribut hinterlegt, können Screenreader diesen lesen und dem Nutzer mitteilen.
Wie kann man ein ALT-Attribut einbinden?
HTML
Der Code für das ALT-Attribut wird als HTML-Element im Quellcode für eine Bilddatei hinterlegt. Sobald wir also die Quelle für ein Bild angeben, können wir gleichzeitig auch das ALT-Attribut mit angeben. In der Praxis sieht das dann so aus:
<img src=“bilddatei.jpg“ alt=“Beschreibung des Bildes“>
WordPress
In CMS-Systemen wie WordPress kann das ALT-Attribut auch ohne HTML-Kenntnisse eingebunden werden. Hierfür müssen Sie einfach auf das gewünschte Bild in der Mediathek klicken. Rechts sehen Sie dann bereits das Feld mit der Bezeichnung „Alternativtext“. Hier können Sie dann einfach das ALT-Attribut eintragen. Nach der Eingabe müssen Sie nichts mehr anklicken – das System speichert das ALT-Attribut automatisch.
Wie sieht das optimale ALT-Attribut aus?
Das ALT-Attribut sollte das dargestellte Bild möglichst präzise und in kurzen Worten beschreiben. Auf ganze Sätze sollten Sie aber verzichten. Falls möglich und zum Motiv passend, sollte das Hauptkeyword der jeweiligen Seite im ALT-Attribut enthalten sein.
Unterschied zwischen ALT-Tag und TITLE-Tag
Neben dem ALT-Attribut können Bilder auch mit einem TITLE-Tag versehen werden. Vielen Webmastern ist nicht ganz klar, wo genau der Unterschied zwischen beiden Attributen liegt.
Der Title-Tag wird dem User angezeigt, sobald dieser mit dem Mauszeiger über ein Bild fährt.
Der hauptsächliche Unterschied der beiden Attribute liegt demnach darin, dass das Title-Attribut für den Nutzer sichtbar ist, während das ALT-Attribut meistens unsichtbar bleibt (außer, das Bild kann nicht angezeigt werden). Auch das Title-Attribut wird von Google zur Auswertung des Bildinhalts herangezogen und liefert dem Nutzer weitere Informationen zu dem Bild. Grundsätzlich gelten für das Title-Attribut dieselben Regeln wie für das ALT-Attribut: Das Bild sollte kurz beschrieben werden und dem User evtl. weitere kurze Informationen dazu bieten. Wenn Sie sich nicht sicher sind, was Sie beim Title-Attribut angeben sollen oder Ihnen die Ideen fehlen, können Sie auch einfach den Text aus dem ALT-Attribut kopieren. Wird das Title-Attribut bei einem Bild nicht angegeben, wird nämlich ohnehin der ALT-Tag angezeigt, wenn ein User mit der Maus darüberfährt.
Und so wird das TITLE-Attribut eingebunden
HTML
Das Title-Attribut wird in einem HTML-Dokument an derselben Stelle eingebunden wie das ALT-Attribut, nämlich in derselben Klammer wie die Angabe der Bildquelle:
<img src=“bilddatei.jpg“ alt=“Beschreibung des Bildes“ title=“Titel des Bildes“>
WordPress
Auch in WordPress können Sie das Title-Attribut des Bildes dort eingeben, wo Sie auch das ALT-Attribut vergeben konnten. Das Feld für den Titel findet sich fast direkt darüber:
