Что такое «шапка сайта»

Шапка сайта (site header) — это верхняя, повторяющаяся на всех (или большинстве) страниц часть интерфейса, где размещаются бренд (логотип/название), основная навигация, ключевые CTA (звонок/заказ/вход), иногда поиск, корзина, переключатель языка/региона, контакты и уведомления (промо-бар). Это UI-блок на странице, а не мета-информация документа (не путать с HTML-тегом <head>).

Время прочтения:

4 минуты

Дата публикации:

21.08.25

43

Главная

Что такое «шапка сайта»

глоссарий

a

b

c

d

e

f

g

h

i

j

l

m

o

p

r

s

t

u

v

w

y

А

Y

А

Б

В

Г

Д

Е

з

и

к

л

м

н

о

п

р

с

т

у

ф

х

ц

ч

ш

А

Я

метрика месяца

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

ROMI

Задачи шапки

Ориентация: показать, где пользователь и что здесь можно сделать;
Навигация: быстрый доступ к разделам, категориям, авторизации;
Конверсия: заметные CTA (звонок, оформить заказ, начать бесплатный период);
Доверие/бренд: логотип, NAP-данные (название/адрес/телефон), социальные доказательства;
Сервисные функции: поиск, корзина, язык/валюта, переключение региона.

Типовые элементы

Логотип (кликабелен → на главную);
Главное меню (горизонтальное/мегамenu; 1–2 уровня);
Поиск (инпут + подсказки; на мобилке — иконка/оверлей);
CTA: «Купить», «Оформить», «Позвонить», «Попробовать»;
Контакты: tel:, мессенджеры, «заказать звонок»;
Аккаунт/вход/регистрация, избранное, корзина с бейджем количества;
Переключатель языка/региона/валюты;
Промо-/инфо-бар (сверху шапки): акция, доставка, важные уведомления.

Герой-блок (большой баннер с оффером) — это уже контент страницы, а не шапка. Не смешивайте: высокая «шапка» съедает экран и ухудшает метрики.

Паттерны шапок

Классическая фиксированная (статичная наверху);
Sticky (прилипшая) — остаётся при скролле (аккуратно с CLS);
Прозрачная поверх героя (меняет фон при скролле);
Компактная при скролле (shrink-on-scroll).

Мобайл:

«Бургер» + офф-канвас меню, крупные тач-таргеты (≥44px);
Вынос важнейших действий (поиск, корзина, звонок) в видимые иконки.

SEO-нюансы

Внутренняя перелинковка: ссылки шапки sitewide, их много — не превращайте в «свалку». Держите 5–8 основных пунктов меню; остальное — в мегаменю/футере;
Тексты ссылок — описательные, без переспама ключами;
Крошки обычно не в шапке, а под ней; их разметка BreadcrumbList улучшает сниппеты;
Организация/логотип: можно добавить JSON-LD Organization/LocalBusiness (логотип, телефон) — это не «шапка», но логично поддержать консистентность данных.

Регион/язык: для мультиязычных сайтов — hreflang (в <head>), а в шапке — понятный переключатель без жёстких GEO-редиректов.

Доступность и семантика

Оборачивайте шапку в <header>; основную навигацию — в <nav aria-label="Основная навигация">;
Добавьте skip-link (переход к контенту) — виден при фокусе;
Контраст, табуляция, состояния :focus-visible;
Кнопка «бургер» — <button aria-expanded="false" aria-controls="main-menu">.

Пример семантической разметки:

<a class="skip-link" href="#content">Перейти к содержимому</a>
<header class="site-header">
  <div class="bar">
    <a class="logo" href="/" aria-label="На главную">
      <img src="/logo.svg" alt="Brand">
    </a>
    <nav aria-label="Основная навигация">
      <button class="menu-toggle" aria-expanded="false" aria-controls="main-menu">Меню</button>
      <ul id="main-menu" class="menu">
        <li><a href="/katalog/">Каталог</a></li>
        <li><a href="/uslugi/">Услуги</a></li>
        <li><a href="/cases/">Кейсы</a></li>
        <li><a href="/blog/">Блог</a></li>
        <li><a href="/contacts/">Контакты</a></li>
      </ul>
    </nav>
    <form action="/search/" role="search" class="search">
      <label class="sr-only" for="q">Поиск</label>
      <input id="q" name="q" placeholder="Поиск...">
    </form>
    <div class="actions">
      <a class="tel" href="tel:+74950000000">+7 495 000-00-00</a>
      <a class="btn cta" href="/signup/">Попробовать</a>
      <a class="cart" href="/cart/" aria-label="Корзина (2 товара)">🛒<span class="badge">2</span></a>
    </div>
  </div>
</header>
<main id="content">...</main>

Производительность (Core Web Vitals)

CLS: фиксируйте высоту шапки, не подменяйте шрифты/логотипы «на лету», загружайте иконки inline SVG или через sprite;
LCP/INP: критичные стили шапки — в critical CSS, откладывайте вторичные скрипты меню;
Кешируйте навигацию, используйте prefetch для часто кликаемых разделов;
Не перегружайте шапку попапами/баннерами — это мешает и Vitals, и UX.

Контент и аналитика

Проводите клик-карты/скролл-карты: какие пункты меню реально используются? Убирайте «мертвые» ссылки;
Отслеживайте события: клики по «тел:», «заказать звонок», по поиску (submit/select), по корзине;
Тестируйте A/B: порядок пунктов, видимость поиска, формулировку CTA, контраст.

Частые ошибки

Перегруженная шапка: десятки ссылок, баннеры, второстепенные элементы — падает CTR на важные разделы;
Гигантская высота: «герой» в шапке съедает первый экран;
Скрыть меню за бургером на десктопе — ухудшение навигации и конверсии;
Несогласованность: разные шапки на разных разделах → «скачки» интерфейса;
Текст как картинка в меню — плохо для доступности и индексации;
Жёсткий редирект по гео/языку из шапки — ломает индекс и UX; делайте явный переключатель.

Мини-чек-лист «здоровой» шапки

Виден логотип (ссылка на главную) и 5–8 ключевых пунктов меню;
Есть заметный CTA и быстрые действия (поиск/корзина/звонок);
Мобайл: крупные тач-таргеты, удобное меню, важные действия — вне бургера;
Семантика: <header>, <nav>, skip-link, aria-атрибуты;
Производительность: без CLS, критический CSS, легкие иконки (SVG);
Ссылки ведут на канонические URL (без параметров/редиректов);
Стабильная по всему сайту; изменение — только по реальной необходимости;
Метрики кликов/поиска/CTA собираются; проводятся A/B-тесты.

вывод

Шапка сайта — это постоянный «командный центр» навигации и конверсий. Делайте её лаконичной, быстрой, доступной и одинаково удобной на мобайле и десктопе. Включайте только то, что помогает пользовательской цели и бизнес-KPI, соблюдайте семантику и следите за Core Web Vitals — так шапка повысит CTR, конверсии и качество индексации, а не будет мешать им.