Rozmieszczenie elementów strony pod wyszukiwarki
Optymalizacja rozmieszczenia elementów strony przyjazna wyszukiwarkom
Na blogu sohtanaka.com opisano ciekawy przykład zastosowania CSS do optymalizacji kodu XHTML strony pod wyszukiwarki. Dzięki opływaniu i absolutnym pozycjom poszczególnych bloków strony można w kodzie XHTML strony najpierw umieści unikalną treść, a dopiero po niej nagłówek, boczną kolumnę i stopkę. Oto przykład:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title>SeoLayout</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="main" class="container">
<div id="content">treść</div>
<div id="header">nagłówek</div>
<div id="sidecol">nawigacja</div>
</div>
<div class="container">
<div id="footer">stopka</div>
</div>
</body>
</html>
#content {
float: right;
width: 80%;
margin: 100px 0 0 0;
padding: 20px;
background-color:green;
}
#header {
width: 100%;
position: absolute;
top: 0; left: 0;
background-color:red;
}
#sidecol {
width: 15%;
position: absolute;
top: 100px; left: 0;
background-color:teal;
}
#footer {
float: left;
width: 100%;
background-color:yellow;
}
Wyszukiwarka indeksując stronę trafi od razu na unikalną treść danej strony naszego serwisu, co może pozytywnie wpłynąć na pozycję w wynikach wyszukiwania. Autor odnotował wyraźną poprawę dla serwisu stosującego bardzo rozbudowany szablon, design. Dla stron o zwięzłej ilości kodu efekt może być niezauważalny. Warto też przeczytać komentarze pod oryginale, gdzie kilku użytkowników podzieliło się wynikami wdrożenia rozwiązania tego typu