SEO верстка: первый шаг в продвижении блога

Оптимизация сайта всегда начинается с внутренней структуры. Сейчас мы займемся первым этапом этого процесса – созданием верстки, которая будет одинаково «приятна» и для пользователей, и для поисковых ботов.

Идея состоит в том, чтобы как можно выше в теле html-документа разместить контентную часть. В частности, до вывода шапки сайта. Читатели прежде всего приходят за информацией, но в большинстве случаев им приходится ждать загрузки тонны графических рюшечек в header`е перед тем как эту информацию они получат.

В качестве объекта эксперимента рассмотрим стандартный двухколоночный макет, наиболее подходящий для ведения блога. На рисунке ниже схематично показано то что должно получиться, цифрами обозначен порядок следования блоков в html

Код документа:

<!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="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="styles.css" type="text/css" rel="stylesheet">
<title>Test</title>
</head>
<body>
<div id="main">
	<div id="container">
		<div id="content">
			Контент
		</div>
		<div id="sidebar">
		</div>
		<div class="clear"></div>
	</div>
	<div id="header"></div>
	<div id="footer"></div>
</div>
</body>
</html>

CSS:

* {margin:0; padding:0;}
#main { margin:0 auto 0 auto; width:980px; position:relative;}
#header { height:200px; width:980px; position:absolute; top:0; left:0;}
#container { position:relative; padding:20px; width:940px; top:200px; }
#sidebar { position: relative; width: 210px; float: right; }
#content { position: relative; width: 700px; float: left; padding:0 10px; }
#footer { height: 120px; width:980px; position:relative; top: 200px; }
.clear {clear:both; line-height:0; height:0; font-size:0;}

    Каким образом добились нужного результата:

  1. #main определяет контейнер всего сайта, его ширину, и выравнивание по центру. Свойство position:relative позволит внутри него абсолютно позиционировать блоки
  2. Блок #container идет первым в структуре, поэтому, для того чтобы оставить место под шапку, он смещен относительно своего статического положения на ее высоту, в данном случае на 200 пикселей — top:200px;
  3. Внутри #container плавающими элементами размещены контентная часть и сайдбар. Описывать не буду, делать это все давно и успешно умеют:)
  4. #header спозиционирован абсолютно по отношению к самому верхнему блоку #main свойствами top:0; left:0, что позволило ему быть выше контентной области при просмотре сайта, и ниже по коду html
  5. #footer в особых комментариях не нуждается, единственное что он тоже смещен по вертикали на 200px. Это необходимо, т.к. в исходном потоке документа #container находится выше своего реального положения (подробнее читайте про position:relative)
Если вам понравилась статья, подписывайтесь на обновления блога по rss или присоединяйтесь в twitter

Поделиться ссылкой с друзьями:

Метки: ,

Категории: Css

Комментарии (6)

  1. Ценный материал. Кроме того, если все сделать грамотно, то и для ранжирования будет толк, так поисковика нравится когда не нужно много кода пройти чтобы добраться до контента.
    А кстати на сколько реально что-то изменить у же готовом шаблоне.

  2. Все зависит в первую очередь от шаблона и того как его сверстали. Может будет проще переделать снова, а может и достаточным окажется добавить пару строк в css и перенести шапку ниже по коду.

  3. Это применимо к Блоггеровским шаблонам? Или — только к WP?

  4. Это общий принцип, по которому можно сверстать. А из верстки можно сделать шаблон для любого движка.

  5. Этим методом уже давна пользуются. Так что Америку Вы не открыли. Хотя кто не знал этот способ материал полезный да и для новичков тоже.

  6. Спасибо хороший материал. Сайт супер нашел много полезного для себя, спасибо админу!