Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Alternativtext zu Bildern hinzufügen

Alternativtext ist Text, der zu einem Bild gehört und in einigen Browsern anstatt des Bildes angezeigt wird. Suchmaschinen verwenden diesen Text zur Bestimmung des Inhalts einer Seite. Das Hinzufügen von Alternativtext zu Bildern ist eine hervorragende Möglichkeit, die SEO Ihrer Website zu fördern und sie barrierefreier zu gestalten. Wenn Sie einem Bild nicht manuell Alternativtext hinzufügen, dient der Dateiname des Bildes in der Regel als Alternativtext.

Alternativtext ist außerdem hilfreich für unterstützende Screenreader oder Browser, in denen Bilder deaktiviert sind. Wenn ein Browser das Bild nicht anzeigen kann, wird stattdessen der Alternativtext angezeigt. Verwende beim Hinzufügen von Alternativtext kurze, lesbare Begriffe, die das Bild beschreiben und im Zusammenhang mit dem Inhalt deiner Website stehen.

In dieser Anleitung wird erläutert, wie Sie den Bildern Ihrer Website Alternativtext hinzufügen können und welche Bilder automatisch Alternativtext enthalten.

Video ansehen

Best Practices für Alternativtext

Denke beim Verfassen von Alternativtext daran, dass du für Menschen schreibst, die unterstützende Screenreader verwenden oder Bilder in ihrem Browser deaktiviert haben. Beachte dabei Folgendes:

  • Seien Sie aussagekräftig und hilfreich. Wie würden Sie dieses Bild für jemanden beschreiben, der es nicht sehen kann?
  • Halten Sie den Text kurz, in der Regel zwölf Wörter oder weniger.
  • Optimiere deinen Text für die Suche, indem du Keywords einbindest, aber vermeide Keyword-Überfrachtung.
  • Schreiben Sie in echten Sätzen; verwenden Sie keine Bindestriche, um Wörter zu trennen.
  • Sie können Wörter wie „der/die/das“ und „ein/e“ und Begriffe wie „Foto“ oder „Bild“ weglassen. Verwenden Sie beispielsweise anstelle von ein Bild von einer grünen Vase den Namen grüne Vase.

Bild-Dateinamen

Der Name eines Bildes fungiert als Alternativtext, wenn kein anderer Alternativtext hinzugefügt wurde.

Bei den meisten Bildern kannst du den Dateinamen ändern, indem du das Bild mit dem neuen Namen erneut hochlädst. Öffne beispielsweise für Bild-Blöcke den Block-Editor, gehe zum Tab Inhalt und aktualisiere dann das Feld Dateiname im Tab Inhalt.

Tipp: Verwenden Sie ausschließlich Buchstaben, Zahlen, Unterstriche und Bindestriche in Dateinamen.

Das Dateinamenfeld im Bild-Block-Editor

Website-Logo

Der Seitentitel dient als Alternativtext für das Website-Logo.

Bild-Block

Wie Sie Alternativtext zu einem Bild-Block hinzufügen, hängt vom Layout ab.

Inline-Layout

Beschriftungen, die im Inline-Layout hinzugefügt werden, werden automatisch zum Alternativtext für das jeweilige Bild.

So fügst du Alternativtext im Inline-Layout hinzu und blendest die Beschriftung aus:

  1. Fügen Sie den Beschriftungstext hinzu.
  2. Klicke im Bild-Block-Editor auf den Tab Inhalt.
  3. Klicke auf Beschriftung und wähle Aus.
Hinweis: In Lightboxes werden Beschriftungen immer angezeigt.

Inline-Beschriftung des Bild-Block-Editors deaktiviert

Alle anderen Layouts

Bei allen anderen Layouts (Plakat, Karte, Überlappung, Collage und Stapel) werden die Beschriftungen nicht zu Alternativtext. Fügen Sie stattdessen Alternativtext in das Feld Dateiname im Tab Inhalt des Bild-Block-Editors ein.

Bilder des automatischen Layouts und der Galerie

Automatische Layouts und Galerie-Abschnitte werden nur in Version 7.1 unterstützt.

Sie können Alternativtext zu automatischen Layouts und Galerie-Abschnitten hinzufügen, aber bei allen wir eine andere Methode verwendet.

Auto-Layouts

Wenn Ihr automatisches Layout Text und Bilder enthält, können Sie den Bildern in diesem Abschnitt Alt-Text hinzufügen. Automatische Layouts, die nicht sowohl Text als auch Bilder enthalten, unterstützen keinen Alt-Text.

So fügen Sie Alt-Text zu Elementen in Auto-Layout-Abschnitten hinzu:

  1. Fahre beim Bearbeiten einer Seite mit der Maus über den Abschnitt „Automatisches Layout“ und klicke auf Inhalt bearbeiten.
  2. Klicke auf den Tab Inhalt.
  3. Klicken Sie auf das Bild, dem Sie Alt-Text hinzufügen möchten.
  4. Scrolle zu Bild-Alternativtext und gib deinen Alternativtext in das Feld ein.
  5. Klicke auf Zurück und dann auf Speichern.

Wenn das Feld Bild-Alt-Text nicht angezeigt wird, unterstützt das automatische Layout keinen Alt-Text.

Galerie-Abschnitte

Galerieabschnitte zeigen hauptsächlich Bilder. Wenn Sie den Bildern des Galerieabschnitts eine Beschreibung hinzufügen, wird diese automatisch zum Alternativtext und zur Beschriftung für das Bild.

Galerie-Block-Bilder

In Version 7.1 kannst du Galerie-Blöcke nur zu Blogeinträgen, Produktartikeln und einzelnen Veranstaltungen hinzufügen.

So fügen Sie Alternativtext zu einem Bild in einem Galerie-Block hinzu:

  1. Doppelklicken Sie auf den Galerie-Block oder klicken Sie auf Bearbeiten.
  2. Suchen Sie das zu bearbeitende Bild, fahren Sie mit der Maus darüber und klicken Sie auf  .
  3. Fügen Sie Alternativtext in das Feld Bildtitel eingeben hinzu. Wenn Sie keinen Bildtitel hinzufügen, wird Text im Feld „Beschreibung“ zum Alternativtext.
  4. Klicken Sie auf Speichern.

The image editor with title and description fields.png

Vorschaubilder für Blogeinträge und Veranstaltungen

Der Titel eines Blogeintrags oder eines Events dient als Alternativtext für das Vorschaubild des Beitrags oder Events. Für Veranstaltungsseiten ist dies bei Listen- und Kalenderlayouts gleich.

Seiten-Vorschaubild

Dateinamen dienen als Alternativtext für Seiten-Vorschaubilder. Stellen Sie sicher, dass Sie alle Vorschaubilder so benennen, wie sie erscheinen sollen, bevor Sie sie hochladen.

Vorschaubild für Video-Blöcke

Wenn du Video-Blöcke zu einer Seite mithilfe von URLs hinzufügst, generiert der Block automatisch ein Vorschaubild und wird als Overlay angezeigt. Wenn du ein benutzerdefiniertes Vorschaubild hinzufügst, wird der Dateiname in der statischen URL angezeigt, jedoch nicht als Alternativtext. Es ist nicht möglich, Alternativtext zu Vorschaubildern von Video-Blöcken hinzuzufügen.

Produkt-Bilder

Wie du Alternativtext zu einem Produktbild auf der Shop-Seite hinzufügst, hängt vom verwendeten Produkt-Editor ab:

  1. Bewege auf deiner Shop-Seite den Mauszeiger über ein Produkt und doppelklicke dann darauf.
  2. Bewege den Mauszeiger über das Produktbild, klicke auf die drei Punkte und dann auf Metadaten bearbeiten.
  3. Füge deinen Text in das Feld Alternativtext ein. Wenn du keinen Metadatentext hinzufügst, wird der Produktname zum Alternativtext.
  4. Klicken Sie auf Speichern.
    1. Bewege auf deiner Shop-Seite den Mauszeiger über ein Produkt und doppelklicke dann darauf.
    2. Bewegen Sie den Mauszeiger über das Produktbild und klicken Sie auf .
    3. Füge Alternativtext in das Feld Bildtitel eingeben ein. Wenn du keinen Bildmetadatentext hinzufügst, wird der Produktname zum Alternativtext.
    4. Klicken Sie auf Speichern.

Cover-Seiten-Bilder (Version 7.0)

So fügen Sie Alternativtext zu einem Cover-Seiten-Bild hinzu:

    1. Klicken Sie im Cover-Seiten-Menü auf das Menü Medien.
    2. Fahren Sie mit der Maus über das Bild und klicken Sie auf .
    3. Fügen Sie Alternativtext zum Feld Alternativtext eingeben … hinzu.
    4. Klicken Sie auf Speichern.

Galerie-Seiten-Bilder (Version 7.0)

So fügen Sie Alternativtext zu einem Bild auf einer Galerie-Seite hinzu:

  1. Klicken Sie im Seiten-Menü auf die Galerie-Seite.
  2. Suchen Sie das zu bearbeitende Bild, fahren Sie mit der Maus darüber und klicken Sie auf  .
  3. Füge Alternativtext im Feld Bildtitel hinzu. Wenn du keinen Bildtitel hinzufügst, wird der Text im Beschreibungsfeld zum Alternativtext.
  4. Klicken Sie auf Speichern.

Nächste Schritte

War dieser Beitrag hilfreich?
136 von 240 fanden dies hilfreich
Alternativtext zu Bildern hinzufügen