Заголовки (теги h1, h2, h3) в HTML5 и SEO заблуждения

Первый заголовок, на который часто посетитель сайта не обращает внимание — тот, который показан на вкладке браузера (подробнее про тег title). Для поисковой системы он самый главный, так как именно его Яндекс, Google и др. чаще всего (см. исключения) используют в качестве заголовка сниппета.

Второй заголовок находится в теге h1. Далее подзаголовки меньших размеров. Если собрать их все, то должна быть чётко видна структура веб-документа подобно главам школьного учебника. Такая раздробленная на разделы и подразделы информация легко воспринимается, найти необходимый материал на странице не вызывает затруднений.

Важные замечания:

  • заголовок доступно поясняет содержание страницы, раздела, подраздела. Это не инструмент оформления текста. Не нужно им выделять пункт меню, который ничего не содержит, кроме заголовка.
  • заголовок — это слово, фраза, предложение. Он не должен быть длинным.
  • заголовок — это всё предложение, а не его часть. Для оформления одного-нескольких слов существуют такие теги как strong, mark, em и др. (посмотреть весь список).
  • если статья строится в формате "вопрос-ответ" и ответ в большинстве случаев короткий (например, инструкция лекарственного препарата), то вместо тегов h правильней использовать тройку dl, dt, dd.

Проверить h1 страницы

Сейчас фразу в любом теге можно сделать заголовком с помощью стилей CSS: увеличить шрифт и/или размер текста. Для того, чтобы проверить количество тегов h1 и их содержимое, достаточно посмотреть код страницы сайта с помощью браузера, никаких дополнительных расширений не требуется. Такой инструмент, можно вывести, если нажать клавишу <F12>: Пример размещения тегов h на html-странице

Разница в использовании h1, h2, h3, h4, h5, h6 в HTML5 и HTML4

Перед дальнейшим чтением желательно ознакомиться с примерами, описанными в стандартах [w3.org] самостоятельно.

Один h1 на странице (версия HTML4)

  • Пошаговое решение судоку
    • Программа решения судоку с объяснениями (онлайн)
    • Правила игры
    • Алгоритм заполнения ячеек кроссворда
      • Способ 1. «Скрытые одиночки»
      • Способ 2. «Одиночки»
    • Методы решения судоку
      • Стратегия 1. Кандидат в двух-трёх клетках одного квадрата
      • Стратегия 2. Группы кандидатов

Иерархия на действительно существующей странице реализуется благодаря тегам h1-h6. h1 — самый главный, имеет самый крупный размер, можно использовать только один h1. h6 — самый незначительный из заголовков, имеет самый маленький размер и самый высокий уровень вложенности. Такой вариант наиболее распространён у SEO оптимизаторов: 

<!DOCTYPE html>
  <div>
    <div>Название сайта</div>
    <ul>
      <li><a href="/1">Пункт1</a>
      <li><a href="/2">Пункт2</a>
    </ul>
  </div>
  <div>
    <h1>Пошаговое решение судоку</h1>
    <h2>Программа решения судоку с объяснениями (онлайн)</h2>
    <h2>Правила игры</h2>
    <h2>Алгоритм заполнения ячеек кроссворда</h2>
    <h3>Способ 1. «Скрытые одиночки»</h3>
    <h3>Способ 2. «Одиночки»</h3>
    <h2>Методы решения судоку</h2>
    <h3>Стратегия 1. Кандидат в двух-трёх клетках одного квадрата</h3>
    <h3>Стратегия 2. Группы кандидатов</h3>
    <b>Комментарии</b>
  </div>
  <div>
    <b>Последние сообщения</b>
    <ul>
      <li><a href="/1">Пункт1</a>
      <li><a href="/2">Пункт2</a>
    </ul>
  </div>
  <div>Футер</div>

Заголовки h1-h6 в HTML5

Каждый пункт дерева заголовков создаёт один из вариантов:

  • body, когда нет h1-h6 перед первыми дочерними тегами article, aside, nav, section.
  • структурные теги article, aside, nav, section. Дочерние h1-h6 будут вложены в предшествующий структурному тегу заголовок.
    Внимание: header, main и footer не являются структурными тегами.
  • h1-h6, которые не имеют родителя blockquote, details, fieldset, figure и td. Уровень вложенности пункта определяется рангом тега h.

Важные замечания:

  • Документ может содержать несколько заголовков верхнего уровня (в примере ниже пункты 1-3).
  • Документ или даже структурный тег могут содержать два и более тега h1 (в примере ниже пункты 2.1-2.3).
  • Последовательность h не важна, можно пропускать теги: h1 » h2 » h4. Если отсутствует h1, его место займёт h2 или даже h6.
  • Можно изменять порядок тегов: h3 » h4 » h1 (h1 будет иметь тот же уровень вложенности, что первый тег h, в нашем случае h3).
  • Так как код перестаёт быть интуитивно понятным, спецификация рекомендует (необязательно):
    • каждый структурный тег начинать с h1. Но на устройствах, не поддерживающих HTML5 или в крайнем случае CSS, будет ужасная картина.
    • теги h оборачивать в структурный тег. Но, объём HTML-кода влияет на скорость загрузки веб-страницы. Поэтому не особо хочется его увеличивать, если не требуется внешне (скажем, цветом фона) или семантически отделить границы разделов.
  • 1
    • 1.1
    • 1.2
      • 1.2.1
    • 1.3
    • 1.4
    • 1.5
      • 1.5.1
  • 2
    • 2.1
    • 2.2
    • 2.3
  • 3 
<!-- Пример показывает какой будет уровень вложенности у разношёрстных тегов h при объединении со структурными тегами. Несмотря на то, что инструмент [gsnedders.html5.org] давно не обновлялся, уровни распределяет корректно (искл., когда заголовок имеет надпись untitled, в переводе "без названия") -->

<!DOCTYPE html>
<h3>1</h3>
<section>
      <h2>1.1</h2>
      <h2>1.2</h2>
      <h3>1.2.1</h3>
      <h1>1.3</h1>
</section>
<section>
      <h4>1.4</h4>
</section>
<h4>1.5</h4>
<section>
      <h4>1.5.1</h4>
</section>
<h3>2</h3>
<section>
      <h1>2.1</h1>
      <h1>2.2</h1>
      <h1>2.3</h1>
</section>
<h1>3</h1>

<!-- В браузерах до сих пор нет реализации -->

Важные замечания:

  • Если над или в article, aside, nav, section отсутствует тег h, пункт будет иметь заголовок untitled.
  • Теги article, aside, nav не обязательно должны иметь вложенный тег h.
  • untitled page
    • untitled article
      • untitled navigation
    • Заголовок внутри article
  • Заголовок верхнего уровня 
<!-- Запись untitled не говорит о плохой структуре кода. Но! Желательно, чтобы присутствовал заголовок верхнего уровня. И, во-вторых, если перед структурным тегом нет заголовка h1-h6, но он идёт после него, то рассматриваемый структурный тег не является единой частью остального содержимого родительского уровня заголовка. -->

<!DOCTYPE html>
<section>
    <article>
        <nav>
            <ul>
                <li><a href="#1">Перейти к первой части статьи</a>
                <li><a href="#2">Перейти ко второй части статьи</a>
            </ul>      
        </nav>
        <h1>Заголовок внутри article</h1>
    </article>  
</section>
<h1>Заголовок верхнего уровня</h1>

Пример вёрстки HTML5

  • Название сайта
    • Navigation
    • Пошаговое решение судоку
      • Программа решения судоку с объяснениями (онлайн)
      • Правила игры
      • Алгоритм заполнения ячеек кроссворда
        • Способ 1. «Скрытые одиночки»
        • Способ 2. «Одиночки»
      • Методы решения судоку
        • Стратегия 1. Кандидат в двух-трёх клетках одного квадрата
        • Стратегия 2. Группы кандидатов
      • Комментарии
    • Последние сообщения 
<!DOCTYPE html>
  <header>
    <h1>Название сайта</h1>
    <nav>
      <ul>
        <li><a href="/1">Пункт1</a>
        <li><a href="/2">Пункт2</a>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h1>Пошаговое решение судоку</h1>
      <section>
        <h2>Программа решения судоку с объяснениями (онлайн)</h2>
        <h2>Правила игры</h2>
        <h2>Алгоритм заполнения ячеек кроссворда</h2>
        <h3>Способ 1. «Скрытые одиночки»</h3>
        <h3>Способ 2. «Одиночки»</h3>
        <h2>Методы решения судоку</h2>
        <h3>Стратегия 1. Кандидат в двух-трёх клетках одного квадрата</h3>
        <h3>Стратегия 2. Группы кандидатов</h3>
      </section>
      <section>
        <h4>Комментарии</h4>
      </section>
    </article>
    <aside>
      <h4>Последние сообщения</h4>
      <ul>
        <li><a href="/1">Пункт1</a>
        <li><a href="/2">Пункт2</a>
      </ul>
    </aside>
  </main>
<footer></footer>

Оптимизация структуры заголовков и подзаголовков веб-страницы

Что думают поисковые системы? Они, с одной стороны, не должны наказывать за то, что вебмастер следует стандартам вёрстки, а, с другой стороны, должны ориентироваться на большинство. Реальность такова: с появлением HTML-редакторов, это самое большинство не будет разбираться с тонкостями разметки. Им затруднительно переключиться на вкладку «HTML» чтобы картинке прописать атрибут alt, а секции наверно вообще за гранью понимания (см. меню сайта «грамота.ру»).

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

Официальные сообщения Google:

  1. допускается наличие нескольких h1.
  2. довольно старое видео (от 2009 года) о последовательности тегов h.

Официальные сообщения Яндекса:

  1. Правильное оформление заголовков в тексте помогает ... роботу Яндекса проще разобраться со структурой документа. Поэтому следует выделять этими тегами заголовки в соответствии с иерархией документа. [help.yandex.ru]

SEO заголовок по итогам эксперимента

Эксперимент 1: «Оптимальное количество h1»

Рассматриваются три страницы:

  1. h1 » h1 (5 лет)
  2. h1 » h2 (6 лет)
  3. h1, h1 » h2 (7 лет)

Изначально в статьях учитываются последовательность (чем ближе к началу, тем слово более значимо) и плотность [wikipedia.org] ключевого слова, в частности:

  1. ключевое слово употребляется только дважды, а именно в тегах h на одинаковом удалении от начала фразы,
  2. почти одинаковое количество текста,
  3. одинаковые по длине заголовки,
  4. первый h1 — это заголовок верхнего уровня (он не имеет родителя article, aside, nav, section). Это важно (см. HTML5)!

7-6-5 лет [google.ru]. Для Google более привлекателен вариант использования двух h1, где первый — имя сайта (Гугл старательно вычленяет название веб-проекта, даже если это ссылка на внутреннюю страницу стороннего блога [google.ru]), второй — название статьи.

6-5-7 лет [yandex.ru]. В Яндексе h1 должен быть единственным. То есть на Главной h1 — это название сайта, а на внутренних страницах — название внутренних страниц.

Примечание: в Гугле индексация молниеносна, поэтому тут было проверено и отсутствие влияния алгоритма "Google Fresh". Позиции сменились после того, как страницы были добавлены в Г+. То есть да, есть разница один h1 или несколько, но этому поисковики придают очень маленькое значение.

Эксперимент 2: «Есть ли толк от h3»

Яндекс и Google не вносят h3 в заголовок сниппета. На экспериментальной странице не были использованы title, h1, h2.

Исключение для Яндекса: когда выделенный абзац содержит от 20 до 200 символов. Здесь не важно в каком теге он будет находиться: хоть в h3, хоть в span.

SEO советы

Утверждение 1: заголовок верхнего уровня должен содержать ключевые фразы, но при этом не быть спамным, то есть слова внутри него должны склонятся согласно правилам русского языка. Плохой пример: «Одежда оптом от производителя недорого».

Утверждение 2: чтобы не писать несколько одинаковых по смыслу статей, в заголовки меньшего уровня желательно включить похожие запросы и синонимы. В большинстве случаев для их нахождения достаточно фантазии, wordstat.yandex.ru и поисковых подсказок. То, что менее востребовано и не помещается в заголовки, можно упоминуть в тексте.
Важно: нет необходимости впихнуть весь перечень wordstat. Текст должен быть интересным, читаемым и "без воды". пример того, как статистика слов Яндекса поможет сформировать структуру статьи

В примере с судоку люди ищут одно и тоже, но называют это по разному: "методы", "алгоритм", "способы", "правила", "методика", "приёмы", "секреты", "принципы", "примеры"...

Можно ли внутри тега h использовать другие теги, например, img, a?

Теги h могут содержать phrasing elements! Phrasing elements — это img, a, input и др.

Заблуждение 1: внутри тегов h1-h6 нельзя использовать другие теги. 

<h2>Можно ли внутри тега <code>h</code> использовать другие теги, например, <code>img</code>, <code>a</code>?</h2>

Внимание: в ряде CMS (в т.ч. Blogger) есть поле с названием страницы сайта. Его содержимым автоматически заполняется h1 и большая часть title. Остальная часть title или отсутствует, или одинакова для нескольких страниц, например, ей может быть название сайта. Но в теге title может находиться только текст [w3.org]. Поэтому нельзя в поле названия страницы вносить какие-либо теги.

Использование тегов внутри тега h1

Заблуждение 2: в заголовке не должно быть картинки. Две записи равнозначны для w3.org, Google, но не для Яндекса (не индексирует атрибут alt): 

<h1>
     <img src="logo.gif" alt="Название сайта">
</h1>

<h1>
     Название сайта
</h1>

Заблуждение 3: не стоит заключать заголовки в дополнительные контейнеры. Откуда ноги растут у этих утверждений? Нужно, например, выравнять заголовок по вертикали: 

<div class="vyrovnyat">
  <h1>Заголовок</h1>
</div>

Утверждение 1: заголовок страницы или его часть не должны быть ссылкой (см. здравый смысл и справка Новости.Google). Отсюда следствие: название веб-проекта на Главной также не должно быть ссылкой. В целом не нужно чтобы страница ссылалась сама на себя (искл. ссылки к определённому участку страницы, так называемые хэш-ссылки). А вот так допустимо (на Авито на странице объявления каждой похожей записи дан h3): 

<aside>
 <h1>Реклама</h1>
 <a href="http://ad.com/">
  <section>
   <h1>Дешёвые кредиты</h1>
   <p>Вас удивят скорость выдачи, качество обслуживания и самое главное — цена вопроса!</p>
   <p>Процентные ставки от 1% до 5%</p>
  </section>
 </a>
 <a href="http://ad1.com/">
  <section>
     ...
  </section>
 </a>
</aside>

Утверждение 2: есть небольшая разница в том как располагать ссылку: внутри тега h или тег h внутри ссылки. И она заключается в том, что в первом случае ссылкой является только текст, а во-втором — весь блок. 

<h2>
    <a href="#"> только текст </a>
</h2>

<a href="#"> 
    <h2> весь блок (прямоугольная область) </h2>
</a>

Должен ли title отличаться от h1?

"Может ли title быть таким же как h1?" — да, может.

"Различный title и h1 полезны для SEO?" — да, полезны. В рассматриваемые теги можно добавить дополнительные ключевые слова, чтобы увеличить хвост запросов, по которым приходят на сайт. Или чтобы сделать более привлекательный сниппет, в title внести, скажем, название компании, коли фирма на слуху, или номер телефона (для такси, например).

Примечание: для того, чтобы страница могла присутствовать в Новостях Google [support.google.com] или быстрых ссылках Яндекса [help.yandex.ru], основная часть title и h1 должны совпадать. Это может быть вызвано тем, что посетители ожидают увидеть на странице сайта тот же заголовок, что в выдаче поисковиков. На данный момент стоит обратить внимание информационным сайтам.

Нужно ли заголовки боковых блоков брать в h?

Если заголовки индексируются (см. что сделать, чтобы поисковик не проиндексировал текст), то пусть лучше будут в теге h. Всё равно они употребляются на каждой странице сайта и вес этих слов ("Реклама", "Последние сообщения", "Подписка" и т.п.) завышен. Можно предположить, что родитель aside должен уменьшать их значение.

К тому же для слабовидящих будет понятно что к чему, а не сплошные untitled.

в f t
наверх ↑

4 комментария:

Анонимный
Полезная информация! Есть над чем поработать.
NMitra
Благодарю за комментарий!
Загад Загадыч
Я далёк от всего этого, но одно могу сказать, что при анализе сайта, мне пишет, что нет заголовка h1 в коде, может подскажите мне как его верно разместить в коде html
NMitra
У вас заголовок картинкой сделан. Нужно эту картинку тегами (открывающимся и закрывающимся) h1 окружить. А ещё лучше сделать названия статей заголовком h1. Посмотрите тут пункт "Задаём условие: если выводится Главная страница, то заголовок сообщения = h2, иначе = h1". Возможно вам пригодится комментарий 4 http://shpargalkablog.ru/2010/09/optimizatsiya-zagolovka-h1-h2-h3.html?commentPage=2 Извините, Blogger менял код, не могу сказать как у вас в шаблоне он выглядит (по старому или по новому).