SISTRIX Toolbox
SISTRIX Toolbox

Mehr erfahren
AdWords, KMU, wir machen den Unterschied!
Mehr erfahren

Das Alt- und Title-Attribute von Bildern richtig nutzen!

SEO  |   |  , 09:52 Uhr  |  29 Kommentare

Die Betreiber von Raven Tools haben kürzlich eine Studie veröffentlicht, welche neben detaillierten Informationen über die wichtigsten Änderungen im Bereich Onpage Optimierung auch eine Übersicht der am häufigsten gemachten Onpage-Fehler enthält. 78% der am häufigsten gemachten Fehler bei der Onpage Optimierung betreffen die Auszeichnung von Bildern…

Fehler bei der Onpage Optimierung

via raventools.com

Da bei der Auszeichnung von Bildern immer noch viele Fehler gemacht werden, hier noch einmal eine kurze Zusammenfassung der richtigen Verwendung des Alt- bzw. Title-Attributes (Attribute = Beifügung zur näheren Bestimmung):

Alt-Attribute:

Das Alt-Attribute sollte dafür genutzt werden, ein Bild bestmöglich zu beschreiben. Zeigt ein Bild. z.B. einen runden Tisch mit einer Vase voller Rosen darauf, sollte das Alt-Attribute auch alt=“Runder Tisch mit einer Vase voller Rosen“ lauten.

Title-Attribute:

Das Title-Attribute sollte dafür genutzt werden, dem mit einer Mouse über ein Bild fahrenden Besucher anzuzeigen, was ggf. passiert, wenn er/sie auf das Bild klickt. Das Title-Attribute kann z.B. title=“Bild vergrößern“ oder „Öffnet in einem neuen Fenster“ lauten.

Runder Tisch mit einer Vase voller Rosen

via pixabay.com

Neben noch einigen anderen Möglichkeiten der Auszeichnung eines Bildes, wir geben unter einem Bild meistens auch einen Link zu derjenigen Seite an, wo wir das Bild entnommen haben, ist es aus Gründen der Barrierefreiheit (?) enorm wichtig, bei der Auszeichnung von Bildern keine Fehler bzw. Verwechselungen zu machen. Das alt=“Muss immer sein“, das title=“Dient nur als Hinweis“…

Weiterführende Informationen

Eure SEO-united.de Blogger
Sie befinden sind hier: Das Alt- und Title-Attribute von Bildern richtig nutzen!

Kommentare zu diesem Beitrag:

  1. Anne Website sagt:

    Endlich mal ein Artikel, der genau das Wichtigste über die Alt- und Title Attribute schreibt. Ich versuche gerade für unsere Kunden alle Bilder und alle Berichte neu zu benennen usw. Ich weiß, Sie finden Sie hätten die Zeit nicht dafür. Doch wenn Sie sich die Zeit nehmen, dann können Sie Ihren Traffic steigern und noch mehr Produkte an den Kunden bringen.

  2. Sandro Website sagt:

    Kurzer aber interessanter Artikel, da besteht wohl auch bei meiner Seite noch Optimierungsbedarf.

  3. Matthias Website sagt:

    Die Bilder mit Title Attribut zu versehen hat absolut keinen Einfluss auf Ranking und ist somit auch kein Onpagefaktor, den es zu optimieren gibt. Warum das selbst marktführende SEO Tools immer noch ankreiden, ist mir ein Rätsel. Es gibt kein fehlendes Title Attribut. Fehlen können nur Dinge, die da sein sollten. 😀

    Google hat bereits 2007 bestätigt, dass es das Title Attribut ignoriert: http://googlewebmastercentral.blogspot.de/2007/12/using-alt-attributes-smartly.html

    Und auch aus Usability-Sicht (mit viel Wohlwollen also Conversion Rate Optimierung) gilt das Argument nicht: Der mittels Image Title Attribut von einigen Browserversionen erzeugte Tooltip erscheint doch sehr verzögert und ist optisch keine Augenweide. Wer einen Tooltip will, sollte sich einen „richtigen“ Tooltip programmieren, mit CSS und in schön.

    Die Zeit, sich nutzlose und hässliche Title Attribute für Bilder auszudenken kann man sich also sparen.

    Wenn jemand den gegenteiligen Beweis erbringt, oder nach 2013 erbracht hat, dass die Kombination aus ALT + Title bei Google besser rankt als nur ALT, dann bitte melden. Das täte mich wirklich interessieren.

  4. Martin Website sagt:

    Hallo,

    der Unterschied ist im Grund simpel und eindeutig. Trotzdem habe ich es selten so kompakt gelesen.

  5. Kerstin Website sagt:

    ist es aus Gründen der Barrierefreiheit (?) enorm wichtig, bei der Auszeichnung von Bildern keine Fehler bzw. Verwechselungen zu machen.

    Eine Information „Bild vergrößern“ gehört dann immer zusammen mit einer kurzen Bildbeschreibung in das alt-Attribut, wenn es sich z.B. um Thumbnails handelt. Hierfür nur das title-Attribut zu verwenden ist nicht ausreichend.

    Der Alternativtext (alt-Attribut) soll nicht in allen Fällen eine Bildbeschreibung liefern. Zu unterscheiden ist, ob es ein Link ist oder nicht. Ist ein Bild gleichzeitig ein Link, dann wird aus Gründen der Barrierefreiheit nicht das Bild beschrieben, sondern im alt-Attribut das Ziel des Links genannt bzw. der Zweck. Haben wir also beispielsweise ein Bild mit einer Schale Äpfel und ist dieses Bild gleichzeitig ein Link, der zu einer Seite „Ernährungstipps“ führt, dann würde der Alternativtext nicht „Schale mit Äpfel“ lauten, sondern „Ernährungstipps“

    • Gretus Website sagt:

      Hallo Kerstin,

      das ist meiner Meinung nach so falsch! Das Alt-Attribute sollte immer eine Beschreibung des Bildes liefern, egal ob das Bild ein Link ist oder nicht. Ist das Bild ein Link, kann man zusätzlich zu der Beschreibung im Alt-Attribute noch ein Title-Attribute innerhalb des Quellcodes eines Links einfügen, welches einen Hinweis liefert, was sich hinter dem verlinkten Bild verbirgt. Zugegeben, unser Beispiel hier ist etwas blöd, dass Bild zeigt in Wirklichkeit nämlich einen runden Tisch mit einer Vase voller Rosen welcher vor einem geöffneten Fenster bzw. auf einem Teppich steht! Ich war selbst verblüfft, als mir das Bild bei der Suche so unterkam, aber dennoch gilt meiner Meinung nach die Regel, die Beschreibung eines Bildes wird im Alt-Attribute vorgenommen!

      Ich persönlich würde bei dem von Dir gewähltem Beispiel also ins Title-Atribute „Wechsel zu ernaehrungstipps.de“ und ins Alt-Attribute „Schale voller Äpfel“ schreiben.

      Grüße

      Gretus

  6. Martin Website sagt:

    Ein schöner Artikel kurz und knackig der den Kern des Themas auf dem Punkt trifft, ich muss bei meiner Seite wohl auch nochmal ran.

  7. Thorsten Website sagt:

    Endlich mal ein Artikel, der genau das Wichtigste über die Alt- und Title Attribute schreibt.

  8. Maria Website sagt:

    Vielen Dank für den informativen Artikel. Eine Frage stellt sich mir trotzdem noch: wo genau füge ich dieses Alt Attribut ein?

  9. Danny Website sagt:

    Ein sehr informativer Beitrag. Das Beispiel mit dem runden Tisch und der Blume finde ich einfach super. Damit wird einem sehr anschaulich erklärt, wie ein Alt Attribut zu setzen ist. Ich muss wohl auf meiner Seite auch einiges korrigieren.

  10. Tina Website sagt:

    Kann man bei Titel dann auch schreiben „Bild mit Tisch und Blumen vergrößern“ oder würde das einen spamigen Charakter haben?

    • Gretus Website sagt:

      Hallo,

      ich finde die Erklärung oben mehr als eindeutig! Das Title-Attribute dient dem Hinweis, was mit dem Bild passiert wenn man darauf klickt (z.B. Bild vergrößern), das Alt-Attribute der Beschreibung des Bildes (z.B. Tisch und Blumen).

      Grüße

      Gretus

      P.S.: Bei der Beschreibung eines Bildes sollte man immer auch die wichtigsten Informationen über die Lage bzw. Positionierung der wichtigsten Objekte des Bildes verwenden (z.B. Tisch mit einer Vase darauf).

  11. Jens Website sagt:

    Gibt es eigentlich eine Begrenzung der Zeichen beim alt-Attribut? Ich meine, wenn es ein sehr komplexes Bild ist, das einer längeren Beschreibung bedarf: Wie viel kann man, wie viel darf man schreiben?

    • Gretus Website sagt:

      Hi Jens,

      soweit ich weiß gibt es keine Begrenzung. Man sollte ein Bild eben halt so beschreiben, dass jemand mit einem Handicap (z.B. einer Erblindung) das Bild in seiner grundlegenden Aussage versteht…

      Grüße

      Gretus

      • Jens Website sagt:

        Ok, danke. Hatte hier im Netz einfach noch keinen SEO-Artikel gefunden. Einfach so viel schreiben, wie sinnvoll erscheint, erscheint mir sinnvoll. 😉

  12. Mario Website sagt:

    Sollte das title-tag eigentlich benutzt werden, wenn beim Klick auf das Bild nichts geschieht? Ich habe immer beides gleich gesetzt alt=title, aber das werde ich besser ändern…

    • Gretus Website sagt:

      Hallo,

      wenn man das Alt- und Title-Attribute gleich setzt, bekommen die Nutzer eines Screenreaders womöglich zweimal das Gleiche vorgelesen. Auch nervig irgendwie…

      Grüße

      Gretus

      P.S.: Sowohl Alt als auch Title sind bei Bildern meiner Meinung nach übrigens Attribute!?

  13. Jan Website sagt:

    Wie mein Vorredner, habe ich stets beides gleich gesetzt. Hat ja im Grunde keinen Nachteil, außer das nicht angezeigt wird was geschieht, oder sehe ich da etwas falsch?

  14. Oliver Maaß Website sagt:

    Daran musste ich mich auch erst einmal gewöhnen, aber was das SEO angeht ein absolutes Muss. Endlich mal ein Beitrag der das sofort und knackig auf den Punkt bringt.

    Gruß

  15. Der Abenteurer Website sagt:

    Danke für den hilfreichen Beitrag. Ich habe bis jetzt nicht so sehr auf die Alt-Beschreibung geachtet. Dies werde ich jetzt wohl ändern müssen.

    Grüße

    Der Abenteurer

  16. Thorsten Website sagt:

    Daran musste ich mich auch erst einmal gewöhnen, aber was das SEO angeht ein absolutes Muss. Endlich mal ein Beitrag der das sofort und knackig auf den Punkt bringt.

  17. Robert Schnorr sagt:

    Ich versuche auch immer mehr darauf zu achten, allerdings stellt sich mir die Frage ob der Inhalt und die Länge der jeweiligen Tags spezielle Auswirkungen hat?

  18. Alex Website sagt:

    Man neigt leider immer sehr schnell dazu, diese Attribute zu sehr auf SEO zu trimmen. Aus „Sicht“ derjenigen, die barrierefreien Webseiten benötigen sollte tatsächlich die Beschreibung des Bildes im Vordergrund stehen.

    Danke, guter Artikel!

  19. Loewe Website sagt:

    Sehr guter Artikel! Endlich weiß ich was es damit auf sich hat. Danke!

  20. Andy Website sagt:

    Irgendwie komme ich mit dem ALT Attribut bei Bilder nicht klar. Ich habe Yoast SEO Plugin drauf und er sagt immer ich hätte kein Alt Attribut gesetzt wobei ich einen alternativen Text in WP angegeben habe. An was kann das liegen?

  21. Nicole Website sagt:

    Guter Artikel, wir haben das Title Attribut nun kräftig genutzt und warten jetzt mal ab, ob es uns nicht doch noch beim Google Ranking weiter nach vorne bringt…

    Danke!

  22. […] Das Alt- und Title-Attribute von Bildern richtig nutzen! […]

  23. Jörg Website sagt:

    Sehr hilfreicher Artikel für User von Internetseiten, die Probleme mit ihren Alt Attributen haben und diese nicht richtig nutzen.

Kommentieren

Loading Disqus Comments ...

Ihre Agentur noch nicht dabei?

Ihr Job noch nicht dabei?

Ihr Beitrag noch nicht dabei?