Alt-Attibut einfach erklärt

Karin WagnerGeschäftsführerin Seokratie Österreich

Zuletzt aktualisiert: 17. Aug 2022

Ein Alt-Attribut (oder Alt-Tag) ist ein Alternativtext für ein Bild oder eine Grafik auf einer Website und wird im HTML-Code hinterlegt. Dieser Text wird angezeigt, wenn das Bild nicht geladen oder blockiert wird. Alt ist die Abkürzung für alternativ und Attribut bedeutet Beschreibung, Ergänzung. Das Alt-Attribut ist sowohl für Google als auch für Menschen mit Beeinträchtigung wichtig, um zu verstehen was auf dem Bild zu sehen ist.

Die Vorteile eines Alt-Attributes für SEO

Mit dem Alt-Attribut sagst Du Google, was auf dem Bild oder der Grafik abgebildet ist. So hilfst Du Google, Deine Bilder richtig zu interpretieren. Wenn Du ein Bild von einem spielenden Kind mit einer Katze auswählst, sollte

1. das Bild zum Seiteninhalt passen bzw. noch besser zum Text passen, der das Bild umgibt und
2. das Alt-Attribut in Verbindung mit dem Inhalt und den Keywords stehen.

Du solltest das Alt-Attribut als Ergänzung zum Bildnamen wählen und es beschreibend formulieren. Mit der alternativen Kennzeichnung von Bildern und Grafiken unterstützt Du die Onpage-Optimierung Deiner Website. Das Alt-Attribut ist auch wichtig für die Google Bildersuche, bewerte es für die Suchmaschinenoptimierung aber nicht über, es ist nicht „das“ Kriterium für Bilder-SEO.

Alt-Attribut wichtig für barrierefreies Internet

Barrierefreiheit im Internet verlangt, dass alle Nutzer – unabhängig von ihrer körperlichen, geistigen oder technischen Lage – alle Web-Angebote uneingeschränkt nutzen können. Du solltest Inhalte daher so aufbereiten, dass Screenreader sie dem Nutzer vorlesen können. Das gilt auch für Bilder und Grafiken. Hier kommt die Bedeutung des Alt-Attributes ins Spiel.

• Wird eine Seite vorgelesen, verwenden Screenreader das Alt-Attribut für die Bildbeschreibung.
• Die Hörer sollen anhand Deines Alt-Attributes wissen, was auf dem Bild zu sehen ist.
• Wenn Du das Alt-Attribut nicht einfügst, werden die Dateinamen vorgelesen.

Wie Du ein Alt-Attribut richtig formulierst

Damit das Alt-Attribut auch wirksam auf Deiner Website eingesetzt wird, solltest Du keine zu lange Beschreibung verwenden. Google spricht von einem „kurz, aber beschreibenden“ Text – genauere Informationen findest Du im Artikel „Startleitfaden zur Suchmaschinenoptimierung (SEO)“.

Optimal gestaltet ist ein Alt-Attribut , wenn es das Hauptkeyword der Landingpage beinhaltet. Dabei kann sich das Keyword auf den Text beziehen, in dem Du das Bild einbindest oder es steht für das Bild selbst.

TIPP: Lass der Usability und Verständlichkeit den Vortritt gegenüber SEO und überfülle nicht mit Keywords.

Wenn Du aber ein Keyword benutzt, so verwende es sowohl im Alt-Attribut, im Dateinamen und in der Bildunterschrift durchgängig und konsequent.

Beispiel für ein Alt-Attribut

Wenn Du beispielsweise für Deine Landingpage zum Thema Kleinkinder und Katzen ein Bild mit einem spielenden Kind und einer Katze verwendest und Du dabei auf SEO und barrierefreie Umsetzung achtest, kannst Du das Alt-Attribut wie folgt gestalten:

Dateiname: kleinkind-und-katze.jpg

Alt-Attribut: Kleinkind und Katze spielen auf dem Fußboden Doktor

Hier das Beispiel des HTML-Codes:

<img src="https://www.beispiel.de/bilder/kleinkind-und-katze.jpg" alt="Kleinkind und Katze spielen auf dem Fußboden Doktor" />

Sehr oft wird das Alt-Attribut im Content-Management-System unter Bildbeschreibung eingefügt. Schau einfach kurz im Quelltext nach, ob die Beschreibung für das Alt-Attribut übernommen wurde.

TIPP: Pass auf, dass Du durch das Alt-Attribut kein „Keyword-Stuffing“ verursachst, indem Du versuchst, möglichst viele Keywords in das Alt-Attribut zu packen, wie zum Beispiel: Kleinkind und Katze spielen auf dem Fußboden Doktor und das zeigt, wie liebevoll die Katze in die Familie integriert ist und auf artgerechte Katzenhaltung geachtet wird.

Wieg im Zweifel ab, ob die Keywords Sinn machen und gib der Usability und Verständlichkeit den Vorrang. Viel wichtiger ist, dass die Beschreibung stimmt und auch wirklich das Bild beschreibt!

Weiterführende Links

• Bilder-SEO: Werde mit Deinen Bildern gefunden!
• Bilder SEO: Title-Attribut und Alt-Attribut der Bilder variieren, um mehr KWs abzudecken? – YouTube
• WebP-Bilder: Alles was Du wissen musst + Praxisbeispiel
• Best Practices für die Suchmaschinenoptimierung für Google Bilder | Google Search Central  |  Dokumentation  |  Google Developers
• Alternativtexte für Grafiken | BIK für Alle (bik-fuer-alle.de)

Bildnachweis: © tumskaia/stock.adobe.com