Alternativer Text (Alt-Text) ist auf einer Webseite für Leserinnen und Leser nicht sichtbar. Er dient als Bildbeschreibung auf einer Webseite – und ist wichtiger, als viele Marketingverantwortliche glauben. Erfahren Sie in diesem Beitrag, warum Alt-Text wichtig ist und welche Rolle dieser für die Suchmaschinenoptimierung (SEO) und die Benutzererfahrung spielt.
Was ist ein Alt-Text?
Ein Alternativtext, auch als Alt-Text, Alt-Tag, Alt-Beschreibung oder Alt-Attribut bekannt, ist ein HTML-Attribut. Alt-Texte sollten jedes Bildelement auf einer Website ergänzen, da sie die bildliche Alternative zu visuellen Inhalten darstellen. Besonders für Screenreader und Suchmaschinen sind Alt-Texte zentral.
Warum ist alternativer Text so wichtig?
Wir können Ihnen vier gute Gründe dafür nennen, warum Sie sich mit der Alt-Beschreibung Ihrer Bildformate näher befassen sollten:
1. Die Barrierefreiheit von Bildern wird mit Alt-Text verbessert
Sehbehinderte Menschen greifen auf besondere Software zurück, um Fotos und Grafiken erkennen zu können. Ein Screenreader scannt eine Webseite nach Bildern. Ist eine Alt-Beschreibung hinterlegt, kann das Programm diesen Text vorlesen.
Wenn der Alt-Tag fehlt, hat das Programm ein Problem. In den meisten Fällen wird für die Person das Bild übersprungen. Schlimmer ist es für die Nutzerinnen und Nutzer, wenn die Software den langen und oft nutzlosen Dateinamen des Bildes vorliest.
2. Bilder-Links erhalten mit dem Alt-Tag einen Anchor-Text
Wörter, mit denen Besucher und Besucherinnen auf Ihrer Website interagieren können, verlinken häufig auf eine weitere Seite. Deshalb werden solche Begriffe auch als Anchor-Text bezeichnet. Diese Texte bieten nicht nur einen Mehrwert für Ihre Leserschaft, sondern auch für Suchmaschinenalgorithmen. Damit versuchen Suchmaschinen, mehr zu Ihrer Webseite und den dort vorhandenen Inhalten zu erfahren.
Manche Links sind mit Textbausteinen und andere mit Bildern verlinkt. Wenn Sie Ihr Bildmaterial häufiger für die Verlinkung auf andere Seiten nutzen, ist es wichtig, dass ein Alt-Text vorhanden ist. Denn nur so erfährt eine Suchmaschine wie Google mehr über Ihre Inhalte. Bei der Texterstellung gehen Sie genauso vor wie beim Erstellen eines Anchor-Textes für einen Text-Link.
3. Die thematische Relevanz wird durch eine Alt-Beschreibung erhöht
Wie zuvor erwähnt, untersuchen Suchmaschinen für ein besseres Verständnis Ihrer Inhalte die Wörter auf Ihrer Seite. Wenn ein Blogger oder eine Bloggerin beispielsweise über europäische Kurzhaarkatzen, norwegische Waldkatzen oder Perserkatzen schreibt, weiß die Suchmaschine, dass sich der Inhalt rund um Katzenrassen dreht.
Oft ergibt sich solch ein Kontext auch durch das Bildmaterial, das sich auf einer Webseite befindet. Diese Inhalte kann der Algorithmus nicht analysieren – für diese Analyse wird der Alt-Tag benötigt. Dank der Nutzung alternativer Texte kann die Suchmaschine Ihre Bilder und damit auch Ihre Inhalte besser verstehen.
4. Bilder mit Alt-Tag ranken besser in der Google Bildersuche
Allein die Bildersuche von Google zählt zu den größten Suchmaschinen weltweit. Dieses Potenzial sollten Sie unbedingt nutzen. Sie müssen nur daran denken, Ihre Bilder mit einem aussagekräftigen und sinnvollen Alt-Text zu versehen.
Alt-Text für Bilder: So fügen Sie alternativen Text einer Grafik hinzu
Eine Alt-Beschreibung einzufügen ist ganz leicht. Dafür müssen Sie den Bild-Tag (<img>-Tag) im HTML-Code Ihrer Seite um ein Alt-Tag erweitern.
Ein Bild mit Alt-Text sieht in HTML geschrieben dann so aus:
<img scr=”EKH.png” alt=”Sitzende Europäische Kurzhaar-Katze”>
Natürlich gibt es noch einfachere Wege, um eine Grafik mit einer Alt-Beschreibung zu versehen. Content-Management-Systeme bieten Ihnen bereits beim Hochladen eines Bildes an, den Alt-Text in einem dafür vorgesehenen Feld zu ergänzen.
Das kostenfreie CMS von HubSpot macht es Ihnen besonders leicht: In HubSpot wählen Sie die gewünschte Grafik aus und klicken dann auf das Bleistiftsymbol. Im Feld „ALT-Text” ergänzen Sie die Beschreibung des Bildes für die Suchmaschinen.
Wie schreibe ich einen Alt-Text?
Fassen Sie sich kurz und beschreiben Sie das, was Sie auf dem Bild sehen. Achten Sie auf korrekte Zeichensetzung, verzichten Sie auf Anführungszeichen und greifen Sie Textbausteine, die Bestandteil des Bildes sind, im Alt-Text wieder auf. Nutzen Sie nicht die Bildunterschrift als Alt-Tag!
Wie lang sollte ein Alt-Text sein?
Wenn man sich an die Hinweise des W3C orientiert, sollte der Alt-Tag möglichst kurz gehalten werden. Für sehbehinderte Menschen sind Zeilen, die länger als 80 Zeichen lang sind, ein Problem. Längere Alt-Beschreibungen können von Screenreadern nicht mehr richtig gelesen werden. Versuchen Sie den Alt-Text so kurz wie möglich, aber so lang wie nötig zu gestalten.
Alt-Text Beispiele: So sehen gute und schlechte Alt-Tags aus
Was macht gute Alt-Attribute aus? Mit den folgenden Alt-Text-Beispielen zeigen wir Ihnen, worin sich gute und schlechte Alternativtexte unterscheiden:
1. Alt-Tag-Beispiel: Laptop
Der schlechte Tag lautet: “Laptop Sofa”
HTML-Code: <img scr="Laptop.png" alt="Laptop Sofa">
Der gute Alt-Tag lautet: “Laptop mit Statistik-Übersicht auf grauem Sofa”
HTML-Code: <img scr="Laptop.png" alt="Laptop mit Statistik-Übersicht auf grauem Sofa">
Quelle: Unsplash von Lukas Blazek
2. Alt-Tag-Beispiel: Cappuccino
Der schlechte Tag lautet: “Kaffee”
HTML-Code: <img scr="Cappuccino.png" alt="Kaffee">
Der gute Alt-Tag lautet: “Tasse Cappuccino auf Holztisch bei Sonnenschein”
HTML-Code: <img scr="Cappuccino.png" alt="Tasse Cappuccino auf Holztisch bei Sonnenschein">
Quelle: Unsplash von Niklas Ohlrogge
3. Alt-Tag-Beispiel: Katze
Der schlechte Tag lautet: “Katze in Sonne”
HTML-Code: <img scr="Katze.png" alt="Katze in Sonne">
Der gute Alt-Tag lautet: “Liegende Katze mit grauem Fell nimmt Sonnenbad”
HTML-Code: <img scr="Katze.png" alt="Liegende Katze mit grauem Fell nimmt Sonnenbad">
Quelle: Unsplash von Matheus Queiroz
Fazit: Unterschätzen Sie nicht die Bedeutung von Alt-Texten
Die Alt-Beschreibung spielt eine entscheidende Rolle in der Suchmaschinenoptimierung. Auch für die Barrierefreiheit ist der Alt-Tag wichtig: Dank der Beschreibungen können auch Menschen mit einer Sehbehinderung Ihren Beitrag und alle dort vorkommenden Bilder verstehen und konsumieren.
Seien Sie sich ebenfalls bewusst, dass das Alt-Tag nur ein Bestandteil von Bilder-SEO ist. Darum sind Aspekte wie das Optimieren von Dateigrößen und Dateinamen sowie die Nutzung responsiver Bilder, die sich dem Gerät des Benutzers und der Benutzerin anpasst, nicht außer Acht zu lassen. Mit den passenden Alt-Tags werden Sie in den Top-Suchmaschinen gefunden – schenken Sie ihnen deshalb besondere Aufmerksamkeit.
Titelbild: Morsa Images / iStock / Getty Images Plus
