… — HTML — Дока

Кратко

Скопировано

Используйте теги от <h2> до <h6>, чтобы размечать заголовки на странице.

Пример

Скопировано

<h2>Самый важный заголовок</h2><h3>Заголовок уровня 2</h3><h4>Заголовок уровня 3</h4><h5>Заголовок уровня 4</h5><h5>Заголовок уровня 5</h5><h6>Заголовок уровня 6</h6>
          <h2>Самый важный заголовок</h2>
<h3>Заголовок уровня 2</h3>
<h4>Заголовок уровня 3</h4>
<h5>Заголовок уровня 4</h5>
<h5>Заголовок уровня 5</h5>
<h6>Заголовок уровня 6</h6>

Открыть демо в новой вкладке

Как понять

Скопировано

Цифра в теге означает уровень заголовка в иерархии: от самого общего или главного <h2> до самого второстепенного <h6>. По умолчанию <h2> — самый крупный заголовок на странице, а <h6> — самый мелкий.

Как пишется

Скопировано

Заголовки <h2>…<h6> всегда отображаются с новой строки. Перед заголовками и после них добавляется расстояние, которое можно регулировать с помощью CSS-стилей.

Подсказки

Скопировано

💡 Основной заголовок <h2> может быть только один на странице.

💡 Не пропускайте заголовки разных уровней: после <h2> может быть только <h3>, но не <h4>.

💡 Уровень заголовка выбирайте по иерархии, а не по внешнему виду. Для уменьшения или увеличения шрифта используйте CSS-свойство font-size, а не уровень заголовка.

💡 С помощью тегов <h2>…<h6> можно автоматически создавать оглавления для документов.

💡 Для создания заголовка используют и обычные текстовые блок. Но информация из <h2>…<h6> легче попадает в поисковики, поэтому для заголовков лучше использовать именно эти теги.

Ещё примеры

Скопировано

<h2>Каталог тортов</h2><p>  У нас вы можете заказать самые вкусные десерты от свадебных тортов до сочных  тартов.</p><h3>Свадебные торты</h3><p>Выберите начинку и внешний вид для торта своей мечты.</p><p>Мы выполним торт любой сложности и любой тематики по вашему эскизу или по фотографии.</p>
           <h2>Каталог тортов</h2>
<p>
  У нас вы можете заказать самые вкусные десерты от свадебных тортов до сочных
  тартов.
</p>
<h3>Свадебные торты</h3>
<p>Выберите начинку и внешний вид для торта своей мечты.</p>
<p>Мы выполним торт любой сложности и любой тематики по вашему эскизу или по фотографии. </p>

Открыть демо в новой вкладке

На практике

Скопировано

Дока Дог советует

Скопировано

🛠 Используй <h2> на странице не больше одного раза; <h3> — не больше двух, максимум трёх раз; <h4> — можно 4-5 раз и так далее.

Как вообще эти теги работают? Допустим, есть сайт «Ели от дяди Васи», который рассказывает про голубые сибирские ели. Если ты вводишь запрос в Яндексе «как ухаживать за голубыми елями», а на сайте дяди Васи есть заголовок

<h4>Как ухаживать за голубыми елями</h4>, то в Яндексе этот заголовок добавится к названию страницы и будет выдаваться в поиске не просто, как «Ели от дяди Васи», а вот так:

Ели от дяди Васи — Как ухаживать за голубыми елями
          Ели от дяди Васи — Как ухаживать за голубыми елями

Теги <h2>. ..<h6> должны соответствовать ключевым запросам, вопросу пользователя. Через них сайт настраивается для выдачи в поисковиках.

🛠 Часто у тебя в проекте есть боковое меню и второстепенный баннер о партнёрах или график работы — это то, что люди не гуглят и что не является семантически важным на странице. Помещать такую информацию в теги <h2>…<h6> не стоит.

Обычно я прописываю стили для

<h2>…<h6>, а следом задаю точно такие классы: class="h2", class="h3" и так далее с точно такими же параметрами. Когда мне нужно графически отобразить тег заголовка, например, h5 над второстепенным блоком, который не несёт семантической ценности, то я пишу не тег <h5>, а беру тег <p> или <span>, добавляю ему класс h5: <p class="h5"> — он внешне выглядит, как заголовок h5, но не индексируется, как нечто важное. Тогда вспомогательные блоки не мешают основному контенту сайта.

🛠 У любого тега есть стандартный набор стилей, который стоит по умолчанию в браузере. Иногда бывает, что начинающие ставят тег <h2>, <h3>

, <h4>, задают им какой-нибудь шрифт, например, font-family:Arial, начинают их использовать — и вроде всё красиво отображается по размеру. Но может быть так, что в одном браузере стандартный размер шрифта — 18px, а в другом — 16px для того же тега. И, если ты не пропишешь сам в CSS размер для этих тегов, то в разных браузерах заголовки будут отображаться по-разному. Впрочем, это касается не только заголовков, но любых тегов. Просто с заголовками чаще всего много проблем.

Алёна Батицкая советует

Скопировано

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

Такие люди часто используют так называемые скринридеры — программы чтения с экрана — для навигации по сайтам.

Если заголовки расставлены правильно и логично, то скринридер составит карту навигации по заголовкам и пользователю будет удобно на вашем сайте.

🛠 Если углубиться в интернеты, то можно найти следующее: внутри каждого блока section может быть заголовок h2. Это немного сбивает с толку, потому что все кругом твердят, что на странице сайта должен быть только один заголовок первого уровня.

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

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

Поэтому на одной странице сайта должен быть всего один заголовок первого уровня.

На собеседовании

Скопировано

Это партнёрская рубрика, мы выпускаем её совместно с сервисом онлайн-образования Яндекс Практикум. Приносите вопрос, на который не знаете ответа, в задачи, мы разложим всё по полочкам и опубликуем. Если знаете ответ, присылайте пулреквест на GitHub.

❓

Почему важно использовать h2–h6 и каким пользователям они приносят пользу? Зачем соблюдать иерархию заголовков?

Скопировано

Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.

Как правильно прописать заголовки h2-h5 на страницах?

Главная / SEO и продвижение / Оптимизация текстов, мета-тэгов, изображений / Как правильно прописать заголовки h2-h5 на страницах?

Заголовок h2

В системе управления для большинства объектов предусмотрена возможность указания заголовка во вкладке «SEO-параметры» (для товаров, категорий и поставщиков магазинов, альбомов и изображения фотогалерей, новостей и пр.). В данной вкладке, наряду с мета-тегами (о них читайте в соответствующей инструкции), можно указать и h2.

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

Также стоит обратить внимание на такую особенность: если Вы укажете для объекта заголовок, но не укажете мета-теги — система автоматически подставит в мета-теги значение из заголовка h2. Например, если Вы создадите товар с названием «ASUS Fonepad 7 3G 8Gb Gray», а в заголовке укажете «Планшетный Компьютер ASUS», не указав мета-теги, система подставит в мета-теги «Планшетный Компьютер ASUS» (Вы также можете их в последствии отредактировать).

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

Оптимальные примеры h2-заголовка:

• Гусеничные трактора
• Ленточное наращивание волос
• Подвесные потолки оптом
• Доставка пиццы в Москве
• Линолеум Grabopast
• Монтаж пластиковых окон и т. д.

Заголовки h3-h5

h3-h5 по своей сути являются подзаголовками, с их помощью можно логически делить текст на подразделы. Также эти заголовки учитывают поисковые системы, потому полезно включать в них продвигаемые запросы. НО: не переусердствуйте, текст должен смотреться естественно!

К тому же за перенасыщение подзаголовков ключевыми словами страница может попасть под спам-фильтр. Не рекомендуем ставить заголовки близко друг к другу или ставить их чересчур часто — за это страницу тоже могут зафильтровать.

Важно! Заголовки следует ставить по иерархии: h4 в тексте можно ставить, если до него уже был h3.

Как ставить заголовки в текстовом редакторе:

1. Выделяем текст, который будет служить подзаголовком;

2. Не снимая, выделения, открываем список формат и устанавливаем «Заголовок 2». Подробнее…

3. Сохраняем изменения.

Была ли статья вам полезна?

Да

Нет 

Укажите, пожалуйста, почему?

• Рекомендации не помогли
• Нет ответа на мой вопрос
• Содержание статьи не соответствует заголовку
• Другая причина

Комментарий

Как оптимизировать ваши заголовки для поиска

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

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

Что такое тег h2?

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

HTML означает h yper t ext m arkup l язык, который является исходным кодом, сообщающим веб-браузерам, как отображать содержимое веб-сайта.

«h» означает «заголовок», а число (от 1 до 6) указывает позицию, которую занимает каждый заголовок в информационной иерархии страницы.

Тег h2, как следует из его названия, обычно является первым тегом заголовка на странице и чаще всего используется для отображения темы статьи или заголовка сообщения в блоге.

Например, если вы создаете сообщение в блоге на основе следующего плана:

• Как оптимизировать заголовки для поиска
  • Что такое тег h2?
  • Теги h2 и теги заголовка страницы
  • Почему тег h2 важен для SEO?
    • Улучшение взаимодействия с пользователем

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

Теги h2 и теги заголовков

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

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

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

Обычно?

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

Генерация Google заголовков и описаний страниц (или «фрагментов») полностью автоматизирована и учитывает как содержание страницы, так и ссылки на нее, которые появляются в Интернете».

Google Search Central Руководство по заглавным ссылкам

Следуйте рекомендациям Google по написанию описательных элементов