Заголовки h1 — h6: в чем отличия и как правильно использовать
Теги h1-h6 играют важную роль в СЕО-оптимизации. Поисковые роботы формируют список топ-ресурсов, сканируя заголовки статей. Из статьи вы узнаете, как работать с заголовками и научитесь их правильному использованию.
Веб-разработка
22900
13 окт. 2020
Наличие заголовков и подзаголовков в тексте делает информацию удобной для читателей. Благодаря им пользователь видит структуру документа и может легко в нем ориентироваться. В процессе верстки веб-страницы для создания заголовков используют теги <h1> — <h6>. Такие теги являются элементами разметки HTML и служат для определения важности заголовков: чем больше номер, тем ниже важность заголовка. Следовательно, h1 — главный заголовок на странице, который размещают над текстом. А подзаголовки h2-h6 проставляются по принципу вложенности.
С технической точки зрения, теги заголовков — это один из важнейших маркетинговых инструментов, благодаря которому поисковые роботы определяют степень значимости страницы и выводят ее в топ. Давайте рассмотрим каждый вид заголовка и определим, где уместнее использовать каждый.
h1 — это обязательный заголовок для всех страниц. Это может быть название страницы, статьи или товара, которое несет конкретную информацию, о чем будет читать пользователь. Важно отметить, что многие путают этот заголовок с <title> (заголовком страницы). Title отображается вверху экрана в браузерной строке, когда открыта страница ресурса. Тег <title> прописывается в шапке страницы между <head></head>, а теги <h1>-<h6> указываются в «теле» страницы: <body></body>.
Тегом <h2> размечаются подразделы страницы или статьи. С помощью тега <h2> выстраивается навигация по тексту: он разбивает его на смысловые части, помогает выделить важные моменты и легче усвоить информацию пользователю.
Теги <h3>-<h6> включают в себя уточняющую информацию. Использование всех заголовков встречается крайне редко. Это должна быть огромная статья с выстроенной иерархией.
Если не будет выдержана иерархия и четкая структура, заголовки младшего порядка, например, h6, могут слиться с обычным текстом. Размер шрифта идет по убыванию номера заголовков. От h1 — самого крупного до h6 — самого мелкого.
Иерархия заголовков на странице:
Пример иерархии заголовков на сайте:
<h1> Заголовок </h1>
<h2> Первый подзаголовок </h2>
<p> Параграф текста </p>
<h2> Второй подзаголовок </h2>
<p> Параграф текста </p>
Заголовки на веб-странице выполняют несколько важных функций: улучшают навигацию по странице, делают текст читабельным и интуитивно понятным. Правильные заголовки помогают повысить положение статьи или веб-сайта в рейтинге поиска. В обратном случае, велика вероятность, что источник потеряет рейтинг и не дойдет до своей целевой аудитории.
С технической точки зрения, теги заголовков — это один из важнейших маркетинговых инструментов, благодаря которому поисковые роботы определяют степень значимости страницы и выводят ее в топ. Давайте рассмотрим каждый вид заголовка и определим, где уместнее использовать каждый.
Главный заголовок
h1 — это обязательный заголовок для всех страниц. Это может быть название страницы, статьи или товара, которое несет конкретную информацию, о чем будет читать пользователь. Важно отметить, что многие путают этот заголовок с <title> (заголовком страницы). Title отображается вверху экрана в браузерной строке, когда открыта страница ресурса. Тег <title> прописывается в шапке страницы между <head></head>, а теги <h1>-<h6> указываются в «теле» страницы: <body></body>.
<h1> Главный заголовок </h1>
Как использовать заголовок h1
- На странице можно использовать только один заголовок первого порядка. Он должен стоять в начале текста, быть видимым пользователю и отражать суть информации.
- Цель заголовка — побудить читателя открыть страницу и прочитать текст.
- Тег <h1> не заканчивается точкой.
- Длина заголовка не должна превышать 65 символов.
- В заголовке старайтесь использовать самое частое слово в тексте.
- Тег <h1> не должен быть ссылкой или картинкой.
- Перед тем, как вручную прописывать h1, убедитесь, что движок не задает его автоматически;
- Проверьте, закрыли ли вы заголовок. Если нет, то это может сбить с толку поисковики. Такие страницы рискуют быть понижены в рейтинге.
Заголовок второго порядка
Тегом <h2> размечаются подразделы страницы или статьи. С помощью тега <h2> выстраивается навигация по тексту: он разбивает его на смысловые части, помогает выделить важные моменты и легче усвоить информацию пользователю.
Как использовать заголовок h2
- Используйте на странице 2 и более заголовка h2, которые будут отражать суть текста под ним.
- Тег <h2> не должен быть изображением или ссылкой.
Заголовки h3 — h6
Теги <h3>-<h6> включают в себя уточняющую информацию. Использование всех заголовков встречается крайне редко. Это должна быть огромная статья с выстроенной иерархией.
Как использовать заголовки h3 — h6
- Не допускайте перескакивание через уровень заголовков. Нельзя использовать меньший тег, если в вашем коде нет большего. То есть если вы используйте тег <h5>, то обязательно нужно использовать <h2>, <h3> и <h4>.
- Чем выше уровень заголовка, тем крупнее шрифт.
- Не допускайте переспама ключевых слов в подзаголовках. Используйте ключи только в title и h1.
- Во всех тегах <h...> можно использовать только текст и знаки препинания.
- Все заголовки h1-h6 служат только для разбиения текста на логические части. Выделять этим тегом предложения и фразы с целью выделить их жирным цветом — запрещено.
Иерархия заголовков
Если не будет выдержана иерархия и четкая структура, заголовки младшего порядка, например, h6, могут слиться с обычным текстом. Размер шрифта идет по убыванию номера заголовков. От h1 — самого крупного до h6 — самого мелкого.
Иерархия заголовков на странице:
Заголовок первого уровня — h1
Заголовок второго уровня — h2
Заголовок третьего уровня — h3
Заголовок четвертого уровня — h4
Заголовок пятого уровня — h5
Заголовок шестого уровня — h6
Пример иерархии заголовков на сайте:
<h1> Заголовок </h1>
<h2> Первый подзаголовок </h2>
<p> Параграф текста </p>
<h2> Второй подзаголовок </h2>
<p> Параграф текста </p>
Заключение
Заголовки на веб-странице выполняют несколько важных функций: улучшают навигацию по странице, делают текст читабельным и интуитивно понятным. Правильные заголовки помогают повысить положение статьи или веб-сайта в рейтинге поиска. В обратном случае, велика вероятность, что источник потеряет рейтинг и не дойдет до своей целевой аудитории.
Читайте другие статьи
6 инструментов разработчиков с открытым исходным кодом
Знакомимся с подборкой полезных бесплатных Open Source сервисов для веб-разработки. Совершенствуйте и ускоряйте свои повседневные рабочие процессы, не жертвуя качеством разработки.
Веб-разработка
676
26 сент. 2023
Как веб-разработчику спланировать карьеру в IT?
Узнайте, какие карьерные возможности в IT есть у веб-разработчиков. Разбираем, в каком направлении могут продолжить развитие Senior-разработчики, и что такое горизонтальный карьерный рост в IT.
Веб-разработка
1967
14 марта 2023
Почему в 2022 году нужно учиться на веб-разработчика?
Актуальна ли профессия веб-разработчика в 2022 году? Рассказываем, зачем становиться веб-разработчиком, и почему такие специалисты всегда будут в цене на рынке труда.
Веб-разработка
21693
21 янв. 2022
Получайте первыми свежие статьи из нашего блога прямо на вашу почту
Никакого спама. Только ценные и полезные статьи для вас!
