Suchmaschinenoptimierung und CSS

CSS, Cascading Style Sheets oder auch nur Style Sheets sind heute fuer den, der sich mit Suchmaschinenoptimierung befasst, ein wichtiges Hilfsmittel.

CSS ist, vereinfacht gesagt, die Moeglichkeit, Inhalt und dessen Darstellung im Browser voneinander abzukoppeln. CSS erlaubt die Vorgabe von zahlreichen Attributen, die die Gestaltung und auch Funktionalitaet [im modernen Browser] beeinflussen, ohne dass man den eigentlichen Inhalt einer Seite anpassen muss.

Wichtiger als zusaetzliche Funktionalitaet ist aber die klare Trennung von Darstellung und Aussage.

Diese Trennung versetzt Sie einmal in die Lage, evtl benoetigte spaetere Aenderungen des Layouts, d.h. der Praesentation Ihrer Seiten, durch Anpassung einer einzigen Datei und ohne jede Aenderung der Seiten selbst durchzufuehren, wie ich anhand von Demo-Screenshots im letzten Newsletter zeigte.

Wichtiger noch, Sie koennen durch den Einsatz von CSS jetzt so vollendete wie konsequente Suchmaschinenoptimierung anwenden, ohne sich darueber Gedanken machen zu muessen, ob die Anforderungen der Suchmaschinen, die ja teilweise von denen abweichen, die man Anwendern unterstellt, schaedlich fuer den eigenen Geschmack sind.

Wie kommt es dann, das CSS so oft missverstanden wie missbraucht wird? Die groebsten Schnitzer lassen sich in drei Gruppen teilen:

a) Style-Anweisungen werden direkt in die HTML jeder Seite eingebaut, wobei jedem Element, oft dutzende Male pro Seite, identische Vorgaben gemacht werden.

b) Unwichtigen Elemente soll Wichtigkeit zugewiesen werden, indem man einer "Class" den Namen eines der fuer Suchmaschinenoptimierung wichtigen HTML-Elemente zuteilt: class="h1".

c) Ganz Bauernschlaue verstehen unter Suchmaschinenoptimierung mit Style Sheets nur das Verstecken von Text - oft mit ellenlangen Sammlungen ueberwiegend irrelevanter Woerter, im Browser nicht sichtbar, aber die Relevanz einer Seite absolut reduzierend.

Ganz selten trifft man mal auf eine Seite, bei der, aus Sicht der Suchmaschinen, CSS korrekt und konsequent eingesetzt wird.

Wer zuerst mit dem Gedanken spielt, CSS bei der Optimierung von Seiten wie auch fuer die Gestaltung dieser einzusetzen, beginnt meist mit einem Standard-Layout aus der Konserve, die dem eigenen Geschmack nach und nach angepasst wird und die, wenn man Glueck hat, nicht nur in einem zwar gaengigen aber veralteten Browser funktioniert.

Die Site, die CSS bei der Suchmaschinenoptimierung wie auch der Umstellung eines Layouts ueberlegt und konsequent einsetzt, ist in der Tat eine Raritaet.

Denn logisch waere es, zunaechst einmal festzuhalten, was man hat. Soll heissen, welche Inhalte - unabhaengig der eigentlichen Praesentation - uebermittelt werden sollen. Wie gross die einzelnen Informationseinheiten sind. Wie diese unterteilt, und auch wie diese gepflegt und aktualisiert werden. Diese Analyse zeigt zumindest, wie die Information zunaechst grob und dann feiner gegliedert werden kann und sollte. Strukturierte Daten eignen sich wesentlich besser fuer die Suchmaschinenoptimierung als eine willkuerliche Sammlung, deren Aufbereitung durch Design-Anforderungen statt durch inhaltliche Logik bestimmt wird.

Diese Analyse ergibt damit zunaechst die Vorgaben fuer Navigation und evtl andere Elemente, die auf einer Vielzahl von Seiten vorhanden sein muss.

Darueberhinaus mag es Dinge geben, die gruppenweise in Sektionen einer Site eingebaut werden muessen, wie aktuelle Nachrichten, Schlagzeilen oder Links auf diese, ein Impressum, oder wenn mans nicht lassen kann, gar Raum fuer eingeblendete Werbung.

Erst wenn man tatsaechlich ermittelt hat, in welche Komponenten Information, Navigation und sonstige Elemente aufgeteilt werden muessen, und wie man die wichtigsten statischen und auch oft aktualisierte oder erweiterte Inhalte strukturiert, sollte die eigentliche Praesentation angegangen werden. Und zwar auf einem Bogen Papier, und nicht etwa in einem HTML-Editor, der auch CSS versteht.

Diese Vorarbeiten zeigen dann, ob man ein ein-, zwei- oder gar dreispaltiges Design waehlt, wo welche Standard-Elemente auf der Seite plaziert werden sollten, und wie die Proportionen der einzelnen Seitenteile zueinander ausfallen. Wobei beruecksichtigt werden _muss_, dass Schriftart und Groesse, Bildschirmaufloesung und die Hoehe und Breite des Browserfensters auf jedem Bildschirm durch den Anwender kontrolliert werden kann. Wobei die letzte Variable der vollen Bildschirmgroesse entsprechen kann. Aber keineswegs "muss".

Aufbereitung der Information kann - oder sollte - dann voellig separat von der Erarbeitung des Designs erfolgen. Bei jeder Seite ist zu ueberlegen, was in den TITEL und die Ueberschrift gehoert und wie der eigentliche Text in Abschnitte zu unterteilen ist, welche Begriffe im Text hervorzuheben sind. Denn Suchmaschinen wie auch Anwender "sehen" wichtige Dinge zuerst. Dass dabei die Regeln der klassischen Seitenerstellung Anwendung finden, ist fuer die Suchmaschinenoptimierung mit Stylesheets zwingende Voraussetzung.

Wenn Sie das Web erst seit ein paar Jahren nutzen, kennen Sie moeglicherweise keine oder kaum klassisch erstellte Seiten. Ein Blick auf den Quellcode meiner Seiten zeigt, was ich damit meine. Die HTML-Struktur der Seiten meiner Site duerfte kaum zu vereinfachen sein. Sie finden darin weder ueberfluessige Elemente noch ueberfluessigen Leerraum, keine wiederholten Definitionen und auch keine das eigentliche Layout beeinflussenden Vorgaben.

Wie meine Seiten im Browser dargestellt werden, wird einzig und allein durch die im HEAD der Seite eingebundenen CSS-Anweisungen gesteuert und nie in der HTML-Seite selbst definiert.

Wenn wir meine Seiten als Diskussionsbeispiel nehmen, erkennen wir - auf jeder Seite - mehrere distinktive Bereiche:

  1. "intro" fuer die Einleitung bzw Darstellung in den Suchergebnissen der Suchmaschinen
  2. "navbar" als Zelle fuer in alle Seiten eingebundene Elemente der Navigation
  3. "pgcont" als Container oder Behaelter fuer den eigentlichen Seiteninhalt und
  4. "pgtail" fuer Copyright-Vermerk und andere Dinge, die zwingend in jeder Seite vorhanden sein sollten.

Jeder Bereich ist eine einfache DIV, die wiederum andere Elemente wie Ueberschrift, Text, Tabellen und Listen enthaelt. Wie diese Elemente praesentiert werden sollen, wird im CSS bestimmt, wobei die Darstellung teilweise davon abhaengt, in welcher DIV oder welchem Bereich einer Seite ein Element eingesetzt wird. Genauso werden Schriften, ihre Groessen, Vorder- und Hintergrund- Farben im CSS definiert, so dass _alle_ Praesentationsmerkmale dort - und nicht in den Seiten selbst - festgehalten werden.

Darueberhinaus enthaelt jede Seite natuerlich noch den sog HEAD, der neben dem TITLE der Seite die base href aller Seiten definiert, um Manipulationen durch Redirect-Tricks auszuschliessen, und der darueberhinaus nur zwei - bzw in ganz seltenen Faellen drei - CSS Dateien einbindet [da ich meinen Besuchern die Moeglichkeit biete, Schriftart-, Groesse und Farben des Layouts dem eigenen Geschmack anzupassen, wird das Haupt-Style Sheet nicht ueber eine statische Datei sondern durch ein Programm - gcss.fcgi - das das Vorhandensein eines Cookies ueberprueft, geladen. Aber das ist eine Feinheit, die aus Sicht der Suchmaschinenoptimierung oder auch der Style Sheet Anwendung irrelevant ist. Individualisiert wird die jeweilige CSS-Datei, nie die HTML-Seite, die abgerufen wird].

Ein Einweg-CMS, wie das von mir selbstgestrickte, hilft natuerlich bei der Seitenerstellung. Sind alle Schablonen fuer die statischen bzw in allen Seiten benoetigten Elemente erstellt, kann die Seitenpflege wie auch die Erstellung neuer Seiten mit jedem beliebigen Text-Editor durchgefuehrt werden, da ich _nur_ noch die eigentlichen Inhalte erstelle und die Anfertigung der HTML-Seiten aus Inhalts-Files und Schablonen maschinell erfolgt.

Aber auch wenn mangels CMS komplette HTML-Seiten erstellt werden muessen, bietet der Verzicht auf Design-Anweisungen in den eigentlichen Seiten unbezahlbare Vorteile, da man sich auf den eigentlichen Inhalt, der Anwender ueberzeugen und von ihnen in den Suchmaschinen gefunden werden soll, konzentrieren kann. CSS eignet sich damit auch, Suchmaschinenoptimierung zu vereinfachen.

Newsletter Archiv

© Copyright 1998 - 2009 Klaus Schallhorn.