CSS

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

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

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

Если ваш шаблон имеет классическую структуру из шапки, левого сайдбара и футера. То вероятнее всего в HTML документе он выглядит таким образом:
<div id="header">
…Шапка с ссылками…
</div>
<div id="sidebar">
…Колонка с полезной информацией…
</div>
<div id="content">
…Содержимое страницы…
</div>
<div id="footer">
…Контакная информация…
</div>

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

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

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

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

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

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

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

В структуре документа поместить блок content перед блоком header;
<div id="content">
…Содержимое страницы…
</div>
<div id="header">
…Шапка с ссылками…
</div>
<div id="sidebar">
…Колонка с полезной информацией…
</div>
<div id="footer">
…Контакная информация…
</div>

В CSS таблице стилей задать следующие правила:
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; 
    }

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



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

Подписывайтесь на обновления, в скором времени будут еще интересные статьи по верстке.
Добавлено: 13 Сентября 2013 03:07:52 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...