Legosp Forum
Shop-Script "Legosp" => Продвижение => Тема начата: Al_Uk от Февраля 26, 2012, 06:49:39 pm
-
Недавно матерые сеошники из нашей конторы озадачили темой "Seo верстка".
Говорят, мол крупнейший интернет магазине Розетка применяет, и все крупные магазины применяют, и запад давно уже так делает.
Знают что то, видимо, сильные мира сего. Нужно сделать и нам!!
В чем принцип SEO верстки?
Основной принцип в том, что весь основной контент на странице товара или категории выносится вверх html документа, а колонки левые и правые, шапка и подвал сайта ствятся вниз.
Делается это для того, чтобы поисковики сканируя страницу, первым делом видели текст, а потом уже остальные блоки, рекламу и пр.
В инете есть достаточно много материалов на тему SEO верстка.
Предлагаю обсудить тут важность или бесполезность данной структуры шаблона
На глаз, увидеть Seo версткуу можно на том же сайте Розетки, зайдя, например в категорию "ноутбуки".
Если интернет медленный, то сперва мы увидем, как подгружается текст описания категории, а потом товары категории, и другие блоки. Когда страница сформирована, видим, что текст категории находится на самом деле, внизу. Туда он выводится посредством подключения CSS стилей.
Сеошники утверждают, что поисковики активно ранжируют первые 100 килобайт страницы. До остального контента, якобы, поисковики, иногда и не добираются, или добираются со второй или третей попытки.
Как и все в SEO, это на уровне домыслов, и так называемого "экспертного мнения".
Меня эта тема заинтересовала и решил поделиться мыслями на форуме.
-
для начала, думаю стоит изменить страницу категории.
Наша задача сделать валидный макет, поддерживаемый всеми браузерами начиная от IE6 и заканчивая Оперой и Хромом.
Теоретически, при верстке, желательно бы отказаться от использования таблиц при выводе товаров в категории в пользу Div блоков.
Таблицы, по некоторым оценкам, тормозят подгрузку страницы на 100-200% если сравнивать с DIV версткой. Это связано со сложность расчета таблицы, и если таблица большая, то контент не выводится, пока вся таблица не загружена браузером..
Но непонятно, тогда как оставить при этом возможнасть отображать в товары в две и более колонки через DIV блоки. (отображение в таблице как я понял формируется посредством этог кода
<td style="text-align: center; vertical-align: top; padding: 5px; width: {math equation="x/y" x=100 y=$smarty.const.CONF_COLUMNS_PER_PAGE|string_format:"%d"}%">
Структура HTML документа, на мой взгляд должна быть следующая:
(http://i.piccy.info/i7/1b4c87ce8356510e00d7150b5ad3ead0/1-5-5108/42860056/2012-02-26_18-59_500.jpg) (http://piccy.info/view3/2673094/30b6ed89fbe7dc98a9d37349932b43ae/)
CSS код должен быть следующий:
(http://i.piccy.info/i7/32271b5cabb0686e502d4ce68ee484e4/1-5-5108/42968037/2012-02-26_19-00_500.jpg) (http://piccy.info/view3/2673095/f5199576a926fc17ab45b8b5c7c36f3c/)
[spoiler]<body>
<div id="wrapper">
<div id="content">
<div id="main-content">
<div class="innerpad">
<div class="content-id">#id: main-content</div>
[Центральная информационная часть страницы]
</div>
</div>
</div>
<div id="left-column">
<div class="content-id">#id: left-column </div>
[Левая колонка]
<ol>
<li>Статья</li>
<li>Статья</li>
<li>Статья</li>
<li>Статья</li>
</ol>
</div>
<div id="right-column">
<div class="content-id">#id: right-column</div>
[Правая колонка]
<ol>
<li>Меню</li>
<li>Меню</li>
<li>Меню</li>
<li>Меню</li>
</ol>
<div class="banner_cell">
[Баннер 1]
</div>
<div class="banner_cell">
[Баннер 2]
</div>
</div>
<br class="clear" />
<div id="header">
<div class="innerpad">
<div class="content-id">#id: header</div>
[Шапка сайта]
</div>
</div>
<div id="footer">
<div class="innerpad">
<div class="content-id">#id: footer</div>
[Подвал сайта]
</div>
</div>
</div>
</body>[/spoiler]
[spoiler]body{
text-align: center;
width: 100%;
}
#wrapper{
text-align: left;
width: 990px;
margin: 0 auto;
position: relative;
}
#content,#header,#footer{
width: 100%;
}
#header{
position: absolute;
top: 0;
left: 0;
height: 300px;
}
#content{
width: 100%;
float: left;
margin: 0;
}
#main-content{
width: auto;
float: auto;
margin: 0;
margin-right: 620px;
}
#left-column,#right-column{
width: 300px;
float: right;
margin: 0;
}
#left-column{
float: left;
}
#both_columns_wrapper{
width: 610px;
float: left;
margin-left: -610px;
}
#content,#both_columns_wrapper{
margin-top: 310px;
}
#header,#footer,.clear{
clear: both;
float: none;
}
#sidebar,#main-content,
#content,#header,
#footer,#wrapper,
#left-column,
#right-column,
#both_columns_wrapper{
overflow: hidden;
}[/spoiler]
-
Но непонятно, тогда как оставить при этом возможнасть отображать в товары в две и более колонки через DIV блоки. (отображение в таблице как я понял формируется посредством этог кода
можно пробовать так:
<div>
{section name=i1 loop=$products_to_show max=$products_to_show_count}
{if $smarty.section.i1.index is div by $smarty.const.CONF_COLUMNS_PER_PAGE}<div style="text-align: left; float:left; width: {math equation="x/y" x=100 y=$smarty.const.CONF_COLUMNS_PER_PAGE|string_format:"%d"}%">
{/if}
{include file="product_brief.tpl.html" product_info=$products_to_show[i1] options=$options}
{if ($smarty.section.i1.index+1) is div by $smarty.const.CONF_COLUMNS_PER_PAGE} </div>
{/if}
{/section}
</div>
но придется ставить фиксированную высоту, чтоб не поплыл.
-
фиксированная высота будет как раз хорошо, для юзабилити, т.к. блоки все будут одной высоты и стройный текст будет ублажать взгляд покупателя..