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