Анатомия заголовков H1-H6 для оформления и структуризации контента

Добрый день, уважаемые посетители.

Сегодня будет статья по теме заголовков H1-H6 для оформления и структуризации контента на сайте.

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

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

Цели и примеры использования

Основные 2 цель заголовков в тегах H1-H6 - оформление и структуризация контента на страницах ресурса с целью сделать его более читаемым и легко потребляемым посетителями сайта. Никаких других целей мы не должны преследовать от этих тегов.

Кроме простого употребления в качестве элементов структуризации контента и его оформления, посетители часто используют данные теги, чтобы придать необходимый дизайн отдельным фразам или даже целым предложениям. Получается ситуация, когда тег H6 (например) имеет дизайн просто жирного шрифта и вместо того, чтобы выделить строчку в тексте тегом <strong>, они заключают его в тег H6. Это в корне неправильно.

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

К тому же заголовки H1-H6 имеют иерархию, что делает их различным по оформлению, как минимум по размеру шрифта. Каждый низший уровень должен быть менее заметный, чем вышестоящий над ним.

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

Но тут один момент - проследите, чтобы заголовки нижнего уровня (ближе к H6) были похожи на заголовки и не сливались с обычным текстом. Они должны быть похожи на заголовки, а не просто на жирный шрифт.

Исходя из такого оформления, мы можем понять, что заголовки должны выдерживать свою иерархию при употреблении их в качестве элементом структуризации текста. Не может быть такого, что сначала идет первый заголовок H1, а затем сразу H5 или H6. После первого уровня логично и правильно будет использовать только заголовок в теге H2. Это важно, как с точки зрения самого оформления материала, так с точки зрения выдержки правильной структуры.

Поисковые системы сейчас обращают внимание на данные теги. Но не как на СЕО элементы, а как на элементы структурирования. Поэтому странно будет, если идет H1, а потом сразу H6.

При использовании данных тегов мы обязательно выдерживаем структуру. Если опускаемся на уровень вниз, то никаких прыжков через уровень. Структуру должна быть следующей: H1-H2-H3-H4-H5-H6.

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

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

  • Не заканчиваются точкой;
  • Выдерживаем иерархию при употреблении;
  • Нет цели разместить ключевые слова;
  • Имеют место быть даже в очень коротких статьях, так как любой текст можно разбить на логические части;
  • В заголовке вписывает краткую суть последующего текста, а не что-то "лишь бы было".
к содержанию ↑

Основы использования H1

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

  • H1 всегда один раз на каждой странице;
  • Побуждаем пользователя к прочтению материала, поэтому имеется смысл использовать цепкие слова (например, секреты, лучшие фишки и так далее);
  • Делаем отличным от тега title, который отображает название страницы в поисковой выдаче и побуждает переход на страницу сайта из поиска. Он должен быть немного отличным, но обязательно должен давать понимание того, что контекст материала на странице не изменился;
  • Употребляем ключевое слово статьи, но в разбавленной форме, а не в точном вхождении;
  • Не рекомендуется использовать знаки препинания.
к содержанию ↑

Использование на практике

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

Распространенная ситуация, когда вместо H1 стоит H2. Это не является грубой ошибкой, но лучше такого не допускать.

Если мы говорим об использовании остальных уровней заголовков H2-H6, то их уже стоит использовать в ручном режиме.

Использовав какую-нибудь CMS для создания сайта, данные заголовки добавляются в статьи очень просто. Например, в WordPress на панели форматирования в редакторе страницы всегда имеется пункт заголовков, где можно выбрать нужный уровень, ранее выделив нужный текст, который необходимо заключить в заголовок.

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

Что касается стилей оформления для каждого уровня, то в файле стилей стоит добавить правила к каждому уровню.

Заметьте, что перед названием уровня заголовка в стилях нет никаких точек и решеток. Внутри скобок указываем сами стили: тип шрифта, размер, цвет, фон и так далее.

к содержанию ↑

Дизайн заголовков H1-H6

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

В моду приходят простые, но в то же время оформление заголовки с помощью различных выделений линиями, подчеркиваниями с помощью фоном и так далее.

Я когда-то давал уже некоторые примеры таких дизайнов. Даже, если взять мой блог, то главный заголовок в H1 оформлен не просто большим шрифтом на белом фоне с остальным текстом. Он отделен серой рамкой на общем фоне сайта, что делает его более заметным и акцентирует внимание на нем.

Приведу вам еще 2 примера оформленных заголовков в H1.

Как видим, это не просто жирный шрифт, а красивый фон с волнистой нижней поверхностью и подчеркнутой верхней.

Также интересное оформление можете сами посмотреть на этой странице.

Что касается заголовков H2-H6, то их не просто можно оформлять каким-то фоном, а делать им нумерацию (если используете содержание в начале страницы) в виде красивых картинок. Опять же, это не должны быть простые цифры. Вот хороший пример такой задумки.

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

к содержанию ↑

Ошибки в употреблении

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

  • Больше одного H1 на странице. Это не правильно. Только один раз в каждом документе;
  • Использования тегов H1-H6 для оформление дополнительных элементов сайта. В самом начале я писал, что предназначение этих документов - оформление и структуризация контента. Поэтому, их стоит использовать только в контенте. Большинство шаблонов сайтов содержат данные теги в боковых колонках для придания стилей их названий и так далее. Ярко выражено это в шаблонах WordPress, когда название каждого виджета в сайдбаре заключено в H3 или в другие теги.Если такая ситуация имеется, то заменяете заголовочные теги в служебных элементах сайта на другие, например на тег "span";
  • Специально вписываем ключевые слова. Раньше бытовало мнение, что вписав ключевые слова в прямом вхождении в заголовки всех уровней, можно повысить их плотность и позиции такой страницы будет выше. Но сейчас это уже "карается законом" поисковых систем и накладываются санкции за спам в заголовках. Тем более, данные теги ранжируются по другим алгоритмам. Вывод: нет цели вписать ключевые слова;
  • Частое употребление точек и знаков препинания. Точки в заголовках вообще употреблять не стоит, так как это неправильно с точки зрения, как копирайтинга, так и общих правил оформления текстов. Количество знаков препинания также стараемся минимизировать, чтобы повысить читаемость заголовков. Сюда же можно отнести и большое количество слов - не делаем слишком длинные заголовки;
  • Не соблюдается выдержка структуры с точки зрения иерархии. Старайтесь соблюдать логическую цепочку в построении иерархии тегов H2-H6 на каждой странице;
  • Использование тегов H1-H6 для оформления других элементов текста, а не заголовка. Это то, о чем я говорил выше, когда некорректно настроены стили оформления каждого тега и вместо обычного выделения жирным можно использовать заголовок какого-нибудь уровня.
  • Заголовок не уместен или не несет контекст текста, который идет за ним. Чтобы научиться создавать логические заголовки, возьмите пару хорошо оформленных книг, которые вам было легко читать. Также ориентируйтесь на структуризацию контента на сайте Википедии;
  • Неиспользование заголовков H1-H6 вообще или же отсутствие на небольших текстах. Просто полное отсутствие и говорить не о чем, а вот про отсутствие на небольших страницах - момент сомнительный, так как любой текст (даже минимальные 1000 символов) имеют логическую структуру. Переход от одной темы к другой. Почему бы его не разбить на логические части подзаголовками различных уровней?

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

Кстати, сможете найти небольшой недочет по моим заголовкам на сайте? Если да, то пишите в комментарии. Данный момент не сильно заметен, но он имеется.

До встречи в следующих материалах. Все еще впереди.

С уважением, Константин Хмелев!

40 лет Победы51937Украина, Днепропетровская обл., г. Днепродзержинск,+38 093 338 11 41
Комментариев: 22
  • Про знаки препинания, конечно, задело - пришлось исправлять, а в дальнейшем даже переделывать заголовки на более читаемы без точек. Здесь трудности возникают, ведь смысл теряется без знаков препинания. И что поиску не нравятся грамотные предложения???

    • Заголовок должен быть лаконичным и попадать в "самую точку" без лишних слов и оборотов. Поисковику легче будет воспринимать простой заголовок, чем целое предложение. Ведь заголовок на то и заголовок. В нем не должно быть отдельных предложений. Если не можете сделать лаконичный заголовок, то делайте огромный целым предложением. В этом нет ошибки, но это и не совсем грамотно. Многие сайты так живут. Посмотрите в хорошо оформленную книгу, как там сделаны заголовки и подзаголовки. Это всего лишь 3-5 слов без каких-либо запятых и точек. Заголовок четко передает суть последующего за ним текста.

      • Спасибо Константин, всегда даете быстрые хорошие ответы!

  • А мне вот что интересно. Сейчас готовлю большую статью, в которой много заголовков. Хочется, чтобы визуально все они были одного размера, кроме заключительных с выводом и поскриптумом. Можно ли использовать подряд теги одного порядка, например Н2-Н2-Н2 или Н3-Н3-Н3? Или обязательно нужна последовательная иерархия на уменьшение тегов?

    • С точки зрения оформления заголовки должны быть разного размера. Чем выше уровень, тем больше размер. Но, если вам так хочется, то можете сделать и одинакового размера, но я не рекомендовал бы. Да, можете конечно. Можете ограничиться только заголовками H2 и все. Это не критично. Но, если будет подпункт в каком-то пункте, то конечно же лучше употребить в этом подпункте заголовок H3 и, если он будет размером ниже, чем H2, то посетителю будет четко понятно, что этот пункт является подпунктом и относится к одному большому пункту. Таким образом смысловая цепочка в его голове уложится лучше и быстрей.

      • Правильно ли я понял, что в статье заголовки могут выглядеть следующим образом:
        Н1 - название статьи, то есть тема
        Н2 - заголовок, ниже Н3 - подзаголовок, возможно ещё Н4 - какой-то дополнительный пункт
        Затем снова Н2 - ещё один заголовок, потом Н3 - подзаголовок, может быть ещё Н4 и доплнительный Н5
        И так далее.

        Так ли это?
        Таким образом оформляется план речи докладчика, содержащий Тему, Главные пункты, Второстепенные мысли, раскрывающие главные пункты.

        • Да. Возьмите в пример книгу. Будет главный заголовок всей главы. Затем подзаголовок и может быть еще подзаголовок. И каждый такой подзаголовок становится все меньше и меньше. Затем идет новая глава, подзаголовок и так далее.

  • Прочитала Вашу статью, стала анализировать свои заголовки, и оказалось, что
    1. title и заголовок статьи у меня одинаковые, причем в админке нет для тайтл отдельного поля ввода.
    2. В тег h1 завернут не только заголовок статьи, но и: заголовок сайта, заголовки виджетов в сайдбаре.
    Скажите, как на ваш взгляд:
    1. Насколько критичны эти ошибки в плане продвижения?
    2. Можно ли их исправить своими силами?

    • 1. Для тайтла поле ввода у вас есть, т.к. установлен плагин seo by yoast. В редакторе каждой статьи имеется блок плагина. Там имеется заголовок, который и является тайтлом. Нажмите на него и он станет редактируемым. Тоже самое касается и описания в этом блоке.

      2. Это в корне неправильно и это грубая ошибка. На каждой странице тег h1 должен быть только один раз и только в заголовке страницы. Т.е. в записях - это название статьи, в рубрика - название рубрики, на главной - название сайта (можно и не делать), на страницах - название страницы. В других местах нужно убрать его. В анонсах заголовки также не должны быть в него заключены.

      Ответы:

      1. Первая не критична, но при общем неправильном подходе к оптимизации может привести к фильтрам за переоптимизацию. Заголовок H1 создан для посетителя, а не для поискового робота и в идеале там не должно быть ключевой фразы в точном вхождении. В тайтле - в точном, в H1 - в разбавочном (сменить окончание, добавить внутрь фразы слово и т.д.).

      2. Заголовки исправить можно, но нужно лезь в шаблон и править верстку. Нужны хотя бы базовые знания.

  • Константин, спасибо за ответ. Попробую исправить.
    Насчет тайтл, я так поняла, что плагин тут ни при чем, у меня шаблон такой, что выводит тайтл в заголовок без моего, так сказать, участия, вот так: Игры и упражнения для развития внимания, и с остальными заголовками тоже косяк из-за классов h1

    • Вы неправильно понимаете всю ситуацию. H1 тут не причем. То, что вы вводите в заголовок статьи в редакторе в стандартное поле заголовка, по умолчанию и подставляется в тайтл. Именно поэтому и устанавливается СЕО плагин, чтобы можно редактировать тайтл, который будет отличаться от заголовка, а также прописывать описание для страницы. Под полем ввода текста у вас есть блок от плагина seo by yoast. Там имеется тайтл и описание, вы можете их задавать и тогда заголовок статьи будет отличающимся от тайтла.

  • Может у меня с глазами проблема, но нет в дополнении от seo by yoast графы title. Есть: Snippet Editor, Фокусное ключевое слово, META ключевые слова. Все! =)))
    Может, какие-то настройки плагина неправильные у меня, я теряюсь, вроде все проверила.

    • Все верно. Блок "Snippet Editor" вам и нужен. Там имеется заголовок, который тайлом и является. Если вы на него нажмете, то он станет редактируемым. Тоже самое касается и поля описания, которое находится ниже.

  • Да, спасибо, поняла где он, но он все равно не редактируется. Карандашик нарисован, а когда на него нажимаешь, поле просто пропадает(((
    Замучила я Вас, наверное, уж извините. Не подскажете хорошую статью по настройке плагина seo by yoast? Перелопатила сейчас три разные статьи, ничего не нашла по моему случаю подходящего.

    • Когда вы наводите на название, например, у вас вместо стандартного курсора появляется рука. Жмете на поле и оно сразу становится редактируемым. Становится пустым оно потому, что там ничего и не введено, а название, которое показывается, визуально подставляется из заголовка статьи, чтобы вы видели, что на данный момент отображается в теге title на сайте. Просто нажмите на поле и введите свой тайтл, все просто. Тоже самое касается и описания. Можете мучить, сколько захотите) Я отвечу) Статей по настройке море. У меня тоже имеется материал по настройке, но он немного устарел, но устарел нее в плане "актуальности настроек", а в плане расположения настроек. Плагин обновился достаточно весомо и некоторые настройки находятся в других пунктах. Но их суть осталась та же. Можете изучить, если что будет непонятно, задавайте вопросы в комментариях. Вот тут статья.

    • Константин, добрый вечер!
      Дошли мои руки до исправления заголовков h1 (их не один у меня на каждой странице, и в этом беда).
      Разобралась, откуда берется h1 с заголовком сайта в каждой записи. В header.php есть функция h1 class="site-title" и так далее. Вопрос - если ее убрать или записать без h1, то она же перестанет выводить как надо заголовок сайта на главной странице, а это неправильно.
      Если не сложно, подскажите, как оставить ее на главной, но убрать с остальных?
      P. S. Плагион для СЕО от Yoast с обновлением отображает Snippet Editor с раздельными полями, понятными нубам=)))

      • Здравствуйте. Я на своих сайтах в заголовке сайта вообще не использую тег H1, он у меня используется только в заголовках страниц, записей, главной также, но у меня там имеется небольшой текст о сайте в самом низу, где и имеется заголовок Н1. Сам же заголовок (логотип) сайта нигде не оборачиваю в Н1. Но, если вы хотите сделать так, то необходимо использовать условие. Выглядит оно следующим образом:

        Уберите лишние пробелы в открывающих тегах php.

        Да, плагин обновился и действительно стало проще и удобней работать с ним.

  • Ура! Получилось!!!
    Костя, вы замечательный человек!

  • Здравствуйте, Константин.
    Не совсем понятна рекомендация ходить от н6 к н2 через н5, н4, н3.
    Как-то не совсем логично это получается. Вообще не представляю, как можно так излагать материал.
    У меня всегда последовательность идет от н2 к н5 через н3 и н4, а потом снова н2. Причем промежуточные уровни подзаголовков могут несколько раз повторяться.
    В качестве примера посмотрите любую статью сайта http://housediz.ru/
    Правильно ли я поступаю?

    • Здравствуйте. Вы правильно подметили. Удалили этот ошибочный абзац из статьи. Назад мы возвращаемся всегда сразу к верхнему уровню, т.е. к Н2. Но опускаться нужно всегда плавно.

  • Добрый день,
    Просьба проконсультировать,
    установил H2 в рубрики подкатегории, пример ниже:

    Выбираем профессиональную краску для волос без аммиака

    И Н2 задвоилось, правильно ли это?

    • Здравствуйте. Ничего не понял...

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

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