Оптимизация тега заголовков h1

Оптимизация тега заголовков <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.
Дмитрий, здравствуйте! Спасибо за полезную статью! Скажите, зачем на других страницах вообще оставлять этот заголовок Н2. Если сделать его простым текстом, то с точки зрения сео будет лучше мне кажется. А то, получается, что Н2 идет перед Н1 — не логично.
В файле стилевого оформления style.css не могу найти селектор тега <h1> в шапке (header). Мой путь: www/tradingmylife.ru/wp-content/themes/cash в теме нахожу style.css. Но такого описания Н1, как у Вас нет??? что неправильно делаю?
Приветствую, спасибо, что присоединились.
Заголовки нужны, что бы разбивать страницу на фрагменты текста, и выделять важные его части: названия, цитаты, подзаголовки, и т.д. Так уж принято, что название основного контента принято выделять H1, как главную и основную мысль всего текста. Именно по H1 поисковики определяют тематику и направленность. Но, кроме основного контента, на странице существуют и другие блоки, созданные для удобства пользователя и визуализации: шапки, анонсы, сайдбары с навигацией, футеры, и т.д. Где тоже может находиться какая-либо информация. Вот для этого, и существую теги Н2-H4, что выделить заголовки на них, плюс — подзаголовки в самом контенте, разбивающие статью на части. Поэтому, H2 может запросто выделять название сайта в шапке на страницах постов, точнее — даже должен: что бы не перебивать название самой статьи, в H1. Однако, вполне возможно название сайта заключить и в тег , придав ему нужное стилевое оформление.
Я легко нашёл описание H1 в файле стилевого оформления вашего сайта, странно, что у вас это вызвало затруднение… Ну а то, что структура немножко другая — так это зависит от создателя темы. Каждый пишет стили под себя, поэтому стилевые описания — как и структура оформления шаблона — зачастую отличаются. К тому же, свою таблицу стилей и скелет сайта я правил немного под себя, оптимизировал под SEO и для более быстрой работы блога.
Если хотите — могу написать отдельную детальную статью, с кратким разбором стилевого оформления вашего сайта, в т.ч. — описания H1.
Да было бы не плохо. Укажите пожалуйста строку в style.css. Я вижу там несколько Н1 не знаю какое описание к чему.
В ближайшее время сподоблюсь, и накатаю статеечку, может быть даже — сегодня. Следите за анонсами.
Спасибо Дмитрий. Покопался и разобрался!
Ну вот, не успел статью накатать… Если кратко — то за отображение заголовка H1 в хедере отвечает следующий стиль, строка 646 файла style.css:
h1.art-logo-name, h1.art-logo-name a, h1.art-logo-name a:link, h1.art-logo-name a:visited, h1.art-logo-name a:hover
{
font-size: 38px;
text-decoration: none;
padding: 0;
margin: 0;
color: #EEEBDD !important;
}
А так же — строка 640:
h1.art-logo-name
{
display: block;
text-align: center;
}
Самый простой способ проверить стиль элемента в браузере Мазила — это кликнуть правой кнопкой мыши по элементу, и в самом низу контекстного меню выбрать — «исследовать элемент«. Элемент тогда выделится, и в правой стороне экрана отобразятся его стили и свойства. Обращайтесь, если что.
то о чем думал но не знал как реализовать Спасибо огромное.
Не за что, обращайтесь.
Здравствуйте, у меня один вопрос, как избавиться от этого хвоста <title>почему зависает ноутбук | Всё о Ноутбуках и Компьютерах</title>
Сначала как положено заголовок поста — а за ним хвост, заголовок сайта.
Как избавиться от заголовка сайта?
Буду очень признателен. С уважением Камал
Здравствуйте, Камал.
Посмотрел ваш сайт — весьма порадовал! Наконец то, хоть кто-то ставит в конце URI страницы окончание .html, а не тупой слэш.
Насчёт вашей проблемы: всё зависит от того, каким именно плагином SEO вы пользуетесь. Судя по исходному коду страницы — All in One SEO Pack. Тогда вам надо просто поменять некоторые настройки плагина.
Идёте в Инструменты SEO в админке, прокручиваете примерно на середину страницы, блок — Настройки Заголовков, ищете поле Формат для записей, там у вас в данный момент должно стоять %post_title% | %blog_title%, удаляете | %blog_title%, оставляете только %post_title%. Сохраняете, проверяете результат.
С уважением, Дмитрий Жуков.
Спасибо Дмитрий. Дырявая голова, когда ковыряешься в этих кодах про всё забываешь.
Ещё один вопрос — <?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 всё исправилось, Заголовок не кликабелен. Но на страницах выходят два тега h1
«Элементарно, Ватсон!» Вам надо прописать стилевое оформление заголовка H2 индивидуально для заголовка сайта, точнее — внутри класса .site_title, а именно:
Найти через редактор админки в файле style.css строчку кода, начинающуюся с .site_title h1 и сразу же после неё аргументов и значений вставить:
.site_title h2 {
float: left;
padding: 0px 0px 0px 10px;
text-shadow: 1px 1px 1px rgb(153, 153, 153);
font-size: 28px;
font-family: Georgia,"Times New Roman",Times,serif;
}
После этого, ваш код, приведённый в комментарии, будет работать, и заголовки H1 и H2 будут отображаться одинаково.
Спасибо Дмитрий всё установил, вот только буквы заголовка сайта на страницах какие то обрезанные (Р,У) конечности обрезаны. А так всё работает, по принципу SEO, ещё раз спасибо. С уважением Камал.
Камал, у вас ДВА раза прописано правило отображени для H2 — .site_title h2 — в 93 и 95 строке. Причём, в 93 строке присутствуют значения height:20px; и line-height:18px;. Исправьте первое значение на 30px, а второе — на 28px, и будет вам счастье.
С уважением, Дмитрий Жуков.
Ну Дмитрий ты просто волшебник. Теперь я точно счастлив,ещё раз огромное спасибо. С уважением Камал
Не за что, обращайтесь.
Привет Дмитрий,попробовал кое что изменить, но потом поставил на месте, так как сайт сломался после этого.
Мне надо в Н1 заключить названия сайта, подскажите мне: Вот мой код с хеадера
Здравствуйте. Будет проще, если вы мне дадите адрес вашего сайта, я посмотрю код непосредственно в первоисточнике. Тогда я смогу дать вам уже готовое решение, а не гадать.
Дмитрий, спасибо Вам за эту статью, сначала хотела поменять тему, но не смогла найти подходящую, решила попробовать.К сожалению, не владею языками программирования, поэтому делаю по аналогии с Вашим примером. Описание смены стилевого оформления тегов не совпало с моим, сделала вот так — но на неглавных страницах стилевое оформление название сайта изменилось. Что сделала не так? Вот код, который у меня получился после внесения изменений:
.title h1{
overflow:hidden;
font-size:32px;
font-family:»Stencil Std», arial;
font-weight:bold;
color:#956652;
padding-top:20px;
}
.title h1 a, .title h1 a:visited {
color:#956652;
text-decoration:none;
}
.title h2{
overflow:hidden;
font-size:32px;
font-family:»Stencil Std», arial;
font-weight:bold;
color:#956652;
padding-top:20px;
}
.title h2 a, .title h2 a:visited {
color:#956652;
text-decoration:none;
}
.title h2 a:hover{
cursor:pointer;
text-decoration:none;
Будет проще, если дадите ссылку на свой сайт, и на конкретный элемент, который надо изменить. Я вам скину конкретный код.
Дмитрий, спасибо, что согласились помочь. Мой сайт kukloterem.ru. Пока я работаю с первой частью Вашей статьи, не получилось поменять стилевое оформление, отдельного файла со стилем тоже не нашла. Он у меня как-то встроен в общий код, что ли.
Файл стилевого оформления в админке: внешний вид>>>редактор>>style.css Так, а теперь конкретно: что на что вы хотите изменить?
Похоже, мне все-таки придется искать новую тему. При проверке TAC высветился Encrypted Code Found! (В Детали: Line 73: «base64_decode(‘PGEgaHJlZj0iaHR0cDovL3d3dy5ibG…» и WordPress) Видно, не судьба, придется с этой темой расстаться.
С ссылками и зашифрованными кодами удалось справиться. очень жду Вашей помощи по поводу изменения стилевого оформления. Возможно, тема еще поживет у меня)
В моей теме название сайта на всех страницах было выделено тегом H1, а названия статей — H2. Воспользовавшись Вашими рекомендациями, описанными в этой статье, изменила теги, все успешно. Далее Вы пишете, что надо придать тегу H2 такое же стилевое оформление, как и у тега H1. И вот это у меня не получилось, на страницах, отличных от главной, название сайта стало мелким (kukloterem.ru/podelki-iz-skorlupy-greckogo-orexa-mi/), и названия статей стали другим цветом и шрифтом. Вот такая беда приключилась, можно ли как-то горю помочь? Я хотела бы, чтобы изменения с тегами, которые прошли удачно, остались, а вот название сайта на главной и на второстепенных страницах были написаны одинаково, и названия статей тоже бы не меняли цвет и шрифт при переходе с главной на второстепенную.
Я тут пока сама с собой поговорю) Каким-то чудом сегодня размер шрифта на внутренних страницах сайта стал правильным сам собой) чему я очень рада. Не знаю, как так получилось, сразу после изменения кода по Вашему рецепту и создания одного и того же стиля для тегов не сработало, а на следующий день заработало) Надеюсь, завтра тоже будет работать. Спасибо еще раз за блог, осталось поправить стиль названия статей на внутренних страницах
Дмитрий, спасибо еще раз за очень полезную статью, сегодня все заработало так, как и надо! Даже стилевое оформление названия статей на внутренних страницах — правда, не поняла, почему изменения вступили в силу только через два дня после того, как я их прописала в коде? С чем это связано? Теги поменялись сразу, а вот стиль — не сразу. Вдруг кому-то пригодится эта информация. Успеха и процветания Вашему блогу! Думаю, не раз еще вернусь сюда
Наталья, проблема скорее всего в том, что у вас либо стоит плагин кэширования на сервере, который кеширует всё стилевое оформление, либо — кэш включён в настройках сервера или хостинга. Поэтому стилевое оформление обновилось только со временем.