Suchmaschinenfreundliche grafische Menüs mit Mouseover-Effekten in Typo3 (SEO)

Insbesondere dann, wenn für Menüs Schriftarten (häufig die Hausschrift des Kunden) verwendet werden sollen, bei denen es sich nicht um Systemschriften handelt und für die es keine Webfont gibt bleibt nur ein Ausweg: Menüs mit Bildern als Links.

Glücklicherweise ist Typo3 problemlos in der Lage (mittels GIFBUILDER) bei Vorliegen der Schriftart auf dem Server (TTF-Datei) entsprechende Grafiken zu erstellen. Nur leider sind die Seiten dann weniger barrierefrei und suchmaschinenfreundlich.

Um diese Herausforderung zu lösen muss zweischrittig vorgegangen werden:

a) Wie erstellt man suchmaschinenfreundliche und barrierefreie Bild-Verlinkungen?
b) Wie erzeugt man sie automatisch in Typo3?

Image Replacement nach Leahy/Langridge

Von den zahlreichen Image-Replacement-Methoden halte ich die Methode nach Leahy/Langridge für die Eleganteste. Hierbei wird ein Link ganz normal als Textlink definiert und via CSS so formatiert, dass nur eine Grafik (inhaltsgleich) zu sehen ist. Diese Vorgehensweise hat zahlreiche Vorteile:

  • sie ist suchmaschinenfreundlich
  • sie verstößt nicht gegen Googles Webmaster-Richtlinien
  • sie ist Barrierefrei

Der Link sieht dann wie Folgt aus, wenn das Bild textbild.jpg (120x20 Pixel) verwendet werden soll:

<a href="[linkziel]" style="background:url('textbild.jpg') top left no-repeat;height: 0px;overflow: hidden;padding-top: 20px; display: block;">Text des Links</a>

Der Trick besteht hierbei darin, die Höhe des Elements mit 0 Pixeln anzugeben und den Overflow auf hidden zu setzen. So wird der "Text des Links" nicht dargestellt. Durch das setzen von padding-top auf die Höhe des Hintergundbildes wird ausschließlich das Hintergrundbild ausgegeben.

Beispiel: Code

<a href="http://www.zechendorf.com" style="margin: 0.5em 0;display:block; padding-top: 18px; height: 0px; overflow: hidden; width: 146px; background:url('http://www.zechendorf.com/fileadmin/templates/images/a-logo.png') 0px -18px no-repeat;">Zechendorf</a>

Beispiel: Ergebnis

Mouseover-Effekt ohne Bildtausch

Da ein Austauschen des Hintergrundbildes bei Mouseover den negativen Effekt haben kann, dass das Bild erst bei Mouseover geladen wird (was dafür sorgt, dass dann für einen Moment kein Bild zu sehen ist) verwende ich in diesen Fällen gerne ein Hintergrundbild mit allen Varianten (hover, active etc.) in einer Datei untereinander.

Wenn das Bild also 120x20 Pixel groß ist und noch eine 120x20 Variante für Mouseover hinzukommt, erstelle ich gerne ein Bild mit 120x40 Pixeln. In diesem Bild ist oben die normale Variante und unten die Mouseover-Variante hinterlegt. Bei Mouseover wird einfach nur der Hintergrund um 20 Pixel nach oben verschoben:

a.linkKlassenName:hover{
background-position: 0px -20px;
}

Grafisches Menü in Typo3 erzeugen

Um ein Menü in Typo3 zu erzeugen sind Kenntnisse in TypoScript vorausgesetzt. Mit TypoScript kann das gewünschte Menü in das Template der Seite geschrieben werden.

TypoScript für grafisches Menü

Im rechts abgebildeten Screenshot ist das TypoScript für das grafische Menü dargestellt. Die Funktionalität einzelner Zeilen ist wie folgt:

Zeile 107

Einstiegspunkt des Menüs im Typo3-Seitenbaum

Zeile 121/122

Definieren die Ziel-URL des Menüpunkts

Zeile 127-152

Definieren die Grafik: Es werden zwei Schriftzüge in einem Bild gerendert (einmal normal und einmal für Mouseover).

Zeile 142&149 

Definieren den Pfad zur TTF-Schrift-Datei

Zeile 155/156

Definieren den Text des Links

Download Typoscript

Das entsprechende Typoscript kann hier heruntergeladen werden.

Nachteile / Drawbacks

In der vorliegenden Konfiguration ist die Höhe der Navigationspunkte fest definiert. mehrzeilige grafische Menüpunkte sind so leider nicht möglich. Ich werde demnächst ausprobieren, ob es möglich ist, die Bildhöhe (die dem Typo3-System ja bekannt ist) auszulesen und im style-Tag zu verwenden. 

© 1999 - 2015  | PGP Public Key | Login | Blog | Impressum