Что такое хедер сайта
Коротко
Хедер сайта — это верхняя часть страницы, шапка. Она одна на всём сайте и повторяется на каждой странице: логотип, меню разделов, поиск, телефон или кнопка действия. По шапке человек за первые секунды решает, туда ли он попал, и находит, куда нажать дальше.
Зачем сайту шапка
Хедер отвечает на три вопроса посетителя сразу: чей это сайт, что здесь можно найти и что сделать дальше. Логотип и название называют компанию, меню показывает разделы, кнопка ведёт к заявке, звонку или корзине.
Шапка экономит человеку путь. Он пришёл на страницу услуги из поиска или рекламы, не нашёл нужного и через меню уходит в другой раздел, а не закрывает вкладку. В интернет-магазине корзина и вход в личный кабинет в шапке доступны с любой страницы, и покупателю не приходится возвращаться на главную.
Шапка задаёт тон всему сайту. Если она выглядит собранно и обещает то же, что было в объявлении, человек продолжает читать. Если в шапке чужая картинка или меню из двадцати пунктов, он уходит, не дойдя до предложения.
Что ставят в хедер
- Логотип и название компании — по ним узнают бренд и понимают, что попали туда.
- Меню разделов: услуги, цены, о компании, контакты. Пунктов немного, названия понятны без расшифровки.
- Телефон или кнопка действия: заявка, звонок, запись. Одна главная кнопка, а не пять равных.
- Поиск по сайту — нужен там, где много товаров, услуг или статей.
- Корзина и вход в личный кабинет — для интернет-магазина и сервиса с личными данными.
- Переключатель города или языка, если компания работает в нескольких регионах или странах.
- Строка с акцией или важным сообщением: срок доставки, бесплатный замер, график работы.
Каким он должен быть
Шапка остаётся на всех страницах одной и той же: человек, перешедший из меню в другой раздел, не должен заново искать навигацию. Меняется только содержимое под шапкой — заголовок и текст страницы.
На телефоне шапка сжимается: логотип, кнопка звонка или заявки и значок меню. Полное меню раскрывается по нажатию. Если на узком экране пункты наезжают друг на друга или кнопка уходит за край, человек не сможет ни позвонить, ни перейти в раздел.
Шапку можно закрепить: при прокрутке длинной страницы она остаётся на экране, и кнопка действия всегда под рукой. Закреплённая шапка занимает место, поэтому её делают невысокой.
Читаемость важнее украшений. Контраст текста и фона, крупный шрифт в меню и кнопке, знакомая иконка поиска и корзины — этого достаточно, чтобы шапкой пользовались.
Хедер и футер: что куда
| Хедер | Футер | |
|---|---|---|
| Где | Сверху, виден первым | Внизу, до него доходят после чтения |
| Что размещают | Логотип, меню, поиск, главная кнопка | Контакты, реквизиты, ссылки на разделы, соцсети, юридические документы |
| Задача | Помочь сразу найти нужное и действовать | Закрыть оставшиеся вопросы и дать данные компании |
Частые вопросы
Чем хедер отличается от первого экрана страницы?
Шапка — это навигация и логотип, она одинакова на всём сайте. Первый экран идёт под ней и у каждой страницы свой: заголовок, предложение, кнопка. Иногда шапку и первый экран объединяют в один широкий блок на главной, но на внутренних страницах шапка остаётся короткой полосой.
Сколько пунктов должно быть в меню шапки?
Столько, сколько человеку нужно, чтобы дойти до покупки, и без внутренних разделов, которые можно показать на странице. Пункты с длинными названиями и редкими разделами убирают во вложенное меню или в подвал. Если пунктов больше, чем помещается в строку, меню перестаёт читаться.
Нужно ли делать шапку разной на главной и внутренних страницах?
Можно: на главной шапка бывает выше, с крупным логотипом и предложением, на внутренних — компактная полоса с тем же меню. Важно, чтобы логотип, меню и кнопка стояли на тех же местах: человек не должен привыкать к новой навигации на каждой странице.
Зачем закреплять шапку при прокрутке?
На длинной странице человек дочитывает текст и хочет позвонить или оставить заявку. С закреплённой шапкой кнопка остаётся на экране, и лишний поиск контактов не съедает заявку. Минус — шапка закрывает часть экрана, поэтому её делают низкой и убирают из неё второстепенное.
Что делать, если с телефона через шапку не перейти в раздел?
Проверить её на узком экране: помещаются ли логотип и кнопка, раскрывается ли меню по нажатию, не перекрывает ли закреплённая шапка текст. На телефоне в шапке оставляют логотип, одну кнопку действия и значок меню, а остальное переносят внутрь.
Влияет ли шапка на позиции в поиске?
Напрямую — нет, позиции зависят от страниц и их содержимого. Но шапка влияет на поведение: с понятным меню человек переходит в другие разделы и остаётся на сайте, а с неудобной — возвращается в поиск. Как поисковые системы учитывают поведение посетителей, смотрите в документации Яндекса и Google.
Читать в журнале
Когда шапка есть, а заявок с сайта нет
Понять, на каком шаге сайт теряет покупателя
Шапка — только первая остановка. Человек может уйти на втором экране, на форме заявки или на звонке, и по одному внешнему виду сайта этого не видно.
Я прохожу путь клиента от рекламы до оплаты: смотрю, что видит человек на каждой странице, как отвечают менеджеры и где именно теряются деньги. На выходе — карта потерь в рублях и порядок, что исправлять первым.