Заголовки на сайте h1-h6. Что это и зачем нужны

Written by Samurai on
Заголовки на сайте h1-h6. Что это и зачем нужны

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

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

Зачем нужны заголовки

Ну все довольно просто:

  • Заголовки нужны чтобы озаглавить текст или страницу, структурировать информацию на сайте и формировать логические блоки.
  • Также при наличии заголовков гораздо проще и комфортней читается текст.
  • Помимо этого заголовки очень нужны поисковым роботам, по ним роботы определяют приоритетность и важность информации.

Что такое h1-h6

Это html теги в которые записывают готовый текст заголовка и размещают эти теги внутрь html шаблона, вот так:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Template</title>
</head>
<body>
	<h1>Текст заголовка первого уровня</h1>
</body>
</html>

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

Помимо иерархии есть определенные правила оформления заголовков.

Правила оформления заголовков

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

  • Первое что стоит помнить — градация заголовков по размеру, самый крупный h1 и далее по убыванию. Вот так:

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

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

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

Так делать не стоит.

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

Вот так норм, хотя конечно шрифт довольно сомнительный, но не суть.

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

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

Теперь давайте поговорим о заголовке h1. Это один из наиболее значимых заголовков в структуре сайта или страницы.

Заголовок h1

Заголовок h1 — это заголовок первого уровня как правило находящийся в начале статьи или страницы. Он имеет самый высокий приоритет на странице.

Поисковый робот и заголовок h1

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

Что такое Title и при чем здесь заголовок h1

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

Title во вкладке браузера

Во вкладке браузера

В поисковой выдаче

Title в поисковой выдаче

Есть много гипотез по поводу того должен ли заголовок h1 дублировать title. Я придерживаюсь того мнения что нет не должен, но и не должен слишком от него отличаться, вот несколько советов по этому поводу:

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

И снова про h1

Все все уже закругляюсь. Скажу еще пару полезностей в заключение.

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

Подведем итоги по заголовкам

Что нужно чтобы правильно пользоваться заголовками

  • Соблюдайте иерархию — правильная последовательность от h1 к h6 и не нужно менять их местами, иначе потеряете структуру. Чем меньше робот тратит времени на вашу страницу тем выше у нее рейтинг.
  • Не пренебрегайте заголовками на этапе дизайна, правильно оформленные заголовки помогут в дальнейшей разработке.
  • Не допускайте больше одного h1 на странице.
  • Не дублируйте тайтл и заголовок h1. Если вы используете CMS то обратите внимание что как правило во многих из них заголовок формируется именно из тайтла.
  • Делайте заголовки максимально четкими отражающими суть дальнейшего изложения, старайтесь избегать всяческих знаков препинания, это повысит читаемость заголовков.

Заключение

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

Всем бобра!

Comments

comments powered by Disqus