Das Alt-Attribut – für SEO und Barrierefreiheit

Author

Ines Maione

Ines Maione brings a wealth of experience from over 25 years as a Marketing Manager Communications in various industries. The best thing about the job is that it is both business management and creative. And it never gets boring, because with the rapid evolution of the media used and the development of marketing tools, you always have to stay up to date.

Das Alt-Tag, auch bekannt als Alt-Attribut oder Alt-Beschreibung, wird verwendet, um den Inhalt eines grafischen Bildes auf einer Website genauer zu beschreiben. Es besteht nur aus wenigen Textzeichen – aber seine Bedeutung wird oft unterschätzt. Der Zweck des Alt-Attributs ist nicht nur die Gewährleistung von Zugänglichkeit. Denn das Attribut ist auch ein wichtiger SEO-Faktor

Inhalt

• Was ist ein Alt-Tag?

• Die praktische Bedeutung des Alt-Tags für SEO

• Optimierung der Alt-Attribute von Bildern SEO
• Wie kann das Alt-Tag die Chancen auf eine gute Google-Platzierung verbessern?

• Wie kann das Alt-Tag zur Verbesserung der Nutzererfahrung genutzt werden?
• Bild-Alt-Attribute machen Bilder zugänglich

• Welche Tipps und Tricks gibt es für die Verwendung des Alt-Tags in der Suchmaschinenoptimierung?

• Was sind die häufigsten SEO-Fehler beim Alt-Tag?

• Zusammenfassung: Alt-Tags in SEO – klein, aber effektiv

Was ist ein Alt-Tag?

Der Quelltext einer Website besteht aus HTML (Hypertext Markup Language). Diese Auszeichnungssprache weist den Browser an, Textpassagen, Bilder, Videos und andere Elemente im Browser darzustellen. Jedes Element, auch eine Grafik, kann mit zusätzlichen Informationen versehen werden, wie im folgenden Beispiel:

<img src=“flower.jpg“ alt=“Blume im Garten“>

Anmerkung:

• Die spitzen Klammern beschreiben den Anfang und das Ende eines HTML-Elements.
• Das relevante Element ist in diesem Fall ein Bild (<img>).
• Die Datei flower.jpg ist mit dem Attribut src (für Quelle) gekennzeichnet.
• Das Attribut alt bezieht sich auf den Inhalt des Textes (Blume im Garten).

Das kurze Wort alt steht für alternativ. Das Alt-Attribut sorgt zum Beispiel dafür, dass im Falle eines Ladefehlers ein alternativer Text anstelle des fehlenden Bildes erscheint.

Aber warum werden die Bilder nicht angezeigt? Dafür gibt es verschiedene Erklärungen:

• Das Bild befindet sich nicht auf dem Server.
• Veraltete Browser können bestimmte Typen von Bildern nicht anzeigen.
• Der Benutzer hat den Browser so eingestellt, dass Bilder nicht angezeigt werden sollen.
• Eine große Bilddatei erfordert eine lange Ladezeit – deshalb entscheiden sich viele Nutzer, die Seite zu verlassen, bevor das gesamte Bild heruntergeladen wurde.

Und schließlich sind viele Menschen sehbehindert. Das Alt-Attribut ist gerade für diese Nutzergruppe sehr wichtig.

Die praktische Bedeutung des Alt-Tags für SEO

Das Alt-Attribut wird oft unterschätzt. Das gilt auch für die Bedeutung des Alt-Tags für SEO. Denn für die Suchmaschinenroboter ist der Quelltext einer Website entscheidend. Ein Alt-Attribut liefert wichtige Details über ein Bild als solches, aber auch über den Gesamtkontext einer Website.

Frühere Versionen des Internet Explorers zeigten den Inhalt des Alt-Attributs als Tooltip an – ein Effekt, der eigentlich durch das title-Attribut ausgeführt werden soll. Die Art und Weise, wie Browser mit dem Alt-Attribut von Bildern umgehen, ist heute jedoch standardisiert. Programmierer und Designer wenden daher die folgende Faustregel an:

• Das alt-Attribut beschreibt den Inhalt des Bildes.
• Das Attribut title kann verwendet werden, um zusätzliche Informationen zu liefern.

Im Zweifelsfall sollte man auf die Verwendung title bei Bildern verzichten und stattdessen eine passende Bildunterschrift wählen. Bei HTML5, der neuesten HTML-Version, ist das das <figcaption>-Tag. Der Vorteil ist, dass die Bildunterschrift immer angezeigt wird und von Screenreadern gelesen werden kann.

Tipp:

Benötigen Sie Tausende von kurzen, aussagekräftigen Alt-Tag-Texten in kürzester Zeit? – Dann informieren Sie sich über unseren SEO-Text-Service und lassen Sie die Texte effizient durch qualifizierte Clickworker erstellen.

Unique Content für SEO

Optimierung der Alt-Attribute von Bildern für SEO

Ursprünglich als technisches Hilfsmittel und für die Barrierefreiheit geschaffen, ist das Bildattribut heute auch für SEO-Experten wichtig. Suchmaschinenroboter orientieren sich am Quelltext einer Website – das gilt auch für die Bewertung einer Grafik. Deshalb spielen Alt-Attribute für SEO eine wichtige Rolle. Und das gilt nicht nur für die Bildersuche bei Google.

Bei der Optimierung der Alt-Attribute sollte man sich zunächst an der Google-Bildersuche orientieren. Eine umfassende, aber kurze und klare Beschreibung des Bildinhalts verbessert hier das Ranking. Wenn das Hauptkeyword in der URL, in der H1-Überschrift und in der Beschreibung des Bildes auftaucht, hat die Datei gute Chancen, in den Top-Ergebnissen der Google-Bildersuche aufzutauchen.

• Wichtig: Auch die Dateigröße spielt bei der Bildoptimierung eine Rolle. Große, hochauflösende Bilder sollten nach Möglichkeit vermieden werden, um die Ladezeiten der Website zu minimieren. Wenn das Bild nicht schnell genug lädt, sind die Absprungraten hoch. Die Absprungrate ist ein entscheidender Ranking-Faktor.

Das Alt-Attribut eines Bildes ist Teil einer umfassenden Suchmaschinenoptimierung, wenn das Ziel darin besteht, die Relevanz einer Website für ein bestimmtes Schlüsselwort zu erhöhen. Google bewertet Websites, die ein Thema möglichst umfassend behandeln, positiv.

Wie kann das Alt-Tag die Chancen auf eine Platzierung in Google verbessern?

Wenn Sie ein Bild zu einem Blogbeitrag oder einer Website hinzufügen, haben Sie die Möglichkeit, ein Alt-Tag einzufügen. Das Alt-Tag in der Suchmaschinenoptimierung ist ein Stück HTML-Code, mit dem Sie Informationen über das Bild angeben können.

In das Alt-Tag können Sie unter anderem ein Schlüsselwort einfügen. Indem Sie ein Keyword in Ihr Alt-Tag aufnehmen, geben Sie Google eine weitere Möglichkeit, Ihre Inhalte zu indizieren und das Ranking zu verbessern.

Neben der Verwendung von Schlüsselwörtern ist es auch wichtig, einen beschreibenden Text in Ihren Alt-Tags zu verwenden. Ziel ist es, Google genügend Informationen über das Bild zu geben, damit es verstehen kann, worum es sich handelt und wie es mit dem Rest Ihres Inhalts zusammenhängt. Versuchen Sie daher, so viele Details wie möglich in Ihre Alt-Tags aufzunehmen. Anstatt einfach nur Bild eines Hundes zu sagen, könnten Sie zum Beispiel Bild eines schwarzen Labrador Retrievers sagen.

Wie kann das Alt-Tag zur Verbesserung der Nutzererfahrung genutzt werden?

Der Alt-Tag ist ein HTML-Attribut, mit dem ein alternativer Text für ein Bild angegeben werden kann. Wenn ein Bild aus irgendeinem Grund nicht angezeigt werden kann, kann der alt-Text vom Browser oder Bildschirmleser verwendet werden, um eine Beschreibung des Bildes zu liefern.

Der Hauptzweck des Alt-Tags besteht darin, die Benutzerfreundlichkeit zu verbessern. Es ermöglicht Nutzern, die die Bilder auf einer Seite nicht sehen können, trotzdem zu verstehen, was sie darstellen. Darüber hinaus kann es Suchmaschinen helfen, Seiten genauer zu indizieren und die Zugänglichkeit einer Website zu verbessern.

Alt-Attribute machen Bilder zugänglich

Das Alt-Tag kann verwendet werden, um alternativen Text für ein Bild bereitzustellen, was die Zugänglichkeit für blinde oder sehbehinderte Nutzer verbessern kann. Alternativer Text kann auch für Benutzer nützlich sein, die ein Bildschirmlesegerät verwenden oder eine langsame Internetverbindung haben.

Alternativtexte für visuelle Inhalte wie Texte und Bilder sind für Sehbehinderte unerlässlich. Ein Screenreader erfasst den Inhalt eines Bildes nicht allein anhand der Datei. Deshalb spielen Genauigkeit, Prägnanz und die Vermeidung von Redundanzen bei der Bildbeschreibung eine entscheidende Rolle. Sehr lange Texte sind daher ebenso überflüssig wie der Hinweis, dass sich die Beschreibung auf ein Bild bezieht („Bild einer Blume“). Beim Verfassen eines Textes, der ein Bild beschreibt, ist es wichtig, dass er in den Gesamtkontext des Absatzes passt, auf den sich das Bild bezieht.

Bei reinen Funktionsgrafiken (Beispiel: ein Pfeil, der zur nächsten Seite führt) sollte sich auch der Text auf die Beschreibung der Funktion beschränken. Es ist daher ratsam, im <img>-Tag den gleichen Text wie im <title>-Attribut im <a>-Tag für das Alt-Attribut zu verwenden:

<a href=“page2.html“ title=“nächste Seite“><img src=“arrow.gif“ alt=“nächste Seite“></a>

Wenn ein Bild nur zu dekorativen Zwecken verwendet wird, sollte man trotzdem das Attribut alt setzen, allerdings mit einem leeren Inhalt:

<img src=“black.gif“ alt=““>

Dabei erkennt der Benutzer eines Bildschirmlesegeräts sofort, dass das Bild keinen kontextuellen Zweck erfüllt. Der Benutzer wird nicht durch unnötige Informationen des Screenreaders aufgehalten.

Wenn das Bild auch ein Link ist, sollte das title-Attribut nicht innerhalb von <img> platziert werden. Das Alt-Attribut ist hier ausreichend. Das title-Attribut gehört in den Anker-Tag (<a>), der für die Verlinkung zuständig ist. Diese Vorgehensweise stellt sicher, dass das Ziel des Links in den meisten Browsern als Tooltip angezeigt wird. Bei einem Bild ersetzt das title-Attribut innerhalb von >a> den Ankertext bei einem Textlink.

Welche Tipps und Tricks gibt es für die Verwendung des Alt-Tags in der Suchmaschinenoptimierung?

1. Halten Sie das Tag kurz und knapp: Weniger ist mehr. Das gilt auch für SEO und das Alt-Tag. Verwenden Sie nicht mehr als 125 Zeichen.
2. Achten Sie darauf, dass Ihr Alt-Tag-Text das Bild genau beschreibt.
3. Verwenden Sie Schlüsselwörter in Ihrem Alt-Text, damit er von Suchmaschinen gefunden werden kann.
4. Vermeiden Sie die Verwendung allgemeiner Begriffe wie Bild oder Foto in Ihrem Alt-Text.
5. Fügen Sie allen Bildern einen Alt-Text hinzu.
6. Verwenden Sie beim Schreiben Ihrer Alt-Tags keyword-starke Phrasen, die das Bild genau beschreiben, aber stopfen Sie diese nicht mit zu vielen Schlüsselwörtern voll. Denn diese Strategie kann zu einer Strafe von Google führt. Versuchen Sie, jedes Alt-Tag in SEO auf zwei oder drei relevante Schlüsselwörter oder Phrasen zu beschränken.
7. Verwenden Sie einzigartige Alt-Tags für SEO: Benutzen Sie nicht für jedes Bild auf einer Seite denselben Alt-Tag. Jeder Alt-Tag sollte einzigartig und relevant für das jeweilige Bild sein, das es beschreibt.
8. Verwenden Sie beim Schreiben von Alt-Tags Bindestriche, um die Wörter zu trennen. Das macht es sowohl für Suchmaschinen als auch für Nutzer einfacher, sie zu lesen und zu verstehen.
9. Verwenden Sie in Ihren Alt-Tags immer Kleinbuchstaben. Das ist die gängige Praxis und erleichtert sowohl den Suchmaschinen als auch den Nutzern das Lesen und Verstehen.

Alt-Tag SEO – Best Practices

• Okay: <img src=“cat.png“ alt=“cat“> – Dieser Alt-Text ist nur okay, weil er nicht sehr aussagekräftig ist. Ja, dies ist ein Bild einer Katze, aber es gibt mehr über dieses Bild zu sagen.
• Gut: <img src=“cat.png“ alt=“Kätzchen spielt mit einer Blume“> – Dieser Alt-Text ist eine bessere Alternative, weil er den Inhalt des Bildes viel besser beschreibt und gleichzeitig prägnant ist. Dies ist nicht nur eine Katze, sondern eine sehr junge Katze, die mit einer Blume spielt.

Was sind die häufigsten SEO-Fehler beim Alt-Tag?

Einige häufige Fehler, die mit dem Alt-Tag gemacht werden, sind die Verwendung für dekorative Bilder, die Verwendung für Bilder, die für den Seiteninhalt nicht relevant sind, und die Verwendung für Bilder, die nicht beschreibend genug sind.

Außerdem gibt es einige wichtige Dinge zu beachten, wenn Sie Alt-Tags für Ihre Bilder erstellen:

• Genauigkeit ist die wichtigste Eigenschaft eines Alt-Tags, denn Sie wollen, dass der Nutzer das Bild auch dann verstehen kann, wenn er es nicht sehen kann.
• Auch die Zusammenfassung ist wichtig, denn Sie möchten nicht zu viel Platz mit dem Alt-Tag beanspruchen und die Informationen, die Sie vermitteln wollen, begraben.
• Vermeiden Sie außerdem Ausdrücke wie Bild von oder Grafik von, um Ihre Alt-Tags kurz und bündig zu halten.

Versuchen Sie schließlich, nicht zu viele Wörter zu verwenden. Denn Sie möchten, dass der Benutzer die benötigten Informationen so schnell wie möglich erhält.

Zusammenfassung: Alt-Tags in SEO – klein, aber effektiv

Das Alt-Attribut ist mehr als nur ein Pflichtelement für Programmierer, die einen regelkonformen HTML-Text schreiben wollen. Der alternative Text für ein Bild hilft Menschen, die auf die Verwendung eines Bildschirmlesegeräts im Internet angewiesen sind. Aber auch für SEO-Zwecke ist das korrekte Alt-Markup einer Bilddatei wichtig. Sie ist besonders nützlich, wenn es darum geht, eine perfekt gestaltete Website zu erstellen und damit gute Positionen bei Google zu erreichen.