Alt-Texte & Bildoptimierung
Bilder für SEO und Barrierefreiheit optimieren

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

Alt-Texte richtig schreiben

Die 5 Regeln für perfekte Alt-Texte

Beispiele nach Bildtyp

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

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

Bildtypen und Alt-Text-Anforderungen

Bildformate & Kompression

Das richtige Bildformat und optimale Kompression sind entscheidend für Core Web Vitals und Ladezeiten.

Bildformat-Vergleich

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

Häufig gestellte Fragen