Header (хедер, шапка сайта) — верхняя часть веб-страницы, присутствующая на всех страницах сайта. Как правило, header содержит: логотип и название компании (ссылка на главную), главное навигационное меню, кнопку призыва к действию (CTA), контактную информацию или поиск по сайту. Header — «визитная карточка» сайта, которую пользователь видит первой.
В HTML5 для разметки header используется семантический тег <header>, который несёт смысловую нагрузку и помогает поисковикам понять структуру страницы.
Значение header для SEO
- Сквозная навигация — ссылки в header присутствуют на всех страницах, создавая сквозную перелинковку и передавая вес самым важным разделам.
- Семантика HTML5 — тег <header> сигнализирует поисковику о структуре страницы.
- UX и поведенческие факторы — понятный header снижает показатель отказов и увеличивает глубину просмотра.
- Скорость загрузки — тяжёлый header с большими изображениями или JavaScript замедляет LCP (Largest Contentful Paint).
SEO-оптимизация header
- Логотип должен быть ссылкой на главную страницу с alt-текстом = названию компании.
- Навигационные ссылки — описательные анкоры («Каталог», «Цены»), а не «Нажмите здесь».
- Мобильная версия header — hamburger-меню должно быть доступно для ботов (не скрыто через display:none без fallback).
- Sticky header — фиксированный header при прокрутке — улучшает UX, но может перекрывать контент на мобильных.
Технический тег <header> в HTML
Тег <header> используется для: шапки сайта (<header> в начале <body>), шапки раздела (<header> внутри <article> или <section>). Не путайте с <head> (метаданные страницы) и <h1>–<h6> (заголовки контента).
Часто задаваемые вопросы
Нужно ли ключевое слово в тексте навигации header?
Необязательно, но желательно использовать описательные слова. Анкоры навигации — сквозные внутренние ссылки, присутствующие на всех страницах. Это делает их значимыми для передачи контекста целевым страницам. «SEO-услуги» в меню усиливает тематику страницы услуг лучше, чем просто «Услуги». Баланс: читаемость для пользователя важнее ключевых слов. Избегайте переспама в меню.
Влияет ли скорость загрузки header на SEO?
Да. Header обычно содержит LCP-элемент (логотип, hero-изображение в шапке) — Largest Contentful Paint, один из Core Web Vitals. Медленный LCP ухудшает оценку Page Experience. Рекомендации: оптимизируйте логотип (SVG или PNG до 20 КБ), избегайте блокирующего JavaScript в шапке, предзагружайте шрифты заголовка (<link rel=»preload»>), используйте lazy loading только для контента ниже сгиба, но не для header.
Что лучше — sticky header или обычный?
Sticky header (фиксированный при прокрутке) улучшает навигацию на длинных страницах — пользователь всегда видит меню. Это снижает показатель отказов. Однако sticky header занимает часть экрана и может перекрывать контент на мобильных. Компромисс: sticky header на десктопе + обычный на мобильном, или минимальный sticky (только логотип + CTA). Google не наказывает за sticky header, но если он перекрывает контент — это нарушение рекомендаций по interstitials.
Скрытые навигационные элементы в header вредят SEO?
Ссылки, скрытые через display:none или visibility:hidden, получают меньший вес при передаче PageRank — Google частично обесценивает скрытые ссылки. Hamburger-меню на мобильных (toggle через CSS/JS) — допустимо, Google понимает, что это UX-паттерн мобильной навигации. Ссылки, скрытые только в десктопной версии и показанные в мобильной — учитываются (Google индексирует мобильную версию в рамках mobile-first indexing).
