Это вольный* перевод замечательной статьи по улучшению SEO-характеристик верстки страниц.
Ребята провели ряд экспериментов по определению зависимости любви поисковиков и расположения контента в коде. И предлагают ставить его как можно выше. В статье сказано, что поисковики любят «хватать» верхнюю часть разметки. Если я правильно понял, это какие-нибудь быстрые роботы. Основательно индиксируя поисковик все равно берет страницу целиком, но это происходит реже.
Итак, обычно мы имеем, что-то типа такого:
<body> <div id="header"> </div> <div id="container"> <div id="content"> </div> <div id="sidebar"> </div> </div> <div id="footer"> </div> </body>
И хорошо, если sidebar идет после content, а то всякое бывает. Выглядит это, например, так:
И будет круто, если наш код будет выглядеть вот так:
Для этого сделаем такую разметку:
<div id="main" class="container"> <div id="content"><!--Unique Content--></div> <div id="header"><!--Header & Top Navigation--></div> <div id="sidecol"><!--Side Navigation--></div> </div> <div class="container"> <div id="footer"><!--Footer--></div> </div>
Затем в бой идет CSS:
#content {
float: right;
width: 685px;
margin: 120px 0 0 0;
padding: 20px;
}
#header {
width: 970px;
position: absolute;
top: 0; left: 0;
}
#sidecol {
width: 235px;
position: absolute;
top: 150px; left: 0;
}
#footer {
float: left;
width: 970px;
}
Посмотрите демо. Чтобы было как там, необходимы еще некоторые фиксы для IE6. Все знают как ими пользоваться, и это зависит от конкретного случая.
#main {
height: 100%;
min-height: 724px;
background: url(stretch.gif) repeat-y;
position: relative;
overflow: hidden;
}
*html #main { height: 724px; overflow: visible;} /*--If content is larger than 724px, IE6 will allow the content to break out of its element--*/
Попробуйте на своих сайтах и оцените эффект. Только не забывайте к оптимизации подходить с умом, чтобы не наломать дров.
UPD
Только запостил, как увидел в ридере еще одну статью на эту тему: Навигация после контента. Здесь автор не вывел контент на самый верх, но убрал громозкую, в несколько уровней вложенности, навигацию за контент, что тоже не плохо, согласитесь.
* Дословно и нет смысла переводить, можно было только вставить картинки и код — и все понятно.
Loading ...
Только недавно про это написать хотел:) До кучи было бы ещё неплохо сюда же вписать table-tricks
ну сюда не обязательно. вполне себе самостоятельная тема
Отлично. Займусь в ближайшее время.
А то у меня сайдбар в коде ДО контента (хоть и расположен справа)
Немного по-другому получилось (шапки нет, но абсолютная позиция не понравилась, так как я центрую содержание)
контейнер:
#center {
border:1px solid #CCCCCC;
width:1000px;
align:center;
background-color:#FFFFFF;
overflow:hidden;
}
#main {
float:left;
width:796px;
background-color:#FFFFFF;
border:1px solid #CCCCCC;
overflow:hidden;
}
#sidebar {
float:right;
border:1px solid #CCCCCC;
width:200px;
text-align:left;
}
.navigation {width: 100%; clear: both}
(низ)
Сандер, ага не круто. а на самом то деле легко его ставить хоть справа, хоть слева, не меняя разметки. а в разметке он должен быть точно всегда после
Сандер, а с абсолютным позиционированием можно отцентровать left:50%; margin-left: -(половина гирины блока)px — ну это только если фиксированая ширина. а если нет, то и js прикрутить можно
Спасибо за качественный перевод
2art расскажите подробнее о том насколько важно для поисковиков расположение контента в коде. Стоит ли это заморачиваться и переделывать шаблоны на сайтах?
Joe, в статье, на которую я ссылаюсь, есть ссылка. там как раз о ключевых словах и расположении контента. правда на английском, но есть ссылка на видео, где Мэт Катс (надеюсь так по русски Matt Cutts) говорит, что положение контента в коде влияет
Да переделывать-то, конечно, стоит. По своим ресурсам заметил разницу в верстке на воздейтствие на SEO. Но вот такой вопрос еще остался для меня загадкой, некоторые вообще ставят контент в коде самым первым дивом! То есть, сразу после идет контент. А потом уже все оформление. И при этом визуально все выглядит очень прилично – контент может быть вообще визуально после большого количества блоков. Как это делают, а?
про это здесь и речь
2 art : спасибо за ответ =)
жалко только что я с английским не дружу ((
ну вообще это вроде давно известно – чем выше контент в коде(!), тем больший вес имеют слова, на pr-cy можно поэкспериментировать в разделе анализа контента. Если есть блоки баннеров и рекламы, ставьте в ноиндекс их, нечего поисковику лишний хлам индексировать, к тому же изменится соотношение контент/ключевики, и опять же вес ключевиков будет выше.
Joe, мож кто переведет, я сам не собирался, но может быть…
Это тема
кстати она же обьясняет почему ссылки в футере наименее предпочтительны. Быть может новые алгоритмы и вовсе будут придавать большое значение положению ссылки на странице?..
и верстка полностью перевернется «сракой» к верху (: но цена то вырастет (:
Спасибо за перевод. Встречал где-то и раньше похожие мысли, но там не было простеньких для понимания примеров. Надо будет взять на будущее на вооружение.
Интересная теория, надо попробывать на на легком движке на подобе зебрума. Обычно получаеться по СЧ не популярным места до 30 дотянуться, а по НЧ в топ 10 выползти.
Интересно будет ли солидный плюс при такой верске.
Такая верстка для поисковиков может и подойдет, но с точки зрения юзабилити – неудобна.
Юлия, чем это неудобна?
Для seo вёрстка будет отличной если w3.org валидатор не находит ни одной ошибки ни в коде ни в css.
Да мне кажется мелочи это всё.. сильно на выдачу влиять не должно
Обычно делаю в таком порядке
хеадр
|
контент
|
сайдбар(ы)
|
футер
Инфа для чайников ))).
Sylfer – согласен! На выдачу влияют совершенно другие факторы.
А это все оптимизация процессов формирования страницы
Смысл в такой верстке есть, и не потому что поисковики любят то что сверху, просто если хост тормозит, то страница не успевает догрузиться, до того как робот разорвет соединение. Поэтому если контент сверху, он все равно его проиндексирует.
Я извиняюсь перед автором, и вижу, что статье уже более полугода, но не могу не отметить, что это самое бездарное исполнение, которое только можно представить…
Во-первых, хотя вы и пишите, что «все и так понятно», но в css почему-то упускаете задать статичную высоту для header’a = margin-top для content’a, хотя на демке именно так и сделано, но здесь почему-то этого нет, хотя по сути это одно из самых важных ограничений в подобного рода верстке. Говоря о СЕО-верстке это стоит упомянуть в самом начале. В ней всегда должна быть известна высота хедера (я по крайней мере других реализаций не знаю)! Я думаю, это далеко не всем понятно… А реализация так вообще – УГ, «на один раз», шаг влево – шаг вправо – расстрел, все на абсолютах (хотя по сути нужен только 1), и еще и с хаками под ИЕ даже в настолько простом примере… Ознакомившись с демкой, вижу, что у вас в статье вообще половина жизненно-важного css опущена, т.е. в статье ценными остаются только картинки, а с тем «кусочком» css, что у вас выложен, футер ваш тупо будет болтаться под хередром между прочим. В примере для класса container НАПИСАН css!
Во-вторых, намного резонее было бы задать 1 раз padding-top: 120px для id=»main» и ему же прилепить position: relative, а колонки обернуть в еще 1 див. При этом отпадает необходимость лепить абсолюты на sidecol и content, достаточно float’oв и можно теперь даже задать % ширину: на случай, если мы банально увеличим/уменьшим ширину id=»main» внутри все красиво перерисуется. Правда для внутренних оступов внутрь колонок прийдется положить еще по диву, но это плата за большую универсальность.
Лично я изначально ВСЕГДА ВСЕ оборачиваю в 1 див на случай: если вдруг понадобится чуть варьировать с шириной сайта это всегда пригодится, и задаю этому диву релатив. Далее в нем обернутые в еще 1 див колонки с флоатами, футер и абсолютноспозиционированный хедер. И все. Делов на 3 минуты, но намного удобнее и пространства для маневров больше. Пора бы и у себя в блоге об этом статью написать, а то вижу, что многие вопросом не владеют даже наполовину…
Про футер напутал! Не увидел часть разметки. Он у вас обернут. Нормально все будет, на своих местах )
высота – это как раз то, что и так понятно.
не разжевал тут все, конечно, не для новичков. здесь передана главная мысль, а не готовая работающая верстка.
Возьму на заметку.