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

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем alex_storm, 10 июл 2013.

  1. alex_storm

    alex_storm дизайн, CSS Команда форума

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

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



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

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


    И в CSS указать:


    Поехали дальше!
    Шапка <?php echo $header; ?>
    Первое, что бросается в глаза так это куча не нужных ссылок на главной и по всему сайту.
    Давайте убирать.
    Берем логотип:

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

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

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

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

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

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


    Удачи в оптимизации!
     
    halfhope, cobalt и Baco нравится это.
  2. 130983

    130983

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

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
    Я именно это здесь и сделал:wink:
     
  4. Baco

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

    Регистрация:
    9 окт 2012
    Сообщения:
    648
    Симпатии:
    327
    Возьму на заметко в бро, но, так как большинство пользователей и фрилансеров или не знают или леняться это всё делать, я бы предложил, продумать алгоритм, для передачи таких значений через контроллер, так как шаблоны обычно идут все под "копирку" и с каждой темой мучатся - не выход, а так, то уже например в категориях верхней навигации, через контроллер, можно передавать массив, с уже проставленными значениями rel="noffolow"...
     
  5. alex_storm

    alex_storm дизайн, CSS Команда форума

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

    alex_storm дизайн, CSS Команда форума

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


    Добавляем в футер:


    Стили CSS:


    В файле header.tpl изменить <div id="container"> на <div id="wrapper">

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

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
    А почему не актуально? Ведь шаблон у всех один и тот же. Оптимизация и улучшение качества всегда будет актуальной.
    Вот кстати упрощенная версия скриптика:
    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);
    }
     
  8. 130983

    130983

    Регистрация:
    10 дек 2012
    Сообщения:
    168
    Симпатии:
    145
    кстати раз уж пошла тема насчет js - никто не подскажет (просто думаю по другому вряд ли нормально получится) как можно промо текст на главной разместить так, чтобы он был внизу страницы, но поисковому роботу отдавался в первую очередь (то есть по "телу" как бы находился сверху)?
     
  9. castromen

    castromen

    Регистрация:
    18 июл 2013
    Сообщения:
    33
    Симпатии:
    4
    Я правильно понял:
    Что ссылки в футере можно закрыть тегом <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>
     
  10. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
    Так же к каждой ссылке добавить rel="nofollow"
     
  11. 130983

    130983

    Регистрация:
    10 дек 2012
    Сообщения:
    168
    Симпатии:
    145
    Столкнулся с проблеммой, что вариант с 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 мне не одолеть - может кто-то поможет - представьте какая "машина по заходу в топы" получится:smile: