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:
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
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 decoding="async" 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 decoding="async" 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.
