http://toropchin.com/ Vladimir Toropchin blog ru Vladimir Toropchin toropchin_vv@mail.ru toropchin_vv@mail.ru http://toropchin.com/i/lastoblog.png http://toropchin.com/ http://toropchin.com/post_1188991384.html <p>Всем начинаю вебмастерам обязательно к прочтению, дабы не натворить глупостей по незнанию и не потерять добрую тысячу поискового трафика измеряемого в пришедших на сайт юзерах. Прошу к изучению...</p><br> <p>Святой грааль - так называют в вебмастерской среде SEO разметку веб-страничек состыкованную с правильным дизайном в глазах обезьяны по имени человек. Так уж повелось, что современные поисковики отдают гораздо больший респект страничкам, внутренности которых правильно сложены меж собой. Последовательность следования такая: первым красуется заголовок, дальше контент, потом всякая навигация, ссылки, реклама и тому подобная лабуда. А как в реальности? Всё с точностью да наоборот. В самом верху мы как обычно размещаем всякую рекламу, ссылки и навигацию. Ну и в самом низу странички отводим место для контента. И, конечно же, чтобы вся эта неправильно уложенная ерунда не вывалилась через зад, затыкаем задницу сайта всякими счётчиками и считалками рейтингов. Пришёл поисковик на такой сайт и больше заглядывать к вам в гости у него никакого желания не возникнет и не даст он вам никакого трафика. Дело как раз в том, что искалке до фени как красиво и прикольно выглядит сайт снаружи. Эти роботы рассматривают не дизайн, а внутренности.</p><br> <p>Игры обезьяны с таблицами тоже к хорошему не приведут. А как же сотворить трёхколоночный дизайн без таблиц? Если за дело берётся мастер, то, как ни странно всё получается. И этот самый очень популярный трехколоночный дизайн получается и без таблиц. Возьмите за правило следующее высказывание: творение шаблона для сайта на основе таблиц крайне не допустимо. Для этого есть и другие правильные решения.</p><br> <p>Есть такие неправильные движки для сайтов. Они как раз используют табличные шаблоны. Один из них PHPNuke. Очень популярен у новоиспечённых, но ещё не прожаренных вебмастеров. Лучше уж пользоваться движком какого-нибудь блога. Пусть он будет в сто раз менее функциональным и не накачанным всякими ненужными примочками, но он будет правильным в глазах робота поисковой машины.</p><br> <p>Практическую часть мы начнём как раз с трёхколоночного дизайна в стиле Святой грааль. Создадим шаблон сайта адаптированный под поисковые системы. А те в свою очередь отломят сайту кусок SEO трафика.</p><br> <p>Существует в природе так называемый дивовый дизайн. Дивовый потому, что для разметки html-странички в рамках SEO используются слои. Слои же выводятся на страничку с помощью тегов &lt;div&gt;контент&lt;/div&gt;.</p><br> <p>Ниже приведён код странички с использованием дивового дизайна. Создайте файл html, скопируйте в него этот код и посмотрите, что получилось.</p><br> <p><pre class="pre"> &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=windows-1251"&gt; &lt;title&gt;Дивовый дизайн&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="style.css"&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="all"&gt; &lt;div class="header"&gt; Header - верхний блок странички &lt;/div&gt; &lt;div class="center"&gt; Center - центральный блок. Здесь выводится основной контент &lt;/div&gt; &lt;div class="left"&gt; Left - левая колонки. Навигация &lt;/div&gt; &lt;div class="right"&gt; Right - правая колонка. Реклама &lt;/div&gt; &lt;div class="footer"&gt; Footer - низ. Здесь обычно копирайт &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </pre></p><br> <p>Пока ничего впечатляющего вы не увидели. Естественно слоистый файл ещё не приведён к трёхколоночному дизайну и не наделён всякими красивостями и блестючестями. Но зато есть другое. Страничка уже адаптирована SEO. Теперь мы можем придать ей какой угодно наружный вид. Этот процесс нисколько не попортит SEO адаптацию. Внешний дизайн прописывается в отдельном файле. Называется вся эта крутизна CSS стиль. Создайте в той же папке файл <font color="blue">style.css</font> и поместите в него следующий код.</p><br> <p><pre class=pre> .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; } </pre></p><br> <p>Получился трёхколоночный шаблон дизайна странички с идеальным SEO дизайном. Именно такую страничку поисковики ценят более других.</p><br> <p>Про CSS стили очень много написано. Ищите в <font color="blue">Google.com</font>. Про элементарный html консультаций не даю. Комментарии приветствуются...</p><br> <br> <div style="float:right;margin-right:25px;color:#797;">Tue, 11 Sep 2007 10:52:27 GMT</div> <div style="clear:both;"></div> <div style="margin-left:10px;color:#575;font-weight:bold;">эта</div> <div style="clear:both;"></div> <div style="margin:10px;color:#333;">файл style.scc, конечно лучше назвать файл style.css :)</div> <div style="clear:both;"></div> <div style="margin:10px;color:green;"><a href="http://toropchin.com/connect_d035a75a7d037abd035a75a7d03e779de35e.html">assa</a></div> <div style="clear:both;"></div> <br> <div style="float:right;margin-right:25px;color:#797;">Wed, 12 Sep 2007 00:47:20 GMT</div> <div style="clear:both;"></div> <div style="margin-left:10px;color:#575;font-weight:bold;">Re: эта</div> <div style="clear:both;"></div> <div style="margin:10px;color:#333;">Вы правы. Спасибо, что обратили моё внимание на эту опечатку. Исправлено.</div> <div style="clear:both;"></div> <div style="margin:10px;color:green;"><a href="http://toropchin.com/connect_02b471d73471c9fc40af9ff43be20e29d29dff61c32daff45d5e08d73bd9.html">Toropchin</a></div> <div style="clear:both;"></div> <br> <div style="float:right;margin-right:25px;color:#797;">Tue, 23 Jun 2009 18:41:19 GMT</div> <div style="clear:both;"></div> <div style="margin-left:10px;color:#575;font-weight:bold;">Замечено павильно</div> <div style="clear:both;"></div> <div style="margin:10px;color:#333;">Да, действительно статья стоющая, правильный дизайн конечно же дает свою долю успеха в поисковом продвижении. <br> Спасибо автору!!!</div> <div style="clear:both;"></div> <div style="margin:10px;color:green;"><a href="http://toropchin.com/connect_08c59907d45964559907d102207c694dc08c50ba6c2077c9307.html">Клим</a></div> <div style="clear:both;"></div> <br> <div style="float:right;margin-right:25px;color:#797;">Mon, 14 Sep 2009 02:02:32 GMT</div> <div style="clear:both;"></div> <div style="margin-left:10px;color:#575;font-weight:bold;">Не работает в IE 6.0</div> <div style="clear:both;"></div> <div style="margin:10px;color:#333;">Не работает в IE 6.0. Правая колонка съезжает вниз <br> <br> <font color=indigo>IE 6.0 вообще странно себя ведёт с "правильным дизайном". Нужды всякие выкрутасы, чтобы он отображал всё как положено. Статья рассчитана на понимание концепции правильного дизайна. <br> <br> Toropchin</font></div> <div style="clear:both;"></div> <div style="margin:10px;color:green;"><a href="http://toropchin.com/connect_d26eda8428fdb9d9714620e4d9ba028e6ec53819a8.html">Сергей</a></div> <div style="clear:both;"></div> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://toropchin.com/comment_1188991384.html">Оставить комментарий</a></div> Wed, 05 Sep 2007 07:23:04 GMT