Schön und suchmaschinenfreundlich

Webdesigner und Suchmaschinenoptimierer sind nicht immer die besten Freunde. Die einen legen sehr großen Wert auf gutes Aussehen einer Website, visuelle Effekte und ein modernes Design. Damit sich was bewegt, wird Flash benutzt. Um andere Schriftarten, als die gewohnten Arial und SansSerif zu verwenden, werden in Menüs und Texten Bilder oder eben auch wieder Flash verwendet. Der zuständige SEO sieht das gar nicht gerne, denn Flash und Bilder sind für die Suchmaschinen bei weitem nicht so gut zu lesen, wie einfacher Text. Flash kann inzwischen, zumindest teilweise, von Suchmaschinen auch durchsucht werden. Es kommt dabei aber auf die Art der Flash-Programmierung an. Bei Bildern sieht es noch schlechter aus. Der Inhalt bleibt den Suchmaschinen verschlossen. Über den Alt-Text kann man einige Informationen unterbringen. Aber es geht auch anders. Wenn sich SEO und Webdesigner frühzeitig absprechen, gibt es einige Möglichkeiten, schön und suchmaschinenfreundlich unter einen Hut zu bekommen. Zwei sollen hier gezeigt werden.

Zuerst die Schriften. Mit der Google Font API bietet Google eine Möglichkeit, andere als die "normalen" Webschriften in einer Seite zu verwenden. Eine Übersicht der verfügbaren Schriften gibt es im Verzeichnis der Google Web Fonts. Die Einbindung ist sehr einfach. Lediglich ein zusätzliches CSS muss verlinkt werden und dann können die neuen Schriftarten wie gewohnt verwendet werden. Hier ein paar Beispiele für die Schriften:

Diese Schriftart heißt Just Me Again Down Here. Per CSS habe ich hier noch einen Schatten hinterlegt.

Der Name Fontdiner Swanky passt bei dieser Schrift, finde ich, ganz gut.

Und als letztes Beispiel noch der Font Pacifico.

Die Umsetzung ist ganz einfach. Eine zusätzliche Zeile im Header und ein Style-Parameter für den Text (oder eine CSS-Klasse), das war's.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Fontdiner+Swanky">
<p style="font-family: 'Fontdiner Swanky', serif; font-size: 20px">Hier dann der Text.</p>

Das funktioniert mit den gängigen Browsern ganz gut. Getestet habe ich mit Firefox 3.6, Internet Explorer 8, Opera 11 und Safari auf dem iPhone. Die Schriften wurden überall richtig dargestellt. Nur mit dem Schatten hatte der Internet Explorer Probleme.

Das waren die Schriften. Jetzt möchte ich noch zeigen, dass man nicht unbedingt Flash braucht, um auf der Website animierte Elemente zu verwenden. Folgendes haben wir in einem Onlineshop verwendet. Das ganze ist per JavaScript mit dem Projekt ContentFlow realisiert worden. Die animierten Produkte werden mit Verlinkung und (falls gewünscht) mit zusätzlichen Texten als reines, suchmaschinenfreundliches HTML aufgelistet - eine sehr gelungene Verbindung von Suchmaschinenfreundlichkeit und moderner Darstellung.

Die Größe des Bereiches, Hintergrundfarben, Rahmen, Reflektionen usw. lassen sich natürlich per CSS einstellen und so an die persönlichen Wünsche anpassen.