Хедер

Header (от англ. header — заголовок, в русскоязычной IT-индустрии — «хедер» или «шапка сайта») — это верхний блок страницы, содержащий логотип компании, основное меню навигации, контактные данные, иногда корзину покупок, поисковую строку, виджет выбора языка, кнопки авторизации.

Что такое хедер в SEO — это первое, что видит посетитель и поисковый робот при загрузке страницы, и важнейший элемент структуры сайта: ссылки в шапке формируют основную навигацию, влияют на распределение внутреннего ссылочного веса, помогают поисковику понять иерархию разделов. Стандартная высота хедера в современной вёрстке — 60–100 пикселей в десктопной версии, 50–70 пикселей в мобильной.

Sticky header (закреплённый при прокрутке) применяется на 70–80% современных сайтов как стандарт удобства навигации. В HTML5 для семантической разметки шапки используется тег <header>, что помогает поисковикам Google и Яндекс корректно определять структуру страницы.

Что такое header

Header — структурный элемент веб-страницы, расположенный в самой верхней части и повторяющийся на всех страницах сайта. Это первая визуальная зона, с которой сталкивается посетитель, и важнейшая часть фирменного стиля сайта. В HTML5 шапка размечается семантическим тегом <header>:

<header>
  <div class="header-logo">
    <a href="/"><img src="/logo.svg" alt="Cropas"></a>
  </div>
  <nav class="header-menu">
    <a href="/services/">Услуги</a>
    <a href="/cases/">Кейсы</a>
    <a href="/blog/">Блог</a>
    <a href="/contacts/">Контакты</a>
  </nav>
  <div class="header-contacts">
    <a href="tel:+375291234567">+375 29 123-45-67</a>
  </div>
</header>

Тег <header> — это семантическая разметка, которая помогает поисковикам определить, что находится в верхней части страницы. До HTML5 (до 2014 года) шапка размечалась обычным <div class="header">, и поисковики угадывали её роль по контексту и позиции в коде. Современный подход с семантическим тегом считается лучшей практикой.

Слово «хедер» в русскоязычной IT-среде закрепилось как разговорное название этого элемента. Альтернативные варианты — «шапка сайта», «шапка», «top» — равнозначные синонимы. В технической документации часто используется именно «header» как более точный термин.

Состав хедера сайта

Стандартные элементы header на коммерческом сайте:

• Логотип. Главный визуальный элемент бренда. Обычно слева вверху, с гиперссылкой на главную страницу. Стандартная высота — 30–60 пикселей.
• Основное меню навигации. 5–8 пунктов с разделами сайта. Может быть выпадающим (mega menu) для сайтов с глубокой структурой.
• Контактный телефон. С иконкой телефона, кликабельный через tel:. Обычно справа вверху для мобильных и в правой части хедера для десктопа.
• Кнопка призыва к действию (CTA). «Заказать звонок», «Получить консультацию», «Купить» — выделена цветом, привлекает внимание.
• Корзина покупок. Для интернет-магазинов — иконка корзины с количеством товаров.
• Поиск по сайту. Поле ввода с иконкой лупы или раскрывающаяся форма по клику.
• Виджет языка. Переключатель между языковыми версиями сайта (русский, английский, белорусский).
• Аккаунт пользователя. Кнопка входа в личный кабинет или иконка авторизованного пользователя.
• Хлебные крошки. На внутренних страницах под главным меню — путь от главной до текущей.
• Уведомления и баннеры. Информация о доставке, акциях, режиме работы — обычно в виде топ-бара над основным хедером.

На лендингах состав хедера упрощается: только логотип, 3–5 пунктов меню (обычно якорные ссылки на блоки страницы) и кнопка CTA. На корпоративных сайтах состав расширяется до полного набора с дополнительными элементами для конкретной отрасли.

Header и SEO — влияние на оптимизацию

SEO-эффект от правильно настроенного header работает через несколько каналов:

1. Внутренняя перелинковка. Меню в шапке — основная навигация по сайту. Ссылки из главного меню получают значительный ссылочный вес, помогают распределить PageRank между важными разделами.
2. Семантическая разметка. Тег <header> и связанные с ним теги <nav> для меню помогают поисковикам понять структуру страницы. Особенно важно для сайтов с нестандартной вёрсткой.
3. Микроразметка Organization. Schema.org Organization в шапке (логотип, название компании, телефон, ссылки на социальные сети) повышает шансы получить расширенный сниппет в выдаче с логотипом и контактами.
4. Скорость загрузки. Header загружается одним из первых на странице. Тяжёлые элементы (анимированные мега-меню с большими изображениями, виджеты выбора магазина с картами) замедляют LCP и FCP — две главные метрики Core Web Vitals.
5. Mobile usability. Mobile-First Index требует, чтобы мобильная версия хедера была удобной. Burger-меню должно открываться быстро, кнопки иметь достаточный размер для тапа.
6. Хлебные крошки. Microdata или JSON-LD разметка BreadcrumbList в нижней части хедера улучшает отображение в выдаче — путь по сайту виден прямо в сниппете.

Старые SEO-практики 2010-х рекомендовали засовывать в верхнюю часть страницы как можно больше ключевых слов — в логотип через alt, в meta keywords, в скрытый текст. Современные алгоритмы Google и Яндекс распознают такие манипуляции и наказывают. Хедер должен выполнять свою основную функцию — навигацию и идентификацию бренда — без попыток обмануть поисковик.

Sticky header — преимущества и недостатки

Sticky header (или fixed header, sticky navigation) — это шапка, закреплённая в верхней части окна при прокрутке страницы. Пользователь всегда видит логотип, меню и кнопку CTA, на каком бы участке страницы ни находился.

Преимущества sticky header:

• Постоянный доступ к навигации на длинных страницах — пользователь не возвращается в начало для перехода в другой раздел
• Усиление узнаваемости бренда — логотип постоянно виден
• Быстрый доступ к контактам и CTA в любой момент изучения страницы
• Улучшение конверсии на лендингах — кнопка «Заказать» доступна без прокрутки вверх
• Современный стиль вёрстки, ожидаемый пользователями

Недостатки:

• Занимает 50–100 пикселей видимой области экрана, что особенно критично на мобильных устройствах с маленькими экранами
• На больших sticky-хедерах с мега-меню может мешать просмотру основного контента
• Усложняет вёрстку — нужно корректно работать с z-index, прозрачностью, анимациями
• Иногда конфликтует с якорными ссылками — клик по якорю скроллит контент под закреплённый хедер
• На очень длинных формах и таблицах может перекрывать важные элементы интерфейса

Современные решения: «умный» sticky header, который скрывается при прокрутке вниз и появляется при прокрутке вверх. Эту схему используют YouTube, Medium, многие СМИ. Сокращённая версия хедера при прокрутке: полный хедер 100 пикселей в начале страницы, при прокрутке остаётся только узкая полоса 50 пикселей с логотипом и меню.

Header в мобильной версии

На мобильных устройствах хедер перестраивается под ограниченное пространство экрана. Стандартные трансформации:

• Главное меню сворачивается в burger-меню — иконка из трёх линий, разворачивающая полное меню при тапе
• Логотип уменьшается или заменяется на короткую версию (только символ без текста)
• Телефон превращается в иконку, по тапу — запускает звонок
• Корзина и аккаунт остаются как иконки с возможным значком уведомлений
• Поисковая строка скрывается за иконкой лупы, разворачивается по тапу
• Виджет языка переходит в основное меню или в подвал
• Высота хедера уменьшается до 50–70 пикселей

Главная проблема мобильного хедера — конкуренция за место. На экране 360–414 пикселей шириной нужно разместить логотип, burger-меню, иконку звонка, иногда корзину. При неправильной вёрстке элементы налезают друг на друга или становятся слишком маленькими для удобного тапа.

Рекомендации Apple Human Interface Guidelines и Google Material Design — минимальный размер tap-области 44×44 пикселя (iOS) или 48×48 dp (Android). Меньшие элементы трудно нажимать, что снижает конверсию и приводит к отказам.

Типичные ошибки

Часто задаваемые вопросы

Что важнее — header или footer для SEO?

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

Какая оптимальная высота хедера?

Для десктопа — 60–100 пикселей основной части плюс возможный topbar 30–40 пикселей. Для мобильного — 50–70 пикселей. Высота 150+ пикселей съедает значительную часть первого экрана и снижает конверсию. На лендингах с длинной страницей оптимум 60–80 пикселей, на корпоративных сайтах с многоуровневым меню — до 100–120 пикселей.

Сколько пунктов должно быть в главном меню?

5–8 пунктов — золотой стандарт для большинства сайтов. Меньше 5 — недостаточно для разнообразного контента. Больше 8 — перегрузка, размытие важности. Для крупных порталов с большим количеством разделов используются mega menu — выпадающие меню с многоколоночной структурой, где основной пункт раскрывает несколько групп подпунктов. В мега-меню можно разместить 20–50 ссылок, не перегружая основную линию навигации.

Нужен ли sticky header для всех сайтов?

Не обязательно. Sticky header полезен на сайтах с длинными страницами и сложной навигацией: маркетплейсы, лендинги, корпоративные порталы, блоги с лонгридами. На сайтах с короткими страницами (контактная страница, главная лендинга на один экран) sticky header не нужен — пользователь и так видит навигацию. Решение принимается исходя из UX-анализа и тестирования.

Можно ли использовать разные хедеры на разных страницах?

Технически — да, по факту так делают редко. Стандартная практика — один общий хедер для всего сайта, единый по дизайну и составу. Это упрощает навигацию и поддерживает узнаваемость. Допустимые исключения: упрощённый хедер на странице оформления заказа (без меню, только логотип) для снижения отказов, специальный хедер для лендингов отдельных продуктов, отдельный хедер для админ-панели.

Как сделать хедер с микроразметкой Organization?

JSON-LD-блок Organization добавляется в <head> страницы и содержит данные о компании: название, логотип, телефон, адрес, ссылки на социальные сети. Сама шапка остаётся обычным HTML-кодом, но микроразметка связывает её содержимое с данными компании в выдаче поисковиков. Поисковик может использовать эти данные для формирования knowledge panel с информацией о компании или расширенного сниппета.

Что делать с хедером при дизайн-редизайне сайта?

При значительном изменении хедера важно сохранить ключевые ссылки на месте — пользователи и поисковики ориентируются на привычную структуру. Если меняются URL разделов в меню — обязательно настроить 301-редиректы со старых на новые. Изменение хедера обычно временно снижает конверсию на 5–15% из-за переадаптации пользователей, но затем восстанавливается и часто превышает прежний уровень при удачном редизайне.