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

Давайте разберемся с CSS оптимизацией вывода информации на сайте, чтобы понравится поисковым роботам.

Вы задумывались, почему одни сайты стоят выше других в поисковой выдаче, думаю да, и один из ответов - оптимизированных сайт, вернее его структура.

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

Посмотрим на стандартную верстку сайта из двух колонок:

вариант 1

Тут робот прочитал контент, потом меню, все верно.

А что делать, если нужно меню поставить слева? Чтобы было так:

вариант 2сайт источник http://yapro.ru Mon Jun 21 2010 14:17:11 GMT+0400

В этом случае робот прочитает меню, а потом контент, тут поисковая оптимизацией уже не пахнет. Но, с помощью CSS можно вариант 1 визуально превратить в вариант 2.

Теперь важный момент, есть 2 варианта решения, на основе резиновой ширины меню и на основе статичной ширины меню, разберемся с каждым из них.

Динамичное меню (резиновая ширина)

Если Вам нужно резиновое меню, то Matthew James Taylor предлагает Вам такойсайт источник http://yapro.ru Mon Jun 21 2010 14:17:24 GMT+0400 шаблон:

Резиновый шаблон на 2 колонки можно посмотреть или скачать »

Кстати, если Вам нужен сайт из трех резиновых блоков, то такой тоже есть:

Резиновый шаблон на 3 колонки можно посмотреть или скачать »

Подсказка: ширина колонок задается в файле screen.css, правилами:

.threecol .col1 { }

.threecol .col2 { }

.threecol .col3 { }

Выше описанные шаблоны поддерживаются в браузерах:

• Firefox 1.5, 2 & 3
• Safari
• Opera 8.1 & 9
• Google Chrome
• Explorer 5.5, 6 & 7

Обратите внимание: ни в одном шаблоне не используются CSS-хаки и expression

Статичное меню (заданная ширина)

В этом случае все не так просто, но решение нашлосьсайт источник http://yapro.ru Mon Jun 21 2010 14:17:30 GMT+0400, я его доработал и теперь хочу поделиться с Вами.

Посмотрите шаблон с статичным меню на 2 колонки, на 3 колонки или скачать оба варианта »

Вся хитрость заключается в указании ширины следующими правилами:

#documentLeft { width:291px; _width:288px;/* для IE6 минус 3px */ }

#documentRight { margin:0 0 0 -291px; float:right; width:100% }

#documentRightInner { margin:0 0 0 291px; }

Подсказка: файл style.css - обнуляющий фрейморк, уверен Вы используете свой.

Для указания шириниы 3-х колоночного шаблона, можете использовать правила:

#myCenter { }

#myRight { }

Данные шаблоны поддерживаются в браузерах:

• Firefox
• Safari
• Opera
• Google Chrome
• Explorer 6 и выше

Обратите внимание: ни в одном шаблоне не используются expression, и только 1 CSS-хак для IE6

Давайте верстать правильно ;)