Was sind Alt-Tags und Title-Tags bei Bildern?
Alt-Tags (Alternativtexte) und Title-Tags sind HTML-Attribute, die Bildern auf Websites zusätzliche Informationen geben. Während sie ähnlich klingen, erfüllen sie grundlegend verschiedene Funktionen: Der Alt-Tag ist ein Pflichtattribut für Barrierefreiheit und SEO, der Title-Tag ist ein optionales Attribut für die Benutzerfreundlichkeit. Beide richtig einzusetzen, verbessert die Zugänglichkeit, Suchmaschinenoptimierung und User Experience deiner Website.
Alt-Tag (alt-Attribut): Definition und Funktion
Das alt-Attribut (alternative text) beschreibt den Inhalt eines Bildes in Textform. Es hat drei zentrale Funktionen:
1. Barrierefreiheit (Accessibility)
Screenreader lesen den Alt-Text vor, damit sehbehinderte Nutzer verstehen, was auf dem Bild zu sehen ist. Das macht Alt-Texte zu einem Pflichtbestandteil barrierefreier Websites — gefordert durch die WCAG (Web Content Accessibility Guidelines) und in vielen Ländern gesetzlich vorgeschrieben.
2. Suchmaschinenoptimierung (SEO)
Google kann Bilder nicht so gut „sehen“ wie Menschen. Der Alt-Text hilft Suchmaschinen, den Bildinhalt zu verstehen und das Bild in der Google Bildersuche zu indexieren. Bilder mit optimierten Alt-Texten können signifikanten Traffic über die Bildersuche generieren.
3. Fallback bei Ladeproblemen
Wenn ein Bild nicht geladen werden kann (langsame Verbindung, fehlende Datei, deaktivierte Bilder), wird stattdessen der Alt-Text angezeigt. So versteht der Nutzer trotzdem, was an dieser Stelle zu sehen sein sollte.
Alt-Tags schreiben: Best Practices
Gute Alt-Texte folgen klaren Regeln:
- Beschreibend: Beschreibe, was auf dem Bild zu sehen ist. „Goldener Retriever spielt mit rotem Ball auf grüner Wiese“ statt „Hund“
- Keyword-Integration: Baue das Haupt-Keyword natürlich ein, aber vermeide Keyword-Stuffing. „Hochzeitsfotograf Stuttgart — Brautpaar vor Schloss Solitude“ ist gut, „Hochzeitsfotograf Stuttgart günstig professionell Hochzeitsfotografie Stuttgart“ ist Spam
- Länge: 80–125 Zeichen sind optimal. Screenreader lesen lange Alt-Texte vollständig vor — zu lang wird ermüdend
- Kein „Bild von“ oder „Foto von“: Screenreader sagen bereits an, dass es ein Bild ist. „Bild von einem Hund“ ist redundant — schreibe einfach „Goldener Retriever auf Wiese“
- Kontext beachten: Der gleiche Hund braucht verschiedene Alt-Texte je nach Seitenkontext: Auf einer Tierarzt-Seite: „Gesunder Hund bei Vorsorgeuntersuchung“, auf einer Hundefutter-Seite: „Aktiver Retriever nach dem Füttern“
Title-Tag (title-Attribut): Definition und Funktion
Das title-Attribut bei Bildern erzeugt einen Tooltip — einen kleinen Hinweistext, der erscheint, wenn der Nutzer mit der Maus über das Bild fährt (Hover). Im Gegensatz zum Alt-Tag ist der Title-Tag:
- Optional: Nicht für Barrierefreiheit erforderlich
- Ergänzend: Bietet zusätzliche Informationen, die über den Alt-Text hinausgehen
- SEO-irrelevant: Google hat bestätigt, dass Title-Attribute bei Bildern keinen direkten SEO-Einfluss haben
- Nicht für Screenreader: Die meisten Screenreader ignorieren den Title-Tag oder lesen ihn nur auf spezielle Anforderung vor
Alt-Tag vs. Title-Tag: Direkter Vergleich
- Pflicht: Alt = Ja (für Accessibility), Title = Nein
- SEO-Einfluss: Alt = Hoch (Bildersuche, Kontext), Title = Keiner
- Sichtbarkeit: Alt = Bei Ladefehler, Title = Bei Hover (Tooltip)
- Screenreader: Alt = Wird vorgelesen, Title = Meist ignoriert
- Empfehlung: Alt = Immer setzen, Title = Optional, bei Bedarf
HTML-Syntax: Korrekte Einbindung
<img
src="hochzeitsfotograf-stuttgart.jpg"
alt="Brautpaar beim ersten Tanz im Schloss Solitude Stuttgart"
title="Hochzeitsfotografie bei Schloss Solitude — Foto vom September 2024"
width="800"
height="533"
loading="lazy"
>Alt-Tags in WordPress setzen
WordPress macht das Setzen von Alt-Texten einfach:
- Beim Upload: In der Mediathek im Feld „Alternativtext“ den Alt-Tag eintragen
- Im Block-Editor: Bild anklicken → In der rechten Sidebar unter „Alt-Text (Alternativtext)“ eintragen
- Bulk-Bearbeitung: Plugins wie „Auto Image Alt Text“ oder „SEO Friendly Images“ können Alt-Texte automatisch aus Dateinamen oder Seitentiteln generieren — aber manuell geschriebene sind immer besser
Häufige Fehler bei Alt-Tags
- Fehlende Alt-Tags: Der häufigste Fehler — Bilder ohne Alt-Attribut sind für Screenreader unsichtbar und für Google nicht interpretierbar
- Keyword-Stuffing: Den Alt-Text mit Keywords vollstopfen schadet dem Ranking und der Barrierefreiheit
- Generische Alt-Texte: „image1″, „foto“, „banner“ sind nutzlos
- Dekorative Bilder: Rein dekorative Bilder (Trennlinien, Schmuckelemente) sollten ein leeres Alt-Attribut haben:
alt=""— nicht weggelassen, sondern bewusst leer - Identische Alt-Texte: Verschiedene Bilder brauchen verschiedene Alt-Texte
Fazit: Alt-Tags als SEO-Grundlage und Accessibility-Pflicht
Der Alt-Tag ist ein kleines Attribut mit großer Wirkung: Er macht Bilder für Suchmaschinen interpretierbar, für sehbehinderte Nutzer zugänglich und für alle Nutzer bei Ladeproblemen verständlich. Der Title-Tag ist dagegen optional und primär ein UX-Element. Wer SEO und Barrierefreiheit ernst nimmt, schreibt für jedes inhaltlich relevante Bild einen beschreibenden, keyword-optimierten Alt-Text — das ist einer der einfachsten und effektivsten SEO-Hebel überhaupt.