Сегодня поговорим о правильном расположении тега H1 на вашей странице – он должен быть заголовком статьи, а не названием блога WordPress. А также выясним, как изменить цвет заголовка поста, размер шрифта. И зачем это надо сделать.

В предыдущей статье я упомянула про почти детективную историю с потерей заголовка блога WordPress. Случилась эта история, когда я по обыкновению копалась в кодах своего бесплатного шаблона, убирая дубли. Цель – привести в порядок теги h1 и h2 (согласно рекомендациям внутренней оптимизации). Правильное распределение заголовков на страницах постов заставит поисковые системы относиться к веб-ресурсу более лояльно.

Исчез заголовок блога

Кстати, сейчас я не боюсь, что мой блог внезапно исчезнет – я научилась делать бекап сайта и восстанавливать сайт из бекапа. Проделала эту процедуру уже не раз и чувствую себя более уверенно.

Как я уже писала в прошлой статье, мой шаблон, как и множество бесплатных шаблонов WordPress, сверстан не вполне правильно. Не знаю, с какой целью разработчики так делают – помещают самый значимый и весомый тег h1 в шапку (header)?

Получается, что этот тег обрамляет название блога, которое не содержит ключевых слов (чаще всего). А так как наши маленькие некоммерческие блоги продвигаются, в основном, по низкочастотным ключевым словам, пользы от тега H1 в шапке нет никакой. Наоборот, он создает одинаковые заголовки (дубликаты). Сколько у вас страниц, столько и одинаковых заголовков. Это плохо, очень плохо.

Возможно, кто-то возразит: « А как же некоторые раскрученные проекты, к примеру, ktonanovenkogo? Имеют тег h1 в шапке сайта, кучу дубликатов и преуспевают при этом? Все потому, что они уже трастовые, внесены в каталоги, уже заслужили авторитет у поисковиков. Автор блога Ktonanovenkogo отлично знает о своей ошибке, и даже предупреждает о ней остальных. Но уже боится кардинально переделывать свой раскрученный веб-ресурс.

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

Заголовок h1. Как расположить его правильно

Более правильно, когда каждая страница содержит один заголовок H1:

  • страница записей (single.php) – тег h1 озаглавливает статью. Продвигаемый запрос, включенный в заголовок, в этом случае приобретает большую значимость, ему обеспечено более легкое продвижение;
  • каждая статическая страница (в моей теме варианты статических страниц – это page-full.php, Page with Slider) также содержат тег H1.
  • главная (динамическая) страница, на которой выводятся анонсы статей, не должна содержать несколько тегов H1, только теги H2 и менее значимые. В шапке блога также оставим только тег H2.

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

Об этом прямо указывает сервис определения релевантности страниц MegaIndex.ru

аудит h1

Как все это организовать? Рекомендации, которые можно найти в сети, говорят, что все сделать просто.

Надо найти в редакторе файл single.php, который отвечает за выведение записей, и заменить строчку

<?php the_title(); ?>

конструкцией

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

А в шапке блога Внешний вид => Редактор => header.php одновременным нажатием клавиш CTRL+F найти тег h1 и заменить его тегом h2.

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

маленький заголовок

Теперь я знаю, за размер и цвет шрифта заголовка отвечает файл style.css. Но как найти строчку, в которой надо сделать изменения?

Как изменить размер заголовка блога

Чтобы изменить размер заголовка (записи или в шапке блога) - увеличить или уменьшить шрифт, найдем, где именно надо внести правки в стили CSS.

  • Откройте свой сайт.
  • Наведите курсор на элемент, который надо изменить.
  • Правая кнопка мыши, Просмотр кода элемента (в Google Chrome), или Исследовать элемент (в Mozilla Firefox), или Проинспектировать элемент (в Opera). Далее во всех этих браузерах действия аналогичны.

Появляется окно в нижней части экрана. Просматриваемый элемент в нем подсвечен.

Где искать название блога

Где в CSS искать название блога

 

 

 

 

В правом окне мы видим, какой элемент надо изменить в стилях CSS (у меня это logo).

Я заменила logo H1 на logo Н2 и, о чудо, заголовок появился.

Кстати, можно также изменить:

1. цвет заголовка (выберите его онлайн, нажав на квадратик со цветом). Примерьте на странице разные цвета, запишите или скопируйте буквенное обозначение;

2. размер шрифта заголовка блога;

3. шрифт (выбирайте те шрифты, которые есть не только у вас на компьютере, но и у большинства пользователей, чтобы те не увидели лишь кракозябры).

Все действия будут происходить только на открытой странице. Если вы довольны результатом, внесите изменения в стилях CSS и обновите.

Как изменить размер заголовка поста, выводящийся на главной странице

Дольше всего пришлось повозиться с заголовком поста на главной странице. Он стал маленьким и непривлекательным, вдобавок являлся ссылкой.

как изменить цвет заголовка-ссылки

Поэтому на него должны были действовать стили CSS, относящиеся к ссылкам.

  • a:link - непосещенная;изменить цвет ссылки
  • a:visited - посещенная;
  • a:active - активная;
  • a:hover - та, на которую наводится мышь:

 

 

Но что бы я ни делала, увеличить шрифт заголовка не получалось.

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

К моему большому сожалению я не такой большой специалист по CSS, учить никого не собираюсь. Просто хочу предложить конструкцию, полученную методом множества проб и ошибок. Результат - симпатичный заголовок поста на главной странице.

Увеличить шрифт заголовка поста

 

Изменения внесла в файл index.php и в стили CSS.

Конструкцию

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

заменила на

<div class="zagolovok1">
<h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
</div>
<div class="clear"></div>

 

присвоить стиль заголовку

В конец файла стили CSS добавила

.zagolovok1 {
margin: 0 0 5px 10px;
font-size: 1.6em;
font-weight: normal;
font-family: Verdana, Arial;
}

стиль заголовка поста
Причем на цвет заголовка влияет стиль h2 (принадлежащий postmeta),

на размер шрифта стиль zagolovok1.

Как изменить цвет заголовка поста, страницы, не влезая в Html

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

<span style="color:#EE1818">Правильный тег H1</span>

Тег span выделяет часть информации внутри других тегов, позволяет установить для информации собственный стиль.

Атрибут style обеспечит так называемый встроенный стиль.

изменить цвет заголовка поста

Получаем результат

изменить цвет и стиль заголовка поста

Чтобы изменить размер или добавить эффекты, к примеру, тень напишите следующее

<span style="color:#EE1818;  text-shadow:#000 2px 2px 2px;  font-size: 16px;">Правильный тег H1</span>

Смотрим на результат

изменить стиль заголовка поста или страницы

Кстати, заголовок изменится также в "хлебных крошках", если такие есть на вашем сайте.

P.S. Пробуйте, делайте, спрашивайте. Правильных и красивых вам заголовков.