Was soll man in Alt-Text und Title-Attribut schreiben?

Was soll man in Alt-Text und Title-Attribut schreiben?

Alt-Text / Title-Attribut - was hineinschreiben?
Alt-Text / Title-Attribut – was hineinschreiben?

Im gestrigen Artikel ging es um die Frage, was wichtiger ist, der Alt-Text oder das Title-Attribut eines Bildes. Die Antwort ist ganz klar: der Alt-Text. In diesem Artikel geht es um die Frage, was man denn nun reinschreibt. Was sollte im Alt-Text stehen und was im Title-Attribut? Nicht wenige Webmaster haben Probleme damit, die „richtigen“ Begriffe zu finden. Das ist auf den ersten Blick tatsächlich nicht so einfach, auf den zweiten aber schon …

Alt-Text
Alt-Text

Der Alt-Text, also der Inhalt des Alt-Attributs eines Bildes, kommt immer dann zum Einsatz kommt, wenn das Bild nicht gesehen werden kann. Er ist der „Alternativ-Text„. Die Ursache (z.B. Serverprobleme, Browser-Voreinstellung oder Sehbehinderung) spielt keine Rolle. Der Alt-Text wurde nicht ersonnen, um Suchmaschinenoptimierern mehr Spielraum für Keyword-Stuffing zu bieten, sondern um Besuchern zu helfen.

Der Inhalt des Alt-Textes sollte den Inhalt des Bildes beschreiben, damit Menschen, die das Bild nicht sehen, verstehen können, was es zeigt. 

Das ist aber manchmal in der Tat nicht so einfach. Viele Webmaster fühlen sich beim Benennen und Beschreiben von Bildern unsicher.

Welche Keywords als Alt-Text?

Ein Grundproblem ist häufig, dass ein Webmaster ein Bild benutzt, das gar nicht direkt mit dem Inhalt im Zusammenhang steht. Wie soll man das Bild dann benennen?

Auf Facebook hat Benjamin Go ein interessantes Beispiel genannt, das ich hier aufgreifen möchte. Eine Website zum Thema „Reiserücktrittsversicherung“ zeigt ein Bild mit einer Familie am Strand, bei schönstem Badewetter. Mit dem Bild soll der Benutzer natürlich emotional eingefangen werden, um ihm dann die Notwendigkeit einer solchen Versicherung darzulegen. Was soll man bei so einem Bild in der Alt-Text schreiben?

  • Wenn man es „Urlaub am Strand“ nennt, hat es kaum mit dem Inhalt der Seite zu tun.
  • Wenn man es „Reiserücktrittsversicherung“ nennt, hat es kaum mit dem Inhalt des Bildes zu tun.

Was nun? Wie wäre der „richtige“ Alt-Text eines solchen Bildes?

Alt-Text und Title-Attribut - was hineinschreiben?
Alt-Text und Title-Attribut – was hineinschreiben?

Die Antwort ist ganz einfach: Der Webmaster hat nicht zuende gedacht :-)

  • Entweder ist das Bild falsch gewählt. Wenn das Bild für das Keyword „Reiserücktrittsversicherung“ wirklich optimal sein soll, dann sollte man ein für dieses Keyword passendes Bild benutzen. Wer unsicher ist, wie ein solches Bild aussehen müsste, benutzt einfach die Google-Bildersuche. Da findet man genau solche Bilder, die der Google-Algorithmus als „relevant“ und „geeignet“ herausgefiltert hat. Und zwar nicht nur aufgrund von Onpage-Signalen, sondern eben auch inklusive Offpage-Signalen wie Mehrfachverwendung, Klickrate und Verweildauer. Der Google-Bilder-Algorithmus ist inzwischen so ausgefeilt, dass man sich einigermaßen darauf verlassen kann, dass die dort gezeigten Bilder auch wirklich für die Benutzer eine Relevanz haben.
  • Oder der Inhalt der Seite ist (noch) nicht ausreichend. Wenn der Webmaster wirklich den emotionalen Zusammenhang zu dem „perfekten Strandurlaub“ aufbauen möchte, dann sollte das nicht nur im Bild, sondern auch in einer entsprechenden Textpassege geschehen. Das Bild mit dem Alt-Text „Urlaub am Strand“ ist perfekt in einem Absatz, der Lust auf den schönsten alle Urlaube macht. Es reichen zwei bis drei Sätze, um die erforderliche Relevanz zu schaffen. Bild und Text bilden immer einen Zusammenhang, der nicht nur irgendwie emotional zwischen den Zeilen wirkt, sondern ganz konkret und nachvollziehbar.

Wer immer Probleme mit dem Alt-Text eines Bildes hat, sollte sich genau diese Fragen stellen:

  • Ist das Bild tatsächlich relevant und geeignet?
  • Falls ja: wie kann man den Text so erweitern, dass das Bild in dem Kontext Sinn macht?

Relevanz in der Google-Bildersuche

Bild
Bild

Die Benennung und Beschreibung eines Bildes sollte – zumindest wenn es um Suchmaschinenoptimierung geht – immer ohne Kontext-Bezug stattfinden. Warum? Weil der Googlebot blind und emotionslos ist! Der Google-Algorithmus analysiert den „Bild-Inhalt“ durch Vergleich mit anderen Bildern und anhand aller Onpage-Signale, die er im Zusammenhang mit diesem Bild findet. Dabei gilt: je näher der Text am Bild steht, um so wichtiger ist er für die Keyword-Relevanzberechnung.

Ziel von Google ist es, in der Bildersuche die Bilder vorne zu ranken, die für das jeweilige Keyword die höchste Relevanz haben. Ein Webmasters sollte den Alt-Text also so wählen, dass ein Benutzer, der in der Google-Bildersuche nach genau diesem Keyword sucht, das Bild als relevantes Bild einstuft. Bei einer Bildersuche nach „Urlaub am Strand“ wäre das oben genannte Beispielbild sicherlich relavanter als bei der Bildersuche nach „Reiserücktrittsversicherung„.

Um die richtigen Begriffe für den Alt-Text zu finden, sind folgende Fragen hilfreich:

  • Zu welchem Keyword (1-5 Wörter) hätte das Bild in der Google-Bildersuche die höchste Relevanz?
  • Wonach müsste ein User suchen, damit dieses Bild der optimale Treffer wäre?
  • Wie würden andere das Bild bezeichnen?
  • Welchen Alt-Text würde ein anderer Webmaster wählen, wenn er genau dieses Bild verwendet, egal in welchem Kontext?

Man kann auch so formulieren: Der Alt-Text eines Bildes hat nie mit dem Kontext einer Website zu tun, sondern ausschließlich mit dem Inhalt des Bildes!

Relevanz auf der Website

Wenn ein Bild nun den richtigen Alt-Text hat, muss es auch onpage korrekt eingebunden werden. Das bedeutet, dass man auch die „umgebenden Texte“ entsprechend aufbereiten muss. Im Idealfall haben Bild und Text einen sachlich eindeutigen Zusammenhang. Aber wenn es den wie im oben genannten Beispiel nicht gibt, dann muss dieser Zusammenhang hergestellt werden, indem man eine entsprechende Textpassage um das Bild herumbaut.

Wenn das nicht gelingt, dann ist das Bild nicht für den Kontext geeignet.

Grundregeln für den Alt-Text

Zusammenfassend kann man folgendes festhalten:

  • Der Alt-Text sollte ungefähr 1 – 5 Worte umfassen. In Ausnahmen können es auch ein paar mehr sein.
  • Der Alt-Text sollte niemals durch Keyword-Stuffing als Spam missbraucht werden.
  • Der Alt-Text sollte sachlich (!) beschreiben, was auf dem Bild zu sehen ist.
  • Der Alt-Text sollte das nennen, was man nach ungefähr 0,2 Sekunden Betrachtungszeit erkennt. Details oder ähnliches sind in aller Regel irrelevant.
  • Wenn der Alt-Text mehr als ca. 12 Worte benötigt, sollte man besser eine extra Datei für die ausführliche Bildbeschreibung anlegen und diese im Bild-Aufruf als longdesc-Attribut verlinken (Achtung: wird nicht von Google gelesen und hat insofern keine SEO-Relevanz).
  • Wenn der Zusammenhang zwischen Bild und umliegenden Text nicht eindeutig ist, sollte man die Bildunterschrift (Caption) nutzen, um das Bild einzuordnen.
  • Der Alt-Text muss der Suchanfrage in der Bildersuche entsprechen, für die das Bild die höchste Relevanz hat.

Was soll man in das Title-Attribut schreiben?

Title-Attribut eines Bildes
Title-Attribut eines Bildes

Das Title-Attribut eines Bilder erzeugt einen Tooltip, also eine kleines Fenster im Browser mit dem entsprechenden Text, wenn man mit dem Corsor auf das Bild roll (mouseOver). Dieser Text macht eigentlich nur dann Sinn, wenn das Bild keine Bildunterschrift hat (Caption). Wenn eine Bildunterschrift vorhanden ist, kann man dort bequem alles das hineinschreiben, was der User wissen sollte.

Zunächst einmal genau das, was auch im Alt-Text steht: also den Titel des Bildes („Urlaub am Strand“). Darüber hinaus ist es eventuell sinnvoll, weitere Angaben zu machen: Copyright, Autor, Bildquelle, Worauf genau sollte man achten? etc.

Kurzum: im Title-Attribut sollte genau das stehen, was man auch in eine Bildunterschrift setzen würde. Wenn es eine Bildunterschrift gibt, ist das Title-Attribut überflüssig.

Nützt der Alt-Text auch in der Websuche?

Natürlich, aber nur, wenn Alt-Text und Text-Inhalt der Seite einen Zusammenhang haben. Denn die Alt-Texte von Bildern können natürlich auch die Keyword-Relevanz in der organischen Websuche stärken. Die positive Wirkung ist um so höher, je relevanter das Bild tatsächlich ist. Wenn das Bild im oben genannten Beispiel als Alt-Text „Reiserücktrittsversicherung“ hätte, dann würde das möglicherweise einen kurzzeitigen positiven Effekt haben. Aber: mittel und langfristig würde über die Auswertung des Bildinhaltes deutlich, dass das Bild für „Reiserücktrittsversicherung“ ungeeignet ist. Dann würde der positive Effekt verschwindet.

Wahrscheinlich ist es sogar anders herum: der positive Ranking-Effekt eines Bildes wirkt sich erst dann wirklich in der organischen Suche aus, wenn das Bild in der entsprechenden Bildersuche vordere Platzierungen einnehmen konnte.

Fazit: man sollte also nicht leichtfertig irgendwelche Stockfotos nutzen und den Alt-Text jeweils nach Lust und Laune mit unsinnigen Keywords vollballern. Stattdessen wirken sich Bilder in der organischen Websuche um so positiver aus, wenn sie tatsächlich genau das zeigen, was der Alt-Text verspricht. 

Wer jetzt immer noch unsicher ist: schreibt einfach konkrete Fragen und Beispiele in die Kommentare :-)

20 Gedanken zu „Was soll man in Alt-Text und Title-Attribut schreiben?

  1. Hallo Martin,

    Ein wichtiger Punkt der meiner Erfahrung nach immer wieder falsch gemacht wird:
    Aus usability Sicht sollte der Alt-Tag die *Funktion* des Bildes beschreiben. Das fordert auch W3C [1].

    Wenn ich also ein kleines Icon von einem Haus mit einem Link zur Homepage habe, ist der richtige Alt nicht „Haus“ sondern „zur Homepage“.

    Bei Bildern die rein illustrativ sind oder Hintergrundbild-Charakter haben, kann man entsprechend auch den Alt-Text weglassen. Die (plakative) Frage kann hier lauten: Hilft es einem Blinden, wenn ich das Bild beschreibe? Verliert die Webseite an Information, wenn das Bild nicht da ist und es keinen Alternativtext gibt.

    Andererseits bedeutet es aber auch häufig, das der Inhalt erklärt werden muss. Habe ich z.B. ein Diagramm, ist der Alt-Text „SEO Diagramm mit 2 Kreisen“ nicht hilfreich. Da müsste eher so etwas stehen wie „52,3% aller SEOs wissen nicht, wie man Alt-Texte richtig verwendet“ – also der Inhalt muss erklärt werden.

    MfG

    Torben

    [1] WCAG 2.0 – 1.1.1 https://www.w3.org/WAI/WCAG20/quickref/

    1. Danke für die Ergänzung, Torben. Stimmt natürlich.
      Zum 1. Beispiel: Bei Icons ist das sicherlich richtig. Normalerweise würde man solche Icons ja eh in einer CSS-Datei unterbringen. Die Navigation wäre dann eine formatierte Liste, die auch von Menschen mit Sehbehinderung viel besser genutzt werden kann.

      Das Diagramm ist natürlich ein spannendes Beispiel: Natürlich hast Du recht, „Seo-Diagramm mit 2 Kreisen“ wäre unsinnig. Ich könnte mir aber auch vorstellen, dass der Alt-Text des Bildes „SEO: Verwendung Alt-Text“ lautet. Und die erklärende Angabe dann in der Bildunterschrift steht.

  2. Interessant wäre ja noch, wie man den Dateinamen wählen sollte und ob die Metabeschreibungen innerhalb des Bildes für SEO interessant sein könnten?

    1. Dateiname immer sprechend und im Grunde so wie der Alt-Text, Leerzeichen durch Bindestriche (Minus-Zeichen) ersetzen.
      Was meinst Du mit „Metabeschreibungen“?

      1. Hallo Martin, danke für die Info. Mit Metabeschreibung meine ich die Dateiinfos, die im Bild eingebettet sind. Auszulesen und zu bearbeiten zum Beispiel mit Photoshop unter Datei > Dateiinformationen.

        1. Ah, verstehe. Ich nenne die Meta-Daten immer EXIF-Daten. Die werden zwar ausgelesen und auch benutzt, aber wohl nicht für das Ranking. Sie sind aus Seo-Sicht daher irrelevant. Aber die Geo-Koordinaten werden zum Beispiel bei Google-Maps benutzt, um Bilder Orten zuzuweisen.

          1. Kann ich dann, wenn ich in den EXIF Daten die Koordinaten eintrage, Google mitteilen, dass dieses Bild zu einem Unternehmensstandort passt? Gerade in Bezug auf lokale Suchmaschinenoptimierung?

            [Edit: Antwort hier] Ja.

  3. Ich selber mache mir immer die Mühe und gebe den Bildern einen Titel. Da ich die Erfahrung gemacht habe das viele Nutzer über Google Bilder auf die Seite kommen, empfehle ich das auch meinen Kunden. Nicht nur für Shops macht das Sinn. Außerdem ist es nun mal ein SEO Kriterium für Google :-)

      1. Ich möchte sagen, das ich das so als Erfahrung gesammelt habe. Weiterhin weißt einen ja jedes SEO Tool darauf hin, Title zu verwenden oder nicht :-)

        1. Ich vermute fast, Du verwechselst den Title-Tag (im Header einer Website) mit dem Title-Attribut innerhalb des Image-Tags. Ersteres ist für das organische Ranking in der Websuche (!) ein zentraler Rankingfaktor. Letzteres ist bei Bildern eher zweitrangig (Siehe dazu den Artikel https://www.tagseoblog.de/alt-text-oder-title-attribut-bei-bildern-was-ist-wichtiger ).
          Ansonsten werden die Tools, die Du verwendest, hoffentlich darauf hinweisen, wenn der Alt-Text vergessen wurde. Wenn sie beim Title-Attribut eines Bildes meckern, taugt das Tool nichts.

  4. Hallo Martin,
    verstehe die ganze Diskussion hier nicht. Wenn der alt-text und der Inhalt im alt-text so wichtig ist, dann verstehe ich nicht, wieso Wikipedia komplett auf das Ausfüllen des alt=““ Attributes verzichtet. Anscheinend ist Google sooo clever und kann auch ohne alt-text arbeiten.

    Beim Schlagwort „Baum“ ist ein Bild von Wikipedia unter den Top 8. Gibt es dafür eine Erklärung?

    1. Du hast recht: Wikipedia ist ein Sonderfall. Aber natürlich wird der Alt-Text dort auch gesetzt. Alles andere wäre skandalös, denn dann wäre Wikipedia niht barrierefrei.

      Aber die lösen das technisch mit einem Trick: der Aufruf einer Bild-Datei erzeugt bei Wikipedia eine neue Seite mit allen erforderlichen Daten. Dort ist dann auch der Alt-Text gesetzt. Die eigentlichen Landingpages haben oft nur einen Verweis auf den Inhalt des Artikels im Alt-Text. Das ist in der Tat zu dünne.
      Wie ich in meinem E-Book aber beschreibe, sind es letztlich zwei verschiedene Dinge: das Ranking des Bildes und die Frage, welche Seite dann den Link aus der Bildersuche bekommt. Wikipedia-Bilder werden fast immer auf mehreren Seiten benutzt. Daher profitiert der Wikipedia-Artikel davon, dass der Alt-Text auf allen anderen Seiten gesetzt wird.

  5. Hallo Martin,

    danke für die Klarstellung. Wenn ich dich richtig verstehe, dann sollte man zB. bei Produktbilder in einem Onlineshop einfach den Produktnamen in die beiden Attribute eintragen, denn die Bilder zeigen eben die Produkte.

    Bsp:

    Dateiname:produkt-x.jpg
    Alt-Tag:Produkt X
    Title-Tag:Produkt X

    Ist das korrekt und ausreichend aus deiner Sicht? Was meinst du?

  6. Ein echt interessanter Artikel, der genau das Problem anspricht, mit dem ich mich schon lange auseinandersetze. Sehr treffend finde ich das Beispiel mit dem Urlaub am Strand.

    Vielen Dank für den Beitrag!

  7. ich tue mich mit Bildbeschriftungen imemr schwer.. Ich dachte immer, der alt text war die Beschriftung.ISt die denn auch relevant für tante g?

Kommentare sind geschlossen.

Kommentare sind geschlossen.