Верстка «вверх ногами» как часть внутренней SEO-оптимизации

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

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

Для этого и нужна верстка «вверх ногами». Проще говоря, суть этой верстки заключается в том, чтобы основной контент вынести в самый верх кода, а все второстепенное — под него. На первый взгляд, это невозможно, поскольку теряется визуальная структура документа. Однако в 99% случаев такая верстка возможна, нужно просто немного знать HTML и CSS.

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

В HTML эта структура обычно представляется следующим образом, например:

<div id="wrapper">
    <div id="header"></div>
    <div id="content"></div>
    <div id="sidebar"></div>
</div>

Здесь таким образом в коде страницы код шапки будет идти в самом верху, затем код блока с контентом, и после него — код сайдбара. А представьте, что сайдбар был бы слева? Тогда контент в коде был бы в самом низу, близко к подвалу, что не есть хорошо.

Давайте рассмотрим случай первый: представим, что сайдбар у нас помещен слева — и все-все очень плохо. Шапка нагружена, сайдбар — аналогично, таким образом поисковик будет, вероятно, считать информацию в самом низу (т.е. в главном нашем контентном блоке) не особо важной. Переверстаем HTML-структуру следующим образом:

<div id="wrapper">
    <div id="header"></div>
    <div id="content"></div>
    <div id="sidebar"></div>
</div>

Здесь у нас контентный блок идет сразу после шапки, несмотря на то, что сайдбар расположен слева. Чтобы визуально этого добиться, мы должны использовать свойство CSS float. Давайте применим ко всем блокам следующие стили:

#header { position:relative;float:left;width:100%; }
#content { position:relative;float:right:width:500px; }
#sidebar { position:relative;float:left;width:200px; }

Обязательно следует задавать ширину блокам, поскольку без ее определения ничего не выйдет. Свойство float может принимать несколько значений, основными из которых в верстке являются right и left — правая сторона и левая, соответственно. С помощью CSS мы стилизовали блоки HTML таким образом, что контентный блок будет обязательно справа, а сайдбар — слева. Главное — установленная для этих блоков ширина.

Рассмотрим случай второй. Когда нам нужно, чтобы еще и шапка находилась ниже, чем контент. Проще говоря — мы хотим вынести контент в самый верх кода страницы. То есть структура HTML-документа должна будет быть, допустим, такой:

<div id="wrapper">
    <div id="content"></div>
    <div id="sidebar"></div>
    <div id="header"></div>
</div>

В этом случае напишем для блоков следующий CSS:

#header { position:absolute;width:100%;top:0;height:200px; }
#content { position:relative;float:right:width:500px;margin-top:200px; }
#sidebar { position:relative;float:left;width:200px;margin-top:200px; }

Это очень простой пример верстки вверх ногами. С помощью CSS мы стилизовали шапку таким образом, чтобы на странице она позиционировалась абсолютным путем. Задали ширину шапке — 200 пикселей, а также прилепили к самому верху страницы (на всякий случай). Контентный блок и блок с сайдбаром остаются такими же, только к обоим добавили по свойству margin-top, равному 200 пикселей. С помощью этого свойства мы сделали отступ сверху у обоих блоков, равный высоте шапки. Таким образом, визуально документ будет построен так же, как и в первом рассмотренном случае.

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

Тем не менее, это отличный способ улучшить вашу верстку для в качестве неплохого дополнения ко внутренней SEO-оптимизации. Успехом вам!

Читайте также

Создание хорошей внутренней оптимизации и прекрасной индексации поисковых систем Удиви меня, Яндекс! (часть вторая) Яндекс вновь удивил! Горизонтальные блоки Директа