Entstehung und Wirkungsweise des CSS im Hinblick auf die SEO

Tipps zur Google Suchmaschinenoptimierung und Google Adword von deine-seo.de - Die Seo Agentur unter deine-seo.de - SEO Düsseldorf und SEO Köln - Heute: Cascading Style Sheets

Kaum eine Agentur für Webdesign arbeitet wirklich nach dem Bauhaus-Prinzip »form followsfunction«. Denn hierfür spielen optische Kriterien noch eine zu große Rolle in den Köpfen der Kunden und Agenturen. Das HTML wird eher zu gestalterischen Zwecken genutzt, als tatsächlich zur Auszeichnung besonderer Textstellen. Das erschwert das "Information Retrieval" für automatische Boots, wie es Suchmaschinen sind, enorm. Insbesondere wird dies beim Gebrauch von Tabellen deutlich. Diese dienen oftmals nicht als Tabelle im eigentlichen Sinne, sondern werden stattdessen als Layouthilfe zweckentfremdet.

Um aber eine Trennung zwischen Inhalt und Darstellung zu erreichen, wurden Cascading
Style Sheets (CSS) entwickelt. Dabei handelt es sich im Idealfall um eine
gesonderte Datei, in der das Aussehen einzelner Tags global definiert ist. Damit
kommt den HTML-Tags wieder ihre ursprüngliche Funktion der reinen Textauszeichnung
zu. Inhalt und Design sind getrennt. Eine komplette Einführung in
CSS kann und soll an dieser Stelle nicht erfolgen. Einen guten Einstieg bieten
zahlreiche Tutorials im Web (z. B. www.w3schools.com/css/) oder entsprechende
Buch-Publikationen. Jedoch soll das Prinzip an einem einfachen Beispiel verdeutlicht
werden, da im weiteren Verlauf mehrfach auf CSS zurückgegriffen wird. In
einer CSS-Datei könnte man folgende beispielhafte Formatierungsregel für die
Ãœberschrift h1 finden:
h1 {
FONT-SIZE: 14px;
FONT-WEIGHT: bold;
FONT-FAMILY: verdana, arial, helvetica, sans-serif;
COLOR: green;
}

Formatierung des h1-Tags innerhalb einer CSS-Datei

Dieser Befehl formatiert das h1-Tag, das eine Ãœberschrift auszeichnet, in einer
Schriftgröße von 14 Pixel Höhe. Die Schrift ist ferner gefettet und es soll - sofern
auf dem Client-System vorhanden - primär die Schriftart Verdana zur Anzeige
genutzt werden. Des Weiteren ist in der letzten Zeile Grün als Textfarbe definiert.
In einem HTML-Dokument ohne CSS sähe das entsprechende Tag so aus:

h1 font-size="14px" color="green" b text/b /font/h1

Nicht wirklich schön, nicht wahr? Mittels CSS wird nur das h1-Tag benötigt. In welcher Datei die zugehörige CSS-Formatierung zu einem HTML-Dokument zu finden ist,
hat der Browser bereits im Seitenkopf über ein link-Tag erfahren. Zur
gewünschten Darstellung wird nun ein deutlich kürzeres (sowie auch schöneres)
Stück HTML-Code benötigt:
h1 text/h1

Weitere Informationen zur Suchmaschinenoptimierung erhält man auch auf der Website http://deine-seo.de.