RkBlog

Hardware, programming and astronomy tutorials and reviews.

Rozmieszczenie elementów strony pod wyszukiwarki

  1. RkBlog
  2. PL
  3. Programowanie
  4. Frontend
  5. Tworzenie stron

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

RkBlog

Podstawy tworzenia stron www, 14 September 2009, Piotr Maliński

Comment article