Тег заголовка

Оптимизация тега заголовков <h1> является одним из условий хорошей индексации блога поисковиками, а именно — заключение заголовка страницы в теге <h1>. Соблюдение этого правила повышает шансы страницы быть выше в рейтинге по результатам выдачи поисковиками. При этом — заголовок страницы должен быть релевантным: соответствовать контенту страницы, и конечно-же — поисковому запросу.

Проще говоря, заголовок страницы (как и содержимое тега<title>), либо его часть, должны состоять из ключевых слов поискового запроса.

Проблема заключается в том, что в WordPress в тег <h1> на каждой странице заключено лишь НАЗВАНИЕ БЛОГА, что конечно же не есть хорошо, а заголовки отдельных страниц и страниц постов (а так же — заголовки страниц архивов) выделены тегом <h2>. Проблема эта решается весьма легко и изящно.

В файле заголовка блога (header.php) находим такую строчку кода:

<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

Она означает, что в этом месте страницы будет выведено название блога, в виде ссылки на заглавную страницу, и заключённое в тег<h1>. При этом в исходном коде страницы будет следующее:

<h1><a href="http://site.com">Название Блога</a></h1>

— первая ошибка: желательно, что бы между тегами <h1> и </h1> не было вообще никакого лишнего текста и мета-тегов, кроме самого заголовка.

Заменяем её на следующую:

<?php if (is_home() ) { ?>
<h1><?php bloginfo('name'); ?></h1>
<?php } else { ?>
<h2><a href="<?php echo get_option('home'); ?>/">
<?php bloginfo('name'); ?></a></h2>
<?php } ?>

При этом, если будет загружаться заглавная страница — то название блога в шапке будет выделено тегом <h1>, БЕЗ ссылки (согласитесь — глупо ссылаться с заглавной страницы на саму себя), а если какая либо другая — то тегом заголовка второго уровня <h2>, который будет придавать заголовку блога такой же внешний вид, как и на заглавной странице.

Теперь нам надо придать тегу <h2> точно такое же стилевое оформление, как и  селектор "header h1", они описывают правила отображения заголовка , и описываются в таблице стилей style.css.

Для этого находим в файле стилевого оформления style.css селектор тега <h1> в шапке (header). В моём случае, в файле style.css правила отображения тега <h1> заголовка страницы описаны следующим образом:

#header h1 {
position:absolute;
width:600px;
left:38px;
top:40px;
margin:0;
padding:0;
font: bold 34px/38px Georgia, "Times New Roman", Times, serif;
color: #fff;
}

#header h1 a:hover {
color: #C1C1B6;
text-decoration: none;
}

Здесь мы видим правила отображения для тега <h1> в «шапке» страницы (#header h1), а так же — правила его отображения при наведении на него курсора мыши (#header h1 a:hover).

Теперь делаем следующее: копируем первую часть кода, относящуюся к h1, заменяем имя идентификатора #header h1 на #header h2 и заново вставляем в файл style.css,сразу после селектора #header h1, а #header h1 a:hover переименовываем в #header h2 a:hover . В результате должен получиться вот такой фрагмент кода:

#header h1 {
position:absolute;
width:600px;
left:38px;
top:40px;
margin:0;
padding:0;
font: bold 34px/38px Georgia, "Times New Roman", Times, serif;
color: #fff;
}

#header h2 {
position:absolute;
width:600px;
left:38px;
top:40px;
margin:0;
padding:0;
font: bold 34px/38px Georgia, "Times New Roman", Times, serif;
color: #fff;
}

#header h2:hover {
color: #C1C1B6;
text-decoration: none;
}

Сохраняем файл, что бы изменения вступили в силу. Теперь на главной странице название блога будет заключено в h1, а на всех остальных — в h2. При этом — на всех страницах блога название будет иметь одинаковое стилевое оформление.

На этом первая часть работы закончена, переходим к части второй. Теперь нам надо сделать так, что бы все заголовки отдельных записей и отдельных страниц (кроме главной и архивов) отображались в теге <h1>. По умолчанию в большинстве шаблонов они заключены в тег <h2>.

Итак, редактируем шаблон отдельных записей и шаблон отдельных страниц. Открываем файлы (single.php) и (page.php), и находим там следующую строчку кода:

<h2><a title="Permanent Link to <?php the_title(); ?>" href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?>
</a></h2>

Сразу же меняем тег <h2> на <h1>, плюс к этому — можно убрать ссылку, согласитесь — нелогично, если ссылка в заголовке ссылается на страницу, на которой она и расположена, фактически — на саму себя. Вот что должно остаться в результате:

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

Точно так же, как и в случае с заголовком, добавляем стилевое оформление заголовка статей и постов h1, что бы оно выглядело так же, как и h2. В моём шаблоне за это отвечает селектор .posthead h2, копируем полностью стиль, переименовываем в .posthead h1, и сохраняем в таблице сразу же за .posthead h2. Так же — не забываем про изменение отображения заголовка анонса поста на главной странице, при наведении на него курсора. За это ответственны следующие классы и стили:

.posthead h2 a {
color:#000;
}

.posthead h2 a:hover {
color: #990000;
text-decoration: none;
}

В некоторых последних (новых) шаблонах для WordPress заголовок может быть уже оптимизирован, так что это очень сильно облегчит задачу.

Для полноты картины стоит так же отметить, что тегом <h1> можно так же выделить заголовки архивов (по рубрикам, по меткам, и т.д.). Для этого открывается и редактируется вышеописанным образом файл archive.php.