.png){kind=small}
.png){kind=small}
Was ist ein Alt-Text?
Alt-Text (alternativer Text) beschreibt das Aussehen oder die Funktion eines Bildes auf einer Seite. Alt-Text wird von Bildschirmlesegeräten vorgelesen, die von sehbehinderten Nutzern verwendet werden, wird anstelle eines Bildes angezeigt, wenn es nicht geladen werden kann, und wird von Suchmaschinen-Bots indiziert, um den Inhalt Ihrer Seite besser zu verstehen.
Der Alt-Text, der auch als "Alt-Attribute", "Alt-Beschreibungen" oder technisch gesehen als "Alt-Tags" bezeichnet wird, wird innerhalb eines HTML-Codes oder in dem entsprechenden Feld in Ihrem CMS (Content Management System) verwendet.
Verwendung von Alt-Text
Das Hinzufügen von Alternativtext zu Bildern auf Ihrer Website ist ein Grundsatz der Barrierefreiheit im Internet.
Alt-Attribute ermöglichen es Bildschirmlesegeräten, die Informationen zu den Bildern auf der Seite zu lesen, damit Personen, die nicht sehen können, sehbehindert sind oder aus anderen Gründen nicht in der Lage sind, die Bilder auf der Seite zu betrachten, davon profitieren können.
Alt-Text wird anstelle eines Bildes angezeigt, wenn eine Bilddatei nicht geladen werden kann.
Alt-Text bietet Suchmaschinen-Crawlern einen besseren Bildkontext bzw. eine bessere Bildbeschreibung und hilft ihnen, ein Bild in der Bildersuche richtig zu indizieren und einzustufen. Außerdem liefert er den Suchmaschinen kontextbezogene Informationen über den Inhalt der Seite.
Beispiel für Alt-Text
<img src="welpentanzparty.gif" alt="Welpen tanzen>
Optimales Format für den Alt-Text
Das beste Format für den Alt-Text ist hinreichend beschreibend, enthält aber keine spammigen Versuche, Keywords zu platzieren. Wenn Sie die Augen schließen, sich den Alt-Text vorlesen lassen und sich eine einigermaßen genaue Version des Bildes vorstellen können, sind Sie auf dem richtigen Weg.
Sehen wir uns ein paar Beispiele für den Alt-Text für dieses Bild eines köstlich aussehenden Stapels von Himbeer-Pancakes an:
<img src="pancakes"> Okay: <img src="pancakes.png" alt="pancakes">
Dieser Alt-Text ist nur "okay", weil er nicht sehr aussagekräftig ist. Ja, das ist ein Bild von einem Stapel Pfannkuchen. Aber es gibt mehr über dieses Bild zu sagen.
Gut:
<img src="pancakes.png" alt="Stapel von Himbeer-Pancakes mit Staubzucker">
Dieser Alt-Text ist eine bessere Alternative, weil er den Inhalt des Bildes viel besser beschreibt und gleichzeitig prägnant bleibt. Es handelt sich nicht nur um einen Stapel "Pancakes" (wie das erste Alt-Text-Beispiel zeigte), sondern um einen Stapel Himbeer-Pancakes mit Staubzucker!
Nicht empfohlen:
<img src="pfannkuchen.png" alt="">
oder
<img src="pancakes.png" alt="pancake pancake pancake hotcakes hotcake frühstück lebensmittel bestes frühstück top frühstück frühstück rezepte pancake rezept">
Keines dieser Beispiele ist empfehlenswert. Die erste Codezeile enthält überhaupt keinen Alt-Text (beachten Sie, dass die Anführungszeichen leer sind), während das zweite Beispiel das Ausfüllen des Alt-Textes mit Schlüsselwörtern demonstriert.
Warum ist der Alt-Text wichtig?
1. Zugänglichkeit
Alt-Text ist ein Grundprinzip des barrierefreien Webdesigns. Sein ursprünglicher (und immer noch primärer) Zweck ist es, Bilder für Besucher zu beschreiben, die sie nicht sehen können.
Dazu gehören Bildschirmleseprogramme und Browser, die Bilder blockieren, aber auch Nutzer, die sehbehindert sind oder ein Bild aus anderen Gründen nicht visuell identifizieren können.
Wenn Sie Ihren Bildern einen Alt-Text beifügen, ist sichergestellt, dass alle Nutzer, unabhängig von ihren Sehfähigkeiten, den Inhalt Ihrer Website verstehen können.
2. SEO für die Bildersuche
Das Einfügen von Alt-Text verbessert nicht nur die Benutzerfreundlichkeit und Zugänglichkeit, sondern kann auch explizite und implizite SEO-Vorteile mit sich bringen. Wenn Sie sicherstellen, dass Ihre Bilder für die Suche optimiert sind, wird das Bild in der Bildersuche und in Bildpaketen besser platziert.
Bei der Optimierung für die Bildersuche sollten Sie vorrangig dafür sorgen, dass Bilder bei textbasierten Suchanfragen auftauchen. Befolgen Sie dazu die besten Praktiken für Bild-SEO wie:
Moderne Dateiformate
Alt-Text
Relevante Dateinamen
Schema-Auszeichnung
All dies hilft Google, die Bilder auf Ihrer Website besser zu verstehen und ein relevantes Suchergebnis für Bilder zu liefern.
Auch wenn sich die Bilderkennungstechnologie der Suchmaschinen im Laufe der Jahre stark verbessert hat, können die Suchcrawler die Bilder auf einer Website immer noch nicht so "sehen" wie wir, weshalb es nicht ratsam ist, die Interpretation allein ihnen zu überlassen.
Wenn Sie es nicht verstehen oder falsch interpretieren, kann es sein, dass Sie entweder für unbeabsichtigte Keywords gerankt werden oder dass Sie ganz aus dem Ranking fallen.
Hier ein Beispiel: Google könnte das folgende Bild sehen und entziffern, dass es sich um einen Mann mit Krawatte und Brille handelt, der an einem Schreibtisch sitzt.
Jim Halpert aus The Office (US-Version)
Wenn Sie jedoch versuchen, für "Jim Halpert's impersonation of Dwight Schrute" zu ranken, müssen Sie der Suchmaschine etwas unter die Arme greifen.
Wie wichtig ist der Alt-Text?
Neben den bewährten Verfahren für Bildtitel und Dateinamen stellt die Verwendung von Alt-Text sicher, dass alle Nutzer und Bots den Inhalt Ihrer Website verstehen können.
Alt-Text bietet Ihnen eine weitere Möglichkeit, Ihr Ziel-Keyword einzubinden. Die Verwendung von Keywords auf der Seite ist immer noch ein wichtiger Faktor für das Suchmaschinenranking.
Es ist daher in Ihrem Interesse, einen Alt-Text zu erstellen, der sowohl das Bild beschreibt als auch, wenn möglich, ein Keyword oder eine Keywordphrase enthält, auf die Sie abzielen.
Wenn der Datenverkehr über die Bildersuche ein wichtiger Teil Ihrer SEO-Strategie ist, ist es außerdem sinnvoll, Google die richtigen Informationen über Ihre Bilder zu geben, um die Relevanz des Themas zu vermitteln. Dies können Sie durch die korrekte Verwendung moderner Dateiformate, Alt-Text, relevanter Dateinamen und Schema-Markup erreichen.
Wie schreibt man einen guten Alt-Text?
Beschreiben Sie das Bild so genau wie möglich. Alt-Text ist in erster Linie dazu gedacht, Bilder für Nutzer, die sie nicht sehen können, zu erläutern. Wenn ein Bild wirklich keine Bedeutung/keinen Wert vermittelt und nur zu Designzwecken dient, auch bekannt als dekorative Bilder, sollte es im CSS und nicht im HTML stehen.
Halten Sie sie (relativ) kurz. Es ist ratsam, den Alt-Text auf etwa 125 Zeichen oder weniger zu beschränken. Früher wurde empfohlen, dass gängige Bildschirmlesegeräte den Alt-Text nach etwa 125 Zeichen abschneiden. Diese Regel gilt zwar nicht mehr, ist aber immer noch ein guter Leitfaden für Inhaltsersteller und SEOs. Für das Schreiben von Alt-Text für komplexe Bilder, die längere Beschreibungen erfordern, siehe Punkt 7 unten, Best Practices für komplexe Bilder.
Fügen Sie Ihre Keywords ein. Der Alt-Text bietet Ihnen eine weitere Möglichkeit, Ihr Ziel-Keyword auf einer Seite einzubinden und damit den Suchmaschinen zu signalisieren, dass Ihre Seite für eine bestimmte Suchanfrage sehr relevant ist. Wenn es sinnvoll ist, sollten Sie Ihr Keyword in den Alt-Text mindestens eines Bildes auf der Seite aufnehmen, auch wenn Ihre erste Priorität die Beschreibung und der Kontext des Bildes sein sollte.
Vermeiden Sie Keyword-Stuffing. Google wird Ihnen keine Punkte für schlecht geschriebene Alt-Texte abziehen, aber Sie werden Probleme bekommen, wenn Sie Ihren Alt-Text als Gelegenheit nutzen, so viele relevante Keywords hineinzustopfen, wie Ihnen nur einfallen. Konzentrieren Sie sich darauf, einen beschreibenden Alt-Text zu verfassen, der den Kontext des Bildes wiedergibt und, wenn möglich, Ihr Ziel-Keyword enthält, und lassen Sie es dabei bewenden.
Verwenden Sie Bilder nicht als Text. Dies ist weniger eine Alt-Text-spezifische Best Practice als vielmehr ein allgemeiner SEO-freundlicher Webentwicklungsgrundsatz. Da Suchmaschinen den Text in Ihren Bildern nicht lesen können, sollten Sie es vermeiden, Bilder anstelle von Wörtern zu verwenden. Wenn Sie dies tun müssen, erklären Sie im Alt-Text, was Ihr Foto aussagt.
Fügen Sie in Ihrem Alt-Text nicht "Bild von", "Bild von" usw. ein. Es wird bereits davon ausgegangen, dass sich Ihr Alt-Text auf ein Bild bezieht, daher ist es nicht notwendig, dies zu spezifizieren.
Verwenden Sie bewährte Verfahren für komplexe Bilder. Beschreiben Sie Karten, Schaubilder, Diagramme und andere komplexe Bilder mit Hilfe bewährter Verfahren für die Barrierefreiheit. Das Attribut longdesc="" wird von den Browsern zwar unterschiedlich gehandhabt, ist aber auch für Screenreader-Benutzer verfügbar.
Vernachlässigen Sie keine Formularschaltflächen. Wenn ein Formular auf Ihrer Website ein Bild als "Submit"-Schaltfläche verwendet, geben Sie ihm ein alt-Attribut. Bildschaltflächen sollten ein alt-Attribut haben, das die Funktion der Schaltfläche beschreibt, z. B. "Suchen", "Jetzt bewerben", "Anmelden" usw.
Wie sieht ein guter Alt-Text aus?
Schauen wir uns Beispiele für Alt-Text in Aktion an:
Okay Alt-Text: <img src="vogel.png" alt="Hahn">
Besserer Alt-Text: <img src="vogel.png" alt="Hahn kräht">
Bester Alt-Text: <img src="vogel.png" alt="Roter Schopfhahn kräht">
Okay alt text: <img src="rolltreppe.jpg" alt="Mann auf Rolltreppe">
Besserer Alt-Text: <img src="rolltreppe.jpg" alt="Mann läuft auf Rolltreppe">
Bester Alt-Text: <img src="rolltreppe.jpg" alt="Mann mit Rucksack geht Rolltreppe hinunter">
Haben wir Ihr Interesse geweckt?
Schauen Sie gerne auf unserer Webseite vorbei und holen Sie sich ein unverbindliches Angebot mit kostenloser SEO-Beratung!
