Роль шапки
Шапка — первое, что видит посетитель, и одно из немногих мест, которое повторяется на всех страницах. Она отвечает на три вопроса: где я, куда можно пойти и как связаться. Для поисковых систем ссылки из шапки — главный указатель на важные разделы сайта, потому что они встречаются на каждой странице: сквозные ссылки. Поэтому состав шапки нужно продумывать так же тщательно, как структуру сайта.
Из чего состоит шапка
| Элемент | Рекомендация | Типичная ошибка |
|---|---|---|
| Логотип | Ведёт на главную по адресу без index.html | Ссылка на служебный адрес или её отсутствие |
| Главное меню | Пять-девять основных разделов, понятные названия | Десятки пунктов, названия из внутренней кухни |
| Поиск | Заметная строка или значок | Спрятан за несколькими нажатиями |
| Контакты и способ связи | Телефон, кнопка заказа или обратного звонка | Нет, приходится искать в подвале |
| Региональный или языковой переключатель | Если сайт региональный или многоязычный | Автоматическая смена без возможности выбрать: переключатель языков |
| Корзина и кабинет | Для магазинов и сервисов | Ссылки в меню на служебные адреса без пояснения |
Главное меню
- Пункты — реальные разделы. Каждая ссылка ведёт на обычную страницу с чистым адресом, а не на пустой заголовок выпадающего списка.
- Названия понятны посетителю. Пишите так, как ищут люди: «Диваны», а не «Продукция мягкой группы»; сверяйтесь с запросами: поисковые подсказки.
- Порядок отражает важность. Самые нужные разделы — в начале и в конце ряда: их запоминают лучше.
- Активный раздел отмечен визуально, но не обязательно ссылкой на саму себя.
- Выпадающие списки не глубже двух уровней: глубокие меню трудно пользоваться, особенно с телефона: уровень вложенности.
Меню и обход роботом
Робот воспринимает меню как набор ссылок, поэтому они должны быть обычными ссылками в исходном коде страницы, а не создаваться скриптом только после наведения курсора. Ссылки в меню на страницы с параметрами и перенаправлениями зря расходуют обход: ведите на конечные адреса. Не закрывайте ссылки меню атрибутом nofollow: это сбивает распределение внимания по сайту.
<header>
<a href='/' aria-label='На главную'>Логотип</a>
<nav aria-label='Основная навигация'>
<ul>
<li><a href='/catalog/'>Каталог</a></li>
<li><a href='/blog/'>Блог</a></li>
<li><a href='/kontakty/'>Контакты</a></li>
</ul>
</nav>
</header>Такая разметка использует семантические элементы: логотип ведёт на корень сайта, навигация обозначена как отдельный блок, а пункты — список ссылок. Подробнее — в статье про семантическую вёрстку.
Мобильное меню
- Ссылки мобильного меню должны присутствовать в исходном коде страницы, даже если визуально спрятаны: структура в меню на мобильном.
- Кнопка меню достаточно большая для нажатия пальцем и имеет понятную подпись для программ экранного доступа.
- Раскрытие меню не сдвигает содержимое неожиданно.
- Важные действия — заказ и связь — доступны без открытия меню.
Влияние на скорость
Шапка загружается на каждой странице, поэтому тяжёлое меню замедляет весь сайт. Не подключайте для меню большие библиотеки, задавайте шапке фиксированную высоту, чтобы при загрузке ничего не сдвигалось: смещения макета. Липкая шапка не должна занимать больше нескольких десятков пикселей на телефоне.
Как проверять шапку
Посмотрите, какими ссылками из шапки пользуются, на карте кликов: карта кликов. Если важный раздел почти не получает переходов, переименуйте или переместите пункт. Если на пункты, которые вы считали второстепенными, нажимают часто, подумайте, не вынести ли их выше. Проверьте шапку при отключённых скриптах и при навигации только клавиатурой: меню должно оставаться доступным.
Связанные материалы. Подвал сайта — в статье ссылки в подвале, сквозные блоки — в статье сквозные блоки и перелинковка, а проверка удобства — в статье юзабилити сайта.
Частые вопросы
Сколько пунктов должно быть в главном меню?
Обычно пять-девять основных разделов; больше — и внимание рассеивается, а меню трудно читать, особенно на телефоне.
Должны ли ссылки меню быть в исходном коде страницы?
Да: если они создаются скриптом только после наведения курсора, робот может их не увидеть; ссылки должны быть обычными.
Куда должен вести логотип?
На главную страницу по адресу корня сайта, без служебных окончаний вроде index.html.
Готовый адрес можно собрать прямо сейчас: откройте генератор ЧПУ — он транслитерирует фразу по таблице Яндекса, уберёт служебные слова и покажет длину адреса.