Правильный код заголовка постов на блоге

1 марта 2012 15:02, Shalyminova:

Правильный код заголовка постов на блоге:

При поддержке: autodni.com — автопортал, на котором вы сможете найти информацию по популярным маркам, а также тюнинг, автоновости и многое другое.

Всем привет! В этом посте я хочу поговорить о достаточно важной составляющей блога – его заголовке. Если быть точнее, то не о самом содержимом заголовка, которое показывается пользователю, а именно о коде его вызова. Эта статья поможет сделать страницы записей более дружелюбными (оптимизированными) для поисковых систем. Уверен, что многим она будет полезна.

Я всегда почему-то наивно думал, что темы в wordpess по умолчанию оформляют заголовки записей тегом h1. Не тут-то было :smile: . Вот что я увидел, когда недавно случайно залез в код страницы.

<h2><a title="Постоянная ссылка: Мифы о wordstat или как наиболее точно рассчитать трафик по ключевым запросам?" rel="bookmark" href="http://sosnovskij.ru/wordstat-podschet-trafika/">Мифы о wordstat или как наиболее точно рассчитать трафик по ключевым запросам?</a></h2>

Длинный код, не так ли? А что у вас? Посмотрите.

Если вы оптимизируете страницы под определенные поисковые запросы, то очень важно, что ключевые слова (ключевое слово) находились в заголовке h1. Также при создании страницы необходимо придерживаться иерархии, чтобы, например, за заголовком 2-го уровня следовали заголовки 3-го или 4-го уровня (h3 или h4), но никак не, наоборот.

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

Один из основных законов ориентирования на вебе и гипертекстовой навигации: ничто не должно содержать ссылку на само себя.

Делать ссылку с логотипа на главную («домашнюю») страницу — хорошо и правильно. Но при этом надо избегать самой часто распространенной ошибки (ради которой и написан этот параграф) — если мы находимся дома, то ссылки «на главную» там быть не должно. Это относится и к другим местам на сайте: любая ссылка подразумевает перемещение.

Кстати Лебедев не только пишет, но и выполняет. Зайдите на банк Тинькова http://www.tcsbank.ru/ и убедитесь, что логотип на главной странице не содержит ссылки, а на внутренних линк на домашнюю страницу присутствует :smile: .

Теперь мои заголовки не содержат лишнюю информацию и находятся в теге h1, а не h2.

<h1>Мифы о wordstat или как наиболее точно рассчитать трафик по ключевым запросам?</h1>

Пройдясь по некоторым блогам, я увидел, что многие заголовки имеют также второй уровень и ссылку. Поэтому рекомендую это исправить. Тем более дело это занимает не более 5-10 минут ;-) . Я думаю, что заголовки h1 отсутствуют не только в блогах на wordpress, но пример будет именно для этой системы управления сайтом. Редактировать необходимо файл single.php. В большинстве тем именно этот файл отвечает за вывод одиночной записи.

Итак, заголовок в wordpress у меня выводился следующим кодом:

<h2><a title="Постоянная ссылка: &lt;?php the_title(); ?&gt;" rel="bookmark" href="&lt;?php the_permalink() ?&gt;"><!--?php the_title(); ?--></a></h2>

Теперь он сократился до:

<h1><!--?php the_title(); ?--></h1>

В идеале он так и должен выглядеть. А все оформление стоит прописать в файле style.css. У меня заголовок был окружен дивом (<div>) с классом postInfo. Открываю style.css и ищу описание этого класса для h2 (изначально же он стоял).

.post .postInfo h2 {
 display:inline;
 float:left;
 width:468px;
 margin:0 0 0 20px;
 padding:0 0 5px 0;
 color:#669900;
 font-size:25px;
 font-weight:normal;
 line-height:28px;
 border-bottom:1px solid #e5e5e5;
}

Теперь же заголовок в теге h1, поэтому просто копируем стиль для h2, вставляем его где-нибудь рядом, и вместо h2 ставим h1. В итоге получаем такое же оформление, что и было раньше.

.post .postInfo h1 {
 display:inline;
 float:left;
 width:468px;
 margin:0 0 0 20px;
 padding:0 0 5px 0;
 color:#669900;
 font-size:25px;
 font-weight:normal;
 line-height:28px;
 border-bottom:1px solid #e5e5e5;
}

Ситуации с кодами вызова заголовка и стилями бывают совершенно разными на разных блогах. Если вы хотя бы немного разбираетесь (совсем чуть чуть) в css и php, то сможете проделать без труда тоже самое. Если же нет, то лучше обратиться к тем, кто сможет помочь.

Затратив 10 минут времени, можно сделать заголовки на блоге более привлекательными для поисковых систем, а код страницы немного чище :smile: . Еще хочу поблагодарить Андрея, который помог разобраться в некоторых моментах. А какие заголовки на ваших сайтах? Если у вас появились какие-нибудь вопросы, то задавайте их в комментариях – я постараюсь ответить.

Если же вы хотите поднять свою грамотность в веб-разработке, то советую посетить ресурс Временно.нет – статьи по css, html, дизайну и оптимизации сайтов.

Десерт на сегодня: ссылку можно оставить с профиля форума s***l.ru (ТИЦ 150). Жирные ссылки выходят только в новых постах. Когда выйдет следующий пост, то ссылка на этот сайт пропадет, поэтому советую подписаться на обновления, чтобы не пропустить новые места, где можно оставить обратный линк.