Что такое футер простыми словами?
Футер сайта, или подвал, — нижний блок страницы, противоположный хедеру. В HTML он обозначается тегом <footer>, который содержит информацию об авторе, копирайте или связанные документы. Представь подвал дома: там хранят коммуникации, документы и выходы, не отвлекая от жилых комнат.
Футер завершает страницу, дает вторую навигацию и контакты. Пользователи доходят до него после контента, ищут контакты или меню — 40% скроллят до конца на десктопе. Тег <footer> семантически помогает поисковикам понять структуру, улучшая индексацию.
Футер завершает страницу, дает вторую навигацию и контакты. Пользователи доходят до него после контента, ищут контакты или меню — 40% скроллят до конца на десктопе. Тег <footer> семантически помогает поисковикам понять структуру, улучшая индексацию.
Эволюция подвала: от текстовой строки до многофункционального блока
Ранние сайты 90-х ограничивались копирайтом в одну строку — "© 1995 Company". С Web 2.0 футер разросся: добавили меню, контакты, соцсети. К 2010-м e-commerce ввел платежки и CTA, а мобильный веб — sticky-варианты. Сегодня футер — инструмент SEO и лидогенерации: распределяет ссылочный вес, собирает email, улучшает индексацию.
Зачем сайту нужен качественный подвал?
Преимущества для User Experience (UX)
Футер улучшает UX: дает навигацию в конце пути, создает завершенность. Пользователи, дочитавшие страницу, кликают ссылки в 30% случаев — рост времени сессии на 12%. Он снижает отток, предлагая "второй шанс" перейти в каталог или FAQ.
Влияние на SEO и поисковую оптимизацию
Футер распределяет ссылочный вес: внутренние ссылки помогают индексации. Перелинковка ключевых страниц поднимает их ранжирование. Подвал усиливает SEO через плотную перелинковку. NAP-блок важен для локального поиска — единообразие данных в Google My Business критично для ранжирования в локальных выдачах.
Футер улучшает UX: дает навигацию в конце пути, создает завершенность. Пользователи, дочитавшие страницу, кликают ссылки в 30% случаев — рост времени сессии на 12%. Он снижает отток, предлагая "второй шанс" перейти в каталог или FAQ.
Влияние на SEO и поисковую оптимизацию
Футер распределяет ссылочный вес: внутренние ссылки помогают индексации. Перелинковка ключевых страниц поднимает их ранжирование. Подвал усиливает SEO через плотную перелинковку. NAP-блок важен для локального поиска — единообразие данных в Google My Business критично для ранжирования в локальных выдачах.
Анатомия идеального футера: основные элементы
Список базовых компонентов
Идеальный футер включает:
- Логотип или название компании
- Меню (дубликат популярных разделов хедера)
- Контакты (телефон, email, адрес)
- Ссылки на соцсети
- Копирайт с годом
- Политика конфиденциальности и пользовательское соглашение
Группируй в 3–5 колонок:
первая — брендинг, вторая — навигация, третья — контакты, четвертая — юридические ссылки.
Для магазинов добавь категории товаров и способы доставки.
- Логотип или название компании
- Меню (дубликат популярных разделов хедера)
- Контакты (телефон, email, адрес)
- Ссылки на соцсети
- Копирайт с годом
- Политика конфиденциальности и пользовательское соглашение
Группируй в 3–5 колонок:
первая — брендинг, вторая — навигация, третья — контакты, четвертая — юридические ссылки.
Для магазинов добавь категории товаров и способы доставки.
Правила визуальной иерархии в подвале
Разделяй колонки whitespace, используй жирные заголовки колонок.
Цвет контрастный к фону — минимум 4.5:1 по WCAG.
Иконки ускоряют сканирование: телефон с tel:, email с mailto:.
Избегай хаоса — максимум 20–30 ссылок на странице.
Цвет контрастный к фону — минимум 4.5:1 по WCAG.
Иконки ускоряют сканирование: телефон с tel:, email с mailto:.
Избегай хаоса — максимум 20–30 ссылок на странице.
Контактная информация и блок доверия (NAP)
Что такое NAP и почему это важно для локального SEO
NAP — Name (название), Address (адрес), Phone (телефон). Единообразие данных в футере, Google My Business и каталогах поднимает локальный рейтинг. Google использует их для верификации компании и определения релевантности в локальных выдачах.
Как правильно оформить контакты
Делай кликабельными:
<a href="tel:+7...">+7 (495)...</a>,
<a href="mailto:...">email@domain.ru</a>.
Интегрируй карту Yandex/Google Maps.
Добавь иконки Telegram, WhatsApp — мессенджеры генерируют значительную часть лидов.
<a href="tel:+7...">+7 (495)...</a>,
<a href="mailto:...">email@domain.ru</a>.
Интегрируй карту Yandex/Google Maps.
Добавь иконки Telegram, WhatsApp — мессенджеры генерируют значительную часть лидов.
График работы и способы связи
Укажи "Пн–Пт 9:00–18:00, Мск".
Раздели каналы: продажи, техподдержка, общие вопросы.
Учитывай часовые пояса для региональных компаний.
Раздели каналы: продажи, техподдержка, общие вопросы.
Учитывай часовые пояса для региональных компаний.
Навигация и «второй шанс» для конверсии
Сквозное меню в футере: дублирование или альтернатива?
Дублируй хедер частично: ключевые разделы в колонках. Для e-commerce — категории товаров. Это распределяет ссылочный вес без каннибализации. Меню в футере — зона повторной навигации для пользователей, которые не нашли нужное в хедере.
Призыв к действию (CTA) в самом низу страницы
Пользователи в футере мотивированы: повторь основное действие "Купить", "Записаться" или "Скачать". Делай кнопкой с контрастом и достаточным размером.
Дублируй хедер частично: ключевые разделы в колонках. Для e-commerce — категории товаров. Это распределяет ссылочный вес без каннибализации. Меню в футере — зона повторной навигации для пользователей, которые не нашли нужное в хедере.
Призыв к действию (CTA) в самом низу страницы
Пользователи в футере мотивированы: повторь основное действие "Купить", "Записаться" или "Скачать". Делай кнопкой с контрастом и достаточным размером.
Юридическая чистота и обязательные ссылки
Защита персональных данных: Политика конфиденциальности и ФЗ-152
Ссылка на Политику обязательна по ФЗ-152: опиши сбор, хранение, обработку данных. Размещай в колонке "Юридическое" или "Документы".
Пользовательское соглашение, Оферта и реквизиты
Оферта для продаж — публичный договор, соглашение — общие правила использования сайта. Добавь "Лицензия №..." для медицинских, образовательных или финансовых сервисов.
Оформление копирайта и реквизитов
© Компания 2026. ИНН, ОГРН, адрес юридического лица.
Автоматизируй год JavaScript: new Date().getFullYear().
Ссылка на Политику обязательна по ФЗ-152: опиши сбор, хранение, обработку данных. Размещай в колонке "Юридическое" или "Документы".
Пользовательское соглашение, Оферта и реквизиты
Оферта для продаж — публичный договор, соглашение — общие правила использования сайта. Добавь "Лицензия №..." для медицинских, образовательных или финансовых сервисов.
Оформление копирайта и реквизитов
© Компания 2026. ИНН, ОГРН, адрес юридического лица.
Автоматизируй год JavaScript: new Date().getFullYear().
Особенности футера для E-commerce и корпоративных сайтов
Иконки платежных систем и доставок
Visa, Mastercard, СБП, СДЭК, Яндекс.Доставка повышают доверие. Размещай серыми, активируй при ховере. Это социальное доказательство, которое снижает сомнения покупателя.
Блок партнеров, наград и сертификатов
Логотипы сертификаций (ISO, лицензии), партнеры, награды — социальное доказательство. В e-commerce это снижает отказы от покупки.
Ссылки на техподдержку, FAQ и Базу знаний
"Чат поддержки", "FAQ", "Помощь" разгружают колл-центр и улучшают UX. Интегрируй ссылку на helpdesk или базу знаний.
Visa, Mastercard, СБП, СДЭК, Яндекс.Доставка повышают доверие. Размещай серыми, активируй при ховере. Это социальное доказательство, которое снижает сомнения покупателя.
Блок партнеров, наград и сертификатов
Логотипы сертификаций (ISO, лицензии), партнеры, награды — социальное доказательство. В e-commerce это снижает отказы от покупки.
Ссылки на техподдержку, FAQ и Базу знаний
"Чат поддержки", "FAQ", "Помощь" разгружают колл-центр и улучшают UX. Интегрируй ссылку на helpdesk или базу знаний.
Инструменты лидогенерции в подвале
Форма подписки на рассылку
Одно поле "Email" + "Подписаться".
Lead magnet: "Скидка 10%" или "Гайд по выбору".
Конверсия 5–8% при правильном оформлении.
Компактная форма обратной связи
Поля: имя, телефон, сообщение. Используй при отсутствии попапов.
Минимизируй количество полей — каждое дополнительное поле снижает конверсию на 5–10%.
Одно поле "Email" + "Подписаться".
Lead magnet: "Скидка 10%" или "Гайд по выбору".
Конверсия 5–8% при правильном оформлении.
Компактная форма обратной связи
Поля: имя, телефон, сообщение. Используй при отсутствии попапов.
Минимизируй количество полей — каждое дополнительное поле снижает конверсию на 5–10%.
Тренды дизайна и технические решения
Минимализм против многоуровневого футера
Минимализм для лендингов (1–2 строки), многоуровневый для магазинов (5+ колонок).
Выбирай в зависимости от задач сайта.
Sticky Footer (Липкий подвал): за и против
Фиксирует футер снизу при скролле: + конверсия на мобиле, минус — перекрывает контент.
CSS: position: sticky; bottom: 0;. Используй осторожно, чтобы не мешать основному контенту.
Кнопка «Наверх» (Scroll to Top)
Scroll-behavior: smooth; на якорь #top.
Обязательна для статей и длинных страниц (>2000px).
Адаптивность: Mobile Footer
Аккордеон для меню, скрывай второстепенное на мобилях @media (max-width: 768px). На
мобильных устройствах пространство ограничено — приоритизируй контакты и основную
навигацию.
Минимализм для лендингов (1–2 строки), многоуровневый для магазинов (5+ колонок).
Выбирай в зависимости от задач сайта.
Sticky Footer (Липкий подвал): за и против
Фиксирует футер снизу при скролле: + конверсия на мобиле, минус — перекрывает контент.
CSS: position: sticky; bottom: 0;. Используй осторожно, чтобы не мешать основному контенту.
Кнопка «Наверх» (Scroll to Top)
Scroll-behavior: smooth; на якорь #top.
Обязательна для статей и длинных страниц (>2000px).
Адаптивность: Mobile Footer
Аккордеон для меню, скрывай второстепенное на мобилях @media (max-width: 768px). На
мобильных устройствах пространство ограничено — приоритизируй контакты и основную
навигацию.
Сравнительная таблица: типы футеров для разных задач
Футер для лендинга (Landing Page)
Минимум ссылок (5–10), основной CTA занимает видимую часть. Контакты и копирайт обязательны.
Футер для интернет-магазина
Категории товаров, способы доставки, платежные системы, помощь и поддержка. Максимум информации для удобства покупателя.
Футер для корпоративного сайта
Реквизиты компании, вакансии, контакты отделов, партнеры. Акцент на доверие и профессионализм.
Футер для блога/медиа
Рубрики, теги, авторы, подписка на рассылку. Ссылки на популярные статьи.
Минимум ссылок (5–10), основной CTA занимает видимую часть. Контакты и копирайт обязательны.
Футер для интернет-магазина
Категории товаров, способы доставки, платежные системы, помощь и поддержка. Максимум информации для удобства покупателя.
Футер для корпоративного сайта
Реквизиты компании, вакансии, контакты отделов, партнеры. Акцент на доверие и профессионализм.
Футер для блога/медиа
Рубрики, теги, авторы, подписка на рассылку. Ссылки на популярные статьи.
Техническая оптимизация и доступность (A11y)
Микроразметка Schema.org для футера
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Компания",
"address": {"@type": "PostalAddress", "streetAddress": "ул. Примерная, 1"},
"telephone": "+7...",
"email": "info@example.ru"
}
</script>
Микроразметка помогает поисковикам понять структуру данных и улучшает rich snippets в выдаче.
Доступность для слабовидящих
Шрифт 16px+, контраст 4.5:1 по WCAG, role="contentinfo", tab-focus для навигации.
Проверяй доступность с помощью axe DevTools или WAVE.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Компания",
"address": {"@type": "PostalAddress", "streetAddress": "ул. Примерная, 1"},
"telephone": "+7...",
"email": "info@example.ru"
}
</script>
Микроразметка помогает поисковикам понять структуру данных и улучшает rich snippets в выдаче.
Доступность для слабовидящих
Шрифт 16px+, контраст 4.5:1 по WCAG, role="contentinfo", tab-focus для навигации.
Проверяй доступность с помощью axe DevTools или WAVE.
Типичные ошибки при проектировании подвала
Ссылочная помойка: перегруз ссылками
50+ ссылок — риск пессимизации и путаницы пользователя. Ограничивай 20–30 ссылками, группируй по смыслу.
Нечитаемый шрифт и низкая контрастность
Шрифт <14px портит bounce-rate. Контраст <4.5:1 нарушает WCAG и отпугивает пользователей.
Неактуальные данные в копирайте
Год 2010 в копирайте снижает доверие. Автообновляй год через JavaScript.
Скрытие важных ссылок
display: none или visibility: hidden блокирует индексацию. Используй aria-hidden только для декоративных элементов.
50+ ссылок — риск пессимизации и путаницы пользователя. Ограничивай 20–30 ссылками, группируй по смыслу.
Нечитаемый шрифт и низкая контрастность
Шрифт <14px портит bounce-rate. Контраст <4.5:1 нарушает WCAG и отпугивает пользователей.
Неактуальные данные в копирайте
Год 2010 в копирайте снижает доверие. Автообновляй год через JavaScript.
Скрытие важных ссылок
display: none или visibility: hidden блокирует индексацию. Используй aria-hidden только для декоративных элементов.
Практическое руководство: как создать и настроить футер
Верстка на HTML и CSS
<footer role="contentinfo">
<div class="container" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, <div class="footer-column">
<h3>Компания</h3>
<ul>
<li><a href="/about">О нас</a></li>
<li><a href="/blog">Блог</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Контакты</h3>
<p><a href="tel:+7...">+7 (...) ...</a></p>
<p><a href="mailto:...">email@domain.ru</a></p>
</div>
</div>
</footer>
Используй CSS Grid для десктопа, Flexbox для мобильного.
Настройка футера в WordPress
Виджеты в Appearance > Widgets, Customizer или визуальные конструкторы (Elementor, Divi).
Настройка футера в Tilda
Zero Block или готовые блоки из библиотеки.
<footer role="contentinfo">
<div class="container" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, <div class="footer-column">
<h3>Компания</h3>
<ul>
<li><a href="/about">О нас</a></li>
<li><a href="/blog">Блог</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Контакты</h3>
<p><a href="tel:+7...">+7 (...) ...</a></p>
<p><a href="mailto:...">email@domain.ru</a></p>
</div>
</div>
</footer>
Используй CSS Grid для десктопа, Flexbox для мобильного.
Настройка футера в WordPress
Виджеты в Appearance > Widgets, Customizer или визуальные конструкторы (Elementor, Divi).
Настройка футера в Tilda
Zero Block или готовые блоки из библиотеки.
FAQ: Часто задаваемые вопросы о футере
Обязателен ли футер на одностраничном сайте?
Да, минимум копирайт + контакты. Без него теряешь SEO-сигналы и доверие пользователя.
Можно ли убрать копирайт?
Нет, © защищает авторские права контента. Отсутствие может привести к штрафам.
Влияет ли футер на скорость загрузки сайта?
Да, изображения и формы замедляют загрузку. Оптимизируй через lazy-load и сжатие.
Какие ссылки лучше размещать в подвале для SEO?
Внутренние ссылки на ключевые страницы: каталог, блог, sitemap. Избегай внешних ссылок или размещай их в отдельном блоке.
Нужна ли в футере ссылка на sitemap?
Да, sitemap.xml помогает поисковикам индексировать все страницы. Добавь ссылку в футер или robots.txt.
Да, минимум копирайт + контакты. Без него теряешь SEO-сигналы и доверие пользователя.
Можно ли убрать копирайт?
Нет, © защищает авторские права контента. Отсутствие может привести к штрафам.
Влияет ли футер на скорость загрузки сайта?
Да, изображения и формы замедляют загрузку. Оптимизируй через lazy-load и сжатие.
Какие ссылки лучше размещать в подвале для SEO?
Внутренние ссылки на ключевые страницы: каталог, блог, sitemap. Избегай внешних ссылок или размещай их в отдельном блоке.
Нужна ли в футере ссылка на sitemap?
Да, sitemap.xml помогает поисковикам индексировать все страницы. Добавь ссылку в футер или robots.txt.