Заголовки h1-h6

Как уже отмечалось ранее, применение заголовков h1-h6 является не только хорошим тоном, но и несёт определённую пользу для SEO, помогает поделить содержимое документа на смысловые составляющие.

Если с точки зрения вёрстки опора контента — блоки и таблицы, то с точки зрения контента опора — заголовки и параграфы. Именно по этому важно понимать и планировать структуру заголовков ресурса.

Уровни заголовков h1-h6

Заголовки в языках множества HTML имеют 6 уровней и задаются с помошью парных тегов.

1. <h1>Первый уровень</h1>
2. <h2>Второй уровень</h2>
3. <h3>Третий уровень</h3>
4. <h4>Четвертый уровень</h4>
5. <h5>Пятый уровень</h5>
6. <h6>Шестой уровень</h6>

<h1></h1> — Заголовок первого уровня. Страница должна иметь единственный заголовок первого уровня h1, он самый важный должен отражать суть и характер материала.

Следуя логике уровней, заголовок h1 просто обязан быть выше заголовков нижних уровней логически (должен находиться выше в структуре вёрстки ресурса).

Верстание логотипа

С точки зрения SEO не очень хорошо, когда изображение логотипа обёрнуто в заголовок. Тем не менее, следуя спецификации w3c — это допустимо. Применив CSS, в заголовок можно завернуть практически всё, что угодно и расположить элементы в нужном для нас порядке.

Вот мой пример кода заголовка первого уровня с ввёрстанным логотипом, являющимся ссылкой на главную страницу:

<h1>
<span>Web</span>&nbsp;
<span>индустрия</span>&nbsp;
<span class="under">под микроскопом</span>
<a title="На главную" href="http://www.shift-web.ru/" rel="home">
<img alt="Shift-Web.RU" src="/themes/shift-web/images/shift-the-web.png" class="logoSW" />
</a>
</h1>

Что мы здесь видим: 3 словоформы обособленные тегами <span> и разделенные пробелами  . Пробел нужен для того, чтобы поисковая система могла правильно спарсить заголовок: если их не будет, то все словоформы сольются, что негативно отразится на странице выдачи.

Хорошим тоном будет сделать логотип кликабельным, ведущим на главную страницу сайта. Это не только удобно, но и давно признано «кошерным» для юзабилити. Для этого мы завернем изображение в ссылку, укажем альтернативное описаниеalt="" и установим ссылке аттрибут rel="home"(подробнее тут), который укажет, что ссылка ведёт на главную страницу.

Подзаголовки h2 и заголовки нижних уровней

Заголовок второго уровня h2 также называют подзаголовком. Он носит характер заголовка статьи и может быть использован в статье неоднократно.

Остальные заголовки, h3-h6, — это опорные подзаголовки материала, которые могут содержать информацию об абзаце или содержании возглавляемого ими участка контента.

Их количество не ограничено, но помните: «Чем больше заголовков насеяно в документе, тем меньшее значение им уделяется». Это правило работает по принципу рассеивания веса как для человека, так и для поисковой системы.

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