Schreibe klare, kurze Bildbeschreibungen, um deine SEO zu verbessern und deine Inhalte zugänglicher zu machen.

Alternativtext ist ein Text, den du zu Bildern hinzufügst, um sie für Besucher besser zugänglich zu machen. Zudem verwenden Suchmaschinen Alternativtext, um den Inhalt des Bildes zu identifizieren. Somit ist dies auch eine großartige Möglichkeit, die SEO für deine Website zu fördern. An manchen Orten dient der Dateiname deines Bildes als Alternativtext, wenn du keinen Alternativtext manuell hinzufügst. Für Bild-Blöcke und Auto-Layouts musst du den Alternativtext manuell hinzufügen. 

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 möglicherweise stattdessen der Alternativtext angezeigt. Alternativtext muss nicht als Klartext auf der Seite sichtbar sein, damit ein Screenreader ihn lesen kann. Verwende beim Hinzufügen von Alternativtext kurze, lesbare Begriffe, die das Bild beschreiben. Befolge unsere Tipps, um deine Bilder barrierefrei zu gestalten.

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 Dateiname eines Bildes fungiert als Alternativtext, wenn kein anderer Alternativtext hinzugefügt wurde, außer für Bild-Blöcke und Auto-Layouts. Wenn du Dateinamen für deine Bilder erstellst, empfehlen wir dir, unseren Best Practices für Alternativtexte zu folgen.

Um den Dateinamen zu ändern, aktualisiere ihn in der Inhaltsbibliothek.

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

Website-Logo

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

Bild-Blöcke

Du kannst Alternativtext mit bis zu 250 Zeichen zu jedem Bild-Block-Layout hinzufügen. Wenn du keinen Alternativtext zu Bild-Blöcken hinzufügst, wird das Bild vor Hilfstechnologien wie Screenreadern verborgen. Wie du Alternativtext zu einem Bild-Block hinzufügst, hängt davon ab, welche Version von Squarespace deine Website nutzt.

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 das Feld für den Alternativtext des Bildes auf der Registerkarte Elemente nicht angezeigt wird, aktiviere die Option Bild anzeigen. So fügst du Alternativtext zu Bildern 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 du keinen Alternativtext zu Auto-Layouts hinzufügst, wird kein Alternativtext angezeigt.

Galerie-Abschnitte

Galerieabschnitte zeigen hauptsächlich Bilder. Wenn du eine Beschreibung zu den Bildern im Galerie-Abschnitt hinzufügst, wird diese automatisch zu Alternativtext und zur Bildunterschrift 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.

Ausgewählte Bilder von Blogeinträgen und Events

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

Ausgewählte Bilder der Seite

Dateinamen dienen als Alternativtext für ausgewählte Bilder von Seiten. Stelle vor dem Hochladen sicher, dass du alle ausgewählten Bilder so benennst, wie sie angezeigt werden sollen.

Vorschaubild für Video-Blöcke

Wenn du über eine URL Video-Blöcke zu einer Seite 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

Du kannst Alternativtext mit bis zu 200 Zeichen zu jedem Produktbild hinzufügen. Wenn du keinen Alternativtext hinzufügst, wird der Produktname zum Alternativtext. So fügst du Alternativtext hinzu:

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 zum Feld Alternativtext hinzu.
4. Klicke auf Anwenden.

Cover-Seiten-Bilder (Version 7.0)

So fügst du 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.

Bild-, Blog- und Produkt-Abschnitte in E-Mail-Kampagnen

In Squarespace E-Mail-Kampagnen kannst du Alternativtext zu Bildern, Blogeinträgen und Produkten hinzufügen, die du zu deiner Kampagne hinzufügst:

1. Klicke in deinem Kampagnen-Entwurf auf einen Bild-, Blog- oder Produkt-Abschnitt.
2. Klicke im rechten Menü auf das Bild, den Blogeintrag oder das Produkt, für das du Alternativtext hinzufügen möchtest.
3. Füge Alternativtext unter Bild-Alternativtext hinzu. Der Alternativtext wird automatisch gespeichert.

Wenn du keinen Alternativtext zu diesen Abschnitten hinzufügst, wird kein Alternativtext angezeigt. Es ist nicht möglich, Alternativtext zu Bildern oder Logos im Kampagnen-Header hinzuzufügen.

Abschnittshintergrundbilder

Es ist nicht möglich, Alternativtext zu Hintergrundbildern hinzuzufügen. Rein dekorative Bilder, wie abstrakte Hintergrundbilder oder Grafiken, die Inhalte trennen, erfordern keine Beschreibungen. Weitere Informationen findest du in den Richtlinien zur Barrierefreiheit von Webinhalten.

Wenn du weiterhin Alternativtext zu einem Hintergrundbild hinzufügen möchtest, besteht die Möglichkeit, einen Bild-Block als Abschnittshintergrund zu verwenden, den Block zu füllen und Alternativtext hinzuzufügen.

Du kannst möglicherweise auch Alternativtext zu einem Hintergrundbild hinzufügen, indem du benutzerdefinierten Code hinzufügst. Weitere Informationen hierzu findest du in diesem Beitrag im Squarespace Forum. Bitte beachte, dass benutzerdefinierte Code-Modifikationen nicht von unserem Support abgedeckt werden. Das bedeutet, dass wir dir nicht bei der Einrichtung oder Fehlerbehebung codebasierter Lösungen helfen können.

Nächste Schritte

• Weitere Tipps zu SEO findest du unter Wie optimiere ich meine Website für Suchmaschinen?
• Um zu erfahren, wie du deine Website zugänglicher machen kannst, besuche Deine Squarespace-Website barrierefrei machen.

Tipp: Stelle sicher, dass deine Bildgrößen, Dateinamen und Alternativtexte für Suchmaschinen und Besucher optimiert sind, indem du die TinyIMG-Erweiterung verbindest. Mit TinyIMG kannst du zudem die SEO prüfen und Probleme in Bezug auf deine Bilder-SEO identifizieren. Wir arbeiten zwar mit Drittanbieter-Services zusammen, um sicherzustellen, dass Squarespace Extensions ordnungsgemäß funktionieren, jedoch fallen Erweiterungen nicht in den Zuständigkeitsbereich unseres Supports. Wir können dir beim Verbinden oder Trennen deiner Erweiterungen behilflich sein. Bei allen anderen Fragen wende dich bitte direkt an den Anbieter der Erweiterung.