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

Evgeni Sereda

Nov 10, 20225 Min. Lesedauer
Alt-Text

INHALTSVERZEICHNIS

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:

Beispiel: Alt-Text bei Zooplus Magazin
Alt-Text für ein Foto. Bild: Zooplus Magazin

Und so stellt sich das als HTML-Code dar:

<img src="discokugel.jpg" alt="Funkelnde Discokugel mit tanzenden Menschen im Hintergrund">

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:

Google-Suchergebnis mit Bildern ganz oben
Bilder können dich bei Google nach vorne bringen

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:

Runde Charcuterie-Platte mit Wurst, Käse, Keksen und anderen bunten Snacks
Wie würdest du dieses Bild beschreiben?

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:

Brücke im Central Park umgeben von Bäumen und Grün
Welcher Alt-Text passt zu diesem Bild?

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:

Leichtathletik-Wettkampf bei der Olympiade 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:

Infografik: Was macht einen guten Link aus?
Alt-Texte für Infografiken sind besonders wichtig

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:

Beispiel: Dekoratives Bild bei Semrush
Rein dekorative Bilder brauchen keine Alt-Texte

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:

Moderne Stehlampe aus den 50er Jahren in möbliertem Wohnzimmer
Wie würdest du das Bild beschreiben?

❌ 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:

Außenansicht des Strand Bookstore mit roten Markisen und Menschen, die im Freien in den Buchauslagen stöbern
Dieser berühmte New Yorker Buchhändler hat zwei Standorte: einen am Union Square und den anderen in der Upper West Side. Dieses Foto zeigt den Standort Union Square.

❌ 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.

Site Audit: Neues Projekt hinzufügen
Hier startest du ein neues Projekt

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

Screenshot: Domain und Projektname eingeben
Gleich geht's los mit dem Audit

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“:

Site Audit: Übersicht und Registerkarte Probleme
Auf der Seite „Probleme“ findest du die Details

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:

Suchfilter mit Eingabe 'alt-attribut'
So findest du bestimmte Typen von Problemen im Site Audit

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

Site Audit: 2 Bilder haben keine Alt-Attribute
Hier sind die Details der gefundenen Probleme

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.

Teilen
Keyword-Ideen in Sekunden finden

Verbessern Sie SEO-Ergebnisse durch leistungsstarke Keyword-Recherche

Kostenloses Keyword-Recherche-Tool

Author Photo
Seit 5 Jahren verantworte ich das Marketing von Semrush in den deutschsprachigen Ländern. Seit 2010 bin ich ein leidenschaftlicher SEO. Die Kombination aus SEO und Marketing setzte ich bei großen Projekten wie die Implementierung der SEO-Maßnahmen und Marketing-Prozessen bei einem großen Retailer. Dabei betreue ich auch kleine Projekte, denn auch mal Hand anzulegen, das macht mir viel Spass. Meine Erfahrung und mein Wissen teile ich gerne mit dir.
Mehr dazu