Правильный тег H1. Как изменить цвет, размер заголовка страницы
Ольга
Сегодня поговорим о правильном расположении тега 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 ей будет полезен.
Об этом прямо указывает сервис определения релевантности страниц
Как все это организовать? Рекомендации, которые можно найти в сети, говорят, что все сделать просто.
Надо найти в редакторе файл single.php, который отвечает за выведение записей, и заменить строчку
конструкцией
А в шапке блога Внешний вид => Редактор => header.php одновременным нажатием клавиш CTRL+F найти тег h1 и заменить его тегом h2.
К сожалению, все просто только на словах. Только я поменяла в шапке h1 на h2, название блога исчезло. Пришлось потратить массу времени, чтобы его отыскать, восстановить в нужном размере и цвете. То же самое с заголовками постов и статических страниц. С размером шрифта для заголовка постов на главной странице особая история - он стал недопустимо маленьким. Как исправить - читайте ниже.
Теперь я знаю, за размер и цвет шрифта заголовка отвечает файл style.css. Но как найти строчку, в которой надо сделать изменения?
Как изменить размер заголовка блога
Чтобы изменить размер заголовка (записи или в шапке блога) - увеличить или уменьшить шрифт, найдем, где именно надо внести правки в стили CSS.
- Откройте свой сайт.
- Наведите курсор на элемент, который надо изменить.
- Правая кнопка мыши, Просмотр кода элемента (в Google Chrome), или Исследовать элемент (в Mozilla Firefox), или Проинспектировать элемент (в Opera). Далее во всех этих браузерах действия аналогичны.
Появляется окно в нижней части экрана. Просматриваемый элемент в нем подсвечен.
В правом окне мы видим, какой элемент надо изменить в стилях CSS (у меня это logo).
Я заменила logo H1 на logo Н2 и, о чудо, заголовок появился.
Кстати, можно также изменить:
1. цвет заголовка (выберите его онлайн, нажав на квадратик со цветом). Примерьте на странице разные цвета, запишите или скопируйте буквенное обозначение;
2. размер шрифта заголовка блога;
3. шрифт (выбирайте те шрифты, которые есть не только у вас на компьютере, но и у большинства пользователей, чтобы те не увидели лишь кракозябры).
Все действия будут происходить только на открытой странице. Если вы довольны результатом, внесите изменения в стилях CSS и обновите.
Как изменить размер заголовка поста, выводящийся на главной странице
Дольше всего пришлось повозиться с заголовком поста на главной странице. Он стал маленьким и непривлекательным, вдобавок являлся ссылкой.
Поэтому на него должны были действовать стили CSS, относящиеся к ссылкам.
- a:link - непосещенная;
- a:visited - посещенная;
- a:active - активная;
- a:hover - та, на которую наводится мышь:
Но что бы я ни делала, увеличить шрифт заголовка не получалось.
Пришлось присвоить заголовку собственный встроенный стиль.
К моему большому сожалению я не такой большой специалист по CSS, учить никого не собираюсь. Просто хочу предложить конструкцию, полученную методом множества проб и ошибок. Результат - симпатичный заголовок поста на главной странице.
Изменения внесла в файл index.php и в стили CSS.
Конструкцию