Поисковая оптимизация на странице средствами CSS

Поисковая оптимизация на странице средствами CSS

Как-то разрабатывая очередной макет для блога, услышал совет от своего коллеги, активного SEO'шника, что дополнительные колонка(и) на блогах всегда(!) должна быть справа. Обусловлено это тем, что при анализе страниц поисковые боты быстрее доберутся до заголовка и ценного контента статьи, а уж потом им на пути попадется информация из меню, тексты комментариев, реклама и ссылки на архивы и т.д. В общем, поисковая оптимизация.

Конечно, логика во всем этом есть, но мне как дизайнеру хочется, чтобы дизайнов у блогов было много и разных, с левыми и правыми колонками. Поэтому, чтобы все были довольны, и дизайнеры и боты, предлагаю решить эту совсем даже не проблему с помощью CSS.

Допустим, у нас есть макет сайта с шапкой, двумя колонками и подвалом:

Пример расположения блоков в шаблоне

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

XHTML-код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="container">
	<div id="header">
		<p>Это шапка сайта</p>
	</div>
	<div id="content">
		<p>Колонка с контентом, которая должна быть слева, но я хочу чтобы она была справа.</p>
	</div>
	<div id="sidebar">
		<p>Колонка для навигации, архивов, рекламы и прочих прибамбасов. Должна была быть справа...</p>
	</div>
	<div id="footer">
		<p>Подвал</p>
	</div>
</div>

CSS-код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#container {
	width: 800px;
	border: 1px solid #000;
}
#header {
	width: 800px;
	height: 50px;
	background: #B9D3FB;
}
#content {
	width: 500px;
	height: 400px;
	background: #fff;
	float: right;
}
#sidebar {
	width: 270px;
	height: 400px;
	float: left;
	background: #DBEAF0;
}
#footer {
	clear: both;
	width: 800px;
	height: 50px;
	background: #B4BCC6;
}

Теперь можно перезагрузить страницу и полюбоваться результатом. Работает в IE6-7, Opera 9, Mozilla 2.

Чтобы <div>...</div> поменяли свое расположение (левый стал правым, а правый — левым), я просто дописал каждому противоположное свойство float (левому — right, правому — left).

Таким образом, я изменил расположение колонок на странице, не изменяя XHTML-код страницы и сохранив дерево документа в первоначальном виде. При индексации боты получат свой контент, а дизайнер может радоваться, что его не ограничивают какими-то рамками и рисовать колонки, где ему захочется.

Страницу с рабочим примером можно посмотреть тут.

Если такой подход, слегка доработать, то на выходе можно получить не только двухколоночный макет, но и трех- , и четырех- и сколько-хотите-колоночный.

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Есть что сказать?