SEO Bilder: alternativer Text, Kontext und nützliche Dateien

9 Min. Lesezeit

Bei SEO-Bildern wird Alt-Text zur Übermittlung von Informationen oder Funktionen verwendet, nicht zum Stapeln von Schlüsselwörtern. In einem Geschäft rufen das Foto eines Produkts, das Warenkorbsymbol und ein Verbindungsplan daher nicht die gleiche Reaktion hervor. Beginnen Sie mit der tatsächlichen Verwendung auf der Seite, bevor Sie an den Dateien arbeiten.

Die gute Alternative stellt das wieder her, was das Bild bietet: eine nützliche Beschreibung, eine verständliche Aktion oder detaillierte Informationen, die daneben verfügbar sind. Ein rein dekoratives Bild erhält ein Attribut alt leer.^[43]

Beginnen Sie mit der Rolle des Bildes, nicht mit dem Schlüsselwort

Ein Foto kann die Form eines Produkts, eine Textur oder den Inhalt eines Kits dokumentieren. Seine Alternative muss die für die Entscheidung nützlichen Details wiederherstellen, ohne jedes Bild in eine Zusammenfassung des Blattes umzuwandeln. Der Name des Produkts mag relevant sein, aber seine kommerziellen Eigenschaften beschreiben nicht unbedingt das, was man sieht.

Umgekehrt erhält man eine Hintergrundtextur oder ein Umhüllungsmuster ohne Informationen alt="" bei Integration durch ein Tag <img>. Das WAI bietet diese leere Alternative für rein dekorative Bilder.^[43]

Verwechseln Sie diese Auswahl nicht mit einem vergessenen Attribut: Dokumentieren Sie die dekorative Wirkung, damit die Korrektur beabsichtigt ist. Überprüfen Sie vor dem Schreiben auch den bereits vorhandenen Text und den Namen des möglichen Links.

Google verwendet die Alternative mit Seiteninhalt, um das Bild zu verstehen, und verhindert Keyword-Stuffing. Eine Reihe kommerzieller Begriffe ist daher kein schriftliches Ziel.^[42]

SEO Bilder und Alternativtext: ein verwendbarer Entscheidungsbaum

Bei der nachstehenden Reihenfolge handelt es sich um eine vorgeschlagene redaktionelle Kontrolle. Es enthält die WAI-Unterscheidungen für Bilder HTML <img>, ohne einen universellen Baum für alle Komponenten zu bilden.

1. Ist das Bild das einzige, das einen Link oder eine Schaltfläche benennt? Beschreiben Sie das Ziel oder die Aktion, z. alt="Voir mon panier"und nicht das Aussehen des Piktogramms.^[43]
2. Stellt es ein Diagramm oder komplexe Informationen dar? Identifizieren Sie das Bild alternativ und stellen Sie seine Informationen in zugehörigem sichtbarem Text bereit, anstatt alles hineinzupacken alt.^[43]
3. Enthält es nützlichen Text, der an anderer Stelle fehlt? Verwenden Sie alternativ diesen Text. Wenn es bereits in echtem Text verfügbar ist und das Bild nichts hinzufügt, wählen Sie eine leere Alternative.^[43]
4. Bietet es einfache visuelle Informationen? Beschreiben Sie kurz, worauf es auf dieser Seite ankommt: das dargestellte Produkt, seine Ansicht oder ein tatsächlich sichtbares Detail.^[43]
5. Ist es nur dekorativ oder überflüssig? Denken Sie daran alt="" nachdem sichergestellt wurde, dass keine nützlichen Informationen oder Funktionen verschwinden.

Wenn kein Zweig eindeutig geeignet ist, unterbrechen Sie den Schreibvorgang. Kommen wir zurück zur konkreten Frage: Was würde eine Person verlieren, die dieses Bild nicht sieht? Dieser Verlust leitet die Behandlung.

Drei Bilder eines fiktiven Ladens, drei Behandlungen

Das folgende Beispiel ist völlig frei erfunden. Ein Geschäft bietet ein Bewässerungsset für Pflanzgefäße mit einem Foto seiner Elemente, einem Korbsymbol und einem Anschlussplan an.

Das Produktfoto zeigt das Rohr, den Wasserhahn und die Tropfer getrennt auf einem einfachen Hintergrund. Sein Interesse besteht darin, den Inhalt des Kits identifizierbar zu machen. Die Alternative umfasst diese Elemente, ohne „besser“, „wirtschaftlich“ oder Kompatibilität hinzuzufügen, die das Foto nicht zeigt.

Das anklickbare Symbol stellt einen Warenkorb dar und stellt allein den Inhalt des Links dar. Seine Alternative muss das Ziel nennen. In einer Variante, bei der der Text „Warenkorb“ bereits im selben Link vorkommt und zum Verständnis ausreicht, kann das Icon eine leere Alternative erhalten.^[43]

Der Anschlussplan hat mehrere Zweige und eine Legende. Eine Formel wie „Bewässerungsdiagramm“ gibt keine Auskunft. Geben Sie eine kurze Identifizierung und direkt daneben diese sichtbare Beschreibung an:

Der Tank versorgt das Auslassventil und dann das Hauptrohr. Eine Umleitung teilt sich den Weg zum Kräuterkübel und zum Blumenkübel. Jede Filiale bedient ihre Tropfer. Die Pfeile geben die Richtung des Wassers an; Die durchgezogenen Linien stellen die Rohre dar. Der Wasserhahn steuert die gemeinsame Stromversorgung der Pflanzgefäße.

Dieser Text beschreibt nur die Abbildung, keinen Installationsvorgang. Die endgültigen Formulierungen sind im untenstehenden Verzeichnis aufgeführt.

Geben Sie der Datei einen Kontext, der sie verständlich macht

Google extrahiert Informationen aus Seiteninhalten, einschließlich Bildunterschriften und Bildtiteln, und empfiehlt die Platzierung von Bildern in der Nähe von relevantem Text. Der Dateiname gibt nur einen sehr geringen Hinweis auf das Thema.^[42]

Deshalb lieber kit-arrosage-elements.jpg zu einem generischen Namen, aber betrachten Sie die Umbenennung nicht als Haupthebel. Platzieren Sie auf dem Blatt das Foto neben der Zusammensetzung des Bausatzes und das Diagramm neben den Anschlusserklärungen.

Der Dateiname identifiziert eine Ressource; Die Bildunterschrift erklärt den Lesern ihr Interesse. Die Alternative stellt die Informationen oder Funktionen ohne visuellen Zugriff dar. Diese Felder müssen keine identische Formel enthalten.

Für ein Bild, das ohne Änderung wiederverwendet wird, empfiehlt Google, eine konsistente URL beizubehalten, damit es zwischengespeichert und wiederverwendet werden kann.^[42] Identifizieren Sie vor dem Umbenennen die betroffenen Seiten und Referenzen, anstatt die Datei separat zu verschieben.

Eine vollständige Bestandsaufnahme, um Bild für Bild zu entscheiden

Hier ist das redaktionelle Inventar des fiktiven Ladens. Es enthält vorgeschlagene Entscheidungen und erwartete Beweise, nicht Ergebnisse bereits durchgeführter Tests. Das dekorative Muster ergänzt die bisherigen Hüllen.

Erfassen Sie für jede Zeile außerdem die Herkunft des Bildmaterials, den Inhaber oder Lieferanten, die Referenz des Verwendungsnachweises, die für die Kontrolle verantwortliche Person und den Rezeptstatus. Diese Informationen sollten gesammelt und nicht aus dem Dateinamen abgeleitet werden. Behalten Sie einen Eintrag pro Verwendung bei, wenn dasselbe Bild unterschiedliche Rollen erfüllt.

Ein Rezept in der richtigen Reihenfolge, mit erhaltenen Beweisen

Das folgende Verfahren ist eine vorgeschlagene Arbeitsmethode zur Verknüpfung von Entwurf, Integration und Validierung.

1. Kontext sammeln. Notieren Sie sich die URL der Seite, der Datei, den Speicherort, den Nachbartext und das Ziel des möglichen Links. Fügen Sie den Ursprung des Bildmaterials, die verfügbaren Nutzungsbedingungen und die Person hinzu, die für die Entscheidung über unklare Fälle verantwortlich ist.
2. Überprüfen Sie das Rendering HTML. Überprüfen Sie das tatsächlich von der Vorlage erzeugte Element, nicht nur das Medienbibliotheksfeld. Google findet Bilder im Attribut src Elemente <img> und indiziert keine CSS Bilder.^[42] Behalten Sie sich daher die Prüfung der Hintergründe für die entsprechenden Verwendungen vor.
3. Entscheide mit dem Baum. Klassifizieren Sie die Rolle, schreiben Sie dann die Alternative oder wählen Sie explizit das Leerzeichen aus. Vergleichen Sie jeden Namen, jede Farbe und jedes Detail mit dem Bild. Vergleichen Sie für das Diagramm alle Beschriftungen und Beziehungen mit dem zugehörigen Text.
4. Testen Sie die Verwendung. Überprüfen Sie die Tastatur auf Zugriff auf den Warenkorb-Link und hören Sie sich dann mit einem Screenreader den Namen an. Schauen Sie sich auch die Seite ohne Bilder an: Produktinformationen und Diagrammbeschreibung müssen verständlich bleiben.
5. Sprachvalidierung. Bewahren Sie einen Auszug aus dem HTML, den Testbeobachtungen, der sichtbaren Beschreibung und der Referenz des Verwendungsnachweises auf. Ordnen Sie ein Datum, eine verantwortliche Person und eine Entscheidung zu: akzeptiert, Korrektur angefordert oder Kontrolle blockiert.

Ein Tool kann ein fehlendes Attribut melden; Ihr Vergleich mit der tatsächlichen Rolle bleibt notwendig. Ein Klick allein beweist nicht, dass ein Link zugänglich ist: Behalten Sie auch die Beobachtung des Tests bei.

Gesonderte Beschreibung, Leistung, Rechte und Compliance

Die Wahl des Formats, der Abmessungen und der Beladung ist ein separates Projekt. Nutzen Sie die Anleitung Webbilder: Format, Größe und Laden zur Verwaltung von Varianten, ohne Dateioptimierung und Inhaltsbeschreibung zu verwechseln.

Überprüfen Sie hinsichtlich der Rechte die beabsichtigten Verwendungszwecke: kommerzielle Veröffentlichung, Änderung, Medien und mögliche Quellenangabe. Trennen Sie in Ihrem Kontrollblatt die angezeigte Gutschrift vom Nachweis, der den Vorgang autorisiert. Ein Attribut alt dient nicht als Nutzungsnachweis.

Dieses Rezept reicht nicht aus, um den Schluss zu ziehen, dass die Website den für sie geltenden Barrierefreiheitsverpflichtungen entspricht. Bestimmen Sie den Umfang und das Repository separat: Die Bildüberprüfung deckt nicht die gesamte Schnittstelle ab.

Schließlich garantiert eine relevante Alternative nicht die Indizierung eines Bildmaterials. Validieren Sie die Qualität der Verarbeitung, ohne sie mit dem Versprechen der Sichtbarkeit zu verwechseln.

Häufige Fragen

Sollten die Alternativen in einem mehrsprachigen Shop übersetzt werden?

Ja, schreiben Sie die Alternative in der Sprache der Seite und überprüfen Sie die in dieser Version des Katalogs verwendeten Namen. Bei einer maschinellen Übersetzung bleibt möglicherweise ein unpassender Produktname erhalten oder die visuelle Nuance geht verloren. Halten Sie die Link-Funktion lokal verständlich und steuern Sie jede Sprache nach der Integration separat, auch wenn die Bilddatei weiterhin geteilt bleibt.

Können wir die Alternativen in einem Katalog automatisieren?

Die Automatisierung kann ein Angebot auf der Grundlage zuverlässiger Daten wie dem Produktnamen und der dargestellten Ansicht erstellen. Es dürfen keine Eigenschaften hinzugefügt werden, die im Bild nicht vorhanden sind. Planen Sie eine Überprüfung atypischer Bilder, Symbole und Diagramme und dokumentieren Sie anschließend die menschliche Validierung der Vorschläge vor ihrer Anwendung im Katalog.

Was ist zu tun, wenn der Dienstanbieter den Zugriff auf Attribute blockiert?

Fragen Sie den Dienstanbieter, wo das alternative Attribut und der zugängliche Name der Links definiert sind. Geben Sie eine repräsentative Seite, eine Bestandsaufnahme und den erwarteten Wortlaut an. Wenn die Komponente keine Anpassung zulässt, dokumentieren Sie die Blockade und fordern Sie eine Änderung der Vorlage an. Betrachten Sie einen in die Medienbibliothek eingegebenen Text nicht als validiert, ohne seine Wiedergabe auf der Seite zu überprüfen.

Gehen Sie vom Entwurf zur nachvollziehbaren Validierung über

Wählen Sie nun ein Produktblatt mit einem Foto, einem illustrierten Link und einem erläuternden Bild aus. Vervollständigen Sie die Bestandsaufnahme, wenden Sie den Entscheidungsbaum an und bewahren Sie die Beweise auf, bevor Sie die Korrekturen an den Vorlagen verallgemeinern. Wenn Sie das Schreiben, die Integration und die Kontrolle koordinieren müssen, können Sie das anfordern Webdienste, SEO und digitales Marketing von 4SYSTEM um diese Arbeit an Ihre Seiten und Ihre Einschränkungen anzupassen.

Quellen

• Image SEO Best Practices | Google Search Central | Documentation | Google for Developers (abgerufen 2026-10-08)
• An alt Decision Tree | Web Accessibility Initiative (WAI) | W3C (abgerufen 2026-10-08)