Футер сайта – сквозной блок внизу каждой страницы. Он повторяется во всех разделах и размечается тегом , навигацию внутри оформляют тегом , контакты тегом . Именно в подвале пользователь ищет телефон, а юрист или контролирующий орган — политику обработки данных и реквизиты
Футер часто собирают в последнюю очередь, и туда попадает всё подряд: старые телефоны, ссылки на несуществующие разделы, прошлогодний копирайт. В этой статье разбираем, что должно быть в футере сайта обязательно, что полезно, что вредит и каким бывает оформление футера у разных сайтов.
Зачем нужен футер сайта
Подвал берёт на себя то, чему не нашлось места в шапке: юридические документы, реквизиты, второстепенные разделы, соцсети и мессенджеры. Ещё футер служит страховочной сеткой навигации, дочитавший материал человек ищет следующий шаг там, где взгляд уже остановился.
Чаще всего выделяются три сценария, когда пользователь доходит до подвала.
- дочитал страницу и ищет, куда двигаться дальше;
- специально проскроллил вниз за контактами и соцсетями, когда телефон не нашёлся в шапке.
- использует футер как меню, чтобы не прокручивать длинную страницу обратно наверх.
Из этих сценариев складываются задачи блока. Футер структурирует страницу, даёт навигацию, показывает контакты и правовую информацию, а на длинных страницах заменяет возврат к меню. Актуальные данные и документы работают на надёжность, одну из составляющих E-E-A-T, а время сеанса и переходы внутри сайта поисковые системы читают как поведенческие сигналы.
Виды футеров по способу отображения
Обычно подвал делают одинаковым для всех страниц, но это не единственный вариант. Способ отображения выбирают под устройство сайта и аудиторию.
- стандартный футер. Один набор ссылок на всех страницах, подходит корпоративным сайтам и магазинам;
- мини-футер для бесконечной прокрутки. Лента подгружается сама, обычный подвал недостижим, поэтому ставят статичный блок сбоку;
- контекстный футер, разный для разных аудиторий. Незарегистрированный посетитель видит аргументы за подписку, подписчик и оптовик получают свои наборы ссылок.
Контекстный вариант сложнее в поддержке, каждый набор ссылок проверяют отдельно, а ошибка видна только части аудитории. Начинать лучше со стандартного футера.
Обязательные элементы футера
Обязательный минимум складывается из требований закона и ожиданий пользователя. Для коммерческого сайта это контакты, документы с реквизитами, копирайт и логотип.
Контактные данные
Телефон, почту и мессенджеры размещают кликабельными ссылками через tel: и mailto:, чтобы с мобильного звонить и писать в одно касание. Нерабочий контакт в сквозном блоке тиражируется на все страницы, поэтому его проверяют первым.
Адрес в подвале служит сигналом региональности для поисковых систем, но если компания работает по всей стране, он необязателен: в этом случае обычно указывают адрес центрального офиса
Юридические документы и реквизиты
Издать документ о своей политике в отношении обработки персональных данных обязан оператор, который является юридическим лицом. Опубликовать этот документ и обеспечить доступ к нему на страницах, где данные собираются, обязан любой оператор — и компания, и ИП. Так требует статья 18.1 Федерального закона «О персональных данных» от 27.07.2006 № 152-ФЗ. Закон не предписывает ставить ссылку именно в подвал, но пользователи по привычке ищут политику конфиденциальности внизу страницы — поэтому её и размещают в футере.
С 1 октября 2023 года ресурсы с рекомендательными технологиями обязаны публиковать правила их применения, как требует Федеральный закон от 31.07.2023 № 408-ФЗ. Для правил заводят отдельную ссылку рядом с политикой и пользовательским соглашением. Остальной состав зависит от типа сайта.
- Сайт, собирающий данные. Политика обработки данных, согласие, уведомление о cookie.
- Интернет-магазин. Реквизиты юрлица или ИП (ИНН, ОГРН, адрес), оферта, условия оплаты, доставки и возврата.
- Электронное СМИ. Номер свидетельства и выдавший его орган.
- Медицинские и образовательные сайты. Сведения о лицензии.
- Материалы не для детей. Возрастное ограничение.
Реквизиты подтверждают легальность бизнеса. Подробнее о них вы можете прочитать в разборе юридических требований к сайту.
Копирайт и логотип
Строка копирайта состоит из трёх частей: символ ©, наименование правообладателя и год или период публикации. Актуальный год показывает, что сайт поддерживают, а формат «год создания – текущий год» сообщает и возраст бизнеса.
Возраст домена поисковые системы берут не из этой строки, поэтому указание лет работает на доверие человека, а не на ранжирование, и при небольшом возрасте период лучше не разворачивать. Логотип обычно дают в монохромной версии и ведут им на главную.
Дополнительные элементы футера
Всё, что идёт дальше минимума, добавляют по одному принципу: элемент футера отвечает на вопрос, который возникает у человека внизу страницы. Набор зависит от того, чем занимается бизнес.
Навигация и карта сайта
В подвал выносят несколько ключевых разделов, а не всё главное меню. Отбирают их по посещаемости страниц и по данным Яндекс Вебмастера: инструмент «Структура сайта» в справке Яндекса показывает разделы не менее чем из 10 страниц, которые составляют более 1% от числа страниц, загруженных в базу поиска.
Карта сайта в футере остаётся инструментом для людей, структуру поисковые системы берут из файла Sitemap. При упорядоченном меню отдельная страница-карта не нужна, а ссылки подвала называют описательно, чтобы было понятно, куда ведёт переход.
Соцсети, подписка и призыв к действию
Иконки соцсетей ставят в нижнюю полосу футера и ведут ими на живые аккаунты: ссылка на брошенное сообщество работает против доверия. Площадки выбирают не по общей популярности, а по тому, где компания действительно присутствует и отвечает на сообщения. Набор соцсетей и мессенджеров пересматривают вместе с остальными ссылками подвала: доступность сервисов в России меняется, и иконка, ведущая в недоступное приложение, вредит сильнее, чем её отсутствие.
Форма подписки в подвале рассчитана на тех, кто уже изучил контент. Её делают в одно поле, только адрес почты, а рядом ставят согласие на обработку данных. Призыв к действию здесь мягче, чем на первом экране: вместо «купите» пишут «оставьте заявку на сайте».
Значки доверия и способы оплаты
К значкам доверия относят сертификаты и лицензии, награды, рейтинги на отзовиках со ссылками, логотипы партнёров. Работают они, пока их немного. Стена наград даёт обратный эффект, и набор стоит проверить юзабилити или или A/B-тестом.
Логотипы платёжных систем снимают вопрос об оплате до перехода в корзину, поэтому в интернет-магазинах их выносят в подвал почти всегда. Остальные необязательные элементы ставят под конкретную задачу.
- Ссылка на мобильное приложение с QR-кодом — для магазинов и сервисов.
- Кнопка возврата к началу страницы — на длинных страницах и в лентах.
- Ссылка на вакансии — компаниям с постоянным наймом.
- Логотипы партнёров — когда они добавляют вес, а не шум.
- Информер посещаемости — информационным проектам, которые живут на рекламе.
- Возрастная метка — там, где есть ограничение по аудитории.
Набор дополнительных элементов мы пересматриваем вместе с аналитикой. Если по ссылке из подвала за квартал не было переходов, её убирают, иначе блок разрастается до простыни, в которой пользователь перестаёт различать главное.
Что не стоит размещать в футере
Подвал проигрывает первому экрану по вниманию, поэтому всё, что требует чтения, тратится впустую. Отдельные элементы вредят прямо.
- Длинный текст или видео об истории компании. Под логотипом хватает двух строк с УТП, а история разворачивается на отдельной странице о компании.
- Облако тегов. Устаревший элемент, превращается в скопление ключевых слов, а за переспам Яндекс накладывает фильтр за переоптимизацию.
- Интерактивная карта проезда. В подвале она либо мелкая, либо вытесняет остальные блоки.
- Скрытые ссылки и перечни городов ради запросов. Это спам, а не перелинковка.
К отдельной категории относятся элементы футера, дублирующие шапку один в один. Футер и хедер сайта решают разные задачи: шапка ведёт человека по главным разделам, а подвал подбирает то, что в неё не поместилось. Полная копия главного меню внизу навигации не добавляет, зато заметно удлиняет футер.
Футер для разных типов сайтов: примеры
Универсального набора нет, подвал собирают под задачу сайта. Разница между лендингом и интернет-магазином здесь такая же, как между визиткой и каталогом. Ниже собраны примеры футера сайта по типам проектов.
- Лендинг. Логотип, копирайт, контакты, политика конфиденциальности, адрес и реквизиты. Вся навигация уже на странице.
- Интернет-магазин. Доставка, оплата, возврат, гарантия, поддержка, оферта, блоки доверия, платёжные системы. Самый насыщенный подвал.
- Корпоративный сайт. Услуги, кейсы, реквизиты, контакты, призыв к действию.
- Информационный сайт. Рубрики, сведения о редакции, условия для рекламодателей.
- Сайт-визитка. Короткий футер с контактами, копирайтом и политикой.
Ещё одна деталь: рядом со знаком копирайта часто ставят название или ссылку на разработчика сайта. Для пользователя элемент второстепенный, и на мобильных его убирают в последнюю строку. Чем уже экран, тем строже приходится отбирать ссылки и тем короче делается сама нижняя полоса в подвале.
Как оформить футер: структура, дизайн, мобильная версия
Работа над подвалом ведется в зависимости от задач, а не от готовой сетки. Сначала список того, что человек должен найти внизу страницы, потом группировка элементов и прототип.
- Собрать элементы футера: обязательные документы, контакты, разделы-кандидаты из аналитики.
- Сгруппировать их по задачам пользователя: компания, услуги, полезное, документы, контакты. Третий и четвёртый уровни не делают.
- Нарисовать прототип в типовой сетке: широкий блок с логотипом и подпиской, две-четыре колонки навигации и контактов, нижняя полоса с копирайтом, ссылками на документы и соцсети.
- Свёрстать блок семантически и проверить отображение на мобильных и десктопе.
Футер отделяют от контента фоном, границей или отступом. На мобильных колонки сворачивают в аккордеоны, но контакты и документы оставляют видимыми. Минимальный размер кликабельной зоны в рекомендации W3C «Руководство по доступности веб-контента» (WCAG) версии 2.2, 2023 года, составляет 24×24 CSS-пикселя для уровня AA и 44×44 для уровня AAA. Текст подвала при этом должен читаться без масштабирования
Тяжёлые элементы подвала (виджеты, встроенные карты) подключают с отложенной загрузкой, чтобы не портить метрики скорости. Если карта нужна, в футере оставляют ссылку на страницу контактов, а не сам виджет. Сетку и иерархию футера закладывают на этапе дизайна сайта, вместе с прототипами остальных сквозных блоков.
Футер и SEO: перелинковка без переспама
Ссылки подвала сквозные, они стоят на каждой странице и участвуют в распределении ссылочного веса. Это делает футер удобной точкой перелинковки и самым простым местом, где её превращают в спам.
Продвигаемые фразы в анкорах допустимы, но набор ссылок проверяют на переспам. Десятки SEO-анкоров, скрытые блоки и перечни городов поисковые системы распознают как манипуляцию. Битая ссылка в сквозном блоке множится на все страницы, поэтому перед публикацией подвал прогоняют через отчёт о неработающих ссылках. Футер проектируют вместе со структурой сайта, и это часть работы по разработке сайта под ключ.
Типичные ошибки при создании футера
Большинство проблем мы видим не в дизайне, а в структуре подвала. Элементы добавляли по одному и не пересматривали набор.
- Больше двух уровней вложенности ссылок. Такую иерархию внизу страницы не читают.
- Непонятные названия групп. Слово «Информация» ничего не говорит о содержимом.
- Отсутствие структуры, когда ссылки идут сплошным списком.
- Скрытый футер: мелкий шрифт, низкий контраст, появление только при наведении.
- Мобильная версия с горизонтальной прокруткой.
Ещё одна частая ошибка — отсутствие регламента обновления. Футер пересматривают хотя бы раз в год: год в копирайте, контакты, ссылки на документы, адаптивность на новых разрешениях.
