Хедер — первое, что встречает посетителя, и он же держит навигацию по всему сайту. Стандартный набор: логотип со ссылкой на главную, основное меню, телефон, корзина, поиск. Для коммерческого сайта важны ещё и города с режимом работы — это коммерческие факторы, которые поисковик замечает.
Перегружать шапку нельзя: двадцать пунктов меню превращают навигацию в кашу, и человек теряется. Закрепление хедера при прокрутке удобно, но съедает экран на мобильных, так что меру нужно знать. Хорошая шапка отвечает на два вопроса сразу — куда я попал и куда отсюда идти.
Логотип, меню, поиск и контакты в самом верху страницы.
Главное меню держат коротким, чтобы не перегружать выбор.
Виден на каждом экране и ведёт по сайту с любой точки.
Вверху страницы — логотип слева, меню из 5 разделов по центру и кнопка «Заказать» справа. Шапка «прилипает» при скролле, чтобы поиск был под рукой на любом экране. Вместе с хлебными крошками человек всегда понимает, где он.
С точки зрения поисковика шапка — это шаблонный блок, повторяющийся на всех страницах, и сквозные ссылки из неё распределяют внутренний вес. Поэтому в меню стоит выводить приоритетные разделы: их вес растёт, а сами они получают дополнительную перелинковку без участия редактора. В Яндексе наличие в шапке телефона, адреса и часов работы прямо влияет на коммерческие факторы — это видно по тому, как региональные сайты с заполненными контактами обгоняют конкурентов с пустой шапкой в той же тематике.
Частая ошибка — реализовать меню так, что ссылки появляются только после клика по JavaScript-бургеру и в HTML их нет. Тогда краулер не видит сквозную перелинковку, и вес по сайту не течёт; проверяется это в Вебмастере через «Просмотреть как Яндекс» или сравнением исходного кода с отрендеренным DOM. Второй нюанс — sticky-хедер на мобильных: при высоте больше 60–70 px он занимает заметную долю первого экрана и портит юзабилити, а вместе с хлебными крошками съедает ещё строку, поэтому на телефоне его часто оставляют только в свёрнутом виде.
Шапка решает две задачи одновременно: ведёт человека дальше и показывает, куда он попал. Рабочий набор — логотип со ссылкой на главную, меню из пяти-семи пунктов, действие вроде звонка или заявки и поиск для крупного сайта. Пункты меню называют словами аудитории: раздел «Решения» проигрывает разделу с понятным названием услуги.
Технически шапка влияет на скорость и на перелинковку. Она повторяется на всех страницах, поэтому тяжёлые скрипты и большие изображения в ней бьют по всему сайту, а ссылки из меню раздают вес всем разделам сразу. Закреплённая шапка на мобильных отъедает часть экрана: её высоту держат минимальной, иначе страдает первый экран и метрики скорости.
Частые вопросы
Сколько пунктов держать в главном меню?
Пять-семь. Больше человек не удерживает в поле зрения, и выбор замедляется. Остальные разделы уносят на страницы категорий и в подвал, а для большого каталога делают отдельное выпадающее меню.
Нужна ли закреплённая шапка?
На длинных страницах она помогает вернуться к навигации, на коротких только занимает место. На мобильных её высоту сокращают до минимума, иначе она съедает первый экран и ухудшает восприятие страницы.
Влияет ли шапка на продвижение?
Влияет через скорость и перелинковку: она грузится на каждой странице, а её ссылки раздают вес всем разделам. Перегруженная скриптами шапка портит метрики скорости сразу на всём сайте.
Что обязательно разместить в шапке?
Логотип со ссылкой на главную, основное меню и главный способ связи. Для интернет-магазина добавляют корзину и поиск, для локального бизнеса — город и телефон. Остальное решает специфика проекта.