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

мета тег 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 ей будет полезен. H1 аудит

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

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

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

<?php the_title(); ?>

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

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

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

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

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

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

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

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

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

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

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

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

Где в CSS искать название блога В правом окне мы видим, какой элемент надо изменить в стилях 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. Пробуйте, делайте, спрашивайте. Правильных и красивых вам заголовков.

Понравилась статья? Поделиться с друзьями:
Я новичок
Комментариев: 47
  1. Василий

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

    1. Ольга (автор)

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

  2. Василий

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

    1. Ольга (автор)

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

  3. Vesna83

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

    1. Ольга (автор)

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

  4. Комнатные растения

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

    1. Ольга (автор)

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

  5. Станислав

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

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

    1. Ольга (автор)

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

  6. Елена

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

    1. Ольга (автор)

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

      1. Елена

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

  7. Вера

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

    1. Ольга (автор)

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

  8. Вера

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

    1. Ольга (автор)

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

  9. Вера

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

    1. Ольга (автор)

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

  10. Вера

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

    1. Ольга (автор)

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

  11. Юрий

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

  12. Камал

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

    1. Ольга (автор)

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

  13. Анна

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

    1. Ольга (автор)

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

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

  14. Ангелина

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

    1. Ольга (автор)

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

  15. Leonard

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

    1. Ольга (автор)

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

  16. ирина

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

  17. Елена

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

    1. Ольга (автор)

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

  18. MargoLexaloca

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

  19. Оля

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

  20. Баяс

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

    1. Ольга (автор)

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

  21. Виктор

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

    1. Ольга (автор)

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

  22. Михаил ATs

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

    1. Ольга (автор)

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

  23. Михаил ATs

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

  24. Инна37

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

  25. Мария

    А скажите плиз, как вообще это проверить? Правильно ил у меня оформлено?. Может у меня хорошии шаблон и ничего и менять не надо?

    1. Ольга (автор)

      У Вас вроде все правильно. Зайдите на страницу, которую хотите проверить. Нажмите правую кнопку мыши, выберите Посмотреть исходный код.
      На открывшейся старничке нажмите Ctrl+F H1. И посмотрите, есть ли на ней этот тег и сколько их.смотреть тег н1

      1. Мария

        Ольга, Вот я проверила, как Вы сказали, но там же 2 раза заголовок Н один, а Вы пишете, что «правильно, когда каждая страница содержит один заголовок H1». А получается, что это и в названии статьи и в первом подзаголовке из содержания. О мои творческие мозги((( Объясните плиз)

      2. Ольга (автор)

        Да, Вы правы, на главной он один, на странице в постом их два. Один лишний.

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: