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

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

Как делать заголовки ПРАВИЛЬНО?

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

Я приблизительно догадываюсь, о чем вы подумали, увидев данную статью: еще один материал об осмысленности и уникальности заголовков и прочая ерунда. Вовсе нет, здесь мы поговорим немного о другой проблеме, лежащей в смежной зоне SEO и фронт-энда (другими словами – верстальщика). Причина в том, что на тему заголовков уже писано–переписано материала, и если все их собрать вместе и распечатать, получиться длиннющий такой шлейф банальной информации. Однако на тему технического подхода к этой теме (шрифт заголовка, расцветка, различия между h2 и h3) написано не так уж много качественной информации, поэтому данный материал хотелось бы посвятить именно этому.

Итак, для начала нужно определиться с главным – для чего вообще необходимы заголовки и почему они настолько важны? Обратите внимание, речь пойдет не о главном заголовке страницы (title, прописанный в head), а о внутренних заголовках h1– h6.

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

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

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

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

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

С помощью нашего анализатора можно проверить заголовки на сайте.

Большое количество людей обрабатывает материал дополнительным выделением, к примеру, так:

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

Это не совсем верный подход. Это нельзя назвать грубейшей ошибкой, однако все-таки это не стандарт, поэтому валидатор его может не принять (особенно если выставлен html 5). Последние требования гласят, что все «приукрашивания» должны быть вынесены в стили в head:

  • h2 {text-align:center;
  • font-weight:bold;
  • },
  •  либо еще более правильно – в CSS. Аналогичная ситуация: заголовки не должны быть заключены в дополнительные контейнеры, такие как div, span либо абзац p.

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

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

Для начала присмотритесь к следующему: ранее в заголовках h1 верстальщиками зачастую был включен логотип:

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

Здесь логика простая: логотип – важнейший элемент сайта, поэтому предлагаю именно на нем и сконцентрироваться. На сегодняшний день это довольно редкое явление, но его еще можно встретить. Поэтому сделайте исправление, если это так и есть.

Также программисты пользуются еще одной примочкой – они применяют заголовки в качестве визуального выделения статьи. К примеру, частенько в заголовках встречается слово «Поиск», либо вообще в него включено все меню целиком. Это в корне неверный подход. И если большинство посетителей не обратят на это никакого внимания, но поисковые роботы сразу посчитают это спамом.

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

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

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

Поэтому всему надо знать меру, в тексте в обязательном порядке должен присутствовать лишь h1 (то есть главное название), остальные моменты нужно рассматривать отдельно для каждой отдельной статьи. Если ваша статья состоит всего из пары абзацев, главного заголовка будет достаточно, если она растягивается на несколько страниц – разбейте ее на логичные части.

Далее обратим внимание на такой момент, как последовательность. В начале материала должно быть h1, потом h2 и так далее. Логично, ведь вы не читаете книгу, начиная с 4 страницы, и продолжаете первой и третьей. Только в таком порядке: h1, h2, h3 и так далее. Вроде бы логично, но даже здесь некоторые умудряются совершать ошибки.

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

Не нужно думать, что важны лишь заголовки h1 и h2. Вот вам простой пример:

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

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

Однако если же качество текстов приблизительно равно, преимущество будет у статьи, имеющей интересный и привлекательный заголовок!

Комментарии

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