ruSKweb.ru

"Самая хорошая работа – это высокооплачиваемое хобби"

Генри Форд

Как улучшить шаблон для поисковика. Уникализируем и стандартизируем тему оформления

уникализация сайта

Приветствую, друзья. Я уверен что 98.5% читающих эту статью используют на своих сайтах либо стандартные шаблоны из бесплатных репозиториев либо же купленные премиум-шаблоны (или “купленные” на файлообменниках =)), а значит данный пост будет вам полезен.

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

Таким образом, вы вступаете в ряды обладателей вебсайтов, с одинаковым кодом и похожим оформлением. И даже если в шаблоне имеется возможность выбирать стили оформления и настраивать их под себя, все равно это не решает всех проблем.

А проблемы есть – ведь поисковые роботы сканируют ваше электронное детище до последнего символа, как и миллион других сайтов, заносят инфу в свои базы данных, и за счет сложных алгоритмов находят совпадения. В основном это используется для поиска ворованного контента и вычисления автоматически генерируемых дорвеев, но и для позиций сайта это не пойдет на пользу однозначно.

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

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

шаблон вордпресс
Премиум шаблон мчится в топ Яндекса

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

1. Стандартизация шаблона

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

Первым делом сделайте обязательный бекап всех файлов сайта и базы данных и спрячьте его в безопасное место)

1.1 Подгоняем код шаблона под стандарты html 5

Для владельцев современных шаблонов этот пункт может не пригодиться, ибо они почти все на html5. Однако проверить отдельные моменты все же стоит.

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

а). Заменить устаревший доктайп и мету на новые стандарты. К примеру был :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

сделать нужно простой и легкий:

<!DOCTYPE html>

В вордпрессе он находится в файле header.php

б). Заменить элементы div основных блоков сайта на их специальные тэги. Например, был блок для шапки сайта <div id = "head">  а заменили на тэг <header>, был <div id="footer"> а заменили на <footer>.

Подробный список таких тэгов с описанием можете посмотреть здесь http://htmlbook.ru/html/type/html5

в). Подправить CSS стили, которые после этой операции наверняка съедут. Просто находим идентефикатор для старого обозначения блока и заменяем его на имя нового тэга, например #head на header без решеток или точек.

Что бы было проще ориентироваться вот вам стандартный шаблон страницы по правилам HTML5:

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="description" content="Описание сайта">
    <meta name="keywords" content="ключевики, через, запятую">
    <title>Названия сайта</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/style.css" media="screen">
    <link rel="stylesheet" href="css/print.css" media="print">
    <link rel="stylesheet" href="css/mobile.css" media="handheld">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
        </script>
    <!--[if IE]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
                </script>
    <![endif]-->
    </head>

    <body>
<!--шапка -->
     <header>
        <h1><a href="#">Site Title</a></h1>
<!--меню навигации -->
           <nav>
          <ul>
            <li><a href="#">Главная</a></li>
            <li><a href="#">О сайте</a></li>
            <li><a href="#">Контакты</a></li>
          </ul>
        </nav>
    </header>
<!--секция для основного контента -->
<section id="main">
<!--запись -->
 <article>
 ...
 </article>
<!--сайдбар -->
 <aside>
 ...
 </aside>
 </section>
<!--футер -->
 <footer>
 ...
 </footer>

 <script type="text/javascript">
 </script>
 </body>
</html>


  • Если вы используете WordPress то мету можете не трогать, тайтл и дескрипшн как правило задаются в сеоплагинах или через php
  • После всех правок не забудьте проверить сайт в валидаторе на наличие ошибок в коде http://validator.w3.org/

Для чего столько сложностей спросите вы? Все просто – подобная разметка является на данный момент самой новой из общепринятых стандартов, кроме того она семантически более понятна и предпочтительна для поисковых систем, нежели обычная верстка div`ами, следовательно поисковый робот быстро разберется в структуре вашего сайта. Это в свою очередь ускоряет индексацию и переиндексацию.

1.2 Разметка hCard

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

Подробно и доходчиво о правилах разметки можете почитать в помощи Яндекса http://help.yandex.ru/webmaster/hcard/general.xml

Там ничего сложного.

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

1.3 Микроразметка schema.org остальных элементов сайта

По сути, после первых двух пунктов, остальная микроразметка обычным блогерам уже не обязательна. Но если вы фанат или владелец сервиса\магазина и хотите что бы каждое предложение было размечено, то можете заглянуть сюда

http://help.yandex.ru/webmaster/schema-org/what-is-schema-org.xml

или сюда http://artabr.ru/schema-org-uslugi-nedorogo/

2. Уникализация шаблона сайта для поисковых систем

Ну что ж, пришло время заняться уникальностью нашего вебсайта. Первым делом стоит обратить внимание на код. Для этого нам понадобится Notepad++ (может что-то еще подойдет, не знаю, но я пользуюсь этим текстовым редактором и доволен вполне). Если у вас нет навыков работы с html и знания структуры шаблонов WordPress то лучше этот шаг пропустить =)

2.1  Уникализация кода

а). Что бы добавить уникальности нашему коду можно поменять названия различных идентификаторов тэгов и картинок. За исключением тех, которые мы подгоняли под HTML5 и микроразметки, конечно же =) По сути в остатке остается совсем немного.

Например был блок <div class="balalaika"> меняем на <div class="dudka">

Но тут есть два момента.

  1. Мы должны поменять все упоминания этого класса в стилях CSS с .balalaika на .dudka. Для этого пользуемся поиском с заменой в Notepad++
  2. После внесения изменений мы должны убедиться в работоспособности сайта и всевозможных плагинов и скриптов. К идентификатору тэга может привязываться работа какого-нибудь скрипта. Поэтому во время редактирования я советую в Notepad++  открыть во вкладках все основные рабочие файлы шаблона (php, js, css) и через массовый поиск искать оригинальное название идентификатора во всех открытых вкладках, затем сделать такую же массовую замену на новое значение. Такой маневр сэкономит кучу времени.

Советую менять по 1 идентификатору за раз, что бы не запутаться, если вдруг что-то перестанет работать. Как все отладили приступать к следующему.

б). Чистим мусор. Проставляем правильную структуру для заголовков. Заменяем тэги h1-h6 на <p> там, где они используются для обозначения не уникальных заголовков (например название менюшек, элементов сайдбара и т.д.)То что не используется – удаляется. Отключаем ненужные скрипты, удаляем лишние блоки и ненужные элементы оформления из кода.

в). Меняем местами в коде сайдбар и блок контента если нужно. А нужно это в тех случаях, когда блок с с сайдбаром находится в коде выше, чем блок с основным контентом – такое нередко встречается и это большая проблема.

г). Сверяемся с валидатором и устраняем ошибки.

Описание может показаться запутанным а работа сложной, но разобравшись и набив руку на все уйдет 30-60 минут.

2.2 Делаем уникальными картинки

Меняем стандартные картинки, которые используются в шаблоне для оформления. Как правило они находятся в папке /images или /img. Если вы владеете фотошопом то проблем не возникнет. В противном случае можно воспользоваться поиском и найти массу элементов оформления для сайта – картинки, иконки, целые наборы, их полно.

уникальный дизайн сайта

Если не хотите менять картинку то можно заменить хотя бы ее название (не уверен даст ли это какой-то эффект, но мало ли). Однако не забудьте потом во всех файлах шаблона так же заменить название, по аналогии с правкой идентификаторов в коде.

2.3 Меняем оформление сайта. Правка CSS

И наконец самая заметная часть работы – изменение внешнего вида элементов сайта посредством правки CSS.

Давным давно я писал ознакомительную статью на эту тему для новичков http://ruskweb.ru/wp/14-ya-stupenka-menyaem-dizayn-shablona-wordpress-rabotaem-s-css.html

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

Для тех кто хочет по быстрому освоить краткий курс CSS рекомендую изучить бесплатный видеокурс от Попова http://p.cscore.ru. Там насколько я помню нет еще описания CSS3, но самое важное и нужное расписано отлично.

Надеюсь статья оказалась вам полезной и вы сумели добавить уникальности шаблону сайта, а так же подтянули свои знания html и css =)

Понравилась статья? Жми лайк:

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

  1. дмитрий пишет:

    привет
    Слушай, а если шаблон изначально был написан на html4, то разве достаточно прописать ? Не будет непоняток со стороны браузера?

    [Ответить]

    Сергей Кобзарь отвечает:

    Привет Дим. Непоняток быть не должно – html5 поддерживает все старые доктайпы насколько я знаю. Поменял доктайп и первые строчки + подключил поддержку для IE старых версий и все должно работать как часы. В идеале конечно еще div’ы сменить на спец. тэги ну и в валидатор сразу. Там будет написано если где-то проблемы

    [Ответить]

    Alexander Meier отвечает:

    Сергей, не совсем правильно. Мои скудные знания html позволяют сделать вывод, что это не так (имхо). Если ты прописал doctype html (html5), то нужно избавляться от всех deprecated элементов и т.п. Браузеры-то конечно все это скушают, но валидацию такая разметка не пройдет. Так что корректировка все равно будет нужна.

    Еще вопрос.

    стандартный шаблон страницы по правилам HTML5

    Не знаешь случайно, HTML5 не требует указания в head apple-touch-icon?

    Насчет уникализации кода у меня есть свое мнение. Оно конечно чисто теоретическое, но мне кажется все это, в целом, домыслы. Я почти уверен, что ПС вполне себе в состоянии отличать дивы, классы и т.д. от общего контента, и внимание этому уделяют не особое. Иначе все WP-сайты, независимо от шаблона, были бы “не уникальными”, благодаря entry-title, widget-title и проч. и проч. Мне кажется этому вопросу придают излишнее значение, а на самом деле оно того не стоит. Опять же все это мое сугубо личное, повторюсь – чисто теоретическое, имхо =)

    А вообще статья сильная и полезная. Беру на заметку =)

    P.S. Оффтоп: поиграйся с профилировщиком в браузере, обрати внимание на yandex share скрипты. Они не дают полностью догрузить страницу. Я вчера именно по этой причине снес соцкнопки у себя.

    [Ответить]

    Сергей Кобзарь отвечает:

    Собственно поэтому и написал, что после всех процедур, проверка в валидаторе) Там все нестыковки будут описаны подробно, какие и на какой строчке, исправить будет несложно.

    Насчет apple-touch-icon таких требований я не видел, вряд ли)

    Умеет отличать конечно, но в тех же официальных советах для вебмастера от Яндекса рекомендуется делать разметку, что бы помочь роботу, так сказать упростить и ускорить задачу.

    Спасибо, посмотрю что там с кнопками.

    [Ответить]

    Денис Нихаев отвечает:

    Shema должна быть обязательно. Поисковики нам уже об этом кричат!)

    [Ответить]

  2. Артем пишет:

    Привет! Вот ты работенки людям подкинул, в итоге получается новый сайт сверстали))) А как быть с адаптивностью? Почему-то сейчас гугл на это сильно смотрит, так-то если начал редактировать шаблон, то имеет смысл разу адаптивность прикрутить…

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

    [Ответить]

    Сергей Кобзарь отвечает:

    Здарова.Ну боюсь если б я еще и адаптивность сюда включил то статья бы тысяч на 20 символов была не меньше =) Тем более что я сам никак не соберусь с силами этот блог адаптировать, там работенки поболя)

    Напрямую может разметка и не влияет, а вот косвенно вполне может.

    [Ответить]

    Артем отвечает:

    Прикрути бутскрап, там делов на час, потом только классы расставить и все. Вот и будет тебе еще статья)))

    [Ответить]

  3. дмитрий пишет:

    логично. В проклятом Артистер, кстати, можно ставить свой префикс для классов и тем достигать уникальность г-кода :) Шутки-шутками, но в плследней версии довольно чистый хтмл-код. Делал подписную недавно – обратил внимание на этот факт. Только таблица стилей у них раздутая получается.

    [Ответить]

    Сергей Кобзарь отвечает:

    Слушай, как раз сейчас для одного проекта ищу шаблон, уже пару часов, все перерыл, ничего не нравится. Попробую артистер в деле, раз ты так его нахваливаешь =) Со стилями уже проще разобраться чем код перекраивать

    [Ответить]

  4. Александр пишет:

    Информация прям для меня. Чтобы сломать все :))))

    Привет

    [Ответить]

    Сергей Кобзарь отвечает:

    Привет Алекс, что-то как-то пропустил твой коммент. Не, ломать не надо если не уверен в своих силах)

    [Ответить]

  5. Валерий пишет:

    Статья очень нужная и полезная, но вот как адаптировать сайт под мобильные устройства?

    [Ответить]

Оставить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: