Bilder: Alt-Text und/oder Title-Text? – Image-Tag Grundlagen

Bilder: Alt-Text und/oder Title-Text? – Image-Tag Grundlagen

Bild mit Wort Bild
Bild im Bild

[Neu (Nov. 2017): „Was ist wichtiger – Alt-Text oder Title-Text?“ und „Was soll man in Alt-Text und Title-Attribut reinschreiben?] „Wofür ist der Alt-Text?“ – „Wie wichtig ist der Alt-Text bei Bildern?“ -Dieser Artikel beschäftigt sich mit den Grundlagen der Bilder auf Websites. In den vergangenen Tagen habe ich zwei Untersuchung zu einigen Image-Attributen gemacht: „Img-Attribute src, alt und title“ (Schwerpunkt Bildersuche) und „Image Attribute bei google-Universal-Search Bildern“ (Schwerpunkt Universal-Search Bilder). Dabei ging es im Wesentlichen um den Einfluss der Attribute als Ranking-Faktoren. Also SEO-Fragen. Aber natürlich ist die Suchmaschinen-Optimierung nur ein I-Tüpfelchen. Bilder werden ja nicht für Suchmaschinen in die Webseite integriert, sondern für den Benutzer. Daher will ich in diesem Artikel mal die grundsätzlichen Basics zum dem Image-Tag beschreiben.

Source: Pfadangabe / URL des Bildes

Eine HTML-Seite, die der Browser darstellt, wird durch sogenannte „TAGs“ strukturiert. Ein Bild auf einer Website wird durch einen „Image-Tag“ aufgerufen. Der HTML-Code zum Aufruf eines Bildes sieht ungefähr so aus:

<img src="www.domain.de/folder/bild.jpg" />

Entscheidend für den Aufruf des Bildes ist natürlich die Angabe der Bildquelle. Über welche URL kann das Bild aufgerufen werden. Die Angabe kann wie bei allen URL-Angaben absolut oder relativ sein. Ich empfehle grundsätzlich, alles URL-Angaben absolut zu machen. Relative Pfadangaben sind potentielle Fehlerquellen. Das SRC-Attribut ist das einzige, was zwingend erforderlich ist. Logisch. Alle folgenden Attribute sind optional und dienen der Beschreibung des Bild-Inhaltes oder der besseren Darstellung und Positionierung.

Width und Height

Neben der Bildquelle (source, src) sollten auch width und height (Weite und Höhe) gesetzt werden.

<img src="www.domain.de/folder/bild.jpg"
   width="100" height="150" />

Grund: Der Seitenaufbau geht dadurch schneller vonstatten, weil der Browser für die Darstellung nicht erst warten muss, bis das Bild heruntergeladen ist und dadurch diese Werte ermittelt wurden. Stattdessen setzt der Browser ein „Dummy-Container“ mit den angegebenen Werten und baut weiter die Seite auf. Das Bild kann dann erst im Anschluß geladen werden und wird in den Container eingesetzt. Die Width- und Height-Angaben können von der tatsächlichen Bildgröße abweichen. Das Bild wird dann in den Container „reingequetscht“ – man nennt das „Skalieren“. So kann man nicht nur die Bildgröße, sondern auch die Proportionen des Bildes anpassen.

Aus Qualitätsgründen würde ich jedoch dringend davor abraten, Bilder im HTML-Code zu skalieren. Die Engine, die das Bild umrechnet, ist wesentlich schlechter als bei vernünftigen Bildbearbeitungsprogrammen (z.B. Adobe Photoshop oder freeware Gimp). Das führt dazu, dass die Bilder grobe Artefakte zeigen, verschwommen, unsauber und insgesamt unschön aussehen. Daher: Bilder immer mit einem Grafikprogramm auf die richtige Größe skalieren und dann eins zu eins im HTML-Quellcode einfügen.

Der Alt-Text

Als nächstes kann sollte man ein ALT-Attribut definieren:

<img src="www.domain.de/folder/bild.jpg"
   width="100" height="150"
     alt="Ich bin ein Bild" />
Der Alt-Text
Der Alt-Text

Der Alt-Text wird, wie der Name vermuten läßt, alternativ angezeigt. Also nur, wenn das Bild aus welchen Gründen auch immer, nicht zu sehen ist. Das kann verschiedene Gründe haben: Server-Problem, falschen Pfadangabe, Bilder per Browser deaktiviert, oder eben eine „Lesehilfe“ für Benutzer mit Sehschwäche oder Blindheit. Aus Sicht des W3C ist der Alt-Text daher auch eine „Pflicht-Angabe“. Der Browser kann das Bild in aller Regel auch ohne Alt-Text anzeigen, aber es ist dringend anzuraten, den Alt-Text zu setzen.

Bild-Title (Universal-Attribut)

Zusätzlich kann man bei einen Bildaufruf das „Universal-Attribut“ Title definieren:

<img src="www.domain.de/folder/bild.jpg"
   width="100" height="150"
     alt="Ich bin ein Bild."
   title="Ich bin ein Bild. [z.b. Copyright bei Autor]" />
Tooltip Bild
Tooltip Bild

Das Title-Attribut erscheint im Browser als „Tooltip“. Wenn man mit dem Cursor auf ein Element mit Title-Attribut rollt, so erscheint nach kurzer Zeit eine Art „Layer mit Erklärungstext“. Und zwar ist genau der Text zu lesen, der im Title-Attribut gesetzt wird. Das Title-Attribut ist also eine zusätzliche Information, und keine alternative.

Der legendäre Internet-Explorer 6 hatte die „Macke“, dass er statt des Title-Textes den Alt-Text als Tooltip angezeigt hat. Auch daher stammt das Gerücht, dass der Alt-Text der „Tooltip“-Text sei.

Title Attribute
Title Attribute

Viele Webdesigner/Programmierer orientieren sich beim Erstellen des HTML-Codes an den Vorgaben des W3C, die wunderbar auf der „SelfHTML„-Seite beschrieben sind. Auf der Seite der Tag-Attribute wird beim Image-Tag allerdings nicht das Title-Attribut aufgelistet. Daher sind viele der Meinung, dass man das „Title-Attribut bei Bildern“ überhaupt nicht setzen darf. Das ist allerdings nicht richtig. Denn „Title“ ist ein sog. Universal-Attribut, dass in fast allen vielen Tags gesetzt werden darf.

Das Title-Attribut kann als Tooltip für den Benutzer durchaus hilfreich sein – insbesondere dann, wenn ein Bild keine sichtbare Bildunterschrift hat. Ich würde daher empfehlen, es zu setzen. Zumindest eben dann, wenn die Bilder – aus welchen Gründen auch immer – keine Bildunterschrift haben.

longDesc – Bildbeschreibung

LongDesc ist die Abkürzung für „Long-Description“. Dieses Attribut wurde vor geraumer Zeit eingeführt, damit der Alt-Text der Bilder im Bedarfsfall nicht zu lang wird. Diejenigen, die eine ausführliche Bildbeschreibung anbieten wollten, sollten diese auf einer extra-HTML-Seite bereitstellen. Der Wert des longDesc-Attributes ist dann die URL zu dieser Bildbeschreibung.

<img src="www.domain.de/folder/bild.jpg"
   width="100" height="150"
     alt="Ich bin ein Bild."
   title="Ich bin ein Bild. [z.b. Copyright bei Autor]"
longdesc="https://www.tagseoblog.de/bilder-longdesc/bild.html" />

Das longDesc-Attribut wurde im Zusammenhang mit der „Barrierefreiheit für Websites“ eingeführt. Es hat sich allerdings nie durchgesetzt. Das Hauptproblem ist, dass die Browser es einfach nicht darstellen bzw. nutzbar machen. Im Firefox, kann man die Bildbeschreibungs-Html-Seite immerhin in den Eigenschaften des Bildes sehen. Aber die URL muss man per Hand kopieren und in die Adresszeile einfügen, um die Seite öffnen zu können. Nicht gerade komfortabel. Der longdesc kann daher aus meiner Sicht getrost weggelassen werden. Ich habe ihn bei keinem meiner Projekte benutzt. Für die findigen Bilder-Optimierer-SEOs ist er aber vielleicht ein schönes Testobjekt.

Die bisher genannten Attribute „Src“, „Alt“ und „Title“ (und „longDesc“) kann man auch „Content-sensitive“ Attribute nennen. Aus ihnen lassen sich textuelle-Informationen herauslesen. Diese Informationen sind für die Besucher hilfreich und bieten den Suchmaschinen die Möglichkeit, auf den Inhalt der Bilder zu schließen.

Grundlagen Images
Grundlagen Images Tag – Basics von Bildern auf Websites

Attribute zur Darstellung

Um das Bild sauber in die Website zu integrieren, gibt es eine Reihe von Darstellungsattributen, die aus der Urzeit des Internets stammen. So kann man zum Beispiel einen Rahmen definieren (border=“4″). Der Wert („4“) gibt dabei die Pixelbreite des Rahmens an. Ich will aber hier jetzt gar nicht weiter auf diese „Uralt-Attribute“ eingehen, weil man die Darstellung heutzutage natürlich über CSS („Cascading Style Sheet“) löst. Hierbei definiert man in einem Style-Attribut die Erscheinung des Bildes:

<img src="www.domain.de/folder/bild.jpg"
   width="100" height="150"
     alt="Ich bin ein Bild."
   title="Ich bin ein Bild. [z.b. Copyright bei Autor]"
   style="border:#111 4px solid; float:left; margin:0 12px 0 0" />

In diesem Beispiel wird dem Bild ein Rahmen gegeben, und zwar 4 Pixel breit, Farbe dunkelgrau( #111), Rahmenlinie durchgezogen (solid). Das Bild passt sich links in den Text ein (float: left) und hält einen Textabstand zum Text (0-oben, 12 pixel nach rechts, 0 px unten und 0 px links). Mehr über CSS-Formatierung hier.

Naja, und natürlich sollte man auf einer sauber gebauten Seite die CSS-Angaben übergeordnet in einer separaten CSS-Datei ablegen. Darin werden dann Klassen-Elemente definiert, die im HTML-Code als Klassen-Selektor aufgerufen werden. In unserem Beispiel sieht das dann so aus:

<img src="www.domain.de/folder/bild.jpg"
   width="100" height="150"
     alt="Ich bin ein Bild."
   title="Ich bin ein Bild. [z.b. Copyright bei Autor]"
   class="bild-Style" />

Die Klasse Bild-Style kann dann von jedem Bild auf der Website aufgerufen werden.Tja, und genau so, wie hier beschrieben, setze ich meine Bilder ein: width und height, alt, title und class. Wer es nicht glaubt, kann gerne den Quelltext öffnen und sich die Sache ansehen.

Fazit: ALT-Text und/oder Title-Text?

Images
Images – Bilder

Also: longDescription kann man vernachlässigen. Die Darstellungsattribute sind individuell. Der Dateiname sollte natürlich schon mit dem, was auf dem Bild zu sehen ist zu tun haben. Alt-Text und/oder Title-text? Und was schreibt man wie umfangreich rein?

Wie oben beschrieben, sollte der Alt-Text unbedingt gesetzt werden. Was man genau hineinschreibt, überlegt man am Besten, wenn man sich vorstellt, dass an der Stelle, an der das Bild eigentlich erscheinen soll, nur ein text steht. Was macht dann Sinn? Welche Begriffe würden das Bild am treffendsten ersetzen. Ich nehme zumeist eine sehr kurze Beschreibung. Natürlich kann kein Text der Welt die Wirkung eines Bild auch nur annähernd ersetzen. Daher nehme ich meist die Stichwörter, die mich zum Einsatz eines Bildes motiviert haben. Oft genug ist das nicht genau das, was auf dem Bild konkret zu sehen ist, sondern das, was mit dem Bild visualisiert werden sollte.

Auch den Einsatz des Title-Attributes habe ich oben beschrieben: Als Tooltip zeigt er im Grunde die Informationen, die eine Bildunterschrift haben sollte. Das ist zunächst der „Titel des Bildes“. Hinzu kommen können Angaben über Aufnahmeort oder -zeit, den Autoren, über Copyright oder ähnliches. Daher ist der Title bei mir oft länger als der Title-Text – oder er ist eben identisch. In einem identischen Alt- und Title-Text sehe ich überhaupt kein Problem, weil es zwei völlig verschiedene Sachen sind: der eine ist wichtig, wenn das Bild nicht zu sehen ist, der andere ergänzt das Bild.

Bild im Bild
Bild im Bild (Bild mit dem Begriff Bild im Zentrum)

Sogut zu den Grundlagen zu Bildern auf Websites – zumindest was den HTML-Teil betrifft. Falls ich etwas vergessen habe, würde ich mich über einen enstprechenden Kommentar freuen.

Weiterführende Weblinks und Artikel

33 Gedanken zu „Bilder: Alt-Text und/oder Title-Text? – Image-Tag Grundlagen

  1. Servus Martin! Schöner Artikel :) A propos Bilder: Mein Bilder-SEO-Experiment nähert sich auch langsam dem Ende. Knapp 2 Wochen noch ;) In diesem Sinne erstmal schönes Wochenende!

  2. bald bekommt die bildsuche bestimmt auch noch soetwas wie ein search-wiki. die keywordvergabe von usern und das pushen oder entfernen von ergebnissen fände ich gerade bei der bildsuche sehr sinnvoll. teilweise ist es ja echt mist was da geliefert wird.
    meinst du nicht, dass die linkstärke hier auch noch ein faktor ist??
    das wäre doch mal ein test wert, oder?? 2 identische bilder mit den gleichen bedingungen. eins wird von einer linkschwachen und eins von einer linkstarken seite verlinkt. bin mir sicher dass zweiteres besser ranken wird.

  3. @ JM: Was meinst Du mit „Linkstärke“? Pagerank, Keyword, Authority … Mit dieser Frage – und den Überlegungen dazu – füttere ich einen ganzen Blog (nämlich diesen) :-)
    Gruß, Martin

  4. Vielen Dank für diesen Artikel! Ich habe die Alt-Texte bisher eher vernachlässigt, obwohl mein Shopsystem die Möglichkeit dazu bietet. Und für die Suchmaschine macht es dann wohl auch eher Sinn, vernünftige Bild beschreibende Texte zu verwenden anstatt die Meta-Tags nochmal reinzukopieren, so wie andere es zum Teil machen.

  5. Die Aussage „Der legendäre Internet-Explorer 6 hatte die “Macke”, dass er statt des Title-Textes den Alt-Text als Tooltip angezeigt hat.“ ist meiner meinung nach falsch. Der IE6 zeigt nicht STATT des Title-Textes den Alt-Text an. Der Alt-Text wird nur als Title-Text angezeigt, wenn kein Title-Text angegeben wurde. Die Mit der Angabe title=““ wird auch nicht mehr der Alt-Text als Title-Text angezeigt. Und DIESE Macke HATTE der IE6 nicht nur, er HAT sie immer noch.

  6. Hi, ich finde den Beitrag sehr gut. Nur finde ich die Title tag nicht immer so toll. Auf diversen analyse Seiten wird dies als Ranking-Faktor mit in die Wertung genommen, aber wenn ich Bilder habe, die keine Erklärung brauchen, aber einen title tag haben sollen, damit die Wertung in der Analyse stimmt, geht das auch? Also ich mein die sollen von mir aus einen title tag haben, aber der soll dann nicht jedes mal aufploppen, wenn man drüber fährt.

    MFG

  7. Hallo,
    unsere Webseite ist vor ca 1 Jahr mit Joomla neu gestaltet worden. Ich selber nutze jetzt das Content System, um die Seite aktuell zu halten und habe auch bei dem Anlegen der Bilder verschiedene Sachen immer mal eingegeben. In dem Artikel finde ich vieles wieder, was auch im HTML Code steht. Aber mein Problem ist, dass die Bilder von Google z.B. überhaupt nicht gefunden werden. Kann mir da jemand weiterhelfen? Oder liegt es evt an der Progammierung der Seite? Sag schon mal Danke für eure Tipps.

  8. @Nana
    In der robots.txt-Datei auf eurer Seite wird den Suchmaschinen-Bots der Zugriff auf das Verzeichnis /images/ explizit untersagt:
    User-agent: *
    Disallow: /administrator/
    Disallow: /cache/
    Disallow: /components/
    Disallow: /images/
    Disallow: /includes/

    Die Bots halten sich üblicherweise daran. Die Zeile mit /images/ muß da raus oder die Bilder, die in den Suchindex sollen, müssen in einem anderen Verzeichnis liegen.

  9. Super, danke für die Erklärung. Habe gerade einem Kollegen gesagt, dass bei den Bildern auf seiner Seite alt & title attribute fehlten – und festgestellt, dass ich bei mir nur title, nicht aber alt gesetzt habe: Das gibt jetzt Arbeit für mich :/

  10. Eine Frage: Ist es denn für Seo irgendwie nachteilig, wenn man Alt-Text und Titel gleich benennt? Oder bringt es mehr es verschieden zu benennen?

  11. Danke für den Artikel, ist alles wichtige klar aufgelistet.

    Gibt es eine Möglichkeit den Textfür den Title-Tag zu formatieren ? (z.B.: Schriftgröße, Schriftart)

  12. Es ist echt ein Witz. Auf einigen html Seiten gewesen, doch nirgendwo so richtig Fündig geworden. Dann dein Bild in den serps gesehen und gedacht, na mal sehen was der SEO zum Thema zu sagen hat.
    Dein Artikel ist leicht und verständlich und hat mir sehr geholfen. Als Dank kriegst du diesen Kommentar :)

  13. Hallo Martin,

    prima und gut erklärt, Deine Seite. Habe sie gleich an jemanden weiter empfohlen, der zu Tooltipps Fragen hatte.
    Folgende Ergänzung hätte ich noch:
    Einen Zeilenumbruch erreicht man mit \n (backslash n)
    Und eine tolle Seite für die unterschiedlichsten Formatierungen von Tooltipps:
    walterzorn.de/tooltip/tooltip.htm
    Der Autor ist leider schon verstorben, so dass die Seite zwischenzeitl. nicht im Netz war. Zum Glück hat sich ein Nachfolger gefunden, der sie weiter betreibt.

    LG Frank

  14. Hallo Martin,
    die Frage von Sabrina hätte ich auch gern näher beleuchtet.
    „Ist es denn für Seo irgendwie nachteilig, wenn man Alt-Text und Titel gleich benennt? Oder bringt es mehr es verschieden zu benennen?“
    Meine Meinung dazu: Bei dem zusätzlichen Title-Tag besteht doch irgendwie leicht die Gefahr des Keywordspamming.
    Ich meine, wenn ich nur eine schwarze Katze auf dem Bild habe dann steht das auch in meinem alt-Tag. Das Bild heißt natürlich auch so und optimal auch die Datei. Im Text kommt die schwarze Katze auch vor. Die Bildunterschrift ist natürlich auch so. Wenn der Title-Tag nun auch so wichtig ist dann schreib ich da natürlich auch schwarze Katze rein.
    Ich sehe keinen Grund warum ich mir da eine Umschreibung aus den Fingern ziehen sollte oder auch ein Copyrightvermerk wie Du es machst etc. Eine schwarze Katze ist nun mal eine schwarze Katze.
    Wenn ich mir jetzt aber mal den html-Code anschaue dann sieht es doch schon etwas spamlastig aus. SO ein richtig gute Gefühl hab ich nicht dabei.
    Was sagst Du dazu?
    Was sagt Google?
    Ich bin mir wirklich nicht so sicher.
    Wenn es von Google erlaubt ist, dann sollte man auch immer „schwarze Katze“ schreiben dürfen ohne irgendwelche Umschreibungen.
    Vielen Dank.

    LG Mario

    1. Hallo Mario,
      es macht nach meiner Erfahrung inzwischen keinen Unterschied, ob ein Title-Attribut gesetzt wird oder nicht, und es ist auch irrelevant, was drin steht, solange das Keyword irgendwie darin auftaucht (wenn das Title-Attribut komplett andere Begriffe benutzt werden, dann verwirrt das den Bot natürlich).
      Und klar: das Title-Attribut war eine pfiffige Möglichkeit, die Keyword-Relevanz (positiv formuliert) zu erhöhen. Nur: das sah nie (!) nach Keyword-Spaming aus, weil es ja keinen Besucher gestört hat. Aber wie gesagt: inzwischen halte ich es für überflüssig. Es ist eben ein Tooltip. Wenn es für die Usability sinnvoll ist, würde ich es weiter benutzen, sonst weglassen.

  15. „Also: longtext kann man vernachlässigen.“
    Bin Laie, trotzdem oder grad deshalb: Sollte es nicht heißen, wie obendrüber,
    „longDesc“?

  16. Hi,

    welchen html-code müßte ich verwenden,
    um mir die Bildeigenschaften unter dem Bild auf der Homepage anzeigen zu lassen?

    z.B.: ich habe ein Bild eingefügt und möchte dass die Bild-Details wie z.B. Kameraname, Aufnahmedatum,
    Blendenzahl
    Brennweite
    etc

Kommentare sind geschlossen.

Kommentare sind geschlossen.