SEO верстка: создаем SEO оптимизированный layout

Вторник, 20 Янв 2009 16:01

Работая в компании, где SEO уделяют достаточно большое внимание, мне хочешь – не хочешь, а пришлось научиться писать сайты так, чтобы они были, я бы сказал, “SEO благоприятны”, то есть чтобы в верстке уже был заранее заложен немалый потенциал для дальнейшей раскрутки сайта. Что такое SEO верстка и вопросы, связанные с семантикой я рассмотрю в следующих статьях, а сейчас поговорим о том, с чего начинается эта самая SEO версткао правильном layout'e сайта.

Ни для кого ни секрет, что в кругах SEO-шников бытует мнение о том, что чем ближе ключевые слова к началу кода html-документа, тем выше их вес в глазах поисковиков. Заметьте, я сказал, «чем ближе к началу кода html-документа», а ни «чем выше они на странице», «чем ближе они к верхней границе страницы» и т.п.

Принципиальная разница здесь заключается в том, что на html-странице ключевые слова должны быть размещены в четко отведенном для них месте (чаще всего это центральная/правая/левая колонка), тогда как в коде они должны находиться именно в его начале! Уже почувствовали разницу? Еще нет? Тогда идем дальше.
Допустим, дизайнер нарисовал нам двухколоночный layout приблизительно такого содержания:

seo-оптимизированная верстка

seo-оптимизированная верстка

Сразу оговорим, что хедер не предназначен для размещения ключевых слов. Если же это не так (как, например, на портале http://101.ru/, где ключевые слова расположены как раз в хедере и свернуты в таб) вопрос SEO оптимизированной верстки отпадает сам собой. Желательно также, чтобы мы заранее знали высоту хедера, что в большинстве случаев как правило выполняется. Под SEO оптимизацию в нашей верстке рассчитан будет именно main-column, как это зачастую и бывает.

Первое, что приходит на ум, типичная схема верстки типа: wrapper -> header -> sidebar ->main-column ->footer, по которой код html-документа будет выглядеть следующим образом:

1
2
3
4
5
6
7
8
<body>
<div id="wrapper">
<div id="header"></div>
<div id="sidebar"></div>
<div id="main-column">Ключевые слова находятся здесь!</div>
<div id="footer"></div>
</div>
</body>

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

Основной вопрос для нас: «Как сделать так, чтобы блок с текстом „main-column“ находился в коде html-документа как можно ближе к тегу <body>, а в идеале вообще шел сразу за ним?»

Даже при минимальных знаниях css догадаться, как поменять sidebar и main-column местами можно. Используем для этого плавающую модель и свойство float. Для этого поменяем в коде документа main-column и sidebar местами.

1
2
3
4
5
6
7
8
<body>
<div id="wrapper">
<div id="header"></div>
<div id="main-column">Ключевые слова находятся здесь!</div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>

Листинг css в этом случае будет следующим:

1
2
3
#wrapper {margin: 0 auto; width: 1000px;}
#main-column {width: 700px; float: right;}
#sidebar {width: 300px; float: left;}

Таким образом, благодаря свойству «обтекания» (float) мы добились того, что подняли наш блок с ключевыми словами на одну ступень ближе к <body>, что уже неплохо и является минимальным использованием SEO верстки. При этом визуальное его расположение на странице не изменилось.

Но не будем останавливаться на малом и пойдем дальше. На данной стадии наш вопрос заключается в следующем: "Как сделать так, чтобы main-column все-таки был в коде первым после <body>.

Вот тут-то нам в голову и приходит еще одно отличное свойство называемое position: absolute.

Идея следующая: wrapper делаем релативным (position: relative), чтобы именно относительно его позиционировались все дочерние абсолютно спозиционированные элементы (position:absolute). Header же помещаем в любое место в коде и делаем его абсолютно позиционированным, таким образом он как бы прибьется к верхнему левому углу wrapper'a. Для wrapper'a задаем внутренний верхний отступ равный высоте header'a. Header поставим в нашем листинге перед footer'oм, т.к. для пользователя приоритетней как можно быстрее отобразить на странице именно элементы header'a, а не footer'a. Остальной листинг не трогаем, и в итоге получаем: wrapper -> main-column -> sidebar -> header -> footer.

В данном варианте header можно всунуть в принципе в любое место — в т.ч. и даже между main-column и sidebar, поскольку он в любом случае позиционируется от верхнего левого угла wrapper. Поэтому, если для вас желательно, чтобы сразу после main-column грузился header, а только потом sidebar и все остальное, то можете так и сделать.

Если footer у вас рассчитан на 100% ширины body, а wrapper — фиксированной ширины, то footer всегда можно вынести и за его пределы.

Листинг итогового варианта:

1
2
3
4
5
6
7
8
<body>
<div id="wrapper">
<div id="main-column">Ключевые слова находятся здесь!</div>
<div id="sidebar"></div>
<div id="header"></div>
<div id="footer"></div>
</div>
</body>

Итоговый css:

1
2
3
4
5
#wrapper {margin: 0 auto; width: 1000px; position: relative; padding-top: 100px;}
#main-column {width: 700px; float: right; background: #a5f0e6; padding: 40px 0;}
#sidebar {width: 300px; float: left; background: #d1e5f1; padding: 40px 0;}
#header {position: absolute; left: 0; top: 0; height: 100px; background: #b0e8f4;}
#footer {background: #b0e8f4; padding: 40px 0;}

Таким образом благодаря SEO верстке мы добились, чтобы в нашем коде наши блоки шли в соответствие с нумерацией на рисунке и, заметьте, не внесли ни одного визуального изменения в html-страницу:

SEO верстка

SEO верстка

Проверено: IE6/7, FF3, Safari3, Chrome.

Резюмируем преимущества данного метода:

  1. Возможный SEO-бонус от поисковых систем.
  2. Удобная очередность загрузки для пользователя: пользователь обращает внимание на header, как правило, всего пару раз, пока не изучит. Дальше же 99% его внимания сосредотачивается именно вокруг main-column, а потому уместно после перехода к очередной странице отображать для пользователя в первую очередь именно main-column, не задерживая его загрузкой header'a, sidebar'a и прочего... Данная верстка именно это и реализует. Пример вы можете видеть на этом самом блоге.
  3. Гибкость: header можно разместить после почти любого блока страницы внутри wrapper, то есть мы можем управлять очередностью загрузки блоков на странице. Если footer у нас 100%, а wrapper — фиксированной ширины, его можно вынести за пределы wrapper'a. То же самое справедливо и по отношению к header'у. Только вынеся его за пределы wrapper'a, мы потеряем возможность разместить его между блоков внутри wrapper'a, и header в любом случае придется грузить последним блоком на странице, но в общем-то это оправданная жертва.
Теги: 

http://blogto4ka.ru

RSS комментариев

25 комментариев Комментировать

  1. анонимус пишет:

    02 Июл 2009 в 11:53 Reply to this comment

    1

    При отключении CSS header будет в самом низу — нормально ли это?

  2. nikolas_sharp пишет:

    03 Июл 2009 в 0:44 Reply to this comment

    2

    В каком плане нормально? ) Это вполне ожидаемо. Как отключается css? Только файлы стилей или также и атрибуты style? Если только файлы стилей — то можно легко увернутся, вписав данный свойства в атрибуты. Если еще и все атрибуты, то можно схитрить, спрятав под абсолютным хедером вариант для отключенных стилей с display: none; В таком случае у вас при отключенных стилях один хедер слетит вниз, а другой проявится на странице... Смотрите сами, что вам нужно, а поведение хедера вполне естесственно.

  3. Leonid пишет:

    13 Авг 2009 в 15:57 Reply to this comment

    3

    Я вообще нетак давно читал статью о том что размещение контента как можно выше неактуально (я только незнаю БЫЛО ЛИ актуально), потому что поисковые роботы ориентированны на то что контент может распологаться ниже навигации. Еще читал на форуме о том что после внедрения специальных тегов поисковики будут ориентироваться на них и анализировать страничку. А вообще стоит ли извращаться так? может лучше делать все аккуратно но в нормальной последовательности как подовляющее большинство? Ведь это все по большему счету домылсы (и то для некторых поисковиков)

  4. nikolas_sharp пишет:

    13 Авг 2009 в 21:22 Reply to this comment

    4

    после внедрения специальных тегов поисковики будут ориентироваться на них и анализировать страничку

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

    А вообще стоит ли извращаться так? может лучше делать все аккуратно но в нормальной последовательности как подовляющее большинство?

    Что конкретно извращенского вы увидели в 4 строках css'a? Пример, по правде сказать, примитивнейший. Ничего сложного и извращенского здесь нет, а выгода от этого есть однозначно! В чем я неоднократно убеждался на практике.

    У меня к вам в таком случае встречный вопрос: а вообще стоит ли пытаться хоть что-нибудь изменить или улучшить? Может все будем делать как подавляющее большинство, потому что мы привыкли считать, что это аккуратно? Или может все-таки начнем учиться и постараемся увидеть чуть-чуть дальше и сделать чуть-чуть больше, чем «подавляющее большинство»? Судя по интеллектуальности вашего комментария, уверен, что именно к подавляющему большинству вы и относитесь.

    Прошу простить за острое обострение критичности... :) Тяжелый день выдался.

  5. Lenskiy пишет:

    14 Авг 2009 в 20:30 Reply to this comment

    5

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

  6. nikolas_sharp пишет:

    14 Авг 2009 в 21:58 Reply to this comment

    6

    Это вы по ходу попали на холиваров табличной/дивной верстки. :) Да, у них раньше там такое было. Сейчас, слава Богу, все тихо, и «табличники» потихоньку изучают дивы.

  7. Anton пишет:

    26 Сен 2009 в 2:32 Reply to this comment

    7

    А как быть с резиновым трехколоночником, плизз помоги, сразу трем людям надо :) очень надо, а ты в этом деле гуру

  8. nikolas_sharp пишет:

    26 Сен 2009 в 2:57 Reply to this comment

    8

    Благодарю за комплимент. Маловато данных даете. В нете полным-полно примеров таких лэйаутов, начиная от проблемного в ИЕ6 при ресайзах окна варианта 3 резиновых колонок с float'ами, и заканчивая более универсальным через отрицательные маргины. Думаю Гугл без труда даст вам готовый пример.

  9. Anton пишет:

    26 Сен 2009 в 15:27 Reply to this comment

    9

    Я уже в гугле обыскался, пример прост есть сайт xoxot.org (DLE) вот с ним то и проблемы, средний блок с контентом съезжает в ИЕ под сайдбары, если ставить его над сайдбарами, то уезжают сайдбары

  10. nikolas_sharp пишет:

    26 Сен 2009 в 16:04 Reply to this comment

    10

    С первого же запроса в Гугле: _http://htmltricks.ru/archives/3. Основные здесь принципы — отрицательные отступы.

  11. Anton пишет:

    26 Сен 2009 в 20:37 Reply to this comment

    11

    У тебя в сайте идет 1м правый сайд а потом левый и центер. У меня задача

    1. чтобы не разезжалось все в ИЕ

    2. Сделать чтобы центер был ближе всего к началу страницы для SEO оптимизиции.

    спасибо за ссылку от гугла, реально искал долго, наверно не правильно сформулировал вопрос при поиске, кстати на _http://xoxot.org/ все сделал в соответствии со статьей, но в ИЕ теперь контент вверху а сайдбары едут и оказываются за ним.

    Огромное пасибо за помощь! :)

  12. nikolas_sharp пишет:

    26 Сен 2009 в 21:28 Reply to this comment

    12

    Теперь яснее, надо было так вопрос сразу и ставить. Значится, теория:

    1. шапку пустить после контента никаких проблем нету, если она фиксированной высоты. Просто делай как в статье. Задай для обертки трех колонок отступ сверху, равный высоте шапки, а шапку пусти сразу за оберткой трех колонок с позишн абсолют на ней. Общая обертка (общая и для шапки и для обертки 3х колонок, т.е. для всего сайта, естественно, релативная). В итоге ты уже чуть подвинул контент наверх кода страницы (опустил шапку в самый конец).

    2. контентную колонку нужно скомпоновать с одной из боковых, а оставшуюся боковую пустить отдельно. Короче, вариант как у меня здесь: blogto4ka.ru/arhangelsk/inner.html тебе вполне подойдет (там, кстати, шапка тоже идет после контента, только про центральную колонку поднятую на самый верх я тогда не думал, поэтому из 3х колонок она последняя).

    В итоге получится схема приблизительно такая: (обертка 3х колонок -> обертка центральной и левой колонки[в ней центральная с float: right, и левая с float: left] + правая самостоятельная колонка с float: right) + footer + header.

    Такая схема вполне реализуема, но поламать мозг с отрицательными отступами прийдется. За пример бери эту страницу blogto4ka.ru/arhangelsk/inner.html — можешь в фаербаге с ней поиграться. Сделал бы рабочий пример, но времени в обрез. Удачи!

  13. Anton пишет:

    27 Сен 2009 в 0:18 Reply to this comment

    13

    Огромное тебе спасибо за помощь, после долгого секса вроде все получилось, как раз фаербагом и пользуюсь :) Теперь вроде все нормально, только есть маленький глюк, когда сдвигаю окно, почему то левый сайд бар начинает наползать на контент, сколько голову не ломал не могу понять почему. Но это мелочи, врятли кто-то будет так сдвигать окно. Еще раз примного благодарен за помощь :)

  14. nikolas_sharp пишет:

    27 Сен 2009 в 0:25 Reply to this comment

    14

    Страшновато выглядит этот прикол с наездом левой колонки :) Чтобы от него избавиться поставь на body min-width: 1000px. Получше будет.

  15. Anton пишет:

    27 Сен 2009 в 2:37 Reply to this comment

    15

    Все поправил, огромное тебе спасибо, завтра буду мучаться с хедером выносить его, но это уже будет попроще :) Еще раз огромное пасиба, скоро создам раздел друзья, оттуда поставлю ссылку на твой сайт, напиши текст анкора

  16. rita пишет:

    03 Авг 2010 в 20:59 Reply to this comment

    16

    А вот что все-таки сеошней, main пускать вперед или меню? Ведь поисковики же как-то выделяют себе меню. может быть, они оценивают текст по его неменюшной части? что они там думают... наверняка же что-то думают по поводу меню

  17. nikolas_sharp пишет:

    03 Авг 2010 в 21:48 Reply to this comment

    17

    Могу предположить, что думают они исключительно по схеме урлов, скажем:

    domain

    domain/category1

    domain/category2

    ...

    Вот слова category1,2 и т.д и будут взяты в качестве меню.

    Main пускать вперед или menu не особо важно. Меню проиндексируется ПС рано или поздно по-любому как вполне себе статичная часть, присутствующая на любой странице, а вот для быстроботов неплохо бы чтобы содержимое статьи было как можно выше, тогда они успеют считать как можно большую часть вашей статьи, учесть большее количество ключей, туда вошедших со всеми вытекающими отсюда последствиями. Но в принципе само по себе меню зачастую занимает так мало кода, что пустить его над main грехом не будет.

    Вывод: делайте как вам удобнее, ошибкой не будет ни то, ни другое. Куда важнее, чтобы main шел раньше сайдбара(ов) и футера :) . Остальное заметных выгод вам не даст.

  18. Сергей пишет:

    15 Сен 2010 в 18:20 Reply to this comment

    18

    Вот теперь всё как по маслу!

    Спасибо за оперативность!

  19. Konstantin пишет:

    30 Сен 2010 в 6:38 Reply to this comment

    19

    Приятная статья. Коротко и понятно.

    У меня следующая ситуация. Тексты, важные для SEO, могут находиться где угодно, в данном случае в Main колонке и в Footer. Сделать, чтобы и то и другое было одновременно выше всего невозможно.

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

    Вопрос, будет ли этот скрипт отрабатывать для поискового бота, в результате чего, бот сверху тоже ничего не увидит.

  20. nikolas_sharp пишет:

    30 Сен 2010 в 11:36 Reply to this comment

    20

    Думаю, если спрятать текст через стили, бот все прекрасно увидит. По экспериментам некого devaka известно, что Google даже индексирует результаты работы js, то есть страница будет храниться в его кеше в виде уже после отработки скрипта. Яндекс не регистрирует результаты отработки скрипта по заверениям того же devaka, но текст, скрытый через css, я почти уверен, он должен индексировать. Проверьте, эксперимент не займет у вас много времени. Как только страница попадет в Индекс Яндекса просто попробуйте найти ее по определенной фразе в скрытом блоке. О результатах, кстати, можете отписать. Удачи.

  21. Some Guy пишет:

    03 Ноя 2011 в 14:08 Reply to this comment

    21

    Статья полный бред. Почему тогда никто так не делает? Потому что придется извращаться с кодом, чтоб всё работало в IE, да ещё вспоминать, где что находится (особенно если поменяется разработчик).

    У известных сайтов: ютуб, википедия, гугл, хедер находится сверху, левая колонка выше в коде чем правая. И всё прекрасно находится без сомнительных seo-трюков.

    К слову сказать, «финальный листинг» с атрибутами style вместо class — вот это точно bad practice. Отмазки в стиле «лень было создать css файл» не покатят.

  22. nikolas_sharp пишет:

    03 Ноя 2011 в 14:21 Reply to this comment

    22

    Так делает сегодня почти каждый, у кого хватает на это ума или знаний. Лично из-под моих рук вышло уже не менее 30 макетов с SEO-структурой для заказчиков от простых блогов до крупных магазов (см. compyou.ru, cooking.ua). Сейчас делаю такую верстку всем ПО УМОЛЧАНИЮ. Извращаться ни с чем не надо, все прекрасно работает в IE6+ или любом другом браузере. Будь вы хоть чуточку в теме (что по верстке, что по seo), то понимали бы, что это задача далеко не того уровня сложности, когда «приходится извращаться» :) . Банальные пару дивов с определенным позиционированием... И вспоминать тоже нихрена не надо, достаточно научиться пользоваться firebug'ом или любым другим подобным ему инструментом, и знать структуру и иерархию шаблонов CMS. Но для вас это, видимо, пока сложно, отсюда и подобный коммент, который, кстати, ПОЛНЫЙ БРЕД.

    К слову сказать, «финальный листинг» с атрибутами style вместо class — вот это точно bad practice.

    Статью писал еще тогда, когда дзен-верстка как понятие в Рунете только-только зарождалось. Сегодня каждый первый умный-умный, да только не тогда, когда на дату поста глянуть надо... Пришло время, переписал по феншую...

  23. Галина пишет:

    27 Ноя 2011 в 20:51 Reply to this comment

    23

    Согласна с автором. Ещё один весомый плюс к такой верстке (может быть он был упомянут и я просмотрела) — это, то что не нужно заморачиваться по «правилу первой ссылки». Можно смело пихать в контент нужные анкоры и не волноваться, что поисковик учтёт только ту ссылку, которая в меню, а ту, что в контенте проигнорирует.

  24. Денис пишет:

    05 Ноя 2012 в 23:19 Reply to this comment

    24

    в ie 6 блок, отражённый через absolute исчезает. Как это исправить?

  25. Morose пишет:

    12 Ноя 2012 в 17:16 Reply to this comment

    25

    Кстати Leonid (коммент Leonid 13 Авг 2009 в 15:57) абсолютно прав. Google и Yandex плевать на эти исхищрения. Они нормально распознают классы и идентификаторы типа header, nav, article, aside и т.д. Как собственно и тэги разметки hmtl5 с такими же названиями.

    Денис, я не знаю что у вас за задача такая. Возможно Вам нужен этот ie6, но пора бы уже забить на ie6 и в некоторых случаях на ie7.

Оставьте свой комментарий о материале
(Комментарии со ссылками попадают на модерацию. Остальные не попадают, но я могу удалять те, которые посчитаю бесполезными, не несущими смысловой нагрузки)