Bilder spielen eine Schlüsselrolle bei der Gestaltung einer attraktiven und effektiven Website. Sie machen sie optisch attraktiver, tragen dazu bei, Informationen schneller und klarer zu vermitteln und eine emotionale Verbindung zum Benutzer herzustellen. Darüber hinaus verbessern Bilder die Nutzung der Website und helfen den Besuchern, schnell zu navigieren und die benötigten Informationen zu finden. Hochwertige Produktbilder können sogar die Glaubwürdigkeit des Produkts erhöhen und die Conversions steigern.

Dennoch ist die optische Auswirkung nicht die einzige wichtige Rolle, die Bilder spielen. Sie sind ein wichtiger Bestandteil der Suchmaschinenoptimierung (SEO), da richtig optimierte Bilder mit passenden Alternativtexten Suchmaschinen dabei helfen, die Website besser zu indizieren. Dies erhöht die Sichtbarkeit in den Suchergebnissen und trägt dazu bei, mehr Benutzer anzulocken. Somit trägt die Verwendung hochwertiger Bilder auf der Website zu ihrem Erfolg und der Erreichung ihrer Ziele bei. Es lohnt sich zu verstehen, was Alternativtext ist und wie Sie ihn in Ihre Website integrieren.

Was ist Alt-Text und wozu dient er?

Alt-Text ist eine Textbeschreibung eines Bildes, die dem alt-Attribut eines HTML-img-Tags hinzugefügt wird. Seine Hauptfunktion besteht darin, Webinhalte für Benutzer mit Sehbehinderungen zugänglich zu machen, insbesondere für diejenigen, die Screenreader verwenden. Es dient auch als Ausweichlösung, wenn Bilder nicht geladen werden können, und stellt gleichzeitig Kontextinformationen bereit.

Darüber hinaus ist Alt-Text wichtig für SEO (Suchmaschinenoptimierung). Es hilft Suchmaschinen, den Inhalt von Bildern besser zu verstehen, was das Seitenranking in den Suchergebnissen verbessern und zusätzlichen Traffic anziehen kann. Durch das Hinzufügen von Schlüsselwörtern zum Alternativtext werden Bilder besser indiziert und erscheinen mit größerer Wahrscheinlichkeit in den Bildernsuchergebnissen.

Hier ist beispielsweise ein vollständig geladenes Foto im Vergleich zum Alternativtext, der aufgrund von Systemausfällen generiert wurde.

Codetyp für Alternativtext.

<img src=“image-file-example.jpg” alt=“Figma prototype development for an iphone”>

Vorteile der Verwendung von Alt-Text

Zugänglichkeit

Laut Untersuchungen haben etwa 200 Millionen Internetnutzer eine Sehbehinderung oder Sehschwäche. Alt-Text macht Webinhalte für Menschen mit Behinderungen zugänglich, insbesondere für diejenigen, die Screenreader verwenden. Wenn der Screenreader auf ein Bild trifft, spricht er Alternativtext, sodass Menschen mit Sehbehinderungen sich ein Bild vom Bildinhalt machen können. Dadurch wird die Website umfassender und für ein breiteres Publikum zugänglich.

Darstellung bei Fehlern

Alt-Text wird als „Fallback-Option“ verwendet, wenn das Bild aufgrund technischer Probleme oder Fehler im Code nicht geladen werden kann. In solchen Situationen zeigt der Browser Alternativtext anstelle eines Bildes an und liefert den Benutzern kontextbezogene Informationen darüber, was hätte angezeigt werden sollen. Dies beugt Frustrationen der Benutzer vor und versorgt sie mit den Informationen, die sie benötigen.

SEO (Suchmaschinenoptimierung)

Alt-Text spielt eine wichtige Rolle bei SEO. Suchmaschinen wie Google verwenden Alternativtext, um den Inhalt von Bildern auf Ihrer Website zu verstehen. Dies hilft ihnen, das Bild bei der Suche richtig zu indizieren und einzuordnen. Das Hinzufügen von Schlüsselwörtern zu Alt-Text trägt dazu bei, die Sichtbarkeit von Seiten in Suchergebnissen zu verbessern und zusätzlichen Traffic anzuziehen. Alternativtext liefert Suchmaschinen auch Kontextinformationen zum Inhalt einer Seite, was deren Gesamtranking verbessern kann.

Verbesserung der Benutzererfahrung

Alternativtext sorgt nicht nur für Barrierefreiheit und verbessert SEO, sondern fördert auch ein besseres Benutzererlebnis. Es hilft allen Benutzern, auch solchen mit langsamen Internetverbindungen oder Browsern, die keine Bilder unterstützen, eine Vorstellung davon zu bekommen, was auf der Seite steht. Dies sorgt für eine vollständigere und informativere Wahrnehmung des Inhalts.

So werden Alt-Tags in die Website integriert

Integration über Code:

Die Integration von Alternativtext für Websites ist recht einfach, erfordert jedoch mehrere Schritte. Dabei müssen für den weiteren Erfolg viele Nuancen berücksichtigt werden. Zunächst muss eine detaillierte Analyse der Bilder auf der Website durchgeführt werden. Es ist wichtig zu verstehen, dass Alternativtext nur für Bilder verwendet werden sollte, die Informationen vermitteln. Für Bilder, die zu visuellen Zwecken verwendet werden und keinen informativen Charakter haben, ist eine Verwendung nicht erforderlich.

Der nächste Schritt besteht darin, einen wirkungsvollen Text zu verfassen. Beim Schreiben müssen Sie die folgenden Details berücksichtigen:

  • Die Beschreibung des Bildes muss präzise und prägnant sein. 
  • Die Verwendung von Wörtern wie „Bild, Foto“ sollte vermieden werden.
  • Beschreiben Sie konkret, was Sie auf dem Bild sehen, ohne unnötige Details.
  • Es wird empfohlen, nicht mehr als 125 Zeichen zu verwenden.
  • Verwenden Sie Schlüsselwörter für Fotos. Dazu können Sie das kostenlose Google Keywords Planner-System verwenden.

Schauen wir uns ein paar Beispiele für guten Alt-Text an.

Okay alt text: <img src=”bird.png” alt=”Woman at work“>

Better alt text: <img src=”bird.png” alt=”Woman working on a computer“>

Best alt text: <img src=”bird.png” alt=”A woman working on a computer in an office.”>

Okay alt text: <img src=”bird.png” alt=”Portrait drawing.“>

Better alt text: <img src=”bird.png” alt=”Portrait drawing of a woman“>

Best alt text: <img src=”bird.png” alt=”An artist making a portrait of a woman.”>

Der nächste Schritt besteht darin, dem HTML-Code Alternativtext hinzuzufügen. Dazu müssen wir das alt-Attribut im img-Tag verwenden.

Nach der Aktualisierung des Codes wird empfohlen, ihn zur weiteren Überprüfung noch einmal durchzugehen. Dies ist notwendig, um sicherzustellen, dass jedes Bild einen Alt-Code enthält.

Integration mittels CMS-System:

Wenn Sie ein Content-Management-System (CMS) wie WordPress, Drupal oder Joomla verwenden, kann das Hinzufügen von Alternativtext noch einfacher sein. Viele CMS verfügen über integrierte Tools zum Hinzufügen von Alternativtext während des Ladens von Bildern.

Beispiele für  WordPress:

  1. Melden Sie sich im Admin-Bereich an.
  2. Unter „Medien“ wählen Sie „Neu hinzufügen“.
  3. Laden Sie ein Bild hoch.
  4. Fügen Sie Alternativtext zum Feld „Alt-Text“ in der Medienbibliothek hinzu.

Schlussfolgerung

Alt-Text ist ein wichtiges Element der Webzugänglichkeit und der Suchmaschinenoptimierung. Das Hinzufügen des richtigen Alt-Textes zu Bildern verbessert die Benutzerfreundlichkeit, macht Ihre Website zugänglich und hilft Suchmaschinen, Ihre Seiten besser zu indizieren. Außerdem wird dadurch die Sichtbarkeit Ihrer Inhalte in der Bildersuche erhöht, was zu mehr Besucherzahlen führt. Wenn Sie unsere Empfehlungen für das Verfassen effektiver Alt-Texte befolgen und diese regelmäßig aktualisieren, bleibt Ihre Website zugänglich und optimiert.