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

Знаю, о чем вы подумали: еще одна статья о том, что заголовки должны быть осмысленные, уникальные и прочее бла-бла-бла. Нет, сегодня я хочу рассказать вам о другой проблеме, которая лежит в смежной области SEO и фронт-энда (проще – верстальщика). Дело в том, что о сути заголовков написано уже столько статей, что если все их собрать да распечатать, я бы до конца жизни не покупал туалетную бумагу. А вот о чисто техническом подходе (какой размер должен быть у заголовка, цвет, чем h2 отличается от h3, какие ошибки могут быть в сайтах, сверстанных давно, и прочее) – об этом написано намного меньше.
Итак, сперва следует понять главное – зачем нужны заголовки и почему вокруг них столько шума. Обратите внимание: мы говорим не о заголовке страницы (title, который прописывается в head), а о внутренних заголовках h1-h6.

Суть заголовков

Чтобы лучше понять суть заголовков, давайте вспомним начальную школу. Первые числа сентября, вам задают домашнее задание – написать сочинение на тему: «Как я провел лето». Учительница должна проверить 25 таких сочинений. Как вы считаете, какое больше привлечет ее внимание?

Очевидно, что работа Петрова привлечет внимание как «Марь Ивановны», так и Яндекса с Гуглом. Заголовки нужны для того, чтобы сформировать структуру материала, будь то статья, сочинение или карточка товара. Они по умолчанию выделяются (об этом поговорим позже), бросаются в глаза пользователю и обращают на себя внимание поисковых систем. Заголовок сообщает, о чем пойдет речь дальше, в этом конкретном кусочке документа.

Техническое оформление заголовка

В стандартах html уже заложено выделение тега заголовков. Обычно h1 — самый большой (18 шрифт по сравнению с обычным 12 + жирный), h2 — 16 и жирный, h3 – или просто жирный, или 14 и жирный. Начиная с h4 выделение обычно идет только болдом, и то не всегда.
Многие придают тексту дополнительное выделение, например, иногда встречаешь:

<h2><strong><center>Заголовок 2</center></strong>

Так делать неверно. Не то чтобы это была критическая ошибка, но все же выполнено не по стандарту, и валидатор может ругаться (а если у вас html5, то точно будет). По новым требованиям, все «украшательства» следует выносить в стили в head:

h2 {text-align:center;
font-weight:bold;
}

Или еще правильней — в CSS. Аналогично: не стоит заголовки заключать в дополнительные контейнеры типа div, span или абзац p.
Другими словами: заголовки не должны быть обрамлены никакими дополнительными тегами: ни абзацами, ни выравниваниями, ни увеличением шрифта и прочим. Только открыть заголовок, сам текст и закрыть заголовок:

 

Чего не стоит добавлять в заголовок

Первое, на что хочу обратить внимание, – раньше в заголовок h1 верстальщики часто заключали логотип:

<h1><img scr="images/logo.jpg" alt="Логотип компании"></h1>

Объяснение простое: логотип является важным элементом сайта, поэтому на нем мы и сосредотачиваем внимание. Сейчас такое встречается редко, но все еще встречается. Поэтому откройте код и посмотрите, как у вас оформлен логотип. Если так — исправьте, это неверно.
Еще одна фишка программистов – они используют заголовки для визуального выделения текста. Так, например, часто можно увидеть в заголовках слово «Поиск» или полностью все меню заключено в какой-то заголовок. Так делать категорически нельзя. Если пользователи и не заметят подвоха, то роботы сочтут это за спам.
Ссылки, в принципе, могут быть в заголовках, если вы действительно осознаете, что делаете, и умышленно придаете вес этой ссылке. А вот картинки все же не стоит заключать — пользователь разницы не увидит, а поисковик может обидеться.

Порядок и обязательность заголовков

После прочтения ряда статей люди осознают, насколько их сайт несовершенен и начинают лепить заголовки, где ни попадя. В итоге получается что-то типа такого:

Не стоит так увлекаться. Используйте заголовки с умом и только там, где они действительно нужны. Что должно быть обязательно? Только h1, т.к. это название документа (типа названия сочинения). Остальные нужно уже смотреть применительно к каждому конкретному документу/странице. Если у вас статья всего-то из нескольких абзацев, достаточно только основного. Если же несколько страниц – логично разбить его на части с использованием разных типов заголовка.
На что еще важно обратить внимание – это последовательность. В самом начале документа должно идти h1. Затем h2, h3 и так далее. Нельзя начинать страницу с h2 или делать структуру такой: h1 — h3 — h2. Согласитесь, довольно сложно было бы читать книгу, если бы она начиналась с пятого раздела, а на 8 странице вы бы только узнали название самой книги. Ничего сложного, простая логика.

Насколько важен текст заголовков h3-h4

ОК — скажете вы. H1 понятно, с h2 можно поработать. Важны ли дальнейшие? Поисковики смотрят только на наличие и грамотность заголовков или же вникают в суть? Постараюсь разъяснить еще одним примером:

Оба примера верны с технической точки зрения. Более того, оба могут быть интересны, просто упор сделан на разные аспекты лета. Вполне очевидно, что Иванов пойдет куда-нибудь на геологический факультет, а Петров — на журналистику. Это не значит, что Яндекс или Google посчитает какой-то документ лучше. Он придаст им оттенок и будет показывать, исходя из ожиданий пользователя — их интересуют приключения (все равно когда) или их интересуют конкретные месяцы.
Итак, заголовки являются важнейшей частью любого документа, как печатного, так и электронного. Важно понимать, где, когда и как их следует использовать. Но в первую очередь вы должны понимать, что как бы здорово вы ни назвали свое сочинение, если содержание ни о чем, оценка вас не порадует. Если вы скопировали статью с другого сайта, какой бы идеальной ни была структура – высоких позиций вам не получить. Ведь заголовок – это всего лишь один, из огромного количества, фактор, и только за счет него невозможно добиться успеха.
С другой стороны, при прочих равных условиях, конечно же, выиграет тот документ, у которого заголовки будут более привлекательными и грамотными!