Bild-SEO und Alt-Text: den gesamten Workflow optimieren

Illustratives Beispiel: Eine Kaffeemaschinenseite verwendet ein großes CSS-Hintergrundbild mit wenig aussagekräftigem Dateinamen und ohne Modellbeschreibung in der Nähe. Prüfen Sie Bildauslieferung, zugängliche Alternativen und Kontext; robots.txt allein diagnostiziert diese Probleme nicht.

Bild-SEO bedeutet nicht, nach der Veröffentlichung Keywords in ein Alt-Feld zu schreiben. Es ist eine Kette von Entscheidungen: Auswahl, Benennung, Exportgröße, umgebender Text, HTML-Einbindung, CDN-Auslieferung, Metadaten und Sitemaps. Eine gute Kette verbessert die Bildentdeckung und schützt zugleich Seitengeschwindigkeit und Barrierefreiheit.

Google versteht Bilder über mehrere Signale

Alt-Text ist wichtig, wirkt aber nicht allein. Suchsysteme können berücksichtigen:

• Inhalt und Überschriften der Landingpage.
• Absätze, Bildunterschriften und Titel in der Nähe.
• Dateiname und URL des Bildes.
• Das Attribut alt.
• Strukturierte Daten und Open-Graph-Metadaten.
• Links auf das Bild oder die Landingpage.
• Auf die Datei angewandte Computer Vision.

Ein Bild einer „X200-Kaffeemaschine auf einer Café-Theke“ gehört auf eine Seite, die wirklich vom X200 handelt, nahe einem Text über Design oder Nutzung. Es in eine kontextlose Galerie zu setzen und ein langes Alt-Attribut zu schreiben, schafft nicht dieselbe Klarheit.

HTML-Elemente verwenden, die Crawler entdecken können

Google Search Central empfiehlt, Inhaltsbilder mit einem <img>-Element und einer URL in src einzubetten. CSS-Hintergründe taugen für Dekoration, sind aber nicht die richtige Methode für ein Bild, das in Google Bilder gefunden werden soll.

Ein einfaches Beispiel:

<img
  src="/images/x200-black-coffee-machine.webp"
  alt="Black X200 coffee machine beside a burr grinder"
  width="1200"
  height="800"
>

Responsive Umsetzungen können srcset, sizes oder <picture> nutzen und behalten dabei ein gültiges img src als Kernelement. Prüfen Sie Quelltext und gerendertes HTML, um sicherzugehen, dass die URL nicht erst nach einer Interaktion erscheint, die Crawler vermutlich nicht ausführen.

Reine Dekoration kann im CSS bleiben. Es gibt keinen Grund, jede Textur, jedes Hintergrundsymbol und jede Trennlinie in eine Bild-Sitemap aufzunehmen, nur weil es eine Grafikdatei ist.

Alt-Text für den Zweck des Bildes schreiben

Alternativtext hilft Menschen, die ein Bild nicht sehen können, die Information oder Funktion zu verstehen, die es beiträgt. Eine Formel kann nicht jeden Typ abdecken.

Informative Bilder

Beschreiben Sie, was nötig ist, um den umgebenden Abschnitt zu verstehen:

alt="Chart showing organic clicks rising from 1,200 to 1,850 in three months"

Nennt der benachbarte Absatz bereits jeden Wert, kann der Alt-Text kürzer sein, damit Screenreader-Nutzer dieselben Daten nicht zweimal hören.

Produktbilder

Nennen Sie das Produkt und eine nützliche Ansicht oder Variante:

alt="Side view of blue AirFlow running shoe with white rubber sole"

Wiederholen Sie nicht bei jedem Foto „günstige Original-Laufschuhe kaufen“. Vorder-, Rück-, Sohlen- und Materialdetail-Aufnahmen brauchen unterschiedliche Beschreibungen, weil sie verschiedene Informationen liefern.

Funktionale Bilder

Wenn ein Bild eine Schaltfläche oder ein Link ist, beschreiben Sie die Aktion oder das Ziel:

<a href="/cart">
  <img src="/icons/cart.svg" alt="Open shopping cart">
</a>

Dekorative Bilder

Verwenden Sie alt="", damit assistive Technologien sie überspringen können:

<img src="/decor/divider.png" alt="">

Ein fehlendes Alt-Attribut und ein absichtlich leeres sind für die Barrierefreiheit nicht identisch. Der leere Wert besagt eindeutig, dass das Bild keine Information trägt.

Bilder mit Text

Setzen Sie wichtige Wörter wenn möglich in echtes HTML. Text in einem Bild lässt sich schwer skalieren, übersetzen, zugänglich machen und aktualisieren. Logos sind eine bekannte Ausnahme; ihr Alt nennt im Allgemeinen die Organisation oder die Linkfunktion, wenn das Logo zur Startseite zurückführt.

Alt-Text, der optimiert aussieht, aber scheitert

Häufige Probleme:

• Keywords und Orte aufzählen, die im Bild nicht vorkommen.
• Jedem Produktfoto dieselbe Beschreibung geben.
• Alles mit „Bild von“ beginnen, obwohl der Kontext offensichtlich ist.
• Einen Absatz mit 200 Wörtern schreiben, statt Bildunterschrift und Fließtext zu nutzen.
• Einen ungereinigten Dateinamen automatisch ins Alt kopieren.
• Ein Vision-Modell Objekte benennen lassen, ohne die Rolle des Bildes im Artikel zu bedenken.

Ein Modell erkennt vielleicht „eine Person neben einem Whiteboard“, doch eine Redakteurin oder ein Redakteur weiß, ob es einen Audit-Ablauf illustriert oder einen Konferenzredner vorstellt. Nützlicher Alt-Text verbindet sichtbare Information mit dem Zweck im Kontext.

Dateinamen und URL-Struktur

x200-black-coffee-machine.webp gibt einen leichten Hinweis und ist leichter zu verwalten als DSC00991.webp. Praktische Regeln:

1. Namen kurz, aber unterscheidbar halten.
2. Wahrheitsgemäß beschreiben statt eine Keyword-Liste zu verwenden.
3. Wörter durchgängig mit Bindestrichen trennen.
4. Die zum Format passende Endung beibehalten.
5. Bild-URLs nicht bei jedem Deployment ändern, wenn der Inhalt unverändert ist.

Leiten Sie bei Tausenden Assets Namen aus Produkt-ID, Variante und Aufnahmewinkel ab: x200-black-front.webp, x200-black-side.webp. Eine konsistente Regel hilft DAM, CDN und Content-Teams, Duplikate zu vermeiden.

Enthalten lokalisierte Bilder übersetzten Text oder marktspezifische Informationen, können lokalisierte Dateinamen sinnvoll sein. Wird dasselbe sprachneutrale Bild in mehreren Sprachversionen genutzt, verbessert eine stabile URL das Caching; Alt-Text und Bildunterschriften können dennoch auf jeder Seite übersetzt werden.

Format und Kompression bewusst wählen

Kein Format gewinnt jeden Anwendungsfall:

• JPEG: breit unterstützt und effektiv für Fotos, ohne nutzbare Alpha-Transparenz.
• PNG: geeignet für Transparenz und scharfe Details, bei Fotografie oft schwer.
• WebP: effizient für viele Bildtypen und von modernen Browsern breit unterstützt.
• AVIF: kann bei vergleichbarer visueller Qualität kleinere Dateien erzeugen; Kodierzeit und Fallback-Ablauf sind zu bedenken.
• SVG: ideal für Logos, Icons und Vektorgrafiken; bereinigen Sie sie, wenn Sie Nutzer-Uploads akzeptieren.

Exportieren Sie nah an den tatsächlichen Anzeigegrößen. Eine 5.000-Pixel-Quelle ist für einen 600-Pixel-Platz unnötig. Stellen Sie dennoch eine Variante mit höherer Dichte für scharfe Displays bereit. Erzeugen Sie mehrere Größen in der Medien-Pipeline, statt Browser das Original laden und verkleinern zu lassen.

Kompression sollte Produktkanten, Text oder Details, die ein Käufer braucht, nicht verwischen. Prüfen Sie Stichproben visuell auf mehreren Displays, statt nur einen Einsparungsprozentsatz abzunehmen.

Responsive Bilder sparen mehr als nur Dateigröße

srcset lässt den Browser eine Ressource nach Viewport und Pixeldichte wählen:

<img
  src="/images/audit-dashboard-800.webp"
  srcset="/images/audit-dashboard-480.webp 480w,
          /images/audit-dashboard-800.webp 800w,
          /images/audit-dashboard-1280.webp 1280w"
  sizes="(max-width: 720px) 100vw, 720px"
  alt="Dashboard listing SEO issues by priority"
  width="1280"
  height="800"
>

Ein falscher sizes-Wert kann Browser eine unnötig große Datei wählen lassen. Prüfen Sie das Netzwerk-Panel auf Mobilgerät und Desktop, um zu sehen, welche Ressource tatsächlich geladen wird, statt nur zu prüfen, ob srcset existiert.

Verwenden Sie für jede Inhaltsvariante eine stabile URL. Ständig wechselnde Query-Versionen können das Caching schwächen und viele Bildadressen in den Logs erzeugen.

Width, Height und CLS

width und height erlauben dem Browser, das Seitenverhältnis vor dem Download zu berechnen. CSS kann das Bild responsiv halten:

img {
  max-width: 100%;
  height: auto;
}

Ohne reservierten Platz verschiebt sich der Inhalt darunter, wenn die Datei eintrifft, was zum Cumulative Layout Shift beiträgt. Definieren Sie bei beschnittenen Containern ein stabiles aspect-ratio und ein passendes object-fit.

Der Leitfaden zur Optimierung der Core Web Vitals erklärt, wie Hero-Bilder das LCP und instabile Abmessungen den CLS beeinflussen.

Lazy Loading an den richtigen Stellen einsetzen

Natives Lazy Loading kann Bilder unterhalb des Viewports verzögern:

<img src="/images/step-8.webp" alt="..." loading="lazy">

Das Hero- oder wahrscheinliche LCP-Bild sollte nicht leichtfertig verzögert werden. Lassen Sie Browser kritische Ressourcen früh entdecken, erwägen Sie in geeigneten Fällen fetchpriority="high" und verstecken Sie die URL nicht hinter JavaScript.

Eine praktische Richtlinie:

• Das Hauptbild, das wahrscheinlich das LCP wird, sofort laden.
• Galerien und weit unten liegende Medien per Lazy Loading laden.
• Kein schweres Skript nur hinzufügen, um alles per Lazy Loading zu laden.
• Das richtige Platzhalter-Seitenverhältnis reservieren.
• Auf langsamen Netzen und echten Geräten testen.

Nutzen Sie den Page Speed Checker, um LCP, CLS und übertragene Bildbytes nach einer Änderung der Medien-Pipeline zu messen.

Bildunterschriften und umgebender Text

Nicht jedes Bild braucht eine Bildunterschrift. Fügen Sie eine hinzu, wenn ein Leser Quelle, Ergebnis, Datum, Person, Bedingung oder ein bestimmtes Detail braucht. Die Unterschrift eines Diagramms kann den Datenbereich nennen; ein Vorher-Nachher-Vergleich sollte seine Bedingungen benennen.

Platzieren Sie ein Bild nahe der zugehörigen Erläuterung. Eine Infografik zu einem Ablauf in sechs Schritten, die drei Bildschirme von ihrer Überschrift entfernt steht, hat schwachen Kontext und unterbricht das Lesen.

Enthält ein Bild wichtige Daten, fassen Sie die Schlussfolgerung in HTML zusammen. Weder Barrierefreiheit noch SEO sollten vollständig von Pixeln abhängen.

Beitragsbilder, Open Graph und strukturierte Daten

Vorschaubilder in der Suche und beim Teilen in sozialen Netzwerken werden automatisch aus mehreren Signalen gewählt. Eine Website kann eine Präferenz ausdrücken mit:

• og:image.
• Der Eigenschaft image an Article, Product oder einem anderen passenden Schema-Typ.
• primaryImageOfPage.
• Einem prominenten Beitragsbild im Inhalt.

Wählen Sie ein relevantes, hochauflösendes Asset ohne extremes Seitenverhältnis. Vermeiden Sie ein generisches Logo für jeden Artikel oder textlastige Grafiken, deren kleine Wörter in einem Vorschaubild verschwinden. Prüfen Sie die Darstellung in sozialen Netzwerken mit dem Social Preview Checker.

Jede Bild-URL in strukturierten Daten muss erreichbar sein. Blockiert ein CDN Crawler, verlangt ein Cookie oder stellt ablaufende URLs aus, kann gültiges Markup die Datei nicht abrufbar machen.

Wann eine Bild-Sitemap hilft

Eine Bild-Sitemap ist nützlich, wenn wichtige Medien in gewöhnlichem HTML schwer zu entdecken sind, von einer komplexen Anwendung geladen werden oder einen großen Teil des Werts der Website ausmachen. Bildeinträge können vorhandenen Seiten-Sitemaps hinzugefügt werden, ohne ein völlig getrenntes System aufzubauen.

Eine Bild-Sitemap behebt nicht:

• Blockierte Ressourcen.
• Fehlerantworten.
• Bilder ohne Bezug zu ihren Landingpages.
• Winzige oder qualitativ schlechte Dateien.
• Eine Landingpage mit noindex.

Liegen Bilder auf einer anderen CDN-Domain, verifizieren Sie diese Domain in der Search Console, damit Crawl-Probleme gemeldet werden können. Verwenden Sie absolute, stabile URLs mit dem richtigen Protokoll.

CDN, Cache und Zugriffskontrolle

Ein CDN senkt die Latenz, kann aber Suchprobleme erzeugen, wenn:

• Hotlink-Schutz Googlebot oder Anfragen ohne Referer blockiert.
• Signierte URLs nach Minuten ablaufen.
• Jede Größenänderung eine instabile Adresse erzeugt.
• Antworten den falschen MIME-Typ tragen.
• Der Cache 404 liefert, obwohl der Origin die Datei hat.
• Die robots.txt des CDN Bildverzeichnisse blockiert.

Testen Sie ohne Cookies und, wenn möglich, von mehreren User-Agents und Regionen aus. Prüfen Sie CDN-Logs, um zu bestätigen, dass Crawler 200, einen korrekten Content-Type und die erwartete Bytegröße erhalten.

Benennen Sie nicht die gesamte Bildbibliothek nur um, um von JPEG auf WebP zu wechseln, ohne die Folgen zu bedenken. Content Negotiation oder ein kontrolliertes Update mit Weiterleitungen und Sitemap-Änderungen kann funktionieren, doch berücksichtigen Sie Caches, Bild-Backlinks und erneutes Crawling.

Bilder nach Template prüfen

Nehmen Sie Stichproben von Startseite, Artikeln, Kategorien, Produkten, Landingpages und lokalisierten Templates. Fragen Sie jeweils:

1. Stehen Inhaltsbilder in img src oder in CSS-Hintergründen?
2. Existiert Alt-Text, passt er zum Zweck und variiert er angemessen?
3. Sind Dateinamen beschreibend und URLs stabil?
4. Reservieren Width und Height Platz?
5. Welches Bild ist das LCP, und wird es verzögert?
6. Wie viele Bildbytes werden auf Mobilgeräten geladen?
7. Liefern Bildunterschriften und umgebender Text Kontext?
8. Liefern Bild-URLs 200 mit dem richtigen MIME-Typ?
9. Ist das Beitragsbild in OG und Schema vertreten?
10. Sind strategisch wichtige Bilder in Sitemaps enthalten?

Priorisieren Sie dann nach Umfang. Eine Kartenkomponente ohne Alt bei 20.000 Produkten gehört in eine Template-Korrektur. Zehn schlecht benannte Blogbilder können einzeln bearbeitet werden.

Der SEO Checker prüft grundlegende Seitenattribute, und ein kostenloses SEO-Audit hilft, wiederkehrende Fehler zu finden, bevor eine gemeinsame Komponente geändert wird.

Ein Übergabe-Workflow zwischen Teams

Dauerhaftes Bild-SEO braucht klare Zuständigkeiten:

• Fotografie/Design: saubere Originale, passende Zuschnitte und Nutzungsrechte liefern.
• Content: Assets auswählen und kontextbezogenen Alt-Text und Bildunterschriften schreiben.
• Frontend: HTML-Bilder, responsive Quellen, Abmessungen und Ladeverhalten umsetzen.
• Backend/DAM: Dateien benennen, Varianten erzeugen, Metadaten halten und stabile URLs sichern.
• DevOps/CDN: Caching, MIME-Typen, Crawl-Zugriff und Fehlerüberwachung verwalten.
• SEO: strategische Landingpages, Sitemap-Regeln, Tests und Messung definieren.

Wird Alt-Text am Ende von jemandem ergänzt, der nicht weiß, wo ein Asset erscheint, leidet die Konsistenz. Ein CMS sollte Alt-Text pro Verwendung unterstützen, weil dieselbe Datei in einem anderen Kontext eine andere Beschreibung brauchen kann.

Das Ergebnis messen

Verfolgen Sie vorher und nachher nach Seitengruppen:

• Klicks und Impressionen in der Search Console mit dem Suchtyp Bilder.
• Zugriffe auf Landingpages aus Google Bilder.
• LCP, CLS und gesamte Bildübertragungsgröße.
• Prozentsatz der Bilder ohne Alt oder mit Fehlerantwort.
• Crawl-Abdeckung strategischer Bilder.
• Conversions aus Sitzungen, die mit der Bildersuche beginnen.

Erwarten Sie nicht, dass eine heutige Alt-Änderung morgen den Traffic ändert. Bilder müssen erneut gecrawlt und verarbeitet werden. Die Ergebnisse hängen auch davon ab, wie visuell die Suchanfrage ist; ein Rechtsartikel kann trotz einwandfreier Umsetzung weniger Bild-Traffic erhalten als ein Rezept.

Fazit

Wirksames Bild-SEO beginnt mit einem nützlichen Asset auf einer relevanten Seite, ausgeliefert über crawlbares HTML. Alt-Text erklärt die Rolle des Bildes; Dateinamen, Bildunterschriften, Metadaten und Sitemaps ergänzen Kontext; responsive Dimensionierung, Kompression und Ladeverhalten sichern ein schnelles, stabiles Erlebnis.

Machen Sie Alt nicht zum Keyword-Behälter, senden Sie keine riesigen Originale an kleine Bildschirme und verstecken Sie das wichtigste Inhaltsbild nicht als CSS-Hintergrund. Wenn Content-, Frontend- und CDN-Teams einen gemeinsamen Workflow teilen, können Bilder auffindbar werden, ohne Barrierefreiheit oder Core Web Vitals zu opfern.

Quellen: Best Practices von Google Search Central zu Bild-SEO, Hinweise zu responsiven Bildern auf web.dev und W3C-Tutorials zur Barrierefreiheit von Bildern.