Was ist Alt-Text und warum ist er wichtig für SEO?

Was ist Alt-Text?

Alt-Text (kurz für Alternativtext) ist Text, der in HTML-Code eingebettet ist, um ein Bild auf einer Webseite zu beschreiben.

Er informiert Suchmaschinen-Crawler und Nutzer eines Screenreaders darüber, was auf dem Bild zu sehen ist.

Der Alt-Text befindet sich im „Alt-Attribut“, auch „Alt-Tag“ genannt, im HTML-Code des eingebetteten Bildes.

So sieht das aus:

Und so stellt sich das als HTML-Code dar:

Warum ist Alt-Text wichtig für die Bilder-SEO?

Die Google-Bildsuche macht 22,6 % aller Suchanfragen aus.

Bilder sind daher ein effektives Mittel, mehr SEO-Traffic zu erhalten.

Google liest Alt-Texte aus, um den Inhalt von Bildern zu verstehen. Ohne Alt-Text hast du daher viel schlechtere Chancen, dass deine Bilder in der Google-Bildsuche auftauchen. Es ist ein wichtiger Teil von Bilder-SEO.

Außerdem erscheinen Bilder auch häufig ganz oben in den regulären Google-Suchergebnissen. Wenn wir beispielsweise nach „content verteilung diagramm“ suchen, erscheinen Bilder ganz vorne:

Die Optimierung deiner Alt-Texte kann dir so mehr Traffic von Google und Google Bilder bringen.

In diesem Artikel erklären wir dir genau, wie du vorgehen musst, um davon zu profitieren, und zeigen Beispiele, Best Practices und wie du fehlende Alt-Texte findest, um das Problem zu beheben.

Beispiele für Alt-Texte

Gestalte deine Alternativtexte aussagekräftig und verwende einen natürlichen Tonfall. Frage dich, wie du jemandem in einem Gespräch ein Bild beschreiben würdest. Versuche nicht, das Alt-Tag mit Keywords vollzustopfen (was sich roboterhaft anhören würde).

Gehen wir ein paar Bilder mit guten, besseren und besten Beispielen für Alt-Texte durch.

Beginnen wir mit diesem Bild einer Charcuterie-Platte:

Schlechter Alt-Text: alt="Ideen für Dinnerpartys"

Akzeptabler Alt-Text: alt="Charcuterie-Platte"

Besserer Alt-Text: alt="Charcuterie-Platte mit Wurst und Käse"

Bester Alt-Text: alt="Runde Charcuterie-Platte mit Wurst, Käse, Keksen und anderen bunten Snacks"

Das „schlechte“ Beispiel hier zielt auf ein bestimmtes Keyword ab („Ideen für Dinnerpartys“), ohne uns tatsächlich zu verraten, was auf dem Bild zu sehen ist. Während die mittleren zwei Beispiele schon eher brauchbar sind, liefert unser „bestes“ Beispiel die meisten Details über den Bildinhalt.

Sehen wir uns als Nächstes dieses Bild an, das im Central Park aufgenommen wurde:

Schlechter Alt-Text: alt="Brücke Blumen Bäume Grünfläche Park"

Akzeptabler Alt-Text: alt="Central Park"

Besserer Alt-Text: alt="Brücke im Central Park"

Bester Alt-Text: alt="Brücke im Central Park umgeben von Bäumen und Grün"

Das „schlechte“ Beispiel ist eher eine Liste von Wörtern als eine Beschreibung. Das „beste“ Beispiel enthält Informationen über den spezifischen Standort sowie das, was auf dem Bild zu sehen ist.

Zum Schluss noch ein Bild von den Olympischen Spielen 2008 in Peking:

Schlechter Alt-Text: alt="Sportveranstaltung Leichtathletik Olympia Goldmedaille"

Akzeptabler Alt-Text: alt="Leichtathletik"

Besserer Alt-Text: alt="Sportveranstaltung Leichtathletik"

Bester Alt-Text: alt="Leichtathletik-Wettkampf bei der Olympiade 2008 in Peking"

Auch hier fühlt sich unser „schlechtes“ Beispiel unnatürlich an und verrät uns nicht wirklich, was auf dem Bild vor sich geht.

Beachte, dass alle unsere „besten“ Beispiele die aussagekräftigsten sind, ohne spammig zu werden. Und wenn es für das Abgebildete einen eindeutigen Namen oder ein eindeutiges Ereignis gibt (z. B. Central Park oder Olympiade in Peking), ist dieser ebenfalls enthalten.

Best Practices für Alt-Texte

Gehen wir nun einige Grundregeln für das Schreiben von Alt-Texten durch.

Wir haben bereits erwähnt, dass guter Alt-Text beschreibend ist, ohne spammig zu sein. Hier sind darüber hinaus ein paar weitere wichtige Hinweise:

Beschränke deine Alt-Texte auf 125 Zeichen oder weniger

Screenreader und ähnliche Technologien hören in der Regel bei der 125-Zeichen-Marke auf, Alt-Text vorzulesen.

Begrenze deine Alt-Texte also am besten auf diese Zeichenzahl, damit sie nicht abgeschnitten werden.

Nimm ein Ziel-Keyword auf

Ein Keyword aufnehmen – widerspricht das nicht unseren vorherigen Empfehlungen? Nur wenn das Keyword inhaltlich keinen sinnvollen Beitrag zum Alt-Text leisten würde. 

Aber der Zweck von Alt-Text besteht darin, Informationen über das Bild zu vermitteln, und das Ziel-Keyword tut oft genau das. Du kannst es also gerne aufnehmen, wenn es inhaltlich sinnvoll ist.

Um den Text natürlicher zu gestalten, kannst du auch Variationen des Ziel-Keywords verwenden.

Nehmen wir an, wir verfassen einen Alt-Text für diese Infografik aus unserem Blogartikel über Link-Building:

Dieser Blogartikel zielt auf das Keyword „Link-Building“ ab, aber es würde ein wenig gezwungen wirken, das Keyword in den Alt-Text aufzunehmen, da es auf der Grafik um ein spezifischeres Thema geht.

Eine gute Lösung könnte hier also lauten: alt="Was einen guten Link ausmacht".

So haben wir das Stichwort „Link“ abgedeckt und gleichzeitig einen Text, der sowohl für das Bild als auch für die Webseite relevant ist.

Hinterlege keine Alt-Texte für dekorative Bilder

Der Zweck von Alt-Text besteht darin, Informationen zu Bildern bereitzustellen. Doch es gibt auch Bilder, die keiner weiteren Erklärung bedürfen.

So ist es nicht nötig, Alt-Texte für dekorative Bilder wie Icons, horizontale Trennlinien, ein Lupensymbol in einer Suchleiste usw. zu hinterlegen.

Die Nutzer von Screenreadern brauchen nicht zu wissen, wie diese Bilder aussehen, um die Seite zu verstehen – und Google ebenfalls nicht.

Hier ist ein Beispiel für eine Illustration, die gut ohne Alt-Text auskommt:

Schreibe nicht „Bild von“ oder „Abbildung von“ in deine Alternativtexte

Wie bereits erwähnt, hast du nur 125 Zeichen Platz, um dein Bild zu beschreiben. Bestandteile wie „Bild von“ oder „Abbildung von“ sind überflüssig, da sowohl Nutzer als auch Google bereits wissen, dass es sich um Bilder handelt.

Bei dieser Stehlampe wäre ein Negativ- und ein Positivbeispiel:

❌ alt="Bild einer modernen Stehlampe aus den 50er Jahren"

✅ alt="Moderne Stehlampe aus den 50er Jahren in möbliertem Wohnzimmer"

Die zweite Option ist effizienter und fügt wichtige zusätzliche Informationen hinzu.

Verdoppele nicht den Inhalt der Bildunterschrift

Es gibt keinen Grund, redundante Informationen in deinen Alt-Text aufzunehmen. Wenn ein Foto bereits eine Bildunterschrift hat, wiederhole sie nicht im Alt-Text , sondern stelle dort zusätzliche Informationen zum Foto bereit.

Hier ist ein Bild mit Bildunterschrift für den Strand Bookstore in New York:

❌ alt="Strand Bookstore am Union Square"

✅ alt="Außenansicht des Strand Bookstore mit roten Markisen und Menschen, die im Freien in den Buchauslagen stöbern"

Der zweite Alternativtext ist informativer und nutzerfreundlicher – statt die Bildunterschrift zu wiederholen, beschreibt er, was tatsächlich auf dem Bild zu sehen ist.

Fehlende Alt-Texte finden und beheben

Verwende unser Site Audit, um zu überprüfen, ob auf deiner Website Alt-Texte fehlen.

Beginne mit einem Klick auf die Schaltfläche „Neues Projekt hinzufügen“ oben rechts.

Füge dann die Domain und den Namen deiner Website hinzu und klicke auf „Create Project“.

Folge den Anweisungen des Tools, um die Einrichtung deines Site Audits abzuschließen, und warte, bis das Audit fertig ist.

Klicke nun auf deinen Projektnamen, um den Bericht zu öffnen, und dort auf die Registerkarte „Probleme“:

Du gelangst zu einer Liste mit Fehlern, Warnungen und Hinweisen. Grenze diese ein, indem du nach „alt-attribut“ suchst. Nun siehst du, ob bei deinen Bildern Alt-Texte fehlen:

Klicke auf den Link („2 Bilder“ in diesem Beispiel), um genau zu sehen, um welche Bilder es sich handelt.

Dein nächster Schritt besteht darin, dich in deinem CMS anzumelden und Alt-Texte zu den hier aufgelisteten Bildern zu ergänzen.

Anschließend kannst du dein Site Audit wiederholen, damit es die Änderungen abbildet und wieder auf neuestem Stand ist.