УрокSEO вёрстка

Seo - немаловажная часть жизни сайта, и о завтрашнем продвижении разработчик должен заботиться уже сегодня, с помощью грамотной верстки. Вообще шаблон сайта может быть рассмотрен с точки зрения seo как элемент внешней оптимизации. И если на этапе разработки программист допустил ошибку, которая будет сказываться на продвижении сайта, то его неминуемо попросят ее исправить. Подробнее про новинки seo можно прочитать на ресурсе seo осень, а мы же займемся программными аспектами.

Во-первых, самое важное правило, которого всегда надо придерживаться - тэг H1 должен быть на каждой странице сайта ТОЛЬКО один раз. В него можно обернуть название сайта, или его слоган, или заголовок ноды В ПОЛНОЙ СТАТЬЕ (не в анонсе!), или заголовок самой страницы. Но обязательно следите за тем, чтобы этот тэг не повторялся даже дважды.

Во-вторых (это больше касается редакторов) при написании статьи используйте выделения жирным шрифтом, подчёркивания, и курсив. Но не стоит перебарщивать с этим - такие "скачущие" статьи обычно сразу закрываются, т.к. читать их абсолютно невозможно. Особо извращенные люди могут с помощью css отключать действие тэгов strong, u, i для статьи - вроде и статья визуально не тронута, и в коде для поисковиков это есть. Но такие приёмы могут принести не столько пользы, сколько вреда. Поэтому пользоваться такими тэгами надо с умом.

В-третьих, считается очень хорошим тоном (поисковики довольны) когда контентная область идёт ДО шапки (или меню) сайта. То есть исходный код страницы выглядит так:

<div id = "content"> уникальный контент </div>
<div id = "header"> меню и/или шапка </div>
<div id = "sidebar"> колонка </div>
<div id = "footer"> подвал </div>

Что же делать, если шапка сайта должна быть сверху? Так не проблема - у вас есть отличный инструмент, в умелых руках превращающийся в оружие - css. Укажите для контентной области отступ сверху равный вашей шапке, а для шапки - абсолютное позиционирование и top:0. Вот и вся хитрость.

В-четвёртых, возвращаемся к тэгам заголовков. Как я уже сказал, H1 использовать можно тольно 1 раз на каждой странице. Но к другим-то заголовкам ограничений нет - поэтому их можно (нужно) оборачивать в тэги H2, H3 и так далее. Заголовки на сайте для лучшей индексации обязательно должны быть выделены.

В-пятых. Забудьте про вёрстку на таблицах. Весь мир уже давно сидит на div'ах не просто так - это существенно уменьшает количество исходного кода страницы. А следом, увеличивает значимость вашего сайта для поисковиков. Поэтому стремитесь верстать с наименьшим количеством тэгов. Меньше тэгов - выше рейтинг. При сильной нужде в уменьшении тэгов их можно вообще загружать в код скриптами. В таком случае в исходном коде тэгов практически не будет, а внешний вид страницы останется без изменений.

В-шестых. Не используйте бесплатные шаблоны. В более чем 50% случаев шаблоны сделаны отвратительно. Такие шаблоны для сайтов никак не предназначались для использования на сайтах (как бы забавно это не звучало). Они содержат очень много лишнего кода, что положительно на вашем сайте не скажется. Поэтому если у вас нехватает денег на уникальный макет, то лучше потратьте пару часов своего времени на переработку бесплатного шаблона, чем "кормить" своё детище всяким мусором из Большой Сети

Комментарии

Аватар пользователя guest
guest написал:

Есть еще тег noindex

15.11.2010 03:46
Аватар пользователя Spleshka
Spleshka написал:

этот тэг не относится к вёрстке

15.11.2010 04:39
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

Советы дело хорошее, особенно понравилось про шапку и контент... :)
Открыл код этого сайта... и ... какой там контент наверху??? там JS первым, хотя его очень желательно по тому же СЕО в конец добавить, ну и меню понятное дело дальше.
Я это к чему - данная последовательность не критична.

15.11.2010 11:26
Аватар пользователя Spleshka
Spleshka написал:

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

15.11.2010 13:11
Аватар пользователя Тайный поклонник
Тайный поклонник написал:
<section><article> уникальный контент </article></section>
<header> <nav>меню</nav> и/или шапка </header>
<aside> колонка </aside>
<footer> подвал </footer>

http://ru.wikipedia.org/wiki/HTML5 :)

15.11.2010 11:41
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

тег code не работает

15.11.2010 11:42
Аватар пользователя Spleshka
Spleshka написал:

работает :) формат ввода не тот

15.11.2010 13:10
Аватар пользователя D.Choomc
D.Choomc написал:

лично я о пункте №3 даже не знал.. Век живи, век учись.

15.11.2010 12:19
Аватар пользователя powerscin
powerscin написал:

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

Т.е. если я в php-коде напишу нечто типа

 <?php echo '<div id ="s">',$content,'</div>'; ?>

это лучше чем если я напишу:

<div id = "s"> <?php echo $content; ?> </div>

?

10.12.2010 00:03
Аватар пользователя Spleshka
Spleshka написал:

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

10.12.2010 03:51
Аватар пользователя powerscin
powerscin написал:

Ну просто ты написал что для оптимизации исходного кода страницы, теги можно загружать скриптами, или ты под словом "скриптами" не пхп имеешь в виду?

11.12.2010 01:15
Аватар пользователя Spleshka
Spleshka написал:

аа.. нет =) Скриптами - я имел ввиду Javascript =)

11.12.2010 04:14
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

Для более быстрой обработки интерпретатора лучше использовать второй пример

03.02.2011 00:08
Аватар пользователя powerscin
powerscin написал:

Окей, а какие две умные мысли ты имел в виду? =)

11.12.2010 16:30
Аватар пользователя Spleshka
Spleshka написал:

первая - чтобы уменьшить количество кода - его можно грузить на JavaScript
вторая - а действительно, в чём разница между двумя примерами, которые ты написал ?)

11.12.2010 17:07
Аватар пользователя Smouk
Smouk написал:

Хочу заметить, что в пункте 3 в css лучше указать ещё и сво-во left:0; , иначе наш всеми любимый ослик может подавиться и начать плеваться кровью.

21.12.2010 19:14
Аватар пользователя Spleshka
Spleshka написал:

Ага, лево тоже указать можно. Спасибо Дим)

22.12.2010 12:09
Аватар пользователя otmoroz095
otmoroz095 написал:

кто не понял про "грузить скриптами", К.О. поясняет:

JavaScript поисковиками не индексируется.
Кстати прикольно посмотреть на код того же яндекса :)

17.03.2011 11:10
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

Выполнил пункт 3, только в коде поднял футер а не контент, посмотрим на результаты в выдаче, сразу отпишусь. А пока возник еще один вопрос:

В исходном коде страницы пока имеется куча подключаемых стилей (см. ниже), а я хочу сделать как у Вас, чтобы все это вместилось в пару строчек. Подскажите что надо сделать для этого?

19.03.2011 15:48
Аватар пользователя Spleshka
Spleshka написал:

Включить агрегирование и кэширование js и css

20.03.2011 01:32
Аватар пользователя Семен
Семен написал:

Здравствуйте актуально ли на сегодня выполнение пункта 3 или уже не стоит заморачиваться?

Можно ли тогда при выполнении пункта 3 перенести из head этот скрип в конец между

09.01.2012 14:15
Аватар пользователя Spleshka
Spleshka написал:

Не могу точно сказать по поводу актуальности - поисковые системы постоянно меняют свой алгоритм. Не думаю, что стоит особо заморачиваться на счёт третьего пункта.

09.01.2012 14:35

Комментировать