Константин Хмелев

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

Опубликовано: 14.05.2016
Время на чтение: 6 мин
51
793

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

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

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

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

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

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

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

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

К тому же заголовки H1-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

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

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

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

заголовки в WordPress

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

<h2>заголовок 2го уровня</h2>

<h3>заголовок 3го уровня</h3>

<h4>заголовок 4го уровня</h4>

<h5>заголовок 5го уровня</h5>

<h6>заголовок 6го уровня</h6>

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

h1 {тут стили}

h2 {тут стили}

h3 {тут стили}

h4 {тут стили}

h5 {тут стили}

h6 {тут стили}

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

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

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

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

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

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

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

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

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

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

оформление подзаголовка

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

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

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

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

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

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

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

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

Плохо
2
Интересно
4
Супер
0
Обсуждение
  • Катя
    Опубликовано: 11.07.2015 Ответить на сообщение

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

    • Константин Хмелев
      Опубликовано: 11.07.2015 Ответить на сообщение

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

      • Катя
        Опубликовано: 11.07.2015 Ответить на сообщение

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

  • Алексей
    Опубликовано: 24.08.2015 Ответить на сообщение

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

    • Константин Хмелев
      Опубликовано: 24.08.2015 Ответить на сообщение

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

      • Алексей
        Опубликовано: 24.08.2015 Ответить на сообщение

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

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

        • Константин Хмелев
          Опубликовано: 24.08.2015 Ответить на сообщение

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

  • Наталья
    Опубликовано: 12.02.2016 Ответить на сообщение

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

    • Константин Хмелев
      Опубликовано: 12.02.2016 Ответить на сообщение

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

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

      Ответы:

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

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

  • Наталья
    Опубликовано: 13.02.2016 Ответить на сообщение

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

    • Константин Хмелев
      Опубликовано: 13.02.2016 Ответить на сообщение

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

  • Наталья
    Опубликовано: 13.02.2016 Ответить на сообщение

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

    • Константин Хмелев
      Опубликовано: 14.02.2016 Ответить на сообщение

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

  • Наталья
    Опубликовано: 14.02.2016 Ответить на сообщение

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

    • Константин Хмелев
      Опубликовано: 14.02.2016 Ответить на сообщение

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

    • Наталья
      Опубликовано: 13.03.2016 Ответить на сообщение

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

      • Константин Хмелев
        Опубликовано: 16.03.2016 Ответить на сообщение

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

        < ?php if ( is_front_page() ) : ?>
        тут прописываем код заголовка, обернутый в Н1
        < ?php else : ?>
        тут прописываем заголовок в другом теге, например в span или p
        < ?php endif; ?>

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

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

  • Наталья
    Опубликовано: 14.02.2016 Ответить на сообщение

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

  • Алексей
    Опубликовано: 05.05.2016 Ответить на сообщение

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

    • Константин Хмелев
      Опубликовано: 14.05.2016 Ответить на сообщение

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

  • Денис
    Опубликовано: 22.08.2016 Ответить на сообщение

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

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

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

    • Константин Хмелев
      Опубликовано: 22.08.2016 Ответить на сообщение

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

  • Andrey
    Опубликовано: 08.01.2017 Ответить на сообщение

    Здравствуйте Константин. С удовольствием читаю ваш блог. Все правильно пишите, и по делу доступным и понятным языком. Про запятые и точки в заголовках с одной стороны согласен, с другой нет. У меня куча запросов в Топ 1-3 в Яндексе по заголовкам с запятыми, и даже с точками. Про очередность Н2, Н3 и т д. Тоже из собственных наблюдений разницы не заметил. Да и вообще считаю все что ниже Н3 неактуально. Н4, Н5, Н6 в принципе смысла нет разбавлять, лучше несколько раз в Н3.

    • Константин Хмелев
      Опубликовано: 08.01.2017 Ответить на сообщение

      Здравствуйте. Знаки препинания можно использовать, но лучше их количество минимизировать. Особенно это касается точек, зачем разрывать тайтл? можно ведь сделать двоеточие или тире. Да, я сам в своей практике не использую Н4 и ниже. Был один сайт, где это реально было уместно, но там очень экспертные тексты были с рассмотрением всех пунктов и всевозможных подпунктов, там они делали текст очень хорошо структурированным.

  • Gamer
    Опубликовано: 19.05.2017 Ответить на сообщение

    Здравствуйте. Мой игровой сайт имеет такую структуру.
    Например игра Варфейс:
    Захватывающая игра Варфейс онлайн
    -----------------описание игры------------------------
    Трейлер игры Варфейс
    Скриншоты игры Варфейс

    Из статьи понял, что лучше сделать h1, h2, h3 по очереди. Теперь поменять все 50 игр на сайте? За 1 день если поменять структуру - ничего плохого не будет?

    • Константин Хмелев
      Опубликовано: 19.05.2017 Ответить на сообщение

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

  • Николай
    Опубликовано: 28.08.2017 Ответить на сообщение

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

    У меня стоит плагин All in One seo Pack. Когда я добавляю запись, верхняя строчка в редакторе это получается заголовок и тайтл, а под полем ввода текста стоят тоже графы: заголовок и описание. Я так понимаю, можно заголовок, тот что в верху в редакторе, и тот, что под полем ввода не менять. И туда и туда вставлять один заголовок?

    • Константин Хмелев
      Опубликовано: 29.08.2017 Ответить на сообщение

      Можно не менять, но это уже дело ваше. Тайтл и Н1 отличаться должны.

  • Людмила Билан
    Опубликовано: 17.01.2018 Ответить на сообщение

    Огромное спасибо за подробное объяснение. Сайт на WP. Наполняю сайт - "Читабельность" выдает ошибку - укажите хотя бы один подзаголовок. Все пересмотрела - не могла понять, что нужно делать. Нашла вашу статью - все понятно и все получилось. Большое спасибо. Успехов в работе.

  • Владимир
    Опубликовано: 27.02.2018 Ответить на сообщение

    Уважаемый Константин здравствуйте!

    Подскажите пожалуйста, если можно по моему сайту конкретно. У меня кулинарный сайт. Название статьи - Н1, затем короткая дополнительная информация, заголовок - Н2. Дальше идут названия рецептов, каждое название - Н3, ну а в рецептах Слова: Оглавление, Приготовление - Н4. Мы всё время спорим с коллегой, должны ли все названия рецептов быть Н3 или Н2. Т.е. в статье получается 1- Н1, 1- Н2, и 6-7 Н3, ну и которые ниже не считаю. Что лучше для ранжирования Н2 или Н3 или нет разницы? Спасибо.

    • Константин Хмелев
      Опубликовано: 13.03.2018 Ответить на сообщение

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

  • Олег
    Опубликовано: 12.04.2018 Ответить на сообщение

    Здравствуйте !
    Напишите пожалуйста,как оформлять статью написанную по форме "Вопросы-ответы". Можно ли каждый вопрос ставить как подзаголовок H3 с вопросительным знаком? Ответы получаются примерно от 150 до 500 знаков примерно.
    Например:
    Можно ли подключить интернет к ноутбуку?
    К ноутбуку можно подключиться двумя способами: проводным и беспроводным (с использованием Wi-Fi роутера).
    Можно ли подключить 2 компьютера к интернету?
    Два компьютера к интернету можно подключить с помощью Wi-Fi-маршрутизатора. Благодаря Wi-Fi можно свободно перемещаться по квартире и оставаться в сети, и подключать необходимое количество компьютеров, смартфонов, ноутбуков к сети интернет, без использования проводов. Для этого нужно только одно подключение к сети Дом.ру Interzet, и вы будете оплачивать только одну абонентскую плату. Нужно учесть, что при таком подключении, скорость вашего тарифного плана будет делиться на все подключенные компьютеры. Для настройки подключения через маршрутизатор, рекомендуем обратиться к инструкциям.
    Что такое выделенная линия?
    Это означает, что оптоволоконный кабель доходит до каждого дома, а выделенная линия до каждой квартиры.
    Как проводится кабель, до квартиры или до компьютера?
    Линия прокладывается до оборудования Абонента (Телевизор, ПК)

    • Константин Хмелев
      Опубликовано: 13.04.2018 Ответить на сообщение

      Делайте подзаголовки, в чем проблема. Если это все одном ответе, то конечно заголовки структурируют текст.

  • Сергей
    Опубликовано: 19.08.2018 Ответить на сообщение

    Здравствуйте, есть ли ограничения по количеству заголовков каждого уровня? И если не по абсолютному количеству, то, может по относительному? Т.е., например, бытует такое мнение, что есть у вас 10 заголовоков h3, то заголовков h4 должно быть хотя бы несколько, но точно не 1, лучше уж тогда вообще без него. Так ли это?

    • Константин Хмелев
      Опубликовано: 19.08.2018 Ответить на сообщение

      Добрый день. Нет, все это бред. Вы делаете структура исходя из необходимости. Сколько нужно, столько и делайте. У меня есть тексты, где по 20 заголовков Н2, вместе с ними еще около 10 Н3, но Н4 ни одного. Н4 вообще редко используется в моей практике, т.к. это уж сильно глубокий уровень. Нарезать структуру так очень сложно и в большинстве случаев это будет перебор. Вместо Н4 можно просто сделать перечисление списком и это будет более уместно.

      • Сергей
        Опубликовано: 20.08.2018 Ответить на сообщение

        Большое спасибо за ответ, тогда другой вопрос, у меня есть полноценный многостраничный сайт, а главная его страница представляет из себя типичный лендинг. Среди прочих некоторые блоки, как это часто бывает, представляют собой список из иконок и подписей к ним. Что-то вроде:
        НАШИ УСЛУГИ
        РИСУЕМ ТАНЦУЕМ ПОЕМ
        ну и над каждым таким пунктом красивая картинка. Является ли ошибкой выделять вот эти названия услуг и подобные "заголовки блоков" тегами h3..h6 ?

        И аналогичный вопрос про меню в подвале сайте. У нас оно стандартное, разбитое на колонки по теме, например:

        О КОМПАНИИ
        О нас
        Сотрудники
        Миссия
        Контакты

        ПОДДЕРЖКА
        задать вопрос
        faq
        онлайн-чат
        справочник

        Является ли ошибкой и вредно ли то, что вот эти вот заголовки блоков меню (О компании, Поддержка), которые сами по себе ссылками не являются, делать тегами h3..h6 ? просто у нас за счет этого на главной странице как раз около 20 таких h4, да и других заголовков довольно много.. Большое спасибо!

        • Константин Хмелев
          Опубликовано: 22.08.2018 Ответить на сообщение

          Вообще Н2, Н3 и т.д. это все заголовочные теги внутри статьи. Лучше их не использовать нигде, кроме как внутренних страниц для создания заголовков и подзаголовков статьи/текста. На лендинге их тоже можно использовать, но тогда выделять ими только названия целых блоков, например, заголовка блока УСЛУГИ в Н2, а перечисление услуг в этом блоке заключать не в заголовочные теги, а просто в div или span.

          В подвале, ровно как и в сайдбаре я бы вообще избавился от тегов Н/

  • seoonly.ru
    Опубликовано: 31.08.2018 Ответить на сообщение

    Благодарю за рекомендации

  • Мария
    Опубликовано: 06.09.2018 Ответить на сообщение

    Проснулась блин!)) хорошо у меня статей не много переделывать))) и спасибо Вам, четко написали,что Н2 использует много раз!) а скажите пожалуйста вот что: Я прочитала, что нельзя соединять заголовки с другими CSS, типа жирным выделить, это я ясно, но вот меня смущает,что не рекомендуют в самой теме менять размеры и цвет Н1,2,3..., но блин они огромные!!! Так где правда? Спасибки!) сайт в закладки)

    • Константин Хмелев
      Опубликовано: 07.09.2018 Ответить на сообщение

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

  • Мария
    Опубликовано: 07.09.2018 Ответить на сообщение

    Неужели я проснулась?)) Впервые читаю об этом, и отдельно спасибо, что черым по белому написали о том, что сами используете несколько раз заголовки Н2,3))) А то до этого момента я не могла до конца въехать))) С знаками препинания согласна, конечно, но у меня сфера туризма и писать статьи например " Лима Перу...." без знаком препинания как-то криво(
    У меня вот вопрос- понятно, что соединять заголовки с и дополнительно выделять его жирным это плохо, но вот некоторые пишут, что мол вносить изменения в заголовки, например, менять размер шрифта или цвет в самом редакторе это тоже плохо, но они же огроооомные. Так ли это? Сапсибо заранее. Саит в закладочки)

    • Константин Хмелев
      Опубликовано: 07.09.2018 Ответить на сообщение

      На этот вопрос я уже ответил в вашем предыдущем комментарии. Стили заголовков (размер, цвет, сам шрифт, выравнивание и т.д.) - все это меняется только через стили шаблона. Задавая эти параметры в редакторе - вы создаете кривое оформление статьи, как правило, и генерируете кучу лишнего никому ненужного кода.

      • Мария
        Опубликовано: 10.09.2018 Ответить на сообщение

        Благодарствую!!))) это вы мне 2 раза и ответили)))))

  • Anderson
    Опубликовано: 12.11.2018 Ответить на сообщение

    Спасибо вам большое. Материал оказался очень полезен и здорово мне помог!

  • Сергей
    Опубликовано: 26.01.2019 Ответить на сообщение

    Доброго времени суток.Не могли бы вы подсказать.Мельком про это было написано,но прям хочу переспросить.К примеру идет h1 текст h2.Далее раскрываю тему h2 заголовками и текстом естественно h3.На этой же странице хочу затронуть другую тему тесно связанную с этой.Но h2 на нее прям просится.То есть h2 после нескольких h3 проставлять приемлимо на одной и той же странице?И вообще как правильно h1 h2 h3h3h33 или h1 h2h2 h3h3h3h3.
    Тоесть нужно ли делать несколько h2 подряд в этом случае.
    Тут же хочу поинтересоваться в начале страницы можно разместить ссылки на якоря по всей странице.Собственно вопрос в том якорь в заголовок можно ставить.Перед ним,или проследить чтобы он в тег<h1,2,3 не попал.Как повашему правильно сделать.Искренне надеюсь что вопрос понятен.

    • Константин Хмелев
      Опубликовано: 27.01.2019 Ответить на сообщение

      По заголовкам все верно. Вы можете ставить сколько угодно Н2 подряд, ровно как и Н3, если это нужно по структуре статьи. Тут более важно, чтобы не было скачков по типу Н2-Н5, или Н4-Н2, к примеру.

      По якорям, я бы не стал нагромождать какие-либо элементы лишним. Если их и нужно сделать, то ставьте якоря перед или после заголовков. Есть код содержания от Wp-kama, в нем есть много функций, в том числе чтобы перед каждым заголовком стояла ссылка "вернуться к содержанию" автоматически. Именно такой вариант реализован на блоге у меня. Если память не изменяет, то вот инструкция: https://wp-kama.ru/id_1513/kama_contents.html.

      • Сергей
        Опубликовано: 28.01.2019 Ответить на сообщение

        Благодарю за ответ.H2-H5 и H4-H2 глупая конечно ошибка не спорю.Вот я как раз таки и спросил про такую структуру
        H1Продвижение сайта в интернете(например)
        текст
        h2 Виды продвижения
        текст
        Для следующих заголовков например:
        самостоятельное продвижение сайта
        посещение вебинаров
        использование софта для продвижения
        Лучше h3 проставлять как считаете?Учитывая что h2 только всего один?
        И если да то после этих трех h3 можно смело втыкать еще одну схожую тему в h2?
        может целесообразней новую страницу создать?Или все те по h2 тоже сделать
        чтобы не было формата h1h2h3.Где то читал что это плохо.
        хотя темы капец как похожу хочу чтобы людям удобно было и чтоб поисковики нормально относились.

        • Константин Хмелев
          Опубликовано: 28.01.2019 Ответить на сообщение

          Да, можно все в Н3 пихать, но если Н2 один, то я бы не стал делать их в Н3, а вообще Н2 убрал бы и каждый вид заключил в Н2, т.к. получится какая-то незаконченная структура. Зачем этот пункт тогда общий в Н2, если затем будет описан каждый вид продвижения? Если будет второй Н2 потом, то конечно же лучше использовать Н2-Н3-Н3..... а потом еще один Н2. Это сделает структуру более подробной и логичной. Тут уже дело не в самих заголовках как таковых, а в понимании структуры самого текста. Если нужен общий блок текста (Н2), а потом подблоки (Н3), то делайте. Надеюсь, понятно объяснил.

          Касаемо второго Н2 по другой теме в этой же статье. Тут уже вопрос в следующем. Если это раскрывает тему дополнительно и нужно (например, пункт "каких результатов можно ожидать от продвижения"), то делайте в этой же статье. Если это совершенно другой вопрос (например, как закупать ссылки для продвижения), то лучше делать отдельную статью, т.к. у нас всегда правило - одна проблема - 1 статья. И конечно же тут очень важный момент - семантика. Есть ли она? Если есть, то должно быть понятно, это отдельная статья или одна и та же. Это уже вопрос не заголовков, а семантики.

          Использование заголовков Н2 и Н3 в статье это более чем уместно и ничего плохо в этом нет. Это более структурирует контент. Для поиска это вряд ли даст какую-то ощутимую пользу. Это скорее важно для зашедшего посетителя. Он сможет не просто читать сплошной текст, а понимать, что находится в каждой части текста - для этого и созданы подзаголовки. У меня на данный момент практически всегда в статьях есть Н3, т.к. тексты я делаю очень подробными, это дает хороший результат. Иногда даже Н4 использую, но это, как правило, на очень подробным и большим темах статей.

          Для понимания, вот одна из примеров структуры с использованием Н3.

          5 Методы определения
          6 Симптомы и признаки
          7 Возможные осложнения и последствия
          8 Как лечить
          8.1 Консервативная терапия
          8.2 Хирургическое вмешательство
          8.3 Нетрадиционная медицина
          8.4 Другие способы
          9 Можно ли заниматься сексом

          Пукнты 8.1-8.4, это Н3, все остальное Н2.

          • Сергей
            Опубликовано: 28.01.2019 Ответить на сообщение

            Отлично ответили огромное спасибо!

  • Сергей
    Опубликовано: 15.08.2019 Ответить на сообщение

    А как делать красивое оформление заголовков и содержаний? Чтобы тоже сбоку слева черточка была и содержание было как бы в рамке другого цвета...

    • Константин Хмелев
      Опубликовано: 23.09.2019 Ответить на сообщение

      Это все решается css стилями. Если в них не разбираетесь, обратитесь на фриланс, там легко все сделают за минимальную плату.

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.