Alt-Texte und Dateinamen: ein praktischer Leitfaden zur Bild-SEO

Alt-Text, Dateiname und Bildunterschrift haben unterschiedliche Aufgaben

Beim Vorbereiten eines Website-Bildes begegnen dir möglicherweise mehrere ähnlich wirkende Felder. Jedes hat einen eigenen Zweck: Der Dateiname kennzeichnet die Datei, der Alt-Text erklärt das Bild für Menschen, die es nicht sehen, und die Bildunterschrift steht sichtbar daneben.

Alt-Text wird auf der Webseite gespeichert, meist im Attribut alt. Er steckt nicht in der JPG- oder PNG-Datei. Ein Screenreader, der Seiteninhalte vorliest oder in Brailleschrift ausgibt, kann damit das Bild erklären. Siehe MDNs Erklärung zum alt-Attribut.

Dasselbe Foto kann je nach Einsatzort einen anderen Alt-Text brauchen. Auf einer Produktseite zählen vielleicht Henkel und Oberfläche. In einem Artikel über das Fotografieren spiegelnder Oberflächen könnte die Lichtreflexion in der Glasur wichtig sein. Beschreibe, was den Lesern dieser Seite hilft.

Entscheide, was Leser vom Bild brauchen

Frage dich vor dem Schreiben, was ohne das Bild fehlen würde. Zeigt es ein Produktdetail, erklärt es einen Schritt, enthält es wichtige Wörter oder beschriftet es allein einen Link? Oder verschönert es nur die Seite? Der W3C-Entscheidungsbaum für Alt-Texte hilft bei der Auswahl anhand der Bildfunktion.

• Ein Bild mit zusätzlichen Informationen: Beschreibe die benötigten Details.
• Ein Link oder Button ohne weitere Beschriftung: Erkläre Ziel oder Aktion.
• Eine Dekoration: Lass den Alt-Text leer, wenn das Bild keine nötigen Informationen liefert und weder Link noch Bedienelement ist.
• Ein Diagramm oder eine detaillierte Grafik: Erkläre kurz den Inhalt und ergänze die Einzelheiten im benachbarten Text oder einer Tabelle.

Denke an ein Foto einer Tasse auf einem Schreibtisch. Beim Verkauf der Tasse sind Form und Aussehen relevant. Hinter einem Newsletter-Formular könnte dasselbe Foto nur Dekoration sein. Entscheidend ist, warum du es dort platziert hast.

Schreibe eine hilfreiche Beschreibung in einfacher Sprache

Nenne zuerst das Motiv, dann das benötigte Detail. Eine Seitenansicht eines Rucksacks könnte eine Flasche in der Netztasche zeigen. Auf einer Produktseite hilft das mehr als eine Liste aller sichtbaren Farben.

Bleib beim Wesentlichen. Hintergrund, Kamerawinkel und Beleuchtung musst du nur beschreiben, wenn sie das Verständnis verbessern. Die W3C-Anleitung zu informativen Bildern erklärt, wie man wichtige Informationen vermittelt, ohne jedes Detail aufzuzählen.

Das sind Beispielbeschreibungen, keine Beschreibungen der Bilder dieses Artikels. Prüfe bei eigenen Bildern, ob jedes erwähnte Detail tatsächlich sichtbar ist. Erfinde keine Materialien, Modellnamen, Orte oder Eigenschaften, um vollständiger zu wirken. Ein Foto eines braunen Stuhls beweist nicht, dass er aus Leder ist.

Lies die Beschreibung zusammen mit den Sätzen vor und nach dem Bild. Ergänzt sie etwas Nützliches oder wiederholt sie unnötig dasselbe? Passe sie an die gesamte Seite an. Erklärt die Bildunterschrift bereits alles, was das Bild beiträgt, prüfe den Bedarf einer eigenen Beschreibung. Nutze Alt-Text für wichtige Details, die die Bildunterschrift nicht nennt.

Verwende leeren Alt-Text für dekorative Bilder

Ein Schnörkel neben einer Überschrift oder eine Hintergrundillustration verschönert vielleicht nur die Seite. Liefert das Bild keine nötigen Informationen, verwende ein leeres alt-Attribut: alt="". Ein Screenreader kann es dann überspringen. Lass das Attribut nicht einfach weg: Manche Screenreader lesen sonst den Dateinamen vor. Siehe die W3C-Anleitung zu dekorativen Bildern.

<img src="/images/gelber-schnoerkel.svg" alt="">

Schreibe nicht „dekoratives Bild“ als Beschreibung. Das erzeugt eine Ansage ohne nützlichen Inhalt. Leer bedeutet, dass keine Beschreibung angekündigt wird.

Vorsicht bei scheinbar dekorativen Bildern, die wichtige Informationen als einzige Quelle enthalten. Ein Banner mit Rabatt und Ablaufdatum ist keine reine Dekoration, wenn diese Angaben im Seitentext fehlen. Schreibe das Angebot als normalen Text oder nimm die Aussage in den Alt-Text auf. Auch ein Fehlersymbol braucht eine schriftliche Erklärung, wenn es die einzige Fehlermeldung ist.

Beschreibe den Zweck von reinen Bildlinks und Bildbuttons

Ist ein Bild der einzige Linkinhalt, sollte sein Alt-Text das Ziel nennen. Bei einem reinen Bildbutton beschreibt er die Aktion. „Suchen“ erklärt beim Suchbutton die Funktion; „Lupe“ nennt nur die Form. Die W3C-Anleitung zu funktionalen Bildern erläutert diese Fälle.

Angenommen, das Shoplogo ist der einzige Inhalt eines Links zur Startseite. „Startseite des North-Shore-Shops“ gibt ihm eine verständliche Beschriftung. Die Wellenform des Logos ausführlich zu beschreiben erklärt nicht, wohin der Link führt.

Enthält derselbe Link bereits klaren sichtbaren Text, kann das begleitende Bild oft leeren Alt-Text haben, um Wiederholungen zu vermeiden. Entscheidend ist, ob es zusätzliche wichtige Informationen enthält. Prüfe Bild und Linktext gemeinsam.

<a href="/">
  <img src="/images/north-shore-logo.svg"
       alt="Startseite des North-Shore-Shops">
</a>

Überlege bei einer Produktgalerie, was die Auswahl eines Vorschaubildes bewirkt. „Seitentasche des Rucksacks ansehen“ kann hilfreicher sein als der wiederholte Produktname. Die Galerie kann getrennte Felder für Buttonbeschriftungen und Bildbeschreibungen haben. Prüfe, ob jedes Bedienelement in der veröffentlichten Galerie klar beschriftet ist.

Diagramme, Screenshots und Text in Bildern beschreiben

Ein Diagramm kann zu viele Informationen für eine kurze Beschreibung enthalten. Erkläre knapp, was es zeigt, und ergänze Ergebnisse und Werte im benachbarten Text oder einer Tabelle, die ohne das Bild verständlich ist. Die W3C-Anleitung zu komplexen Bildern beschreibt solche Möglichkeiten.

Stell dir ein Diagramm zum Vergleich der Dateigrößen von drei Exporten desselben Fotos vor. Der Alt-Text könnte den Größenvergleich benennen; eine Tabelle nennt Format und Größe. Leser sollen das Ergebnis ohne Deutung der Balkenhöhen verstehen. Verwende echte Messwerte und stelle klar, dass sie für dieses Foto gelten.

Beschreibe bei einem Anleitungsscreenshot die Einstellung oder den Schritt, den er erklärt. Ein Satz zum Ort der Qualitätseinstellung kann helfen; die eigentliche Anweisung gehört zusätzlich in den Seitentext. Werden mehrere Beschriftungen für den Schritt benötigt, nenne sie in der Anleitung, statt einen langen Ablauf im Alt-Text zu verstecken.

Enthält ein Bild einen kurzen wichtigen Text, der nirgendwo sonst steht, übernimm ihn in den Alt-Text. Längere Texte gehören direkt auf die Seite. Unser Canva-Export-Ratgeber erklärt, warum wichtige Überschriften und Buttons meistens als Seiteninhalt besser funktionieren.

Wähle kurze, beschreibende Bilddateinamen

Google empfiehlt kurze, beschreibende Dateinamen als kleinen Hinweis auf das Bildthema. Auch Alt-Text und die umgebende Seite helfen beim Verständnis. Das ist kein Grund, den Namen mit Suchphrasen zu füllen. Siehe Googles Hinweise zur Bild-SEO.

Nenne zuerst das Motiv, dann ein hilfreiches Detail oder die Ansicht. In einer Produktgalerie ist gruener-rucksack-seitentasche.webp leichter zuzuordnen als IMG_4821.webp. Ergänze eine Produktkennung, wenn sie ähnliche Artikel unterscheidet. Füge kein Jahr hinzu, wenn es das Bild nicht wirklich kennzeichnet.

Für ein einfaches Namenssystem nutze Kleinbuchstaben und Bindestriche zwischen den Wörtern. Das erleichtert die Organisation, garantiert aber keine besseren Rankings. Behalte die richtige Endung: Das Umbenennen von .png in .jpg konvertiert das Bild nicht. Verwende dafür ein Konvertierungswerkzeug.

Benenne Dateien möglichst vor dem Hochladen. Ändert ein neuer Name die Adresse eines veröffentlichten Bildes, können Seiten mit der alten Adresse das Bild verlieren. Aktualisiere diese Seiten und leite die alte Adresse bei Bedarf weiter. Benenne eine funktionierende Bildbibliothek nicht nur für zusätzliche Suchbegriffe um.

Füge die Beschreibung zum Bild auf der Seite hinzu

Suche im Website-Editor nach „Alternativtext“ oder „Alt-Text“. Speichere die Beschreibung und prüfe die veröffentlichte Seite. Titel, Bildunterschrift oder Dateiname in der Mediathek zu ändern verändert nicht zwingend den Alt-Text auf der Seite. Editoren und Vorlagen behandeln die Felder unterschiedlich.

Bietet der Editor das richtige Feld, brauchst du kein HTML. Für die direkte Bearbeitung des Seitencodes sieht ein einfaches informatives Bild so aus:

<img src="/images/gruener-rucksack-seitentasche.webp"
     alt="Grüner Rucksack mit einer Wasserflasche in der seitlichen Netztasche">

Prüfe die tatsächliche Seite nach dem Speichern. Im Desktopbrowser kannst du das Bildelement untersuchen und den Wert von alt ansehen. Ein Barrierefreiheitsprüfer findet fehlende alt-Attribute, beurteilt aber nicht zuverlässig den Nutzen einer Beschreibung. Lies sie selbst im Zusammenhang mit dem Seitentext.

Bei mehrsprachigen Websites schreibe die Beschreibung in der jeweiligen Seitensprache. Übersetze die Bedeutung natürlich statt einer englischen Suchwortliste. Dieselbe Bilddatei kann auf jeder Seite einen anderen Alt-Text haben, weil die Beschreibung in der Seite gespeichert wird.

Beispiel: ein Produktfoto sinnvoll beschreiben

Du ergänzt ein Foto der Seitentasche auf der Produktseite eines grünen Rucksacks. Es soll zeigen, wie eine Wasserflasche hineinpasst, nicht sämtliche Produkteigenschaften wiederholen.

1. Hilfreiche Ansicht wählen. Nutze ein Foto, auf dem Flasche und Tasche klar sichtbar sind. Beschreibe keine verdeckten Details.
2. Datei vorbereiten. Entferne unnötige Bildflächen und wähle Maße, bei denen die Tasche in der Galerie erkennbar bleibt. Der gesamte Ablauf steht in unserem Ratgeber zu Produktbildern.
3. Die fertige Datei benennen. Nutze etwa gruener-rucksack-seitentasche.jpg mit der zum gespeicherten Format passenden Endung.
4. Seitenspezifischen Alt-Text hinzufügen. Beschreibe die Flasche in der Netztasche. Preise, Versandversprechen und unpassende Suchphrasen gehören in den übrigen Seitentext.
5. Veröffentlichte Galerie prüfen. Kontrolliere die gespeicherte Bildbeschreibung und klare Beschriftungen der Galerieelemente, sowohl auf Smartphone als auch Desktop.

Dieser Ablauf trennt Dateivorbereitung und Alt-Text. Beides ist wichtig, löst aber verschiedene Probleme. Nutze ihn auch für Anleitungsscreenshots oder Diagramme und passe die Beschreibung an die gezeigten Informationen an.

Vermeide diese häufigen Fehler

• Suchphrasen wiederholen. „Rucksack bester Rucksack günstiger Rucksack Wanderrucksack“ beschreibt weder die Tasche noch hilft es beim Verständnis des Fotos.
• Den Dateinamen als Beschreibung verwenden. Er hilft beim Finden der Datei, erklärt aber nicht unbedingt, was Leser über das Bild wissen müssen.
• Denselben Text für alle Galeriebilder verwenden. Beschreibe unterschiedliche Ansichten, wenn sie unterschiedliche Informationen zeigen.
• Details erraten. Prüfe Materialien, Beschriftungen und Eigenschaften, statt sie aus dem Aussehen abzuleiten.
• Dekorationen ausführlich beschreiben. Zusätzliche Ansagen können das Verfolgen der wichtigen Inhalte erschweren.
• Nur die Mediathek prüfen. Die Vorlage nutzt möglicherweise nicht das bearbeitete Feld. Prüfe das veröffentlichte Bild.

Häufig gestellte Fragen

Wie lang sollte Alt-Text sein?

So kurz wie möglich, ohne wichtige Informationen wegzulassen. Für ein einfaches Foto reicht vielleicht ein kurzer Satz. Es gibt keine einzelne Zeichengrenze, die eine Beschreibung nützlich macht. Lange Diagrammerklärungen gehören in den normalen Seitentext.

Braucht jedes Bild einen beschreibenden Alt-Text?

Nein. Beschreibe Bilder mit hilfreichen Informationen; Dekorationen erhalten leeren Alt-Text. Ist das Bild die einzige Beschriftung eines Links oder Buttons, erkläre Ziel oder Aktion.

Kann KI Beschreibungen entwerfen?

Ein Entwurf kann ein Anfang sein, muss aber mit Bild und Seite verglichen werden. Entferne Vermutungen, unnötige Details und wiederholte Suchbegriffe. Eine generierte Beschreibung kann überzeugend klingen und trotzdem etwas nennen, das nicht sichtbar ist.

Entfernt Komprimierung den Alt-Text?

Alt-Text liegt in der Webseite, nicht in der Bilddatei. Eine lokale JPG- oder PNG-Datei zu komprimieren verändert die Seite nicht. Ein Bildaustausch im Editor kann Felder aber ändern oder zurücksetzen. Prüfe die veröffentlichte Beschreibung danach.

Garantieren bessere Dateinamen mehr Suchtraffic?

Nein. Klare Namen und hilfreiche Beschreibungen unterstützen eine gut vorbereitete Seite, garantieren aber weder Indexierung noch Rankings oder Klicks. Googles Anleitung behandelt auch umgebenden Text, die Auffindbarkeit für Crawler und Ladezeiten. Unser Ratgeber zur Bildperformance behandelt diesen separaten Teil der Arbeit.

Zusammenfassen mitChatGPT (öffnet sich in einem neuen Tab)Grok (öffnet sich in einem neuen Tab)Google (öffnet sich in einem neuen Tab)Perplexity (öffnet sich in einem neuen Tab)Claude (öffnet sich in einem neuen Tab)