Verwendung von Bildern auf Webseiten

Bilder beschreiben immer sehr treffend Inhalte oder verdeutlichen diese auf wunderbare Weise. Gleichzeitig ist die Präsentation von reinen Texten für die Besucher oftmals recht langweilig, wenn sie nicht durch Bilder einen wenig aufgelockert wird.

Bei der Präsentation von Bildern auf Webseiten muss man aber generell wissen, dass der GoogleBot nicht die Inhalte von Bildern auslesen und somit keinerlei eindeutige Aussage über den Inhalt treffen kann.

In seine Richtlinien schreibt Google:

  • Verwenden Sie zur Anzeige wichtiger Namen, Links oder wichtigen Contents keine Bilder, sondern Text. In Bildern enthaltener Text wird vom Google-Crawler nicht erkannt. Wenn Sie Bilder für Text-Content verwenden müssen, verwenden Sie das Attribut „ALT“, um beschreibenden Text einzufügen.

und weiter

  • Stellen Sie sicher, dass alle Ihre TITLE-Tags und ALT-Attribute aussagekräftig und eindeutig sind.

Daraus entnehmen wir schon mal die wichtigsten Grundregeln für die Verwendung von Bildern:

  • Wichtige Links (z.B. Links die der Navigation auf der Webseite dienen und/oder wichtige Inhalte bezeichnen) immer auch über einen Textlink erreichbar machen.
  • Wichtige Inhalte (z.B. Suchbegriff im Slogan, Headlines und Sublines, etc.) immer in Textform präsentieren.
  • Jedes Bild mit einzigartigen, korrekten sowie sinnvollen Title-Attributen und Beschreibungstexte im ALT-Attribut versehen. Wichtig aus SEO Sicht, der Usability wegen und weil ich voll hinter der Idee der Barrierefreiheit bzw. Barrierearmut des Internets stehe.
  • Werden nur Bilder präsentiert ohne beschreibenden Kontext (z.B. automatisiert), dann Möglichkeiten für „user generated content“ (Kommentare) schaffen.

Wer?, Wo?, Wann?, Was? und Warum?

Bei der Erstellung einer Beschreibung für jedes einzelne Bild hält man sich am Besten an die 5 Fragen mit W, wie man sie aus dem Journalismus kennt.

  • Wer?
  • Wo?
  • Wann?
  • Was?
  • Warum?

Die letzte Frage: Warum? Ergibt sich für den Leser in der Regel aus dem Kontext, in dem das Bild eingebettet ist. Ansonsten versuchen alle Fragen – die beantwortet werden können – mit 80 Zeichen zu beantworten.

Beispiel:

Leere Pizzakartons auf dem Esstisch nach dem gemeinsamen Mittagessen am Freitag.

ALT-Text: Leere Pizzakartons auf dem Esstisch nach dem gemeinsamen Mittagessen am Freitag. (Genau 80 Zeichen)

Länge der Beschreibung

Der beschreibende Text im ALT-Attribut sollte immer kurz und prägnant den Bildinhalt beschreiben und sich auf 80 Zeichen beschränken. Dazu muss man wissen, dass der Alternativ-Text (er wird definiert über den Inhalt des ALT-Attributs) ein Ersatz für den Inhalt des Bildes darstellen soll.

Das kommt besonders zum tragen, wenn der User Agent keine Bilder anzeigen kann oder der Benutzer sie nicht sehen kann (Menschen mit besonderen Bedürfnissen wie beispielsweise Sehbehinderte und Blinde).

Für die Benutzung des Internets sind für diese Menschen noch weitere Hilfsmittel notwendig wie zum Beispiel ein Screen Reader oder eine Braille-Zeile (kann maximal 80 Zeichen darstellen, deswegen auch die Beschränkung der Zeichenzahl).

Title-Attribut

Verbirgt sich hinter dem Bild ein Link (zumeist Banner), dann gewinnt das Title-Attribut an Bedeutung. In diesem Fall sollte das das Title-Attribut immer das Linkziel beschreiben.

Beispiel:

Title-Attribut: Startseite SEO Deutschland

ALT-Attribut: Logo der hannoverschen Agentur SEO Deutschland

Mehr Informationen zur Google Bildersuche (Image Search) erhaltet ihr in diesem älteren Beitrag.