fbpx

Bilder Alt Attribute

Bilder Alt Attribute

Was ist das und wie funktionierts?

Als Maßnahme zur Barrierefreiheit im Web ist Alt-Text für Bilder etwas, wovon du wahrscheinlich schon gehört hast. Alt-Text (auch bekannt als Alt-Attribute oder Alt-Beschreibungen) ist der Text, der neben den Bildern erscheint und sie für sehbehinderte Nutzer vorliest.

Ein Alt-Text kann viel mehr für deine Bild-SEO tun, als du denkst, genauso wie ein leeres Alt-Attribut deinen Rankings schaden kann. Hier ist, was wir behandeln werden:

Was ist Alt Text für Bilder?
Warum ist Alt Text wichtig für Bild-SEO?
Wie man Alt Text zu Bildern auf deiner Seite hinzufügt.
Wie man Alt Text schreibt, der funktioniert.
Alt Text Best Practices für Bild-SEO.
Alt Text Beispiele: Vom Schlechten zum Besten
Wie man Alt Text für E-Commerce Seiten schreibt.
Probleme mit Bild Alt Text aufdecken.
Alt Text FAQ
Die Wichtigkeit von Alt Text für Bilder.

Was ist Alt Text für Bilder?

Der Alt-Text beschreibt nicht nur das Bild, sondern auch seinen Kontext. Oft mit dem Alt-Tag verwechselt, ist der Alt-Text eigentlich Teil des HTML-Codes, enthält aber nur die Beschreibung des Bildes, nicht das gesamte Attribut.

Die Bedeutung von alt text kommt von alternativem Text, und du hast ihn wahrscheinlich schon einmal gesehen, wenn Bilder auf einer Seite nicht geladen wurden. Alternativtext ist der geschriebene Text, der die Bilder ersetzt.

Warum ist Alt Text wichtig für Image SEO?

Da Suchmaschinen immer besser darin werden, Bilder zu lesen, und die Nutzererfahrung mit mehr visuellem Inhalt immer besser wird, wird der Alt-Text für Bilder immer wichtiger.

Wenn du Inhalte für das Internet erstellst, ist es wahrscheinlich, dass du visuelle Inhalte brauchst. Eingebettete Bilder sind für Nutzer viel angenehmer als ein Klick auf einen Hyperlink, und die Google SERPs holen auf.

Die Suchergebnisse bei Google werden oft von visuellen Inhalten dominiert.

Das liegt vor allem daran, dass Google immer weiter in die visuelle Forschung vordringt und mit der neuesten Machine Learning und AR Technologie Schritt hält.

Die Wichtigkeit von Alt-Tags wurde von Google bereits 2007 diskutiert und sie sind Teil der Richtlinien für die Veröffentlichung von Bildern. Jedes Update bestätigt, dass sich die Suchmaschine in Richtung einer umfassenderen visuellen Suche bewegt.

Daher mag die Optimierung von Alt-Text für Bilder ein Novum für jeden sein, aber Alt-Text Best Practices werden bald für jeden, der Inhalte im Web erstellt, essentiell sein.

Wie du Alt-Text zu Bildern auf deiner Seite hinzufügst

Nachdem wir erklärt haben, warum Alt-Text so wichtig für Bild-SEO ist, ist es an der Zeit zu lernen, wo die Alt-Attribut Optionen in deinem CMS sind. Die meisten Plattformen haben sie bereits.

Wie man Alt Text schreibt, der funktioniert

Der Alt-Text gibt uns die Möglichkeit, die Fokus-Keywords auf eine relevante und sinnvolle Art und Weise einzubauen, die den Inhalt tatsächlich aufwertet.

Bei der Optimierung von Bildern geht es nicht nur darum, das Fokus-Keyword in den Alt-Text einzubauen. Ein Alt-Text für Bilder auf einer Seite sollte:

  • Das Bild so objektiv wie möglich beschreiben: Der Alt-Text wird angezeigt, wenn ein Bild nicht geladen wird, also stelle sicher, dass er Sinn macht.
  • Sicherstellen, dass Crawler das Bild genau indizieren können: Gib dem Bild einen Kontext.
  • Für längere Beschreibungen verwende das longdesc-Attribut (Achtung: füge hier keine Wörter wie “Bild von” oder “Bild von” ein – es ist selbsterklärend, da der Alttext die Beschreibung des Bildes ist).
  • Der Alt-Text sollte Keywords verwenden, aber sie nicht hineinstopfen: Es gelten alle Regeln für guten Qualitätscontent. Keyword-Stuffing funktioniert nicht für Content und wird auch nicht für Alt-Text funktionieren.

Alt Text Best Practices für Bild SEO

Hier ein paar SEO-Ratschläge:

  • Verwende keine Bilder anstelle von Wörtern. Suchmaschinen können keinen Text auf Bildern lesen, also kann die Verwendung eines Bildes anstelle des Textes sie verwirren.
  • Achte darauf, dass du einen Alt-Text in alle deine Bilder einfügst. Bilder, die als Buttons verwendet werden, zählen auch. Alternativer Text für Buttons könnte “Jetzt bewerben” oder “Newsletter abonnieren” sein.

Alternativer Text Beispiele: Von schlecht bis gut

Wie man Alt-Text für E-Commerce Seiten schreibt

Auch hier sollte der Alt-Text so beschreibend wie möglich sein. Vermeide Alt-Text wie “Großer Ausverkauf Converse Schuhe kaufen Sie jetzt”. Dies könnte einen Spam-Alarm auslösen.

Hier ist ein Beispiel für einen guten Alt-Tag für E-Commerce-Bilder:

Probleme mit Image Alt Text aufdecken
Selbst wenn wir unser Bestes geben, um Alt-Text zu schreiben, der funktioniert, übersehen wir manchmal etwas.
Finde mit unserer Hilfe heraus, ob deine Bilder webfreundlich sind.

Kaputte Bilder

Eine Seite mit kaputten Bildern gibt dem Nutzer ein schlechtes Gefühl, weil sie nicht richtig dargestellt werden können und den Eindruck erwecken, dass deine Seite von schlechter Qualität ist. Sobald die Suchmaschinen dies feststellen, können kaputte Bilder das Ranking deiner Seite beeinträchtigen.

Dann musst du wahrscheinlich nachbessern:

  • Wenn die URL falsch ist oder der Dateipfad falsch ist, korrigiere sie. Wenn die Datei umgezogen ist, aktualisiere die URL, um auf den neuen Ort zu verweisen.
  • Ein Bild existiert nicht mehr: Wenn ein Bild gelöscht oder beschädigt wurde, erstelle ein neues; oder wenn das Bild nicht mehr benötigt wird, entferne es aus dem HTML-Code.

Es geht nur darum, den Unterschied zwischen defekten internen Bildern und defekten externen Bildern zu kennen. Da du die externen Bilder nicht kontrollieren kannst, ist es am besten, sie loszuwerden.

Bilder ohne Alt-Attribute

Wenn das Alt-Attribut leer ist, ist das eine verpasste Gelegenheit für bessere Rankings in der Bildersuche.

Außerdem bietet es keine gute User Experience für sehbehinderte Nutzer.

Alt Text FAQ

Die folgenden Fragen werden häufig bei der Arbeit mit Alt-Tags gestellt:

Wie finde ich das Alt-Tag auf einer Seite?
Du kannst irgendwo auf der Seite mit der rechten Maustaste klicken und “Inspect” aus dem Menü wählen. Auf der rechten Seite des Bildschirms wirst du den Quellcode der Seite sehen.
Klicke auf das erste Symbol links neben dem HTML-Code-Panel, suche dann das Bild auf der Seite, dessen Alt-Tag du sehen möchtest und wähle es aus. Der HTML-Code für dieses Element wird mit allen Attributen für das Bild hervorgehoben.

Wie lese ich den Alt-Text im HTML-Code?
Wenn du auf “Inspizieren” klickst, siehst du den Quellcode der Seite, in dem du den entsprechenden HTML-Tag findest. Dem Alt-Text wird ein Tag vorangestellt, auf dem “alt=” steht, und dann folgt die Beschreibung.

Woher weiß ich, ob ein Bild Alt-Text hat?
Wenn du im Quellcode einer Seite auf das alt-Tag nach “alt=” schaust und du nur zwei Anführungszeichen ohne Inhalt siehst, dann ist das alt-Attribut leer und es gibt keinen Alt-Text.

Wie füge ich Alt-Text zu einer JPG-Datei hinzu?
In Microsoft Word kannst du mit der rechten Maustaste auf das Bild klicken und “Alt-Text bearbeiten” aus dem Menü wählen. Fülle die Beschreibung des Bildes in das Eingabefeld ein und klicke auf “OK”. Denke daran, deinen Text noch einmal auf Rechtschreibung und Grammatik zu überprüfen, da die Eingabefelder keine Rechtschreibprüfung haben.

Kannst du Kommas und Punkte im Alt Text verwenden?
Ja, und das solltest du auch. Wenn du die richtige Interpunktion in den Alt-Text einfügst, können Screenreader ein besseres Nutzererlebnis bieten.

Außerdem wird der Alt-Text angezeigt, wenn ein Bild nicht richtig geladen wird. Hochwertiger Text sorgt für ein besseres Nutzererlebnis.

Wie lang sollten Alt Tags sein?
Die empfohlene maximale Länge des Alt-Textes, um den meisten Screenreadern gerecht zu werden, beträgt 125 Zeichen.

Wichtigkeit von Alt-Text für Bilder

Alt-Text ist ein wichtiger Teil der Bild-SEO und der Benutzerfreundlichkeit, also versuche beides im Auge zu behalten, wenn du deine Alt-Tags optimierst. Nutzer und Suchmaschinen nutzen deinen Alt-Text, um die Bilder auf deiner Seite besser zu verstehen. Wenn du die oben genannten Schritte befolgst, bist du auf dem besten Weg, eine benutzerfreundliche Seite zu erstellen, die leichter zu crawlen ist.

Inhaltsverzeichnis

Ähnliche Themen:
Absprungrate

Die Absprungrate ist eine Kennzahl im Bereich des Online-Marketings und

AIDA Formel

Die AIDA-Formel aus dem Marketing ist eine Abkürzung für Attention

Web Vitals

Google Page Experience Update: Was steckt dahinter? Google hat seit