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

.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 вариантов шаблонов для особо ленивых.

Оцени публикацию:
  • 12,53
Оценили человек: 12

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

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


Комментарии посетителей:
  • :-) (yea) :-O :^) Восхищён Вами!!!! Спасибо, что Вы есть!!!
    30 июня 2010, 16:43 коммент полезен : 0 # виталий4162
  • Некоторые для поисковой оптимизации меню закрывают в noindex (сквозные ссылки вредят seo-оптимизации)
    15 февраля 2011, 14:15 коммент полезен : 0 # Maxilo
    • Не правы Вы больше от части чем полностью, но не правы. Это из отряда "страшных мифов" которые никто не подтвердил на практике. Если на страницу А ссылается ссылка Б, то ссылка Б не активна на странице А, следовательно, это не сквозняк!

      Я чочти уверен, что боты гугла и яши ох какие не тупые и хорошо понимают, что им хотят замулить глаза спрятав ссылки меню и прочиую хню в ноиндекс
      15 февраля 2011, 15:11 коммент полезен : 0 # Гость
      • "Если на страницу А ссылается ссылка Б, то ссылка Б не активна на странице А, следовательно, это не сквозняк!" )))
        Лишь бы вы сами это поняли...
        А ссылка закрытая в ноиндекс не индексируется. Есть возражения?
        Боту гугла, кстати, ноуиндекс до фонаря.
        05 апреля 2012, 16:13 коммент полезен : 0 # Maxilo (гость)
  • Очень полезный сайт, спасибо!! (yea)
    06 апреля 2011, 13:08 коммент полезен : 0 # Александр85
  • Зачем в статье "Поисковая оптимизация сайта через CSS" парить какие-то простейшие каркасы щаблонов?!
    Из всей статьи  есть только 1 достойная строчка "поисковые роботы читают код сайтов сверху вниз, то более важным они считают то что находится сверху". Всё остальное - х..ня. Перечитал всю стаью и зря потратил время.
    22 сентября 2011, 08:12 коммент полезен : 0 # Лёха1
    • похоже Вы ничего не поняли, т.к. в статье показано что визуальное представление не является действительным, таким образом пользователь видит правильный каркас, а поисковые роботы видят сразу нужный текс
      22 сентября 2011, 08:14 коммент полезен : 0 # Admin
  • Всё нормально админ,всё по делу.
    Скачал трёхколоночный макет,доработал,натянул на MODX.Всё как надо.
    05 апреля 2012, 13:25 коммент полезен : 0 # Dsniff
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

youtube.com/watch?v=7hFivbgIEqk

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

Главная » Веб-мастеру » CSS »