 SEO CSS: Ein Suchmaschinenfreundliches Template
Der folgende Beitrag beschäftigt sich mit der Fragestellung, wie man ein Template möglichst suchmaschinenfreundlich aufbauen kann.
Suchmaschinen teilen Web-Dokumente, wie HTML-Dateien, in einzelne Klassen ein. Die Wörter in der ersten Klasse werden von Suchmaschinen als wichtiger angesehen. Das ist deshalb logisch, weil bei längeren Texten und Artikeln zuerst immer eine kurze Zusammenfassung steht, welche den restlichen Inhalt beschreibt und somit Wörter enthält, die repräsentativ für den Rest des Artikels sind. Dauaus ist ersichtlich, dass alles, was möglichst weit oben in einer HTML-Datei steht, besonders wichtig und kennzeichnend für die Webseite sein sollte. Die Realität sieht allerdings so aus, dass dies oft nicht der Fall ist. Eine Template ist oft so aufgebaut, dass zuerst ein Header, ein Banner und eine Navigationsleiste im Quelltext steht und erst dann der eigentliche Content kommt, der die so wichtigen Texte enthält. Dieses Problem kann man umgehen, indem man den Quelltext, also das HTML Markup so aufbaut, dass eben zuerst der Content kommt und danach die anderen Elemente. Dies ist recht einfach durch CSS-Techniken möglich. Man muss allerdings wissen, wie. Hier beschreibe ich dies. Die Webseiten-StrukturSo könnte die Struktur einer Webseite aussehen: 
Hier wird auch schon die Problematik deutlich. Vor dem Content, der die wichtigen Keywords enthält, wird im Quelltext zuerst der Head, das Banner, die horizontale Navigation und schließlich die vertikale Navigation stehen. Erst dann kommt der Content. Ideal wäre aber eine andere Reihenfolge, um den Text des Contents gleich zu Beginn in der HTML-Datei stehen zu haben: 
Zuerst soll der Content stehen. Dann kommt die Hauptnavi, weil hier die wichtigsten internen Links stehen. Dies ist nötig, weil man ja dafür sorgen möchte, dass wichtige Kategorien der eigenen Website möglichst viel Linkjuice abbekommen. Als nächstes soll die linke Spalte im Markup stehen, weil auch diese z. B. eine vertikale Navigation enthält, welche intere Links beihnaltet, beispielsweise Links einer zweiten Navigationsebene. Dann wird der Footer untergebracht, der z. B. weitere inerne Links oder auch Suchmaschinentexte beinhaltet. Suchmaschinentexte sind spezielle Texte, die besonders oft das wichtigste Keyword für die entsprechende Webseite enthalten, damit die Keyworddichte erhöht wird. Ein Suchmaschinentext für diese Seite könnte z. B. so aussehen (Achtung: lesen tut weh): "Man kann mit CSS SEO betreiben. Dabei verwendet man CSS, um für SEO Suchmaschinenoptimierte SEO CSS Seiten zu erstellen. Dabei erreicht man durch ein Zusammenspiel von HTML, CSS und SEO ein SEO freundliches Design. Durch CSS wird SEO möglich, in dem man per CSS die SEO Seiten CSS technisch optimiert, im Sinne von SEO!" Weiterhin soll zunächst das Banner codiert sein, in dem z. B. auch teilweise HTML-Text enthalten sein kann. Zuletzt soll der Header stehen, der Z. B. nur ein Logo und ein Suchfeld beihnaltet. Man baut also sein Markup so auf, dass die Elemente in unserer definierten Reihenfolge gelade werden: 
Das wichtigste steht oben, das unwichtigere steht unten. Markup aufbauen Dem zu Folge müssen wir unser Markup so aufbauen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de">
<head>
<title>SEO CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link href="/css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="content">
<p>Lorem ipsum dolor sit amet consectetuer ut lobortis Duis lacus netus. Vel lacus mi Curabitur suscipit fringilla aliquet sodales Vestibulum Pellentesque montes. Phasellus volutpat a Nam adipiscing sed Phasellus malesuada vel Curabitur justo. Laoreet tellus id adipiscing Praesent nunc ligula id Nulla molestie at. Interdum id est Quisque tempor Sed Fusce tincidunt sollicitudin urna nibh. Nisl congue Nam tellus id malesuada orci ridiculus tortor.</p>
<p>Lorem ipsum dolor sit amet consectetuer ut lobortis Duis lacus netus. Vel lacus mi Curabitur suscipit fringilla aliquet sodales Vestibulum Pellentesque montes. Phasellus volutpat a Nam adipiscing sed Phasellus malesuada vel Curabitur justo. Laoreet tellus id adipiscing Praesent nunc ligula id Nulla molestie at. Interdum id est Quisque tempor Sed Fusce tincidunt sollicitudin urna nibh. Nisl congue Nam tellus id malesuada orci ridiculus tortor.</p>
<p>Lorem ipsum dolor sit amet consectetuer ut lobortis Duis lacus netus. Vel lacus mi Curabitur suscipit fringilla aliquet sodales Vestibulum Pellentesque montes. Phasellus volutpat a Nam adipiscing sed Phasellus malesuada vel Curabitur justo. Laoreet tellus id adipiscing Praesent nunc ligula id Nulla molestie at. Interdum id est Quisque tempor Sed Fusce tincidunt sollicitudin urna nibh. Nisl congue Nam tellus id malesuada orci ridiculus tortor.</p>
<p>Lorem ipsum dolor sit amet consectetuer ut lobortis Duis lacus netus. Vel lacus mi Curabitur suscipit fringilla aliquet sodales Vestibulum Pellentesque montes. Phasellus volutpat a Nam adipiscing sed Phasellus malesuada vel Curabitur justo. Laoreet tellus id adipiscing Praesent nunc ligula id Nulla molestie at. Interdum id est Quisque tempor Sed Fusce tincidunt sollicitudin urna nibh. Nisl congue Nam tellus id malesuada orci ridiculus tortor.</p>
</div>
<div class="clearfloat"></div>
<div id="hauptnavi">Hauptnavi</div>
<div id="spalte_links">Links</div>
<div id="footer">Footer</div>
<div id="banner">Banner</div>
<div id="head">Head</div>
</div>
</body>
</html>
Wir verwenden einen Wrapper-Div. Dies dient später dazu, die Seite zu zentrieren. Man sieht, dass die einzelnen Elemente nacheinander in unserer gewünschten Reihenfolge stehen: - Zeile 12: Der Content
- Zeile 21: Die Hauptnavi
- Zeile 23: Die Linke Spalte
- Zeile 25: Der Footer
- Zeile 27: Das Banner
- Zeile 29: Der Head
In Zeile 19 verwende ich ein Div mit der Klasse clearfloat. Dies brauchen wir später, um den Fluss zu unterbrechen, den wir mit float:right für den Content definieren (später). Ich habe außerdem ein paar Blindtexte eingefügt, um die Situation zu simulieren, dass Text auf der Webseite steht (soll ja gelegentlich vorkommen ;) ) CSS codierenMomentan würde unsere Webseite relativ beschissen aussehen. Da müssen wir was machen: Die Stylesheets für das Dokument erstellen. Der Clou dabei ist, dass wir das so machen, dass die Elemente, die weiter unten geladen werden, wie z. B. Banner oder Hauptnavi trotzdem zum Schluss (also auf der fertigen Webseite) oben stehen. Gundsätzlich ist zu sagen, dass dies relativ einfach durch absolute Positionierung dieser Elemente und durch den Einsatz von Floats erreicht werden kann. Hier zuerst einmal das CSS für die Webseite:
/* Resets */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Ende Resets */
/* Allgemein */
body {
font-size:16px;
}
.clearfloat {
clear:both;
}
/* Ende Allgemein */
/* Grundstruktur */
#wrapper {
background:red;
margin-left:auto;
margin-right:auto;
position:relative;
width:950px;
}
#content {
background:yellow;
margin-top:400px;
float:right;
width:700px;
}
#hauptnavi {
background:blue;
height:50px;
left:0px;
position:absolute;
top:100px;
width:100%;
}
#spalte_links {
background:gray;
left:0px;
position:absolute;
top:400px;
width:250px;
}
#footer {
background:orange;
height:500px;
}
#banner {
background:green;
height:250px;
left:0px;
position:absolute;
top:150px;
width:100%;
}
#head {
background:darkmagenta;
height:100px;
left:0px;
position:absolute;
top:0px;
width:100%;
}
/* Ende Grundstruktur */
Los geht es in Zeile 1 mit CSS Resets. Dabei werden die unterschiedlichen Grundeinstellungen der verschiedenen Browser auf ein einheitliches Niveau gebracht, so dass unsere Webseite nicht in IE, Firefox, Safari und Co. jeweils unterschiedlich aussieht. Die hier verwendeten Resets hat Eric Meyer definiert. In Zeile 67 werden die Styles für den Wrapper definiert. Er wird zentriert und erhält die Eigenschaft position:relative. Dies ist nötig, weil wir einige Elemente im Wrapper absolut positionieren wollen (position:absolute). Das geht aber nur, wenn das Elternelement die Eigenschaft relative hat. In Zeile 75 wird das Div mit der ID content definiert. Es erhält ein margin-top in Höhe von 400px. Die 400 Pixel sind die Summe der Höhen von Head, Hauptnavi und Banner. Diese "schieben" wir dann später in den freien Bereich mit der Höhe von 400px. Mit float:right sagen wir, dass der Content ganz rechts im Wrapper definiert sein soll. Dies ist nötig, da er sonst ganz links stehen würde. Da brauchen wir allerdings noch Platz für unsere Vertikale Navigation (Linke Spalte). Jetzt ist es im Markup auch nötig, dass Div mit der ID clearfloat stehen zu haben, da sonst alle nachfolgenden Elemente automatisch auch rechts an den Content angehängt werden würden. Somit hätten wir das Layout zerschossen und alles wäre kaputt (es würde zumindest für den Laien so aussehen). Dieses Div ist in der Zeile 61 definiert und unterbricht mit clear:both den Float. In Zeile 82 wird die Hauptnavi definiert. Sie bekommt das Attribut position:absolute. Das bedeutet, dass sie beliebig im Wrapper positioniert werden kann. Mit left:0px sagen wir dem Browser (nein nicht der von Mario Kart), dass die Hauptnavi ganz links im Wrapper beginnen soll. Mit top:100px sagen wir ihm, dass oben 100 Pixel Platz sein soll. Da kommt dann der Head rein. Die Linke Spalte kommt in Zeile 91 dran. Auch sie wird ganz links ausgerichtet und per position:absolute in den freien Platz neben den Content gezogen. Der Footer wird in Zeile 99 formatiert. er braucht keine Extrawürste wie Float oder Position irgendwas. Dann folgt das Banner in Zeile 104. Es wird absolut positioniert. Mit top:150px sagen wir dem Browser, dass nach oben 150 Pixel platz sein soll, denn da sollen ja die Hauptnavi und der Head rein. In Zeile 113 definieren wir dann noch den Head. Er wird per position:absolute einfach ganz oben links untergebracht. Das war's. Dieses SEO freundliche Layout funktioniert in Firefox, IE6!!! und sonst allen gängigen Browsern. Es sieht so aus: 
|
Kommentare
Bis morgen.
Gruß,
Daniel
Die Navigationsleis te Links darf nicht länger als der Text sein, da sie sich sonst über den Footer schiebt.
schöner Artikel und um bei "High-End"-Keywords das letzte Quentchen rauszuholen kann das eventuell sogar einen Effekt bringen. Ich persönlich stehe aber nicht wirklich auf absolut positionierte Elemente und finde auch, dass es bei einem Großteil der Unternehmensweb seiten schon fast mit Kanonen auf Spatzen geschossen ist. Da gibt es noch 1000 andere Onpage-Maßnahmen die ich vorziehen würde. Aber trotzdem gut zu wissen wo es steht, sollte man mal CSS SEO brauchen :-)