Хедер, или шапка сайта, — верх сайта: блок с логотипом, навигацией и основными действиями пользователя. Состав зависит от задачи сайта: магазину нужны каталог и корзина, бизнесу — телефон и адрес, сервису — вход. Хороший хедер не показывает всё сразу: он помогает за секунды понять, куда попал посетитель, и найти нужное действие.
Дальше — разбор без общих фраз: что именно ставить в верхний блок, чтобы посетитель быстро находил нужную информацию, чем хедер отличается от первого экрана и как проверить его эффективность на реальных пользователях, а не на глаз.
Что такое хедер сайта
Хедер сайта — верхняя часть страницы, которая обычно повторяется на всех разделах: лого, меню и контакты остаются на месте, пока меняется содержание под ними. Восприятие хедера зависит от структуры кода не меньше, чем от дизайна. Технически за него отвечает одноимённый семантический элемент разметки, но это не всегда одно и то же: он используется и для отдельной статьи внутри страницы, а не только для сквозной шапки сайта.
Именно поэтому важнее говорить не о шапке вообще, а конкретно о шапке сайта — сквозном блоке. Здесь начинается первая путаница. Хедер часто путают с первым экраном — блоком, который пользователь видит до прокрутки. Первый экран может включать крупный заголовок, изображение, форму заявки и даже хедер внутри себя, но это разные сущности. Шапка — навигационный и сервисный блок, первый экран — рекламно-презентационный. Типичная ошибка новичка — сваливать в шапку баннер, УТП и форму, из-за чего верхняя строка сайта превращается в трёхэтажную конструкцию.
Какие задачи решает шапка сайта
Шапка сайта решает несколько практических задач одновременно, и от того, насколько чётко она справляется с каждой, зависит, останется ли посетитель на странице.
- Ориентация. Пользователь за секунды понимает, на каком сайте находится и чем занимается компания.
- Навигация. Меню в шапке сайта — кратчайший путь к разделам без прокрутки.
- Сокращение пути к цели. Кнопка заявки, телефон или переход в каталог убирают лишние клики.
- Узнаваемость. Логотип и стиль хедера повторяются на всех страницах и работают на доверие.
- Коммерческая информация. Город, режим работы, доставка — то, что снимает вопросы до звонка.
Важная оговорка: шапка сама по себе не гарантирует рост позиций в поиске и не «продаёт» — это лишь один из элементов интерфейса, который может помочь или помешать пользователю дойти до целевого действия.
Что размещают в шапке сайта
Не добавляйте элемент только потому, что он есть у конкурента. Сначала определите главное действие посетителя, а затем решайте, какие блоки в хедере нужны.
- Логотип — идентификация бренда, обычно ведёт на главную страницу; ошибка — картинка бренда без ссылки.
- Дескриптор — короткая подпись, чем занимается компания; нужен, если название ничего не объясняет.
- Главное меню — разделы на языке пользователя, а не на языке компании («Услуги», а не «Решения»).
- Поиск по сайту — обязателен для интернет-магазинов, СМИ и каталогов от пары десятков позиций.
- Телефон и адрес — критичны для локального бизнеса; типичная ошибка — телефон текстом, а не кликабельной ссылкой tel:.
- Кнопка целевого действия — заявка, запись, расчёт стоимости; должна визуально выделяться среди прочих элементов.
- Корзина, избранное, личный кабинет — сервисный кластер для e-commerce, лишний для лендинга.
- Мессенджеры и выбор языка — ситуационные элементы, добавляются под конкретный сценарий, а не «на всякий случай».
Как выбрать элементы под тип сайта
Единого шаблона шапки не существует: у интернет-магазина, клиники и лендинга разное главное действие. Матрица ниже помогает быстро определить обязательный минимум.
| Тип сайта | Главное действие | Обязательные элементы | Что чаще всего лишнее |
|---|---|---|---|
| Интернет-магазин | Найти и купить товар | лого, каталог, поиск, корзина, кабинет | крупная форма заявки |
| Клиника | Выбрать услугу и записаться | лого, услуги, город, телефон, запись | соцсети без понятной функции |
| B2B-сайт | Оценить компетенции, оставить заявку | лого, услуги, кейсы, контакты, заявка | развлекательная анимация |
| Лендинг | Перейти к целевому действию | лого, короткая навигация, кнопка | многоуровневое меню |
| СМИ или блог | Найти и прочитать материал | лого, рубрики, поиск, вход | телефон и адрес |
| SaaS-сервис | Понять продукт, начать работу | лого, продукт, цены, вход, регистрация | полный каталог услуг |
Ключевые принципы создания хедера
Эти принципы одинаково работают в шапке сайта магазина и в шапке сайта портала. На тестах интерфейсов 2025–2026 годов подтверждается один вывод: чем больше в шапке равноправных по визуальному весу элементов, тем дольше пользователь ищет нужный. Отсюда — рабочие принципы.
- Ограничивайте число пунктов меню. Ориентир — 5–7 элементов верхнего уровня; это не жёсткий стандарт, а практический предел восприятия.
- Соблюдайте предсказуемость. Логотип слева, сервисные действия справа, меню сверху — привычная раскладка ускоряет считывание.
- Используйте «информационный запах». Пункт «Цены» понятнее, чем «Возможности»: название заранее сообщает, что будет после клика.
- Разводите хедер и первый экран. Навигационный блок — отдельно, презентационный контент — отдельно, даже если они визуально соседствуют.
- Проверяйте на мобильной версии в первую очередь. Больше половины визитов на российские коммерческие сайты приходится на смартфоны, и решения, удобные на десктопе, часто ломаются на узком экране.
Ошибки при проектировании и оформлении шапки сайта
Ошибки в шапке сайта удобнее группировать по причине, а не свалить в один список — так их легче находить в собственном проекте: ниже четыре группы типичных ошибок.
Смысловые пробелы в хедере обычно самые дорогие для бизнеса. Смысловые: неясно, чем занимается компания; нет главного действия; названия разделов понятны только сотрудникам компании.
Визуальные: все элементы одинакового веса, мелкий текст, слабый контраст кнопки с фоном.
Мобильные: шапка занимает половину экрана при загрузке; кнопка и телефон не помещаются в одну строку; гамбургер-меню раскрывается поверх контента без кнопки закрытия.
Технические: телефон не кликабелен; логотип не ведёт на главную; фокус с клавиатуры не виден; якорная ссылка открывает заголовок под фиксированной шапкой, обрезая его.
Отдельно про меню-гамбургер: тезис «гамбургер не подходит интернет-магазину» слишком общий. Речь о полном скрытии каталога на десктопе — на мобильном экране гамбургер зачастую единственный практичный вариант, а решение зависит от размера каталога и сценариев конкретного сайта.
Разновидности хедеров в зависимости от типа сайта
- Классический — лого, меню, контакты в одну строку; подходит большинству корпоративных сайтов.
- Двухуровневый — верхняя строка с сервисной информацией, нижняя с основным меню; уместен для крупных каталогов.
- Минималистичный — лого и одна кнопка; типичен для лендингов и личных страниц.
- Фиксированный (липкий) — остаётся видимым при прокрутке; полезен, если целевое действие нужно на любом этапе чтения, но не универсальное решение для любого сайта.
- Прозрачный поверх первого экрана — эстетичен, но требует проверки контраста текста поверх фото.
- Мобильный с раскрывающимся меню — адаптивная версия классического хедера для узких экранов.
Как проверить эффективность шапки сайта
Оценка хедера на глаз ненадёжна. Мнение о «красивой» шапке и данные о «работающей» — разные вещи. Проверка поведения пользователей в шапке сайта строится по простому протоколу:
- Зафиксируйте главную задачу каждой страницы.
- Настройте в Яндекс Метрике цели на клики по телефону, кнопке, каталогу, поиску, кабинету.
- Посмотрите карту кликов — используют ли пользователи меню и поиск вообще.
- Проверьте записи Вебвизора: ищут ли элемент, закрывают ли меню сразу после открытия, прокручивают ли страницу вверх ради контактов.
- Разделите данные по устройствам — мобильные и десктопные сценарии часто расходятся.
- Сравните показатели до и после изменения хедера, а не полагайтесь на субъективное впечатление.
Полезная формула для оценки востребованности элемента хедера:
Доля использования элемента = (число пользователей, взаимодействовавших с элементом ÷ число пользователей, увидевших страницу) × 100%
И отдельно — конверсия после взаимодействия с хедером: (целевые действия пользователей, использовавших хедер ÷ пользователи, использовавшие хедер) × 100%. Важная оговорка: корреляция не равна причинности — пользователи, открывающие кабинет или корзину, зачастую изначально мотивированнее остальных, и рост показателя не всегда заслуга самой шапки.
Мини-пример: аудит шапки стоматологии
У стоматологии в шапке сайта были логотип, шесть пунктов меню, ссылки на пять соцсетей и кнопка «Подробнее». Аудит показал: главное действие неочевидно, адрес филиала спрятан в футере. После пересборки остались услуги, цены, филиалы, телефон и кнопка «Записаться». Эффект проверяют по кликам, начатым записям и подтверждённым обращениям — а не декларируют заранее.
Технические требования и доступность
Технические требования к шапке сайта касаются не только видимых элементов:
<header class=»site-top»>
<a class=»site-top__logo» href=»/» aria-label=»На главную»>Название компании</a>
<nav aria-label=»Основная навигация»>
<ul>
<li><a href=»/catalog/»>Каталог</a></li>
<li><a href=»/delivery/»>Доставка</a></li>
<li><a href=»/contacts/»>Контакты</a></li>
</ul>
</nav>
<a href=»tel:+74950000000″>+7 495 000-00-00</a>
<a href=»/request/» class=»site-top__action»>Оставить заявку</a>
</header>
Семантический тег и nav с подписью aria-label помогают вспомогательным технологиям понять структуру страницы; телефон-ссылка tel: работает по нажатию на мобильном; ссылка-иконка бренда ведёт на главную по умолчанию пользователя. Дополнительно проверяйте: видимый фокус при Tab, область нажатия кнопок минимум 24×24 пикселя (это требование уровня AA по WCAG 2.2; для более строгого уровня AAA ориентир — 44×44), читаемость меню без изображений и отсутствие «прыжков» при подгрузке шрифтов.
Чек-лист аудита шапки сайта
- За 5 секунд понятно, чем занимается компания?
- Логотип ведёт на главную страницу?
- Главное действие визуально выделено?
- Телефон кликабелен на мобильном устройстве?
- Указан город для локального бизнеса?
- Названия меню понятны без внутренних терминов компании?
- Хедер не перекрывает содержание страницы?
- Все интерактивные элементы в хедере доступны с клавиатуры?
- В мобильной версии видно ключевое действие — каталог, поиск, заявку?
- Контактные данные актуальны на сегодня?
- Меню умещается без переноса на смартфоне?
- Фиксированная шапка не перекрывает якорные заголовки?
Коротко о главном
- Хедер — сквозной верхний блок страницы, который в шапке сайта повторяется на всех разделах, а не первый экран целиком.
- Состав шапки определяется главным действием пользователя, а не списком «модных» элементов.
- Ориентир 5–7 пунктов меню — практический предел восприятия, а не обязательный стандарт.
- Мобильная версия шапки проверяется в первую очередь, а не по остаточному принципу.
- Гамбургер-меню и фиксированная шапка — не универсально плохие или хорошие решения, они зависят от сценария сайта.
- Эффективность шапки подтверждают Метрика, карта кликов и А/Б-тест, а не субъективное «выглядит удобно».
- Технически корректный хедер — это ещё и доступность: клавиатура, фокус, кликабельные ссылки.