Поисковая оптимизация сайта через 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 шаблон:

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

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

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

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

Резиновый шаблон на 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

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

Оценка статьи:
  • 2,10
Оценили человек: 2
  • Facebook
  • Tweet This

Похожие статьи:


Комментарии посетителей:
  • :-) (yea) :-O :^) Восхищён Вами!!!! Спасибо, что Вы есть!!!
    30 июня 2010, 20:43 карма: [+] [-] # виталий4162

Предложения и пожелания:
Ваше имя: Ваше E-mail:
Введите изображенные цифры:
Captcha
 
Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

HTML (16)

CSS (32)

PHP (17)

MySQL (11)

JavaScript (42)

Flash (6)

XML (3)

Apache (36)

Дизайн (29)

Продвижение (23)

Программы (21)

Unix (9)

Интересное (6)


Справочники и учебники:

Новые заметки:

Подгрузка нужного контента других страниц

Автоматическая валидация, исправление и подсказки при заполнении форм

Удобные формы заполнения, какие они?

Отличный видео-ряд креативного агентсва 1md.be

Поисковики удивляют своей правильностью

Анимация сайта на бумаге и полотне

Факторы ранжирования в Google и Bing

Обсуждения на форуме:

Контактная форма обратной связи

Как поменять TITLE и Имя нужной странице форума

Блокировка отправки личных сообщений по слову или фразе

ПОМОГИТЕ МНЕ!!!

Множественные теги

Список ссылок на самые новые страницы сайта

Выводим все дочерние разделы и подразделы указанного раздела



При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2010 YaPro.Ru


Главная » Веб-мастеру » CSS »
Главная О нас Скачать Документация Плагины Форум Новости Веб-мастеру Контакты