Оптимизация заголовков h1, h2, h3: как удалить лишние заголовки из шаблона?

Оптимизация заголовков страниц сайта на wordpress – важный шаг на пути к Топу. После ключевых слов в Title наибольший вес на странице имеют ключевые слова в тегах h1-h6. При этом h1 обладает наибольшим весом.

На каждой странице сайта должен быть один заголовок h1 и несколько подзаголовков (хотя бы второго уровня h2). В h1 должно отображаться название страницы, а не название сайта.

Содержание
1. Как найти лишние теги заголовков в шаблоне?
2. Как удалить h1 из названия сайта и h2 из описания сайта?
3. Как заключить заголовки статей в тег h1?
4. Как изменить заголовки анонсов статей в рубриках с h1 на h2?
5. Как убрать теги h2 и h3 из заголовков виджетов в сайдбаре?
6. Как убрать тег h3 из строчки «Навигация по записям»?
7. Как удалить тег h3 из формы комментирования WordPress?

Наличие заголовков нескольких уровней делает текст удобным для восприятия, понятным и структурированным. Важно соблюдать иерархию заголовков. Тег h1 должен располагаться выше текста и всех заголовков. Заголовки должны идти в порядке убывания их уровня. После h4 не должен сразу красоваться h6.

Заголовки h2-h6 должны использоваться только для структурирования контента. Не желательно, чтобы в теги h2-h6 попадали элементы дизайна сайта. Фразы «Последние статьи», «Комментарии», разнообразные заглавия виджетов, заключенные в этих тегах, снижают релевантность страницы.

К сожалению, во многих шаблонах теги h1-h6 активно используются в верстке макета. Кроме того, часто  текст в h6 выглядит крупнее и привлекательнее, чем в h2 и h3, и начинающие вебмастера выделяют подзаголовки своих постов именно этим тегом.

Что ж, пора заняться оптимизацией заголовков h1-h6.

Как найти лишние теги заголовков в шаблоне?

Прежде чем оптимизировать заголовки h1, h2, h3 на вордпресс, нужно определить как они расположены в шаблоне.

Можно открыть любую страницу сайта, кликнуть правой кнопкой мыши и выбрать в меню «Просмотр кода страницы», «Исходный код» или что-то подобное, команда зависит от браузера.

Можно сделать проще. Воспользуйтесь сервисом pr-cy.ru. На странице анализа контента введите адрес любой страницы сайта и нажмите кнопку «Анализировать». Среди прочих данных будет таблица «Заголовки».

Кликните для увеличения

Для того, чтобы убрать лишние теги заголовков из шаблона нужно открыть соответствующие файлы в редакторе и вместо h2 и h3 написать div или p, а потом сохранить изменения.

В зависимости от шаблона теги заголовков могут встречаться в файлах header.php, functions.php, single.php, page.php и тому подобных. Открывайте эти файлы, заменяйте теги заголовков на div или p и после сохранения изменений проверяйте страницы сайта сервисом http://pr-cy.ru/analysis_content. Так вы поймете логику проставления заголовков в вашем шаблоне и увидите дальнейшее поле для работы.

Рассмотрим процедуру оптимизации заголовков страниц для продвижения сайта и удаления лишних тегов h1-h6 на примере шаблона Twenty Eleven.

Как удалить h1 из названия сайта? Как удалить h2 из описания сайта?

Откройте в редакторе файл header.php. В коде название сайта заключено в теге h1, а описание сайта в теге h2.

Замените h1 и h2 на p. Не забудьте, что изменить нужно и открывающий и закрывающий тег.

Получиться должно вот так.

Как заключить заголовки статей в тег h1?

Тег h1 должен появляться на странице всего один раз. На страницах, где выводятся анонсы статей (на главной, в рубриках), заголовки должны по-прежнему оставаться в тегах h2. Нас интересуют страницы, на которых отображается текст конкретных статей. За их формирование отвечает файл single.php.

В шаблоне Twenty Eleven заголовки статей выводятся в h1. В других шаблонах часто используется h2. Чтобы это исправить откройте файл single.php и найдите фрагмент с использованием функции the_title().

Первоначальный код такой:

<h2 class="title"><?php the_title(); ?></h2>

Замените его на:

<h1 class="title"><?php the_title(); ?></h1>

Как изменить заголовки анонсов постов в рубриках с h1 на h2?

Как вывести заголовки анонсов постов в рубрике в теге h2? Откройте файл content.php. Найдите код:

<h1 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h1>

Измените h1 на h2, как на картинке.

При желании можно изменить стиль заголовков entry-title. Можно даже сделать так, чтобы заголовки обрамлялись тегом h2, а выглядели как h1.

Давайте вместо entry-title напишем в этой строчке entry-title2, а затем в файле стилей пропишем новый стиль для этого класса.

Как убрать теги h2 и h3 из заголовков виджетов в сайдбаре?

Откройте файл шаблона functions.php.

Найдите строку со словами register_sidebar и тег заголовка с классом widget-title. В шаблоне Twenty Eleven код выглядит так:

 
if ( function_exists('register_sidebar') ) {
   register_sidebar(array(
   'before_widget' => '<li id="%1$s" class="widget %2$s">',
   'after_widget' => '</li>',
   'before_title' => '<h2 class="widgettitle">',
   'after_title' => '</h2>',
 ));
}

Before_title – это код, который будет выводиться перед заголовком.

After_title – это уже код, который будет выводиться после заголовка.

Замените h3 на div.

Вот так:

 
if ( function_exists('register_sidebar') ) {
   register_sidebar(array(
   'before_widget' => '<li id="%1$s" class="widget %2$s">',
   'after_widget' => '</li>',
   'before_title' => '<div class="widgettitle">',
   'after_title' => '</div>',
 ));
}

На скриншоте показан только один абзац кода. Ниже расположено еще несколько блоков кода с заголовками h3. Исправьте и их.

При удалении h3 меняется внешний вид заголовков в сайдбаре. Необходимо внести изменения в файл стилей.

Откройте style.css.

Внекоторых шаблонах внешний вид заголовка в сайдбаре описывает .sidebar h2.

.sidebar h2 {
   margin: 0 ;
   padding:6px 0 14px 2px;
   text-align: left;
   font-size: 16px;
   line-height: 16px;
   color: #303539;
   font-family: Georgia, Times New Roman Times, Serif, Arial;
   font-weight: bold;
   text-transform: uppercase;
   background: url(images/sidebar_tab.png) left bottom no-repeat;
}

H2 в сайдбаре теперь нет. Вместо «.sidebar h2» смело напишите «.widgettitle». Теперь классу .widgettitle перейдут все свойства и значения, назначенные для «.sidebar h2».

В шаблоне Twenty Eleven в файле стилей вы не найдете .sidebar h2. В style.css нужно найти блок кода с заголовком /* =Widgets. Там будет запись .widget-title. Вот для нее и нужно прописать свои стили.

Как убрать h3 из строчки «Навигация по записям»?

Откройте файл single.php. Найдите строку:

<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>

Исправьте h3 на p:

<p class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></p>

Как удалить тег h3 из формы комментирования WordPress?

За надпись «Добавить комментарий» может отвечать тег h3 в форме комментирования с идентификатором id=»reply-title».

Откройте в редакторе файл функций шаблона functions.php. В самом начале кода найдите символ <?php. Сразу после него перейдите на новую строку и вставьте код:

// убираем h3 в форме комментирования
function my_comment_form_before() {
    ob_start();
}
add_action( 'comment_form_before', 'my_comment_form_before' );
 
function my_comment_form_after() {
    $html = ob_get_clean();
    $html = preg_replace(
        '/<h3 id="reply-title"(.*)>(.*)<\/h3>/',
        '<p id="reply-title"\1>\2</p>',
        $html
    );
    echo $html;
}
add_action( 'comment_form_after', 'my_comment_form_after' );

Было так:

А стало так:

Если для этой записи ранее не были заданы стили CSS, то еще не поздно это сделать. Можно так:

p#reply-title {font-size: 24px; line-height: 30px; font-weight: bold;}

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

Если у вас все получилось, то пора назначить красивые стили оформления заголовков на сайте.

Возможно вас еще заинтересует:

• «Как красиво оформить списки на сайте?»
• «Как добавить на сайт красивые кнопки соцсетей?»