2

Использование заголовочных тегов H1-H6 на страницах сайта

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

теги h1 h6

 Наиболее важными тегами форматирования традиционно считаются заголовочные теги   h1 – h6 соответственно. Основное предназначение каждого из них – вывод на странице заголовка того или иного уровня. Сам уровень, как вы уже догадались, указывается после буквы h. Наибольшей значимостью обладают заголовки первого уровня, то есть h1. Многие не уделяют особого внимания и недооценивают важность данных тегов с точки зрения seo- оптимизации. По сути, h1 является основным заголовком страницы и часто совпадает с названием статьи, размещенной на нем (конечно, если речь идет о странице с контентом).

Также H1 может частично или полностью совпадать с тегом title. Но на этот вопрос у SEO-оптимизаторов существуют разные мнения. Во всяком случае c точки зрения ранжирования сайта заголовки h1-h3 являются самыми главными. Заголовок h2 обладает меньшей значимостью (и меньшим размером в пикселях). Обычно он используется для разбиения статьи на отдельные смысловые части, к примеру, если ее большой размер и сложная структура позволяют это сделать.

Хотя пару-тройку h2 вполне можно вставить и в небольшой по размеру текст. У заголовка h3 значимость еще меньше. Да и используют его значительно реже (к примеру, при разметке сильно структурированного текста). Что касается заголовков h4, h5 и h6, то в их использовании, как правило, нет особой необходимости и они используются не часто. Однако они могут применяться для подписи таблиц, изображений, схем и т.д.

При создании основного заголовка (h1) следует придерживаться нескольких простых правил:

  1. не размещать больше одного такого заголовка на странице;
  2. размещать его ближе к верхней части страницы (хедеру);
  3. делать его уникальным (не должен совпадать с другим h1 в пределах вашего сайта);
  4. делать его относительно коротким и емким (должен точно и коротко отражать содержимое страницы);
  5. не использовать другие HTML-теги внутри заголовка (span, a, font, img и т.д.); не использовать атрибуты у данного тега (id, class и другие);
  6. обязательно включайте ключевые слова в заголовок, желательно использовать прямое вхождение.
  7. Самый главный совет, касающийся использования абсолютно всех заголовков (c h1 по h6) заключается в соблюдении их иерархии. Другими словами, нежелательно после заголовка какого-либо уровня размещать другой заголовок, который отличается от него больше, чем на один уровень. К примеру, h3 после h1 или h4 после h2.

Оптимальный вариант – разместить сначала h2, а потом, если будет необходимость – h3, h4 и т.д. Заголовки желательно использовать только по назначению (особенно верхних уровней – с h1 по h3). То есть не следует выделять ими какие-либо слова / термины, идущие в блоке текста, и уж тем более – целые предложения.

Что касается размеров заголовков, то здесь также важно соблюдать правильное соотношение. По умолчанию браузер сам выбирает для них какой-то произвольный размер. Однако h1 всегда будет больше, чем h2, h2 больше, чем h3 и т.д.

Если вы задаете свои размеры через CSS, то учитывайте данные пропорции. Не должно получиться так, что, к примеру, h2 окажется больше основного заголовка H1. Это может нанести вред как с точки зрения SEO, так и с точки зрения юзабилити. Спасибо за внимание.

комментария 2
  1. admin
    25.01.2018 в 19:04

    Правильная написание заголовков постов имеет значение для СЕО продвижения. Пренебрегать этим правилом не стоит.

  2. Нина Горная
    25.01.2018 в 18:27

    Здравствуйте! Мне всегда было интересно, правильно ли я использую заголовочные теги. Никогда не умела правильно выбирать шрифты. Знакомый сказал, что в вашем блоге я смогу найти ответ на свой вопрос. И прочитав эту статью, я теперь с уверенностью могу расставлять правильно заголовочные теги, потому что знаю какой для чего используется.

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