<
  • Главная
Статьи

Главная Новости

Уникализация и стандартизация шаблона сайта


Опубликовано: 01.09.2018

Приветствую, друзья. Я уверен что 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">

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

Мы должны поменять все упоминания этого класса в стилях CSS с .balalaika на .dudka. Для этого пользуемся поиском с заменой в Notepad++ После внесения изменений мы должны убедиться в работоспособности сайта и всевозможных плагинов и скриптов. К идентификатору тэга может привязываться работа какого-нибудь скрипта. Поэтому во время редактирования я советую в 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 =)



Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью

rss