Was ist das Alt-Attribut und der Alt-Text?
Das Alt-Attribut, allgemein als Alt-Text bekannt, ist ein Bestandteil des HTML-Codes, der die Beschreibung eines Bildes enthält. Es wird meist in Kombination mit dem HTML-Element verwendet. Seine Hauptfunktion ist es, den Inhalt eines Bildes zu beschreiben, wenn das Bild selbst aus verschiedenen Gründen nicht angezeigt werden kann.
Die Bedeutung des Alt-Attributs und des Alt-Texts in Bilder SEO kann nicht genug betont werden. Google kann Text viel einfacher verstehen als Bilder, daher kann der Alt-Text helfen, den Inhalt eines Bildes zu erklären und seine Relevanz für den Suchalgorithmus von Google zu verdeutlichen. Dies macht den Alt-Text zu einem unverzichtbaren Instrument der Suchmaschinenoptimierung (SEO).
Ursprung und Bedeutung des Begriffs "Alt-Attribut" und "Alt-Text"
Alt steht für “Alternativ”. In diesem Kontext bietet der Alt-Text eine Textalternative für ein Bild, wenn dieses aus irgendeinem Grund nicht geladen werden kann. Der Alt-Text ist somit eine kritische Komponente für die Zugänglichkeit und Barrierefreiheit von Websites. Er hilft Bildschirmleseprogramme bei der Interpretation von Bildern für Sehbehinderte oder Menschen mit eingeschränktem Sehvermögen.
Im Vergleich zu anderen Tags wie H-Tags und Title-Tags spielt der Alt-Text eine etwas andere Rolle. Während H-Tags (Überschriftentags) und Title-Tags dazu dienen, den Inhalt und Zweck einer Seite zu erklären, dient der Alt-Text dazu, den Inhalt und Zweck eines bestimmten Bildes zu erklären.
Funktionen des Alt-Attributs und Alt-Texts
Beschreibung von Bildgrafiken
Der Alt-Text dient dazu, den Inhalt und den Zweck einer Grafik zu beschreiben, insbesondere für Nutzer, die das Bild aus verschiedenen Gründen nicht sehen können. Dies kann beispielsweise aufgrund einer langsamen Internetverbindung, einem Fehler beim Laden des Bildes oder für Sehbehinderte, die Screenreader verwenden, der Fall sein.
Nutzen in verschiedenen Kontexten
Der Alt-Text hat eine Reihe von Anwendungen in verschiedenen Kontexten. Er ist nützlich für Browser ohne Bildunterstützung, bei Serverproblemen, die das Laden von Bildern verhindern, und zur Verbesserung der Barrierefreiheit von Websites. Er spielt auch eine wichtige Rolle in der Google-Bildsuche und kann dazu beitragen, die Sichtbarkeit von Bildern und somit das Ranking einer Website zu verbessern.
Rolle des Alt-Texts in der Google-Bildsuche
Eine richtig formulierte Alt-Beschreibung kann die Sichtbarkeit Ihrer Bilder in der Google-Bildsuche erheblich verbessern. Da Google-Bots den Inhalt von Bildern nicht “sehen” können, verwenden sie den Alt-Text, um den Inhalt und Kontext des Bildes zu verstehen. Durch das Hinzufügen von Alt-Texten können Ihre Bilder in relevanten Suchanfragen erscheinen und so mehr Verkehr auf Ihre Website lenken.
Beispiel für Alt-Attribute und Alt-Texte
Eine Website mit Bildern bietet eine visuell ansprechende Benutzererfahrung, die Informationen und Emotionen schnell vermitteln kann. Nehmen wir zum Beispiel eine Website für ein Restaurant. Mit Bildern können Besucher die Atmosphäre des Restaurants und die Art der angebotenen Speisen sehen. Wenn jedoch jemand die Website mit deaktivierten Bildern oder einem Screenreader besucht, sind diese Informationen ohne Alt-Texte nicht zugänglich.
Eine Website ohne Bilder wäre rein textbasiert. Obwohl sie für alle Benutzer zugänglich ist, kann sie weniger ansprechend und informativ sein.
<img decoding="async" src="alt-text-beispiel.jpg" alt="Zwei orange Katzen entspannen sich gemütlich auf einem Sofa">
Weitere Beispiele:
- Ein Bild von einem Hund, der einen Ball fängt. Alt-Text könnte sein: “Hund springt hoch, um einen gelben Ball zu fangen.”
- Ein Produktbild eines Laptops. Der Alt-Text könnte sein: “Dell XPS 15 Laptop mit beleuchteter Tastatur und hochauflösendem Bildschirm.”
- Ein Diagramm, das den Wasserkreislauf zeigt. Der Alt-Text könnte sein: “Diagramm des Wasserkreislaufs mit Beschriftungen für Verdunstung, Kondensation, Niederschlag und Sammlung.”
- Ein Logo der Firma “Google”. Der Alt-Text könnte sein: “Logo von Google.””
- Ein Bild von einem mit Bäumen gesäumten Pfad. Der Alt-Text könnte sein: “Ein gepflasterter Weg, der von grünen Bäumen gesäumt ist, führt in die Ferne.”
Best Practices für Alt-Texte
Die Erstellung von Alt-Texten ist eine Kunst für sich. Hier sind einige bewährte Methoden für Alt-Texte, die Sie befolgen sollten:
Länge der Alt-Texte: Es gibt keine festgelegte Länge für Alt-Texte, aber es wird empfohlen, sie auf etwa 125 Zeichen zu beschränken. Dies liegt daran, dass Screenreader, die von Sehbehinderten verwendet werden, nach etwa 125 Zeichen abbrechen.
Einbeziehung des Ziel-Keywords: Alt-Texte sind ein großartiger Ort, um Ihre Ziel-Keywords einzufügen. Stellen Sie jedoch sicher, dass die Einbeziehung natürlich ist und zur Beschreibung des Bildes passt. Ein übermäßiger Gebrauch von Keywords oder das Einbringen von Keywords, die nichts mit dem Bild zu tun haben, kann als Spam angesehen werden.
Umgang mit dekorativen Bildern und redundanter Information: Wenn Bilder nur zur Dekoration dienen und keinen informativen Wert haben, können sie mit einem leeren Alt-Attribut (
alt="") versehen werden. Gleiches gilt für Informationen, die bereits im Text der Seite enthalten sind. Doppelte Informationen können für Screenreader-Benutzer störend sein.Vermeidung von Phrasen wie “Bild von” in Alt-Texten: Es ist nicht notwendig, Phrasen wie “Bild von” oder “Grafik von” in Alt-Texten zu verwenden. Screenreader fügen diese Informationen automatisch hinzu.
Wie man Alt-Tags zu Bildern hinzufügt:
Die Anwendung von Alt-Texten auf Ihrer Website ist ein einfacher, aber wesentlicher Schritt in der Onpage-Optimierung. Die Integration von Alt-Texten in Bilder ist ein zweigeteilter Prozess: Man benötigt sowohl den HTML-Code als auch ein Verständnis dafür, was in den Alt-Text einfließen sollte.
In HTML-Code einfügen:
<img decoding="async" src="pflege-von-alt-tags-in-html.jpg" alt="Computerbildschirm zeigt HTML-Code zur Pflege von Alt-Tags">
Der Alt-Text wird innerhalb des Alt-Attributs im img-Tag platziert. “pflege-von-alt-tags-in-html.jpg” ist die URL der Grafik und “Computerbildschirm zeigt HTML-Code zur Pflege von Alt-Tags” ist der Alt-Text, der den Inhalt des Bildes beschreibt.
Im Content-Management-System pflegen:
Wenn Sie ein Content-Management-System wie WordPress verwenden, wird der Prozess noch einfacher. Beim Hochladen eines Bildes gibt es normalerweise ein Feld, in das Sie den Alt-Text eingeben können. Dieser wird dann automatisch in den HTML-Quelltext der Seite integriert.
Sollten für alle Bilder Alt-Tags gepflegt werden?
Nicht alle Bilder auf einer Webseite benötigen Alt-Texte. Dekorative Bilder, die keinen informativen Wert haben, oder redundante Informationen, die bereits im Text der Seite enthalten sind, benötigen möglicherweise keinen Alt-Text.
Für solche Bilder können leere Alt-Attribute verwendet werden, um den Screenreadern zu signalisieren, dass sie diese Bilder überspringen können. Hier ist ein Beispiel:
<img decoding="async" src="dekorativesBild.jpg" alt="">
Ebenso können Bilder, die nur eine Textduplizierung darstellen, ohne Alt-Text auskommen. Allerdings sollten Bilder, die wichtige Informationen liefern oder als Links fungieren, immer mit einem aussagekräftigen Alt-Text versehen werden.
Unterschiede zwischen Alt-Tag und Title-Tag
Der Alt-Text (oder Alt-Tag) und der Title-Tag sind zwei verschiedene HTML-Elemente, die unterschiedliche Funktionen haben. Während der Alt-Text dazu dient, den Inhalt des Bildes zu beschreiben, bietet der Title-Tag zusätzliche Informationen und wird normalerweise angezeigt, wenn der Nutzer mit der Maus über das Bild fährt (ein sogenanntes Mouseover).
<img decoding="async" src="beispiel.jpg" alt="Beschreibung des Bildinhalts" title="Zusätzliche Informationen">
Weitere Informationen: longdesc
Das Longdesc-Attribut ist ein weiteres HTML-Attribut, das für Bilder verwendet werden kann. Es bietet die Möglichkeit, eine ausführlichere Beschreibung des Bildes bereitzustellen, die über das hinausgeht, was im Alt-Text angeboten werden kann.
<img decoding="async" src="beispiel.jpg" alt="Kurze Beschreibung" longdesc="url_zur_ausführlichen_Beschreibung.html">
Das Alt-Attribut, Alt-Text und SEO
Alt-Texte sind ein wichtiger Bestandteil jeder ganzheitlichen SEO-Strategie. Sie tragen dazu bei, die Sichtbarkeit Ihrer Website in der Google-Bildersuche zu verbessern und können helfen, Ihr Ranking in den regulären Suchergebnissen zu verbessern.
Indem Sie relevante Keywords in Ihren Alt-Texten verwenden, erhöhen Sie die thematische Relevanz Ihres Inhalts und signalisieren den Suchmaschinen, was auf dem Bild und auf Ihrer Seite zu finden ist.
Es ist jedoch wichtig, dabei natürlich und beschreibend zu bleiben. Keyword-Stuffing oder das Hinzufügen von Keywords, die nicht relevant für das Bild oder die Seite sind, kann sich negativ auf Ihre SEO auswirken.
Zusammenfassung & Abschließende Gedanken
Die Relevanz von Alt-Texten ist nicht zu unterschätzen – sie sind eine tragende Säule der Web-Zugänglichkeit und ein unschätzbarer Assistent für Menschen mit Sehbehinderungen, die auf Screenreader angewiesen sind. Aber auch im Bereich der Suchmaschinenoptimierung nehmen sie eine zentrale Rolle ein, indem sie den Suchmaschinen eine Brücke bieten, den Inhalt von Bildern zu entschlüsseln.
Lassen wir uns noch einmal die Hauptaspekte ins Gedächtnis rufen:
- Alt-Texte sollten das Bild präzise beschreiben, das Ziel-Keyword auf natürliche Weise einbeziehen und dabei nicht unnötig ausschweifend sein.
- Bei verlinkten Bildern sollte der Alt-Text auch das Ziel des Links umschreiben.
- Es gilt zu bedenken, dass nicht jedes Bild einen Alt-Text benötigt – rein dekorative Bilder oder solche, die lediglich Text duplizieren, können darauf verzichten.
- Bei allen anderen Bildern jedoch, ist der Alt-Text unverzichtbar.
Jetzt, da Sie mit dem Zauberstab des Wissens ausgerüstet sind, lassen Sie uns gemeinsam die Kunst der Alt-Texte meistern – und verwandeln Sie Ihre Website in einen barrierefreien und SEO-freundlichen Ort, der von allen entdeckt und geschätzt werden kann.
