Правильный SEO дизайн сайта
Всем начинаю вебмастерам обязательно к прочтению, дабы не натворить глупостей по незнанию и не потерять добрую тысячу поискового трафика измеряемого в пришедших на сайт юзерах. Прошу к изучению...
Святой грааль - так называют в вебмастерской среде SEO разметку веб-страничек состыкованную с правильным дизайном в глазах обезьяны по имени человек. Так уж повелось, что современные поисковики отдают гораздо больший респект страничкам, внутренности которых правильно сложены меж собой. Последовательность следования такая: первым красуется заголовок, дальше контент, потом всякая навигация, ссылки, реклама и тому подобная лабуда. А как в реальности? Всё с точностью да наоборот. В самом верху мы как обычно размещаем всякую рекламу, ссылки и навигацию. Ну и в самом низу странички отводим место для контента. И, конечно же, чтобы вся эта неправильно уложенная ерунда не вывалилась через зад, затыкаем задницу сайта всякими счётчиками и считалками рейтингов. Пришёл поисковик на такой сайт и больше заглядывать к вам в гости у него никакого желания не возникнет и не даст он вам никакого трафика. Дело как раз в том, что искалке до фени как красиво и прикольно выглядит сайт снаружи. Эти роботы рассматривают не дизайн, а внутренности.
Игры обезьяны с таблицами тоже к хорошему не приведут. А как же сотворить трёхколоночный дизайн без таблиц? Если за дело берётся мастер, то, как ни странно всё получается. И этот самый очень популярный трехколоночный дизайн получается и без таблиц. Возьмите за правило следующее высказывание: творение шаблона для сайта на основе таблиц крайне не допустимо. Для этого есть и другие правильные решения.
Есть такие неправильные движки для сайтов. Они как раз используют табличные шаблоны. Один из них PHPNuke. Очень популярен у новоиспечённых, но ещё не прожаренных вебмастеров. Лучше уж пользоваться движком какого-нибудь блога. Пусть он будет в сто раз менее функциональным и не накачанным всякими ненужными примочками, но он будет правильным в глазах робота поисковой машины.
Практическую часть мы начнём как раз с трёхколоночного дизайна в стиле Святой грааль. Создадим шаблон сайта адаптированный под поисковые системы. А те в свою очередь отломят сайту кусок SEO трафика.
Существует в природе так называемый дивовый дизайн. Дивовый потому, что для разметки html-странички в рамках SEO используются слои. Слои же выводятся на страничку с помощью тегов <div>контент</div>.
Ниже приведён код странички с использованием дивового дизайна. Создайте файл html, скопируйте в него этот код и посмотрите, что получилось.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Дивовый дизайн</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="all">
<div class="header">
Header - верхний блок странички
</div>
<div class="center">
Center - центральный блок. Здесь выводится основной контент
</div>
<div class="left">
Left - левая колонки. Навигация
</div>
<div class="right">
Right - правая колонка. Реклама
</div>
<div class="footer">
Footer - низ. Здесь обычно копирайт
</div>
</div>
</body>
</html>
Пока ничего впечатляющего вы не увидели. Естественно слоистый файл ещё не приведён к трёхколоночному дизайну и не наделён всякими красивостями и блестючестями. Но зато есть другое. Страничка уже адаптирована SEO. Теперь мы можем придать ей какой угодно наружный вид. Этот процесс нисколько не попортит SEO адаптацию. Внешний дизайн прописывается в отдельном файле. Называется вся эта крутизна CSS стиль. Создайте в той же папке файл style.css и поместите в него следующий код.
.all {
width:900px;
border:1px solid #666666;
margin:auto;
padding:5px 5px 5px 5px;
text-align:center;
}
.header {
border:1px solid #666666;
margin: 0 0 5px 0;
padding:5px 5px 5px 5px;
}
.center {
width:480px;
min-height:600px;
border:1px solid #666666;
margin:0 0 0 210px;
position:inherit;
float:left;
}
.left {
min-height:600px;
border:1px solid #666666;
margin: 0 0 5px -692px;
width:200px;
float:left;
}
.right {
min-height:600px;
border:1px solid #666666;
margin: 0 0 5px 0;
width:200px;
float:right;
}
.footer {
border:1px solid #666666;
clear:both;
padding:5px 5px 5px 5px;
}
Получился трёхколоночный шаблон дизайна странички с идеальным SEO дизайном. Именно такую страничку поисковики ценят более других.
Про CSS стили очень много написано. Ищите в Google.com. Про элементарный html консультаций не даю. Комментарии приветствуются...
Рейтинг популярности - на эти заметки чаще всего ссылаются:
