Der Alt-Tag und der Title-Tag sind zwei HTML-Attribute, die du bei Bildern auf einer Website einsetzen kannst, um diese mit Text zu beschreiben. Beide gehören zum <img>-Element im Quellcode einer Seite, erfüllen aber unterschiedliche Aufgaben: Der Alt-Tag liefert eine Textalternative zum Bild, der Title-Tag zeigt beim Überfahren mit der Maus eine zusätzliche Information an. Vor allem der Alt-Tag ist sowohl für die Barrierefreiheit als auch für die Suchmaschinenoptimierung relevant.
Was ist der Alt-Tag?
Das Alt-Attribut (kurz: Alt-Tag, ausgeschrieben alternative text) ist eine Textbeschreibung, die direkt im HTML-Code an ein Bild gebunden ist. Du siehst diesen Text im normalen Seitenbesuch nicht — er wird nur dann angezeigt, wenn das Bild aus irgendeinem Grund nicht geladen werden kann, etwa wegen einer unterbrochenen Verbindung oder einem veralteten Browser.
Im Quellcode sieht das so aus:
<img src="/beispiel-seite.at/bilder/katze.jpg" alt="Graue Hauskatze liegt auf einer Fensterbank">
Der Text innerhalb der Anführungszeichen nach alt= ist der Alternativtext. Er beschreibt knapp und präzise, was auf dem Bild zu sehen ist — im Idealfall so, dass jemand, der das Bild nicht sieht, trotzdem versteht, was es zeigt.
Eine wichtige Rolle spielt der Alt-Tag für Screenreader. Das sind Programme, die blinden oder sehbehinderten Menschen den Inhalt einer Website vorlesen. Fehlt der Alt-Tag, liest der Screenreader im besten Fall den Dateinamen vor — also etwas wie IMG_20240312.jpg, was niemandem hilft. Ein guter Alternativtext macht eine Website barrierefrei zugänglich und ist seit HTML 4.01, der 1999 veröffentlichten Spezifikation des W3C (World Wide Web Consortium), als Pflichtangabe für <img>-Elemente vorgeschrieben.
Eine Sonderregel gilt für rein dekorative Bilder — etwa einen Zierstrich oder eine Hintergrundgrafik ohne inhaltliche Bedeutung. Hier setzt du ein leeres Alt-Attribut (alt=""), damit der Screenreader das Bild einfach überspringt, anstatt es anzusagen.
Was ist der Title-Tag?
Das Title-Attribut (auch Title-Tag genannt) ist ein sogenanntes Universalattribut in HTML — du kannst es nicht nur bei Bildern, sondern bei fast allen HTML-Elementen einsetzen, auch bei Links, Absätzen oder Tabellen. Bei Bildern erzeugt es einen kleinen Tooltip: ein Textfeld, das aufklappt, wenn du mit der Maus über das Bild fährst, ohne zu klicken.
Im Code sieht das kombiniert so aus:
<img src="/beispiel-seite.at/bilder/katze.jpg" alt="Graue Hauskatze liegt auf einer Fensterbank" title="So richtest du einen Schlafplatz für deine Katze ein">
Der Title-Tag ist optional. Er eignet sich für ergänzende Informationen, die nicht zwingend in den Alternativtext gehören — zum Beispiel ein Hinweis auf den Kontext oder das Ziel eines verlinkten Bildes. Wichtig zu wissen: Viele Screenreader ignorieren das Title-Attribut oder lesen es nur unter bestimmten Bedingungen vor. Auf mobilen Geräten funktioniert der Mouseover-Tooltip gar nicht, da es dort keine Maus gibt. Das Title-Attribut ist daher kein zuverlässiges Mittel für Barrierefreiheit.
Geschichte: Von den Anfängen des Webs
Der Vorläufer des Alt-Tags entstand schon 1993, als Marc Andreessen — damals Mitentwickler des Browsers Mosaic — die Möglichkeit einführte, Bilder direkt in Webseiten einzubetten. Schon damals war die Idee im Raum, eine Textalternative für Bilder vorzusehen, falls diese nicht angezeigt werden konnten. Der HTML-1.2-Entwurf aus demselben Jahr enthielt das Alt-Attribut erstmals offiziell. Ab HTML 4.01 (1999) wurde es für Bildtags zur Pflicht.
Eine unrühmliche Episode in der Geschichte des Alt-Tags lieferte der Internet Explorer: Die Versionen 7 und älter zeigten den Alt-Text als Tooltip beim Mouseover an — also genau das, wofür das Title-Attribut gedacht ist. Das führte dazu, dass viele Webentwicklerinnen und -entwickler über Jahre hinweg Alt-Text wie Title-Text befüllten, was die Unterscheidung der beiden Attribute vernebelte. Erst mit dem Internet Explorer 8, der 2009 erschien, wurde dieses Verhalten korrigiert.
Dass Barrierefreiheit im Web keine Kleinigkeit ist, zeigte ein australisches Gerichtsverfahren aus dem Jahr 2000: Ein blinder Mann klagte das Organisationskomitee der Olympischen Spiele in Sydney, weil die offizielle Website olympics.com keine Alt-Attribute bei Bildern verwendete und damit für Screenreader-Nutzende nicht zugänglich war. Die australische Menschenrechtskommission gab ihm Recht — eines der ersten Urteile weltweit, das Barrierefreiheit im Web rechtlich durchsetzte.
Alt-Tag und Title-Tag in der Suchmaschinenoptimierung
Für SEO ist der Alt-Tag deutlich relevanter als der Title-Tag. Google selbst beschreibt in seiner offiziellen Dokumentation zu Bildrichtlinien, dass es den Alt-Text zusammen mit Computer-Vision-Algorithmen und dem restlichen Seiteninhalt verwendet, um zu verstehen, was ein Bild zeigt.
Konkret bedeutet das: Der Alt-Tag ist ein bestätigter Rankingfaktor für die Google Bildersuche. Wer Bilder in den Suchergebnissen der Bildsuche sichtbar haben will, kommt um sorgfältig ausgefüllte Alt-Texte nicht herum. Für die reguläre Websuche behandelt Google den Alt-Text wie gewöhnlichen Seitentext — er zählt also zum Gesamtbild der OnPage-Optimierung, ist aber kein eigenständiger Rankingfaktor mit Sondergewicht.
Besonders nützlich ist der Alt-Tag, wenn ein Bild gleichzeitig als Link fungiert: In diesem Fall übernimmt der Alt-Text die Rolle des Ankertextes — also des klickbaren Linktextes — und beeinflusst so auch, wie Google den verlinkten Inhalt einschätzt.
Das Title-Attribut spielt in der Suchmaschinenoptimierung kaum eine Rolle. Google wertet es für die Bildsuche nicht besonders aus, und für Barrierefreiheit ist es, wie beschrieben, unzuverlässig. Den meisten Aufwand lohnt es sich daher in den Alt-Tag zu stecken.
Gute Alt-Texte schreiben: Was du beachten solltest
Ein guter Alternativtext beschreibt, was auf dem Bild tatsächlich zu sehen ist — sachlich, knapp und ohne Füllwörter. Empfohlen werden zwischen 50 und 100 Zeichen, auch wenn es keine technische Obergrenze gibt. Enthält das Bild Text, gehört dieser in den Alt-Tag. Enthält es ein Diagramm oder eine Statistik, beschreibst du den Typ und das Thema, nicht jedes Detail.
Keywords dürfen im Alt-Tag vorkommen, sollten aber organisch aus der Beschreibung entstehen — nicht künstlich hineingestopft werden. Keyword Stuffing im Alt-Tag wertet Google als Spam-Signal und kann das Ranking verschlechtern.
Rein dekorative Bilder bekommen wie erwähnt ein leeres Alt-Attribut (alt=""). Bilder, die aus dem CSS eingebunden werden (background-image), haben überhaupt kein Alt-Attribut — sie sind für Suchmaschinen und Screenreader unsichtbar.
Häufige Fragen
Was ist der Unterschied zwischen Alt-Tag und Title-Tag?
Der Alt-Tag ist eine Textalternative zum Bild, die Screenreadern und Suchmaschinen zur Verfügung steht und beim Nichtladen des Bildes angezeigt wird. Der Title-Tag erzeugt einen Tooltip beim Überfahren des Bildes mit der Maus und ist für SEO und Barrierefreiheit deutlich weniger relevant.
Muss jedes Bild einen Alt-Tag haben?
Bilder mit inhaltlicher Bedeutung brauchen einen beschreibenden Alt-Tag — das ist laut HTML-Standard Pflicht und auch für Barrierefreiheit und SEO wichtig. Rein dekorative Bilder, die keinen inhaltlichen Beitrag leisten, bekommen stattdessen ein leeres Alt-Attribut (alt=""), damit Screenreader sie überspringen.
Hilft der Alt-Tag beim Google-Ranking?
Für die Google Bildersuche ist der Alt-Tag ein bestätigter Rankingfaktor. Für die reguläre Websuche behandelt Google den Alt-Text wie normalen Seitentext — er trägt zur thematischen Relevanz der Seite bei, ist aber kein Faktor mit Sondergewicht. Das Title-Attribut eines Bildes hat hingegen kaum SEO-Relevanz.
