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

Автор: Aport Пятница, Январь 23rd, 2015 Нет комментариев

Рубрика: Разное

Давайте разберемся с 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, решил поделиться своей заметкой, комментарии в коде:

.leftmenu {
background:#fff;
}
.leftmenu .colleft {
right:75%; /* внешняя ширина правой колонки | R_width_outer */
background:#CCC;
}
.leftmenu .col1 {
width:73%; /* внутренняя ширина правой колонки | R_width_inner ( должна быть меньше чем R_width_outer ) */
left:101%; /* паддинг слева для R_width_inner, рассчитывается как 100% + необходимый паддинг слева */
background-color:#FFCCCC;
}
.leftmenu .col2 {
width:23%; /* ширина левой колонки | L_width_inner */
left:3%;  /* L_margin_rl это сумма левого и правого маржина для L_width_inner. Рассчитывается как L_margin_rl + (L_margin_rl/2) */
background-color:#FFFFCC;
}

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

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

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

А вот еще один парень (Alessandro Fulciniti) подготовил 40 вариантов шаблонов для особо ленивых.

 

Источник: yapro.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты