Поговорим о правильном расположении тега 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

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

НАЙДИТЕ в редакторе файл single.php, который отвечает за выведение записей, и ЗАМЕНИТЕ строчку

<?php the_title(); ?>

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

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

В шапке блога ВНЕШНИЙ ВИД - РЕДАКТОР - header.php одновременным нажатием клавиш CTRL+F найдите тег H1 и замените его тегом H2.

Заголовок H1, пример

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

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

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

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

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

ОТКРОЙТЕ свой сайт.

НАВЕДИТЕ курсор на элемент, который надо изменить (название блога).

ПРАВАЯ КНОПКА мыши - ПРОСМОТР кода элемента (в Google Chrome), или ИССЛЕДОВАТЬ элемент (в Mozilla Firefox), или ПРОИНСПЕКТИРОВАТЬ элемент (в Opera). Далее во всех этих браузерах действия аналогичны.

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

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

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

Можете также изменить:

ЦВЕТ ЗАГОЛОВКА (выберите его онлайн, нажав на квадратик со цветом). Примерьте на странице разные цвета, запишите или скопируйте буквенное обозначение;

РАЗМЕР ШРИФТА заголовка блога;

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

Все действия будут происходить ТОЛЬКО на открытой странице. Если вы довольны результатом, ВНЕСИТЕ ИЗМЕНЕНИЯ в стилях 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. Пробуйте, делайте, спрашивайте. Правильных и красивых вам заголовков.

Метки:

Внутренняя оптимизация сайта

ПОХОЖИЕ СТАТЬИ:

ДРУЗЬЯ, СПАСИБО, ЧТО ПОДЕЛИЛИСЬ СТАТЬЕЙ:

43 отзывов к “Правильный тег H1. Как изменить цвет, размер заголовка страницы

  • Василий:

    На моем сайте, до сравнительно недавнего времени, вообще не было тега H1. когда его поставил, то тоже пришлось менять подзаголовки в H2, для того чтобы они были обычного размера.
    Ольга, статичные страницы — это, например, у меня — обо мне и карта сайта? Их тоже нужно делать в H1?

    • Ольга:

      Да, Василий. Я думаю, роботам без разницы, о чем страница. Главное, чтобы заголовок в h1 был один.
      А о внутренней оптимизации Вы побольше меня знаете, количество посетителей Вашего блога говорит само за себя.

  • Василий:

    О, спасибо! Меня знакомые попросили изменить вид заголовока. Шрифт ведь тоже там же изменяется, правильно?

    • Ольга:

      За вывод одного и того же заголовка на странице поста и на главной отвечают разные функции. Оба случая описаны в статье.

  • Vesna83:

    Здравствуйте, а можно ли изменить цвет фона в названиях постов и названиях рубрик в сайдбаре?

    • Ольга:

      Конечно, попробуйте применить технику из статьи — наведите курсор на название рубрики, просмотр кода элемента. Увидите справа элементы, которые отвечают за вывод рубрики. Пробуйте изменить онлайн. Если получится, внесете изменения в стили css.

  • Комнатные растения:

    Представляете я раньше потратила много времени и сил на то, что бы изменить заголовок и убрать с него ссылку в самой статье. Но ничего не нашла и не исправила. А недавно совсем случайно поняла в чем дело. И теперь все хорошо. Только когда проверяю статьи в мегаиндексе то он не видит мой заголовок и пишет что нет тега н1, хотя раньше было все нормально пока в мегаинд. не изменился интерфейс

    • Ольга:

      Нонна, на главной странице у Вас в тегах H1 заключен art-Logo-name (что это?)
      На странице записи несколько тегов H1: art-Logo-name, заголовок поста и зачем-то заголовок видео.
      Сами можете проверить, правая кнопка мыши, просмотреть исходный код страницы, ctrl+F, в строку ввести H1.

  • Станислав:

    Еще раз здравствуйте,Ольга!

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

    • Ольга:

      Конечно, пробуйте применить, Станислав.
      Не забудьте написать, что у Вас получилось.

  • Елена:

    Ольга, спасибо за статью. Наконец-то получилось заголовки статей сделать в h1. Вот только такой вопрос: на главной странице у меня теперь вообще нет h1. Это нормально? Или всё-таки я что-то не до конца правильно сделала?

    • Ольга:

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

      • Елена:

        Спасибо, Оля! Да, меня вполне устроят заголовки статей!

  • Вера:

    Здравствуйте! Извените, но у меня в редакторе файла single.php нет такой строчки , подскажите как быть?

    • Ольга:

      Вера, попробуйте поискать подобную строчку в файле index.php.

  • Вера:

    В файле index.php. есть только такая похожая строчка

    • Ольга:

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

  • Вера:

    Заголовок блога в шапке я увеличила, хотелось бы еще немного уменьшить заголовок статей, но не знаю как.

    • Ольга:

      Вера, об этом тоже написано в конце статьи, почитайте.

  • Вера:

    Спасибо Оля за помощь, у меня все получилось, как хотелось!

    • Ольга:

      Отлично и замечательно, Вера.

  • Юрий:

    Полезная статья, все понятно написано. Видел несколько шаблонов с тегом h2 в заголовках поста. Как говориться: «Век живи — век учись». Постоянно что то новое для себя узнаешь.
    Добавил ваш сайт в закладки, уверен, что еще не раз к вам зайду в гости.

  • Камал:

    Здравствуйте, у меня один вопрос, как избавиться от этого хвоста почему зависает ноутбук | Всё о Ноутбуках и Компьютерах
    Сначала как положено заголовок поста — а за ним хвост, заголовок сайта.
    Как избавиться от заголовка сайта?
    Буду очень признателен. С уважением Камал

    • Ольга:

      Камал, смотрите настройки SEO плагина, который Вы используете (Platinum или All Seo Pack).
      Изменения внесите здесь изменение тега title в WordPress

  • Анна:

    Здравствуйте Ольга! Очень познавательная статья, да и весь блог содержит много полезного для новичка. У себя в блоге я сделала, как у вас в статье написано: в шапке поставила тег h2, в записях h1. И тут мне высказали такое мнение «То что вы поменяли заголовок шапки с h1 на h2, это неправильно. Вообще уберите h с заголовка сайта в записи. Каждая запись должна начинаться с заголовка записи в h1. А вас теперь h2 ( заголовок сайта) -h1 (заголовок записи)». У меня вопрос — имеет ли значение, что находится выше h1 или h2?

    • Ольга:

      Анна, Вы все сделали правильно. На каждой странице (в записи) должен быть один тег H1.

      Если Вы имеете в виду главную страницу, то там может быть несколько тегов h2, а h1 может не быть вовсе (это не страшно).
      Проверьте свои страницы в сервисе Мегаиндекс, многое поймете в оптимизации.

  • Ангелина:

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

    • Ольга:

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

  • Leonard:

    Добрый день. А не подскажете, как сделать чтобы логотип сайта был в теге H1 на главной, а на других страницах просто ссылкой. Спасибо!

    • Ольга:

      Логотип обычно находится в шапке (header.php). А шапка на всех страницах одинакова.

  • ирина:

    Спасибо за нужную статью. Впервые узнала, что можно редактировать сайт онлайн. Это очень удобно. Еще раз, спасибо!!!!!

  • Елена:

    Если говорить о проверке сервисом Мегаиндекс, действительно, по отдельной странице с постом все хорошо. А когда выполняешь аудит сайта, Мегаиндекс заявляет, что состояние с H1 неудовлетворительное. Интересно, как понять это противоречие?

    • Ольга:

      Елена, а Вы откройте исходный код главной страницы (правая клавиша мыши, исходный код).
      H1 на главной у Вашего сайта нет. Вот Мегаиндексу и не нравится.

  • MargoLexaloca:

    Например, гарнитура roman является общим названием для целого семейства классических шрифтов, и отличается засечками на концах букв и комбинаций толстых и тонких линий в начертании символа. Для любого фрагмента документа (слова, строки, абзаца, предложения или всего документа) можно задать шрифт. Затем для изменения типа шрифта, размера и начертания воспользуйтесь панелью инструментов. Если требуется увеличить (уменьшить) размер шрифта, то раскройте список размеров и выберите нужное значение или введите его самостоятельно.

  • Оля:

    Cпасибо, вам за статью. Все понятно. Только беда в том, что нет у меня single.php, а есть только style.css А там всего много, сразу и не разобраться. У меня в шапке картинка. А в постах выводится заголовок h2 А мне нужно исправить на h1

  • Баяс:

    Здравствуйте, мне кажется, если в шапке h2, а в названии статьи h1-это неправильно, таким образом нарушается иерархия тегов, соблюдать которую советует сам Яндекс. Правильная иерархия:
    h1- заголовок сайта
    h2-заголовок статьи
    h3-h6- подзаголовки. Между прочим, у того же Ktonanovenkogo все заголовки статей заключены в h2, что не помешало ему раскрутить блог. Он же ведь не сразу стал посещаемым, тоже приходилось начинать с нуля. Вообще в этом вопросе нет ясности, сколько людей, столько мнений.

    • Ольга:

      Баяс, если Вы продвигаете свой блог как бренд — название блога заключите в H1.
      Если используете продвижение по низкочастотным запросам (малобюджетное), в H1 должны быть заголовки статей с ключевыми словами.
      Насчет блога Дмитрия Ktonanovenkogo — в одной из статей он сожалеет, что заголовки его статей в H2. Просто на момент, когда он это обнаружил, его блог был уже раскручен (в отсутствие конкуренции), а изменять что-то Дмитрий не решился. Эту информацию я у него же и прочитала.

  • Виктор:

    Только начинаешь исправлять, одна за другой появляются новые проблемы — изменяются цвет, размеры заголовков постов и даже блога, ибо в шаблоне все взаимосвязано.

    • Ольга:

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

  • Михаил ATs:

    Здравствует Ольга!
    У Вас вроде как не упомянуто о циклических ссылках того же ЛОГО сайта?
    А это тоже очень важно! У Вас на заглавной странице цикл и к тому же нет тега h1??
    Или я что-то упустил?

    • Ольга:

      Михаил ATs, да, пока так. Нашла решение, как сделать H1-заголовок сайта на главной, H1- название статей на страницах постов, но со стилями пока не получается. Название блога на страницах постов смотрится не очень хорошо.

  • Михаил ATs:

    Ну, стили это фигня… справитесь. Было бы желание.
    Желаю удаче быть))

  • Инна37:

    Вроде ничего сложного. У меня все получилось с первого раза. Автору Спасибо!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

 для диалога необходимо принять правила кофиденциальности *