Назад
Z - Заголовок :)

ТОП-3 SEO проблемы с заголовками, от которых подпекает

Несоблюдение простых требований поисковых систем относительно заголовков (h1 — h6) — то, что мы видим на каждом втором сайте при проведении аудита. И даже если отбросить требования поисковиков, некоторые из упомянутых в тексте проблем просто игнорируют спецификацию HTML. Болезнь прямых рук frontend-разработчиков не щадит никого: недуг наблюдается как у сайтов крутых брендов по типу Nike или NBA, так и у любимого вами «портала с мемасиками из нулевых». Так что эта статья — о боли и безысходности…

Проблема № 1: Ни одного или несколько тегов h1 в документе

Заголовок h1 важен, он рассказывает роботу посетителю cайта о содержимом страницы. Он оказывает серьезное влияние на оценку релевантности документа ключевым фразам поисковыми алгоритмами.

Очень часто про заголовок h1 забывают разработчики (особенно на главной странице сайта) или оформляют его как h2. Другая распространенная ошибка — присутствие нескольких тегов заголовка h1 в документе одновременно.

Каждая страница должна содержать не более одного HTML заголовка первого уровня h1.

Как быстро диагностировать проблему

  1. массово — Screaming Frog SEO Spider или любой другой краулер;
  2. массово — при помощи Google Spreadsheets и функции IMPORTXML (руководство по использованию), имея на руках список URL;
  3. постранично — при помощи одного из букмарклетов (в конце статьи).

Проблема № 2: Посторонние блоки оформлены тегами заголовков

HTML теги заголовков h1 — h6 не должны использоваться для разметки элементов, если только они не являются заголовком или подзаголовком для нового раздела или подраздела (пруфлинк). Кому лень переходить по ссылке, то такое использование подтверждено официальной спецификацией HTML.

Очень часто frontend-разработчики оформляют тегами заголовков элементы, не являющиеся таковыми. Это может быть надпись «Меню» h2 в сайдбаре, или гиперссылка, которую потребовалось сделать «покрупнее да пожирнее». НЕ НАДО ТАК! Для таких ситуаций есть CSS.

заголовки на сайте NBA

Адовый ад на сайте nba.com

Как диагностировать

Самый простой способ диагностики проблемы — букмарклет, подсвечивающий на странице теги заголовков h1 — h6 (забираем себе в конце статьи).

Проблема № 3: Не соблюдена вложенность тегов заголовков

Теги заголовков h1 — h6 должны иметь строгую иерархическую вложенность. Исходя из этого, заголовок h1 ставим первым в документе, а потом уже h2, h3 и т.д. Не совсем понятно? Давайте разберем на примерах ниже.

Правильно:

<h1>Заголовок</h1>
	<h2>Подзаголовок 1</h2>
		<h3>Подзаголовок 2</h3>
		<h3>Подзаголовок 3</h3>
			<h4>Подзаголовок 4</h4>
	<h2>Подзаголовок 5</h2>

Неправильно:

<h1>Заголовок</h1>
	<h2>Подзаголовок 1</h2>
		<h4>Подзаголовок 2</h4>
	<h2>Подзаголовок 3</h2>

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

заголовки на сайте NIKE

Неправильная вложенность тегов заголовков на примере nike.com

Бонус: Букмарклеты для On-page анализа

Букмарклет — javascript программа, которая сохраняется в виде закладки в браузере и активируется по ее нажатию.

как использовать букмарклеты

Ниже представлены букмарклеты, которые помогут вам проанализировать страницу на предмет описанных выше проблем с HTML заголовками:

  • On-page SEO (расширенный) — много полезной информации в одном месте;
  • On-page SEO (быстрый анализ) — покажет сводку по тегам заголовков, title и meta description, тегам strong и b, а также числу внутренних и внешних ссылок на странице;
  • h1 — h6 — подсветка всех HTML тегов заголовков на странице (полезен также для быстрого выявления проблем 2 и 3).
  • Z — Заключение

    Z - Заключение

    Всю вышеизложенную информацию можно уместить в 5 коротких тезисов:

    • на каждой странице должен быть h1 и он должен быть только один;
    • HTML теги заголовков должны использоваться только для тех элементов, которые ими являются;
    • использовать теги h1 — h6 для стилистического выделения текстовых блоков — неправильно (для этого есть CSS);
    • необходимо соблюдать иерархическую вложенность HTML заголовков, причем h1 должен быть самым первым;
    • пользуйтесь букмарклетами и другими средствами автоматизации, они — добро 🙂

    И помни, frontend-разработчик, что каждый раз, когда ты забываешь про h1, используешь HTML теги заголовков не по назначению или нарушаешь их вложенность, где-то в мире грустит один SEO-специалист.

    1. 5
    2. 4
    3. 3
    4. 2
    5. 1
    (6 оценок, в среднем: 5 из 5)