Bilder machen durchschnittlich 50% des Seitengewichts aus und sind für 22% des Web-Traffics über die Google Bildersuche verantwortlich. Trotzdem werden Alt-Texte oft vernachlässigt – ein verschenktes SEO-Potenzial und ein Barrierefreiheits-Problem.
Alt-Text Grundlagen
Das alt-Attribut (Alternative Text) beschreibt den Inhalt eines Bildes für
Nutzer, die es nicht sehen können. Das betrifft:
- Screen Reader-Nutzer – ca. 285 Millionen Menschen weltweit mit Sehbehinderung
- Langsame Verbindungen – wenn Bilder nicht laden
- Suchmaschinen – Crawler können Bilder nicht "sehen"
- Bilder deaktiviert – manche Nutzer deaktivieren Bilder
Schlecht
<img src="DSC_1234.jpg">
Kein Alt-Text, nichtssagender Dateiname
Gut
<img src="seo-audit-dashboard.webp" alt="SEO-Audit Dashboard mit Core Web Vitals Metriken">
Beschreibender Dateiname, präziser Alt-Text
Alt-Texte richtig schreiben
Die 5 Regeln für perfekte Alt-Texte
Beschreiben Sie, WAS zu sehen ist
Nicht "Bild von" oder "Foto zeigt" – Screen Reader sagen bereits an, dass es ein Bild ist.
Seien Sie spezifisch, aber prägnant
80-125 Zeichen sind ideal. Beschreiben Sie das Wesentliche, keine Details.
Beachten Sie den Kontext
Das gleiche Bild kann je nach Kontext unterschiedliche Alt-Texte benötigen.
Vermeiden Sie Keyword-Stuffing
Natürliche Beschreibungen mit relevanten Keywords, keine Auflistungen.
Dekorative Bilder: leerer Alt-Text
Hintergrundbilder und Design-Elemente: alt="" verwenden.
Beispiele nach Bildtyp
| Bildtyp | Schlecht | Gut |
|---|---|---|
| Produktfoto | "Schuh" | "Nike Air Max 90 Herren Sneaker in Weiß, Seitenansicht" |
| Infografik | "Infografik" | "Infografik: 5 Schritte zur SEO-Optimierung mit Prozentangaben" |
| Screenshot | "Screenshot" | "Google Search Console Leistungsbericht mit Klick-Statistiken" |
| Logo | "Logo" | "OnPage-Optimierung.de Logo" |
| Dekorativ | "Muster", "Design" | alt="" (leerer Alt-Text) |
Alt-Texte für SEO
Google nutzt Alt-Texte, um Bilder zu verstehen und in der Bildersuche zu ranken. Bilder mit guten Alt-Texten können erheblichen Traffic generieren.
SEO-Strategien für Alt-Texte
- Haupt-Keyword natürlich einbauen – wenn es zum Bild passt
- Long-Tail Keywords nutzen – "roter Nike Sneaker Größe 42" statt nur "Sneaker"
- Konsistenz mit Seiteninhalt – Alt-Text sollte zum Thema der Seite passen
- Einzigartigkeit – keine duplizierten Alt-Texte auf der Website
Google's Empfehlung
"Konzentrieren Sie sich beim Erstellen von Alt-Text auf die Erstellung nützlicher,
informativer Inhalte, die Keywords angemessen und im Kontext des Seiteninhalts verwenden."
— Google Search Central
Barrierefreiheit (WCAG 2.2)
Ab Juni 2025 ist Barrierefreiheit in der EU gesetzlich vorgeschrieben (BFSG). Alt-Texte sind ein Kernbestandteil der WCAG-Richtlinien.
WCAG Success Criteria für Bilder
1.1.1 Non-text Content (A)
Alle nicht-textlichen Inhalte müssen eine Textalternative haben.
1.4.5 Images of Text (AA)
Verwenden Sie echten Text statt Bilder von Text, außer bei Logos.
Bildtypen und Alt-Text-Anforderungen
| Bildtyp | Alt-Text Anforderung | Beispiel |
|---|---|---|
| Informativ | Beschreibender Alt-Text | alt="Balkendiagramm: Umsatz Q1-Q4" |
| Dekorativ | Leerer Alt-Text | alt="" |
| Funktional (Link/Button) | Beschreibt die Funktion | alt="Suche starten" |
| Komplex (Diagramm) | Kurzer Alt + ausführliche Beschreibung | alt="..." + figcaption/longdesc |
| Text im Bild | Text wiedergeben | alt="50% Rabatt nur heute" |
Bildformate & Kompression
Das richtige Bildformat und optimale Kompression sind entscheidend für Core Web Vitals und Ladezeiten.
Bildformat-Vergleich
| Format | Dateigröße | Transparenz | Animation | Browser-Support |
|---|---|---|---|---|
| WebP | 25-34% kleiner als JPEG | 97%+ | ||
| AVIF | 50% kleiner als JPEG | ~90% | ||
| JPEG | Baseline | 100% | ||
| PNG | Groß (verlustfrei) | 100% | ||
| SVG | Sehr klein (Vektor) | (CSS) | 100% |
Best Practice: Picture-Element mit Fallback
<picture>
<source srcset="bild.avif" type="image/avif">
<source srcset="bild.webp" type="image/webp">
<img
src="bild.jpg"
alt="Beschreibung des Bildes"
width="800"
height="600"
loading="lazy"
decoding="async"
>
</picture>Performance-Optimierung
Lazy Loading
Native Lazy Loading verzögert das Laden von Bildern, bis sie in den Viewport kommen. Das verbessert die initiale Ladezeit (LCP) erheblich.
<!-- Native Lazy Loading -->
<img
src="bild.webp"
alt="Beschreibung"
loading="lazy"
decoding="async"
>
<!-- Bilder above-the-fold: NICHT lazy laden -->
<img
src="hero.webp"
alt="Hero Banner"
loading="eager"
fetchpriority="high"
>Responsive Images mit srcset
Liefern Sie unterschiedliche Bildgrößen für unterschiedliche Viewports:
<img
src="bild-800.webp"
srcset="
bild-400.webp 400w,
bild-800.webp 800w,
bild-1200.webp 1200w
"
sizes="(max-width: 600px) 400px, 800px"
alt="Responsive Bild"
loading="lazy"
>Immer width und height angeben
width und height Attribute verhindern Layout Shifts (CLS),
da der Browser den Platz reservieren kann, bevor das Bild geladen ist.
Strukturierte Daten für Bilder
Mit Schema.org ImageObject können Sie Google zusätzliche Informationen über Ihre Bilder geben.
{
"@context": "https://schema.org",
"@type": "ImageObject",
"url": "https://example.com/bilder/seo-infografik.webp",
"name": "SEO Prozess Infografik",
"description": "Infografik zeigt den 5-Schritte SEO-Prozess von Analyse bis Reporting",
"width": "1200",
"height": "800",
"encodingFormat": "image/webp",
"author": {
"@type": "Person",
"name": "Arnold Wender"
},
"copyrightHolder": {
"@type": "Organization",
"name": "Wender Media"
}
}Bild-SEO Checkliste
Vollständige Bild-SEO Checkliste
- ☐ Dateinamen beschreibend und mit Keywords (kebab-case)
- ☐ Alt-Text für alle informativen Bilder (80-125 Zeichen)
- ☐ Leerer Alt für dekorative Bilder (
alt="") - ☐ WebP/AVIF Format mit JPEG/PNG Fallback
- ☐ Komprimiert ohne sichtbaren Qualitätsverlust
- ☐ width & height Attribute (verhindert CLS)
- ☐ Lazy Loading für Bilder below-the-fold
- ☐ Responsive srcset für verschiedene Viewports
- ☐ ImageObject Schema für wichtige Bilder
- ☐ Image Sitemap für große Bildersammlungen
Häufig gestellte Fragen
Häufig gestellte Fragen
Hier finden Sie direkte Antworten zu OnPage SEO, den kostenlosen Tools und meiner Arbeitsweise.
Wie lang sollte ein Alt-Text sein?
Muss jedes Bild einen Alt-Text haben?
Sollte ich Keywords in Alt-Texte packen?
Was ist der Unterschied zwischen Alt-Text und Title-Attribut?
Welches Bildformat ist am besten für SEO?
Ihre Frage nicht dabei?
Schreiben Sie mir direkt – ich antworte persönlich und unverbindlich.
Bilder-Audit für Ihre Website?
Ich analysiere Ihre Bilder auf Alt-Texte, Dateigröße, Formate und Performance. Oft sind schnelle Verbesserungen möglich.
Kostenlose Analyse anfragen