Bilder in TYPO3: ALT- und TITLE-Attribute

Mensch und Suchmaschine sehen Bilder anders

Wenn man an den Einsatz von Bildern in einer Webseite denkt, muss man sich immer eine Sache vor Augen halten: Wie sieht eine Suchmaschine ein Bild? Und wie ein Mensch? 

  • Ein Mensch sieht zwei Personen in Liegestühlen an einem Sandstrand mit einem Cocktail in der Hand vor einem kristallklaren Meer 
  • Eine Suchmaschine sieht digitale Daten mit dem Namen einer Bilddatei und beschreibenden Texten dazu 

Sie sehen also: Es gibt deutlich unterschiedliche Zielgruppen, für die wir die Bilder in unserer Webseite nutzen. Während wir die Menschen bei der Psychologie und niederen Instinkten packen wollen, sind es bei der Suchmaschine eher Informationen. 
Bei diesen Informationen handelt es sich vor allem um zwei Attribute, die wir einem Bild mitgeben und die eine Suchmaschine ausliest, ein Mensch aber nicht direkt zu sehen bekommt: 

  • Das ALT-Attribut 
  • Das TITLE-Attribut 

Die Renaissance des ALT-Attributs

Das ALT-Attribut stammt eigentlich noch aus der Zeit langsamer Internetverbindungen und diente dazu, den Inhalt eines Bildes zu beschreiben, das noch nicht geladen ist. Manchmal hat man Ende des 20. Jahrhunderts auch das Laden von Bilder abgeschaltet, um erst mal die Webseite zu laden... Dank DSL ist dieses Attribut aus der Mode gekommen, dank Suchmaschinen ist es wieder in Mode gekommen. 

Die Doppelnatur des TITLE-Attributes

Das TITLE-Attribut hat eine Doppelnatur. Für beide gilt: Im normalen Modus stellt man sie nicht fest. 

  • Den Inhalt des TITLE-Attributes sieht man erst, wenn man mit der Maus über ein Bild fährt 
  • Das TITLE-Attribut spielt eine wichtige Rolle bei der Gestaltung barrierefreier Webseiten, ein Screenreader liest den Inhalt dieses Attributes vor, wenn man mit der Maus darüberfährt 

Der erste Punkt ist natürlich wichtig für die Gestaltung von Webseiten. Und die Tatsache, dass man mit dem TITLE-Attribut barrierefreie Webseiten gestaltet, kann ein Grund dafür sein, dass man dort andere Informationen hinterlegt als für die Suchmaschinenoptimierung der Seite. 

Bilder in TYPO3 mit Texten zu Attributen füllen

Um ein Bild mit ALT- und TITLE-Attribut zu füllen, gibt es in TYPO3 zwei Möglichkeiten: 

  • Sie können das Bild direkt im fileadmin mit beiden Attributen versehen 
  • Sie können das Bild bei der Einbindung in ein Inhaltselement mit Texten für beide Attribute bestücken 

Für beide Fälle gilt: Es gibt eine klare Hierarchie, in der TYPO3 den Text für das jeweilige Attribut auswählt: 

  • Wenn ein Bild im fileadmin mit Texten versehen wurde, werden diese in den <IMG>-Tag geschrieben. 
  • Wenn ein Bild im fileadmin mit einem Text für ein Attribut versehen wurde, dieser aber bei der Einbindung des Bildes mit einem eigenen Text ersetzt wird, dann nimmt TYPO3 den letzteren, um diesen in den <IMG>-Tag zu schreiben. 
  • Wenn im fileadmin kein Text für die Attribute gesetzt wurde, wird dieser aus der Einbindung des Bildes im Inhaltselement übernommen, wenn dort etwas steht. 
  • Wenn im fileadmin Texte für die Attribute vergeben wurden, diese bei der Einbindung des Bildes überschrieben werden sollen, das Feld aber leer bleibt, schreibt TYPO3 auch keinen Text in den betreffenden <IMG>-Tag. 

Welche Variante Sie für Ihr Projekt wählen, bleibt Ihnen im speziellen Fall überlassen. Wenn Sie beim Hochladen eines Bildes in den fileadmin noch nicht wissen, wo dieses Bild später eingebunden wird, lassen Sie dieses Bild leer. Aber wenn Sie ein Firmenlogo hochladen, dass Sie vielleicht in 50 einzelne Seiten Ihrer Webseite einbauen werden, dann können Sie Angaben zu Ihrem Unternehmen auf der Ebene des fileadmin eingeben. Im redaktionellen Alltag ersparen Sie sich damit eine Menge Arbeit. Und ändern können Sie die Texte später immer noch. 

TypoScript für IMAGE Objekte

Nun wird es ein wenig technisch. Allerdings ist der folgende Punkt wichtig, wenn Sie die Inhalte Ihrer TYPO3 Webseite mit selbst entwickeltem TypoScript rendern. In diesem Falle lesen Sie z. B. in Ihrer Webseite die Inhalte für Titel und Bodytext sowie für die Bilder auslesen. Dafür nutzt man das IMAGE Objekt. Diesem kann man mehrere Parameter mitgeben. Für SEO sind natürlich die title- und alt-attributte wichtig. Hier ein Beispiel für den Aufbau eines solchen Objektes: 

 renderObj = IMAGE
renderObj {
  file.import.data = file:current:originalUid
  titleText.data = file:current:title
  altText.data = file:current:alternative
  params = class="img-responsive"
}

Sie können die Angaben für titleText und altText aus einem beliebigen Datenfeld füllen, dass Ihnen beim Bild zur Verfügung steht. Dies ist abhängig von der redaktionellen Arbeit bei Ihrem Projekt.

Thomas Berscheid ⧉ 05.08.2020