Как правильно использовать теги заголовков HTML

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

Подпишитесь на наш канал Youtube

Зачем использовать теги заголовков HTML?

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

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

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

И каждый тег на вашей странице помогает всему этому по-своему.

Иерархия тегов важна

Иерархия тегов заголовков HTML имеет значение. Порядок, в котором вы используете эти теги, может повлиять на SEO вашего сайта. Хотя вы можете стилизовать их с помощью CSS и сделать тег H6 больше, жирнее и ярче, чем H2, вы все равно должны стараться сохранять их в порядке, чтобы не запутать сканеров (и читателей).

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

Вот пример:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
        <h3>Subtopic</h3>
            <h4>Very specific point</h4>
        <h3>Main Point Number 2</h3>
            <h4>Subtopic</h4>
                <h5>Example or important chart</h5>
            <h4>Specific point</h4>
                <h5>Example or important chart</h5>
                    <h6>Highly specific example explaining this point</h6>

Могут быть конкретные случаи, когда у вас есть один H6 над H4, но по большей части Google и другие поисковые системы определяют приоритет темы и оценивают эффективность контента в соответствии с поисковым намерением, используя заголовки для навигации по вашему контенту.

Теги H1

Тег H1 может быть самым простым из тегов заголовков HTML, но в то же время одним из наиболее неправильно понимаемых. В большинстве случаев вы увидите заголовок H1 как заголовок определенной страницы или сообщения. Это то, что поисковые системы (вероятно) будут отображать в результатах. Ваш браузер, скорее всего, также покажет это в строке заголовка, хотя многие плагины SEO и аналогичные приложения позволяют вам изменить это для них. По этой причине, хотя важно, чтобы ваша целевая ключевая фраза была в теге H1, это не обязательно на 100%. Напишите заголовки и заголовки семантически, чтобы охватить поисковое намерение посетителей, вместо того, чтобы заполнять теги заголовков ключевыми словами.

На изображении выше показан тег H1, используемый в качестве заголовка статьи в блоге Elegant Themes. Это также единственный тег H1 на странице. Это указывает на то, что это тема содержания на странице.

В течение многих лет стандартной практикой было иметь один (и только один) тег H1 на странице. По большей части это хороший совет. Google и другие поисковые системы сканируют вашу страницу и ищут тег H1. Затем они используют его для определения темы, заголовка и структуры.

Тем не менее, Google прямо заявил, что наличие на вашем сайте нескольких HTML-тегов H1 не влечет за собой никаких штрафов для SEO. Это не значит, что сойти с ума, используя их повсюду на вашем сайте, но это означает, что вы можете использовать более одного на странице, когда возникнет необходимость.

Когда использовать несколько заголовков H1

Единственная цель H1 - указать полный раздел по одной теме. Это означает, что если у вас есть одна страница с несколькими темами, вам нужно использовать H1 для каждой новой темы на этой странице. Это скажет Google, что ваша страница касается не только темы, указанной в заголовке. Но ниже может быть раздел на совершенно другую (но связанную) тему.

На одностраничных веб-сайтах это также важно, потому что на этой странице могут быть разделы «О нас», «Цены», «Контакты» и «Портфолио». Так как же сообщить Google, что контент, содержащийся в каждом разделе, представляет собой отдельную автономную единицу?

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

Вы также можете использовать тег H1 каждый раз, когда используете тег раздела на своем сайте, но мы предлагаем делать это только тогда, когда это раздел, имеющий параллельную важность с заголовком страницы, а не второстепенный.

H2 Теги

Теперь теги H2, скорее всего, станут наиболее часто используемым тегом заголовка HTML на ваших страницах. И не зря. Большинство сообщений и страниц в Интернете состоят из одной темы с несколькими подзаголовками. Мы рекомендуем, чтобы каждый создаваемый вами контент содержал хотя бы один тег H2. Yoast и другие плагины SEO предлагают заголовок примерно каждые 300 слов. В зависимости от вашего контента, для этого нужны теги H2.

Они разделяют подтемы (или шаги) для удобства чтения. Например, большинство наших сообщений в основном состоит из заголовков H2 (с H3, если применимо). Это потому, что наши статьи посвящены одной теме, в которой мы пытаемся решить одну проблему. У нас будет заголовок «Как использовать OBS Studio для прямой трансляции» как H1, но такие подзаголовки, как «Как начать работу с OBS Studio», будут в H2.

Тег H2 представляет отдельные шаги, которые относятся непосредственно к теме H1. В этом посте мы использовали следующую структуру:

<h1>How to Use OBS Studio to Livestream</h1>
    <h2>What is OBS Studio?</h2>
        <h3>What about SLOBS?</h3>
    <h2>How to Get Started with OBS Studio</h2>
    <h2>OBS Studio Setup</h2>
        <h3>Setting Up a Scene in OBS Studio</h3>
        <h3>Adding Sources in OBS Studio</h3>
    <h2>Adjusting Sources Onscreen</h2>
        <h3>RMTP Keys and OBS Studio</h3>
    <h2>Wrapping Up</h2>

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

Как правило, у вас будет несколько тегов H2 для каждой статьи, хотя под ними может не быть вложенных подзаголовков. Если ваша страница или сообщение посвящены одной теме, которая не разбита на разделы с подразделами, как в примере выше, было бы лучше иметь несколько тегов H2, чем вложенные H2 -> H3 -> H4, потому что они указывают сканерам, что вы: снова погрузиться в суптопику, чем развернуть основную тему сообщения.

Теги H3

С другой стороны, теги H3 - это то место, где ваши статьи могут действительно углубиться в детали вашей темы. Вы никогда не должны использовать эти теги H3 непосредственно под H1. Роботы Google и поисковые системы рассматривают их как подзаголовки. В то время как H2 считается основным заголовком для разделов внутри одной статьи (помните, что H1 объявляет основную тему как заголовок).

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

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

Теги H4, H5, H6

Мы не зря собрали их вместе. В общем, вам будет сложно найти какие-либо сайты, которые в полной мере используют диапазон тегов заголовков HTML от H1 до H6. Безусловно, самая популярная структура - от H1 до H3. Точно так же, как вы редко видите контур контента, выходящий за пределы второго вложенного уровня.

I. Idea 
    A. Subpoint
        1. Detail
II. Idea
	A. Subpoint
		1. Detail
III. Idea

H4

По большей части тег H4 будет служить той же цели, что и H3. Вы будете использовать их, чтобы подробно описать шаги и примеры, но они всегда будут вложены под вашими основными заголовками. Дизайнеры обычно используют CSS меньшего размера, чем H3. Как правило, они ограниченно используются при создании обычного контента. Тема имеет тенденцию быть очень глубокой, если идеи нужно разбить так, чтобы нужен тег заголовка H4.

H5 и H6

Вы можете использовать заголовки H5 и H6 по-разному.

Первый Путь

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

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

Второй путь

Некоторые люди используют теги H5 и H6 как «специальные» заголовки форматирования. Они будут применять специальный CSS к этим двум тегам заголовков HTML, который полностью отличается от H1 до H4. Затем вы можете использовать их, чтобы привлечь внимание к темам и идеям, которые в противном случае могли бы остаться незамеченными.

Это не лучшая техническая практика, поскольку заголовки имеют иерархическую структуру. Однако, если ваш сайт в целом хорошо структурирован и вы экономно используете H5 и H6 в качестве специальных стилей на определенных отдельных страницах или публикациях, вы почти наверняка не пострадаете от SEO.

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

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

Не структурируйте одну страницу со всей иерархией заголовков вниз. Лучше использовать H1 для заголовка и всех H2, а не вкладывать каждый последующий заголовок.

Да:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
    <h2>Main Point Number 2</h2>
    <h2>Main Point Number 3</h2>
    <h2>Main Point Number 4</h2>

Нет:

<h1>Title</h1>
    <h2>Point Number 2</h2>
    <h3>Point Number 3</h3>
    <h4>Point Number 4</h4>
    <h5>Point Number 5</h5>
    <h6>Point Number 6</h6>

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

Нет:

<h1>Title</h1>
    <h3>Point Number 2</h3>
    <h2>Point Number 3</h2>
    <h6>Point Number 4</h6>
    <h5>Point Number 5</h5>
    <h4>Point Number 6</h4>

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

Заключение с помощью тегов заголовков HTML

И посмотреть? Мы вернулись к заголовку H2, чтобы подвести итоги. Теги заголовков - важный элемент любого веб-сайта. Их правильное использование может повысить рейтинг вашей поисковой системы, а также UX вашего сайта, поскольку посетители смогут легче находить информацию, которую они ищут в вашем контенте. Не забывайте не забивать ключевые слова слишком много заголовков. Хотя это хорошая идея, чтобы включить ключевые слова или фразы, которые вы обсуждаете, чтобы убедиться, что ваши идеи ясны, роботы Google и другие довольно умны и могут определить, поменялись ли вы темами или находитесь в одной и той же. В целом, использование тегов заголовков HTML невероятно важно, но если вы помните всего несколько вещей, ваши сайты мгновенно засияют.

Правильно ли вы использовали теги заголовков HTML?

Изображение статьи от VectorV / shutterstock.com