• Start
  • So nutzt du den Alt-Tag von Bildern richtig

So nutzt du den Alt-Tag von Bildern richtig

Unterschätztes Detail für Barrierefreiheit und Suchmaschinenoptimierung

Beitrag teilen

Share on linkedin
Share on xing
Share on facebook
Share on twitter
Langhaarige Frau mit Augenbinde

Beitragsinhalt

Immer wieder entdecke ich auf Webseiten Bilder ohne Alt-Tag. Oder ich stelle auf meiner eigenen Webseite fest, dass ich ihn vergessen habe. Dabei ist der Alt-Tag ein wichtiges Element, das bei der Gestaltung von Webseiten und der SEO-Optimierung nicht fehlen darf.

Definition: Was ist der Alt-Tag?

Der Alt-Tag beschreibt das Bild mit einem alternativen Text. Alt steht als Abkürzung für alternativ und Tag ist englisch für Markierung.

Der Alt-Tag ist für den User nicht sichtbar, sondern steht im Quellcode.

Wozu ist der Alt-Tag da?

  • Alternative Beschreibung

Ist dein Bild aus irgendeinem Grund nicht verfügbar (z.B. weil es verschoben oder gelöscht wurde), wird statt des Bildes der Alt-Text angezeigt.

  • Barrierefreies Lesen

Screenreader lesen sehbehinderten Personen den alternativen Text vor. Du trägst damit also zur Barrierefreiheit im Netz bei. Google bewertet das als positiv und verbessert so dein Ranking.

  • Lesehilfe für Suchmaschinen

Außerdem finden Suchmaschinen die Bilder über den Alt-Tag. Da die Algorithmen keine Bilder erkennen und interpretieren können, greifen sie den Alt-Tag zurück. Dieses Video veranschaulicht das sehr schön:

Wie fügst du deinen Bildern den Alt-Tag hinzu?

Per HTML-Code

Per HTML-Code fügst du den Alt-Tag folgendermaßen ein. Achte darauf, den Text in Anführungszeichen zu setzen:

< img src=“/ordner/bildquelle.jpg“ alt=“Hier steht der Alt-Text“ >

Im WordPress-Editor

Bei WordPress musst du nicht direkt im Code arbeiten, sondern fügst den Alt-Tag über die Medienverwaltung ein. Dafür klickst du das entsprechende Bild an. Nachdem sich das Pop-Up mit dem Bild geöffnet hat, kannst du auf der rechten Seite verschiedene Angaben zum Bild machen. Nutze das Feld „Alternativtext“, um den Alt-Tag einzufügen.

Welchen Inhalt sollte ein Alt-Tag haben?

Wie im Video oben schon beschrieben, sollte der Alt-Tag in kurzen Worten erläutern, worum es im Bild geht. Für die Länge des Textes gibt es keine festgelegte Unter- oder Obergrenze. Halte den Text trotzdem so knapp wie nötig, denn Screenreader lesen diesen Text später vor. Da braucht es keine Romane.

Sinnvoll für Google ist, wenn der Alt-Tag auch das Fokus-Keyword der Seite enthält. Allerdings solltest du nicht wahllos alle Keywords nutzen, die dir zu deiner Webseite einfallen. Das könnte von den Suchmaschinen als Spamming gewertet und mit einem schlechteren Ranking abgestraft werden.

So findest du heraus, ob deinen Bildern Alt-Texte fehlen

Mit dem SEO-Tool Varvy kannst du ganz leicht herausfinden, ob Bilder auf deiner Webseite fehlende Alt-Tags haben. Gib die URL deiner Webseite in das Formular ein und klicke auf Test. Danach wird deine Webseite auf verschiedene Elemente untersucht. Unter dem Punkt Image Alt Tag wird dir angezeigt, welche Bilder keinen Alt-Tag haben. Die kannst du danach manuell ändern.

Unterschied: Alt-Tag und Title-Tag

Der Text im Alt-Tag ist aus den oben genannten Gründen wichtig, man kann ihn auf der Webseite aber nirgends sehen. Fährst du mit der Maus über ein Bild, erscheint manchmal eine Beschreibung. Das erreichst du mit dem title. Dieses Attribut fügst du ebenfalls in den Code deiner Bilddatei ein:

< img src=“/ordner/bildquelle.jpg“ alt=“Hier steht der Alt-Text“ title=“Foto: Maxi Mustermann“ >

Fazit

Der Alt-Tag ist ein unterschätztes Element in Hinblick auf Barrierefreiheit im Netz und Suchmaschinenoptimierung. 

Zusätzliche Ressourcen

Beitrag mit anderen teilen
Share on linkedin
Share on xing
Share on facebook
Share on twitter

Hi, wie geht's?

Ich bin Maria. Ich helfe dir, deine Business Website endlich live zu kriegen und bringe dir bei, was du selbst für eine professionelle Online-Präsenz tun kannst.

Beiträge zu ähnlichen Themen

Eine Antwort

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Abonniere
meinen Blog

Einfache Erklärungen und Anleitungen zu den Themen Website-Erstellung und Suchmaschinenoptimierung. 

Ja, ich will von dir lernen.

Deine Daten sind geschützt. Ich nutze deine Angaben, um dich zu relevanten Blogbeiträgen und Produkten und Dienstleistungen zu informieren. Du kannst dich selbstverständlich jederzeit abmelden. Weitere Informationen findest du in der Datenschutzerklärung.