Только для читателей Lifeexample возможно открыть интернет-магазин на Moguta.CMS со скидкой в 15%

<<< Абстрактный класс php || WYSIWYG html редактор >>>

Контент выше хедера

22.08.2012
Контент выше хедера

Здравствуйте, уважаемые читатель блога LifeExample, перед запуском данного блога я потратил немало времени на внутреннюю оптимизацию страниц, и структуру шаблона.

В то время, я был совершенно зеленый в плане оптимизации сайтов для поисковых систем и интересовался любой полезной информацией направленной в этом русле. В связи с этим, первыми статьями данного блога были статьи о продвижении и оптимизации сайта такие как: Анализ скорости загрузки сайта и Релевантность страницы.

В свете вышесказанного, впитывая как губка, поток информации по SEO продвижению, я наткнулся на один интересный совет, который так и не реализовал на момент выхода данной статьи.

Совет заключался в переносе html блока с контентом, ближе к началу страницы, таким образом, чтобы внешне шаблон оставался таким, каким он есть. Другими словами задача стоит в объявлении блока контента выше хедера.

Для чего делать контент выше хедера

Положение в html документе контента выше хедера, может положительно сказаться на отношении поисковиков к страницам сайта. Все дело в том, что анализируя релевантность страницы, поисковик одним из факторов учитывает положение полезной информации к началу документа.

Если ваш шаблон имеет классическую структуру из шапки, левого сайдбара и футера. То вероятнее всего в HTML документе он выглядит таким образом:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="header">
…Шапка с ссылками…
</div>
<div id="sidebar">
…Колонка с полезной информацией…
</div>
<div id="content">
…Содержимое страницы…
</div>
<div id="footer">
…Контакная информация…
</div>

Чем плох такой шаблон верстки? Сложно сказать, что он совершенно не пригоден, напротив это вполне структурированная и стандартная верстка, но есть один минус. Представьте, что в шапке у вас содержится много полезной информации, ну например анонсы новостей, а в левой колонке полно ссылок и выдержек из других сайтов или даже из своего. В таком случае полезное содержание страницы в блоке content будет расположенно далеко от начала документа, практически в его конце.

Посмотрев на это дело, поисковик может решить, что акцент страницы сделан на информацию, идущую до начала контента. И никак не отметит релевантность действительно важной информации.

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

С другой стороны, наверняка поисковой робот анализирует совокупность страниц сайта, и выделяет для себя ту область, которая индивидуальна для каждой страницы сайта, т.е. блок content, а в последствии, ведет анализ уже именно по нему, отбрасывая не нужные элементы верстки.

Как бы там ни было задача переноса контента ближе к началу страницы, может все же быть обоснованной одним из 400 факторов релевантности яндекса и порядка 250 факторов у гугла. Эти цифры были услышаны мной на одном из интервью сео специалиста на megaindex.tv.

Как вывести content до блока header

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

Все, что необходимо сделать для переноса приближения хедера к началу страницы, это выполнить ряд простых операций:

  1. В структуре документа поместить блок content перед блоком header;
1
2
3
4
5
6
7
8
9
10
11
12
<div id="content">
…Содержимое страницы…
</div>
<div id="header">
…Шапка с ссылками…
</div>
<div id="sidebar">
…Колонка с полезной информацией…
</div>
<div id="footer">
…Контакная информация…
</div>
  1. В 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
28
29
30
31
32
33
34
35
36
37
38
39
40
html,body{ height:100%; width:100%; padding:0; margin:0;}
    #wrap{
    position:relative;
    width:960px;
    min-height:100%;
    height:50%;
    height:auto !important;
    margin:0 auto;
    }
    #content{
    position:relative;
    width: 760px;
    float:right;
    min-height:50%;
    height:50%;
    height:auto !important;
    margin-top:110px;
    background:#E7FFE5;
    }
    #header{
    position:absolute;
    top:0px;
    height:110px;
    background:#C9E0FF;
    width:960px;    
    }
    #sidebar{
    float:left;
    width:200px;
    margin-top:110px;
    height:50%;
    background:#FFBFC3;
    }
    #footer{
    float:left;
    clear:both;
    width:960px;
    background:#4DB588;
    height:100px;
    }

В итоге должен получиться такой каркас страницы:

Переносим контент выше хедера

Скачать исходник ( Скачали: 203 чел. ) 

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

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

Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.

Нравится

Комментарии

  • Юрий

    Спасибо, про СЕО такую штуку знал… и делаю контент после хеадера.
    Но вот чтоб делать это перед ним.. это нужно еще потестить на кросбраузерность!

  • Роман

    Хм… Особо не задумывался об этом никогда, но обязательно надо замерить позиции и провести опыты. И ведь правда — робот видит одинаковое начало всех страниц, т.е. — неуникальность. Особенно если в сайдбарах куча блоков с одинаковой инфой.

  • Александр Чирков

    Действительно ценная статья и простое, лаконичное решение!
    Но только хочу подчеркнуть, что на маленьких сайтах или блогах это бесполезно. Там не так велика загрузка второстепенной информацией. А вот в случаях, когда, например, в сайдбаре есть каталог продукции (на 200 ссылок), это просто гениальное решение!
    Я сегодня же сообщу об этом варианте нашим программистам.

  • Алексей

    Робот выделяет базовый шаблон отдельно а уникальный контент отдельно, статья актуальна только для сайтов с малым количеством страниц. Если страниц больше 20, позиционирование блоков уже не имеет значение

  • Альфира

    Я не думала, что все так просто! Спасибо Вам огромное!!! Давно искала способы поднять текст наверх… У меня еще в шапке слайдер занимает столько места. А так, очень удобно. Еще раз спасибо!!! Вот страница, которую я переделала
    _http://oknatov.ru/index/111/0-97
    Остальные также буду переделывать.

    • Не открывается ваша страница, видимо перестарались с переделыванием 😉

    • Максим

      А почему использовали УКОЗ-овскую платформу!??? Никогда ее не любил! :))

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

    Подписаться на комментарии к этой статье по RSS

    Яндекс.Метрика