SEO-Layout mit XHTML und CSS

04.11.2012

Immer wieder taucht die Frage auf, wie ein suchmaschinenfreundliches Layout erstellt werden kann. Dabei ist die Erstellung eines SEO-Layouts denkbar einfach.

Mit ein wenig CSS und absoluter Positionierung lässt sich ein solches Layout sehr sehr schnell und einfach erstellen.

Natürlich ist der hier aufgezeigte Weg nur einer von vielen und soll wirklich nur Anschauungszwecken dienen. Denn letztendlich ist dieses hier vorgestellte Layout nicht unbedingt für den Produktiveinsatz geeignet. Denn es werden feste Höhen verwendet, was somit in einem Textumbruch mündet, sollte mehr Inhalt eingefügt werden, als die Höhe des Layouts definiert wurde.

Wie geataltet man ein SEO-Layout

Wie geschrieben soll auch nur der Weg aufgezeigt werden, den man nutzen kann, um ein suchmaschinenfreundliches Layout zu gestalten.

Aber das führt uns auch wiederrum zur Frage, weshalb dieses Layout SEF ist?

Die Beantwortung liegt in der Art, wie Suchmaschinen Inhalte vorfinden (möchten).

Die relevanten Inhalte sollten immer am Anfang der Seite stehen, wohingegen die “unwichtigen” Inhalte an das Ende der Seite verschoben werden können. Der sich wiederholende Bereich dees Footers oder des Headers sind nicht wirklich informativ. Wichtig für ein optimales Ranking sind demzufolge die eigentlichen Textinhalte.

Diese sollten somit für eine Suchmaschine als erstes präsentiert werden. Daher wurde in diesem Layout der eigentliche Inhaltsbereich -div#content- an den Anfang der Seite verschoben.

HTML Elemente eines SEO-Layouts

Optisch hingegen ist die Reihenfolge Header-Menue-Sidebar-Content-Footer. Regulär würde die Abfolge der Elemente, wenn man sich strikt an die Umsetzung wie im HTML vorkommend hält, nicht gerade für Suchmaschinen die Inhalte optimal präsentieren, da als erstes der “unwichtige” Header, dann die ebenfalls auf allen Seiten identische “Naviagtion” folgen, die ebenso wenig hochwertige Inhalte enthält. Lediglich der Hauptinhaltsbereich und eventuell die Sidebar enthalten die für die Indexierung durch Suchmaschinen relevanten Inhalte. Und genau diese sollten am Anfang der Seite, vielmehr im Quelltext stehen. Mit ein wenig CSS lässt sich dies überaus leicht umsetzen.

Das HTML dazu sieht wie folgt aus:

<!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" lang="de">

<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<title>Suchmaschinenfreundliches Layout mit XHTML und CSS</title>

<meta name="description" content="Beschreibung der Seite, welche als Snippet in den SERP's ausgegeben wird" />

<meta name="keywords" content="Schlüsselbegriffe" />

<meta name="author" content="Internetagentur Löwenstark" />

<link rel="stylesheet" href="seo-layout.css" type="text/css" />

<link rel="copyright" href="#footer" />

</head>

<body>

<div id="wrap">

<div id="page">

<div id="content">Inhaltsbereich der Seite</div><!-- /div#content -->

<div id="sidebar">Sidebar</div><!-- /div#sidebar -->

</div><!-- /div#page -->

<ul id="menue">

<li><a href="#" title="Beschreibung des Links">SEF-Linktext</a></li>

<li><a href="#" title="Beschreibung des Links">SEF-Linktext</a></li>

<li><a href="#" title="Beschreibung des Links">SEF-Linktext</a></li>

<li><a href="#" title="Beschreibung des Links">SEF-Linktext</a></li>

</ul><!-- /ul#menue -->

<div id="header">

<h2 id="logo">Logo</h2>

</div><!-- /div#header -->

<div id="footer">

<address><a href="http://www.loewenstark.de/" title="Full Service Agentur Löwenstark- Internetprogrammierung,Suchmaschinenoptimierung,Onlinemarketing,CMS,Blogs">Agentur Löwenstark</a> • Georg-Westermann-Allee 18 • 38104 Braunschweig</address>

<p>© 2010 • L.König</p>

</div><!-- /div#footer -->

</div><!-- /div#wrap -->

</body>

</html>

 

Das CSS dazu ist ebenso denkbar einfach. Beachtung sollte hier wie gesagt die absolute Positionierung finden. Diese ist wie bereits erwähnt zwar nicht unbedingt (in diesem Beispiel zumindest!) für den Einsatz auf einer Produktiv-Seite geeignet, aber als Anschauungsobjekt dennoch sehr gut geeignet.

* {font-size:100%;padding:0;margin:0;list-style:none}

html {height:101%}

body {font:normal normal 62.5%/1.6em Verdana,"Trebuchet MS",Tahoma,Arial,sans-ser

div#sidebar {position:absolute;top:130px;left:0;height:300px;background:#af0;width:200px;}

ul#menue {position:absolute;top:100px;height:30px;background:#fff;width:100%;}

ul#menue li {display:inline;padding-left:15px;}

ul#menue li a {display:inline-block;margin-top:8px;color:maroon;text-decoration:none;font:bold normal 1.1em/100% Verdana,Arial,sans-serif}

ul#menue li a:hover {color:#f90}

div#header {position:absolute;top:0;left:0;width:100%;height:100px;background:#a1a1a1;}

div#header h2#logo {position:absolute;top:20px;left:30px;font-size:2.2em}

div#header h2#logo:hover {cursor:help;text-decoration:underline;color:maroon}

div#footer {position:absolute;top:430px;left:0;width:100%;height:50px;background:#de4;text-align:center;padding-top:20px;font-weight:bold;}

div#footer address {font-style:normal}

div#footer a, div#footer a:link, div#footer a:visited {color:maroon;text-decoration:none}

In einem weiteren, später folgenden Beispiel zeigen wir dann die Erstellung eines flexiblen Layouts auf, welches auch für Produktiveinsötze verwendet werden kann. Hier alss soll es wirklich nur um die Darstellung zum Verständnis gehen! Bitte beachten Sie das also. Erweitert wird dann das Ganze noch durch die Verwendung von HTML5 und CSS3, was zwar leider noch lange nicht von allen Browsern verstanden und interpretiert werden kann. Aber mit den immer weiter entwickelten Browser-Generationen ist der Support von sowohl HTML5, als auch CSS3 immer besser, sodass schon bald der vollen Verwendung der beiden neuen Sprachen nichts mehr im Wege stehen sollte. Lediglich der Intern Explorer benötigt mal wieder seine “Extra-Wurst…

Aber auch dazu in einem späteren Beitrag mehr Informationen und Hintergrundwissen.

Weitere Artikel:

Google-Adwords | 18.10.2017

Bereits zum fünften Mal veranstaltet die Löwenstark zusammen mit Google das AdWords Event, zu dem bereits 100 Anmeldungen vorliegen. Ziel des Events ist es, sowohl kleinen als auch großen Unternehmen…

Services | 02.05.2017

Nachdem die Löwenstark Gruppe vor fünf Jahren seinen zweiten Standort Halle (Saale) gegründet und bis zum jetzigen Zeitpunkt erfolgreich auf Wachstumskurs bringen konnte, expandiert das Unternehmen weiter in einer strategisch…

Google-Adwords | 27.04.2017

Bereits zum dritten Mal durften die SEA-Experten aus unserem Löwenrudel zu Gast bei Google in Hamburg sein. Marcel Krüger, Teamleiter SEA der Löwenstark und Martina Gallova, Google Agency Development Manager…