Верстка для поискового робота

alex_storm · 10 июл 2013

Решил написать статью на тему, которая меня сейчас затронула. Большинство продвинутых фрилансеров(опыт работы от 2-х лет) знают, что качество верстки сайта прямо пропорционально влияет на ранжирование в поисковой выдаче. И что в итоге? Мы получаем все те же шаблонные макеты, что и 2-3 года назад. Принцип не изменился, хотя все знают, что нужно делать правильно.
Сегодня я хотел бы поделится небольшими знаниями и опытом по оптимизации верстки дефолтного шаблона опенкарт. В статье я не буду описывать процесс оптимизации всего шаблона. Опишу саму суть и схему, по которой можно и нужно оптимизировать шаблон.

Начнем с главной страницы:

Спойлер

PHP:

<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?> <div id="content"><?php echo $content_top; ?> <h1 style="display: none;"><?php echo $heading_title; ?></h1> <?php echo $content_bottom; ?></div> <?php echo $footer; ?>

Все очень скверно. Для начала поясню, что поисковик отдает приоритет таким тэгам:

Title

Description

H1

В данном шаблоне следуя структуры шаблона тэг h1 будет стоять по середине страницы и это в лучшем случаи. Поисковик просто будет долго пробираться до него. Теперь свойство <h1 style="display: none;"> в крайне может испортить настроение поисковому роботу. В этом случаи Вам светит фильтр.

Предлагаемое мною решение для трехколонного макета по улучшении сайта в глазах ПС:

Спойлер

PHP:

<?php echo $header; ?> <div id="column-center"> <div id="content"> <h1><?php echo $heading_title; ?></h1> <?php echo $content_top; ?> <?php echo $content_bottom; ?> </div> <?php echo $column_left; ?><?php echo $column_right; ?> </div> <?php echo $footer; ?>

И в CSS указать:
Спойлер
HTML:
/* layout */
#container {
width: 980px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#column-left {
display: inline-block;
	float: left;
	margin-right: 15px;
	overflow: hidden;
	width: 198px;
}
#column-right {
display: inline-block;
	float: right;
	margin-left: -190px;
	overflow: hidden;
	width: 198px;
}
#column-center{
float:left;
display:inline;
height:auto;
width:100%;
overflow:hidden;
}
#content{
display: inline-block;
	width: 555px;
}
Поехали дальше!
Шапка <?php echo $header; ?>
Первое, что бросается в глаза так это куча не нужных ссылок на главной и по всему сайту.
Давайте убирать.
Берем логотип:

Спойлер

PHP:

<?php if ($logo) { ?> <div id="logo"><a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></a></div> <?php } ?>

Заменяем его на вот этот:

Спойлер

PHP:

<?php if (strlen ($_SERVER['REQUEST_URI']) > 1 ){ ?> <div id="logo"><a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></a></div> <?php } else { ?> <div id="logo"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></div> <?php } ?>

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

Теперь блоки модулей: языка, смены валют, поиск и приветствие, их я предлагаю вообще закрыть от индексации. Потому что они не несут ни какой полезной информации пользователю. Для этого мы их обертываем тэгами <noindex></noindex>.

Модуль верхнего меню <div class="links">. Для каждой ссылки я предлагаю поставить атрибут rel="noffolow", чтобы данные ссылки не передавали вес на другие страницы. И данный блок тоже можно скрыть от индексации, потому что он не несет ни какой полезной информации для пользователя.

Блок основного меню категорий. Здесь я остановлюсь, потому что он требует внимания. Если у Вас на главной странице выведены категории в виде модуля как на розетке или подобных сайтах, для ссылок основного меню категорий ставьте атрибут rel="nofollow". Если у Вас не выведены дополнительные категории в этом случаи я рекомендую добавить атрибут rel="nofollow" на всех страницах, кроме главной. Почему? Все просто. Мы даем поисковику индексировать только нужные нам страницы начиная с главной. Поскольку у нас есть модуль левого меню категорий, нам не нужны дубли ссылок на страницах, поэтому мы их скрываем.

Основное правило оптимизации шаблона
Если у Вас блок не несет ни какой полезной информации для пользователя и он распространяется на большинства страницах сайта - ставьте его в <noindex></noindex>, типичные примеры таких блоков: header, footer, colum-right. Тоже самое касается ссылок. Если ссылки зацикливаются на самих себя, поисковик просто может уйти с Вашего сайта или не правильно передать вес страницы и т.п.

Внутренняя оптимизация сайта - залог ТОПа при большой конкуренции. Чем лучше качество Вашего сайта, тем выше Вы будете находится.

Удачи в оптимизации!

130983 · 10 июл 2013

я бы еще порядок поменял <?php echo $column_left; ?><?php echo $column_right; ?><div id="content"></div>, загнав content вперед ну и микроразметка, причем на всех страницах (тут главное не полениться).

alex_storm · 10 июл 2013

130983 сказал(а): ↑

я бы еще порядок поменял <?php echo $column_left; ?><?php echo $column_right; ?><div id="content"></div>, загнав content вперед ну и микроразметка, причем на всех страницах (тут главное не полениться).
Нажмите, чтобы раскрыть...

Я именно это здесь и сделал

Baco · 10 июл 2013

Возьму на заметко в бро, но, так как большинство пользователей и фрилансеров или не знают или леняться это всё делать, я бы предложил, продумать алгоритм, для передачи таких значений через контроллер, так как шаблоны обычно идут все под "копирку" и с каждой темой мучатся - не выход, а так, то уже например в категориях верхней навигации, через контроллер, можно передавать массив, с уже проставленными значениями rel="noffolow"...

alex_storm · 10 июл 2013

Baco сказал(а): ↑

Возьму на заметко в бро, но, так как большинство пользователей и фрилансеров или не знают или леняться это всё делать, я бы предложил, продумать алгоритм, для передачи таких значений через контроллер, так как шаблоны обычно идут все под "копирку" и с каждой темой мучатся - не выход, а так, то уже например в категориях верхней навигации, через контроллер, можно передавать массив, с уже проставленными значениями rel="noffolow"...
Нажмите, чтобы раскрыть...

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

alex_storm · 11 июл 2013

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

Спойлер

PHP:

<?php echo $header; ?> <div id="middle"> <div id="container"> <div id="content"> <h1><?php echo $heading_title; ?></h1> <?php echo $content_top; ?> <?php echo $content_bottom; ?> </div> </div> <?php echo $column_left; ?> <?php echo $column_right; ?> </div> </div> <?php echo $footer; ?>

Добавляем в футер:
Спойлер
HTML:
<script type="text/javascript"> 
var left = (document.getElementById('column-left'));
var right = (document.getElementById('column-right'));
if (left) {
document.getElementById('content').style.paddingLeft='195px';
} else {
document.getElementById('content').style.paddingLeft='0';
}
if (right) {
document.getElementById('content').style.paddingRight='195px';
} else {
document.getElementById('content').style.paddingRight='0';
}
</script>
Стили CSS:
Спойлер
HTML:
/* layout */
#wrapper {
width: 960px;
min-height: 100%;
height: auto !important;
height: 100%;
margin:0 auto;
}
#middle {
width: 100%;
padding: 0 0 100px;
height: 1%;
position: relative;
}
#middle:after {
content: '';
clear: both;
display: table;
}
#container {
width: 100%;
float: left;
overflow: hidden;
}
#content {
width:auto;
}
#column-left {
float: left;
width: 180px;
margin-left: -100%;
position: relative;
}
#column-right{
float: left;
margin-right: -3px;
width: 180px;
margin-left: -180px;
position: relative;
}
#footer {
margin: -100px auto 0 auto;
width:920px;
position:relative;
clear: both;
overflow: auto;
min-height: 100px;
padding: 20px;
border-top: 1px solid #DBDEE1;
border-bottom: 1px solid #DBDEE1;
background: #F8F8F8;
}
В файле header.tpl изменить <div id="container"> на <div id="wrapper">

Все. Теперь шаблон полностью гибкий и оптимизирован с для поисковой машины. Остается только все файлы tpl привести к такому единому виду

alex_storm · 11 июл 2013

А почему не актуально? Ведь шаблон у всех один и тот же. Оптимизация и улучшение качества всегда будет актуальной.
Вот кстати упрощенная версия скриптика:
HTML:
var left = getById('column-left');
var right = getById('column-right');
var content = getById('content').style;
 
content.paddingLeft = left ? '195px' : '0';
content.paddingRight = right ? '195px' : '0';
 
function getById(id) {
return document.getElementById(id);
}

130983 · 11 июл 2013

кстати раз уж пошла тема насчет js - никто не подскажет (просто думаю по другому вряд ли нормально получится) как можно промо текст на главной разместить так, чтобы он был внизу страницы, но поисковому роботу отдавался в первую очередь (то есть по "телу" как бы находился сверху)?

castromen · 25 июл 2013

Я правильно понял:

alex_storm сказал(а): ↑

Основное правило оптимизации шаблона Если у Вас блок не несет ни какой полезной информации для пользователя и он распространяется на большинства страницах сайта - ставьте его в , типичные примеры таких блоков: header, footer, colum-right. Тоже самое касается ссылок. Если ссылки зацикливаются на самих себя, поисковик просто может уйти с Вашего сайта или не правильно передать вес страницы и т.п.
Нажмите, чтобы раскрыть...

Что ссылки в футере можно закрыть тегом <noindex></noindex>

PHP:

<noindex> <div id="footer"> <div class="column"> <h3><?php echo $text_information; ?></h3> <ul> <?php foreach ($informations as $information) { ?> <li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li> <?php } ?> </ul> </div> <div class="column"> <h3><?php echo $text_service; ?></h3> <ul> <li><a rel="noffolow" href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li> <li><a rel="noffolow" href="<?php echo $sitemap; ?>"><?php echo $text_sitemap; ?></a></li> </ul> </div> <div class="column"> <h3><?php echo $text_extra; ?></h3> <ul> <li><a rel="noffolow" href="<?php echo $manufacturer; ?>"><?php echo $text_manufacturer; ?></a></li> <li><a rel="noffolow" href="<?php echo $special; ?>"><?php echo $text_special; ?></a></li> </ul> </div> <div class="column"> <h3><?php echo $text_account; ?></h3> <ul> <li><a rel="noffolow" href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li> <li><a rel="noffolow" href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li> <li><a rel="noffolow" href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a></li> </ul> </div> <div class="big_column"> <a rel="noffolow" href='http://www.pinterest.com/' class='icon_pinterest' title='Facebook'>Pinterest</a> <a rel="noffolow" href='http://www.twitter.com/' class='icon_tweet' title='Tweeter'>Tweeter</a> <a rel="noffolow" href='http://www.skype.com/' class='icon_skype' title='Skype'>Skype</a> <a rel="noffolow" href='http://www.google.com/' class='icon_google' title='Google+'>Google+</a> <a rel="noffolow" href='http://www.facebook.com/' class='icon_facebook' title='Facebook'>Facebook</a> <div class='clear'></div> <div class='h20'></div> <div class='h20'> <div class="big_column"> </noindex>

alex_storm · 25 июл 2013

castromen сказал(а): ↑

Что ссылки в футере можно закрыть тегом
Нажмите, чтобы раскрыть...

Так же к каждой ссылке добавить rel="nofollow"

130983 · 28 ноя 2013

Столкнулся с проблеммой, что вариант с js не очень удобный для адаптивной верстки - использовал такой вариант
Код:
<?php echo $header; ?>
  <div class="breadcrumb">
  <h1><?php echo $heading_title; ?></h1>
    <?php foreach ($breadcrumbs as $breadcrumb) { ?>
    <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
    <?php } ?>
  </div>
<div id="middle">
<div id="container" >
<?php if ($column_left && $column_right) { ?>
<div id="content" class="right-left-padding">
<?php } ?>
<?php if ($column_left && !$column_right) { ?>
<div id="content" class="left-padding">
<?php } ?>
<?php if (!$column_left && $column_right) { ?>
<div id="content" class="right-padding">
<?php } ?>
<?php if (!$column_left && !$column_right) { ?>
<div id="content" class="no-padding">
<?php } ?>
<?php echo $content_top; ?>
  <?php if ($thumb || $description) { ?>
  <div class="category-info">
не сильно силен в php, поэтому запросы составил так (но главное - работает) и в стили добавляем
Код:
.right-left-padding { padding: 0px 230px;}
.left-padding {padding-left:230px;}
.right-padding {padding-right:230px;}
.no-padding {padding:0px;}
соответсвенно для разных девайсов макет адаптируется значительно проще. Более того сейчас смотрю на header.tpl - сколько там всего лишнего - его бы по хорошему разделить на 2 части - подключение скриптов и стилей и на вторую, там где лого, меню прочая ерунда. Спозиционировать его проще-простого - тогда получился бы идеал сразу после <body> h1 и непосредственно нужный контент. Вообщем с моими познаниями контроллер header.php мне не одолеть - может кто-то поможет - представьте какая "машина по заходу в топы" получится

Войти или зарегистрироваться

Верстка для поискового робота

alex_storm webdev

130983

alex_storm webdev

Baco Антихронофаг Команда форума

alex_storm webdev

alex_storm webdev

alex_storm webdev

130983

castromen

alex_storm webdev

130983