Футер сайта: что это, из чего состоит и как сделать его удобным

Что такое футер сайта

Футер (от англ. footer), или подвал, - завершающий блок веб-страницы. По определению Яндекс Бизнеса, это сквозной блок, который выглядит одинаково на всех страницах проекта. Пользователь видит блок, когда долистывает страницу до конца. Противоположность футеру - шапка, или хедер.

В разметке у блока есть отдельный тег. Документация MDN описывает элемент footer как нижний колонтитул ближайшего раздела и перечисляет, что в нём обычно лежит: сведения об авторе, об авторском праве и ссылки на связанные документы. Про остальные теги страницы можно прочитать в справочнике по HTML-тегам.

Название «подвал» прижилось из-за положения блока: он находится внизу, как подвал в доме. Если представить страницы комнатами, а верхнее меню крышей, футер окажется фундаментом, на котором держится остальное. Такую картинку приводит блог Adlook, и она хорошо передаёт роль блока: его не видно сразу, но без него конструкция выглядит незаконченной.

Зачем нужен футер?

Подвалом пользуются чаще, чем кажется. По данным Nielsen Norman Group, в юзабилити-тестах люди часто обращаются к футерам за важной информацией и действиями, поэтому блок входит в общее впечатление от сайта.

Поведение посетителей удобно разложить на три сценария, как это делает Топвизор. Первый называют дочиткой: человек изучил страницу до конца и, скорее всего, заинтересован, поэтому ему стоит предложить форму или подписку. Второй - быстрый скролл: часть людей специально листает вниз за контактами, соцсетями или поддержкой. Третий - навигация: увидев ссылки внизу, человек идёт по ним и не возвращается к меню.

Яндекс Практикум связывает футер с главными метриками: продажами, глубиной просмотра и позициями в поиске. Для финансов, медицины и юриспруденции там же названы лицензии и полные реквизиты в подвале, причём требования отрасли лучше сверять с юристом.

Сколько людей доходит до низа, зависит от страницы. Adlook пишет, что до футера долистывают лишь в 10-15% случаев, а Orbit Media ссылается на исследование Chartbeat по 25 миллионам визитов: люди прокручивают страницы на тысячи пикселей. Цифры расходятся, поэтому проверяйте свой сайт в карте скроллинга Яндекс Метрики и не принимайте чужое среднее за свой результат.

Элементы футера: что в него кладут

Набор зависит от типа проекта, но базовый состав у большинства сайтов одинаков. Яндекс Бизнес в том же материале и Практикум описывают такие группы:

• логотип и копирайт;
• карта сайта: ссылки на главные разделы и категории, чтобы не возвращаться к шапке;
• контакты: телефон, почта, адрес, мессенджеры, соцсети;
• юридическая и служебная информация: политика конфиденциальности, оферта, условия возврата, лицензии;
• формы и кнопки: обратная связь, подписка, «Свяжитесь с нами».

Юридические ссылки обычно идут первыми в списке обязательных. Ру-центр пишет, что при сборе данных пользователей нужно соблюдать 152-ФЗ «О персональных данных» и размещать ссылку на политику конфиденциальности на каждой странице. Формулировки политики и согласия согласуйте с юристом, а про файлы cookie читайте в отдельном справочном материале.

Контакты лучше оформлять ссылками. В том же материале Ру-центра сказано, что телефон лучше оформлять ссылкой, и приводятся готовые теги tel: и mailto:. На смартфоне тогда хватает одного касания, чтобы позвонить или написать.

Примеры из того же материала показывают, как блок работает у разных компаний. Ostrovok.ru в подвале объясняет, почему приложение удобнее и выгоднее бронирования через браузер, и не ограничивается кнопкой скачивания. Wildberries делит ссылки на информацию для клиентов, партнёров и соискателей. А «Нетология» рядом с лицензией показывает участие в проекте «Сколково». Все три решения добавляют доверия и закрывают вопросы разных групп посетителей.

Форма подписки в футере требует отдельной оговорки. Ру-центр напоминает, что в такой форме нужно запрашивать согласие на обработку персональных данных. Подробнее о том, как строить призыв рядом с формой, - в справочнике про призыв к действию.

Данные о частоте элементов дают цифры из исследования Orbit Media. Её команда проанализировала 50 ведущих маркетинговых сайтов: иконки соцсетей в подвале нашлись у 72% из них, а форма подписки у 24%. Получается, что соцсети почти норма для коммерческого подвала, а подписка пока встречается заметно реже и поэтому может выделить ваш проект.

Какие бывают виды футеров?

Практикум выделяет четыре типа, и деление идёт по объёму информации в проекте. Ниже они собраны в таблицу вместе с тем, где каждый уместен.

Крупные магазины показывают многоуровневый подвал в деле. По описанию Adlook, у Ozon он поделён на разделы для покупателей и партнёров, а справа внизу стоит кнопка версии для слабовидящих. У DNS в подвале собрана информация и для партнёров, и для покупателей, а адреса ближайших магазинов определяются автоматически по геолокации. Обе компании исходят из того, что к низу страницы приходят люди с разными задачами.

Контекстный подвал Топвизор показывает на примере магазина с двумя аудиториями. Оптовикам в нём нужны условия сотрудничества, контакты отдела по работе с крупными покупателями и оптовый прайс. Розничным клиентам нужны условия оплаты и доставки, отслеживание заказа и телефон поддержки. Один подвал на всех страницах эти задачи не закрывает.

Отдельный случай - страницы с бесконечной прокруткой. В материале Топвизора отмечено, что подвал в такой ленте поймать трудно, и для таких проектов обычно делают небольшой статичный футер сбоку от подгружаемого контента. Для лендингов Kokoc советует микро-футер: копирайт, реквизиты и один призыв к действию.

Как футер связан с SEO

Футер даёт место для внутренней перелинковки. В материале Топвизора это названо дополнительным пространством для ссылок на страницы сайта. Ру-центр уточняет, что ссылки из подвала ценятся мало, но немного ссылочного веса всё же передают. Рассчитывать, что подвал вытянет продвигаемую страницу, не стоит. Общие принципы работы с поиском разобраны в руководстве по SEO.

Логотип с ссылкой на главную тоже работает на структуру. Про логотип в том же материале сказано прямо:

Логотип в футере работает не только на узнаваемость бренда.

Антон Смирнов, SEO-эксперт, в том же материале

Ссылок не должно быть слишком много. Kokoc советует вести из подвала на 6-12 ключевых разделов и 2-4 приоритетные посадочные, а внешнюю ссылку на сайт разработчика помечать атрибутом nofollow. Сквозные ссылки с ключевыми анкорами по всем страницам рискованны: правила Google о спаме относят к нарушениям ссылки, распространяемые в нижних колонтитулах или шаблонах разных сайтов.

HTML-карта сайта в подвале нужна людям, а роботам хватает sitemap.xml. Топвизор считает такой вид карты почти неиспользуемым и советует для роботов делать sitemap.xml, а Kokoc добавляет, что для индексации хватает корректной структуры и актуального sitemap.xml.

Эффект от перекладывания ссылок в подвал стоит измерять. Команда по оптимизации конверсии CleanCommit проверила это на магазине на Shopify: в футер добавили организованный список ссылок на все спортивные посадочные страницы и перенесли туда второстепенные ссылки из шапки. По данным CleanCommit, кликабельность выросла на 12,0%, а число кликов на 10,2%. При этом конверсия просела на 16,3%, а выручка на посетителя на 16,5%. Агентство сообщает об этом как о победившем тесте по навигации, но деньги в нём потеряны.

Вывод простой: удобство навигации и итоговая конверсия не всегда растут вместе. Меняйте подвал через A/B-тест и смотрите и на выручку, и на клики.

Как сделать футер удобным

Начните со структуры. Adlook советует делить подвал на логичные блоки и колонки, чаще всего по три-пять, с понятным заголовком у каждой группы ссылок. Практикум в том же ключе предлагает группировать ссылки по смыслу, чтобы структура легко сканировалась.

С читаемостью проще всего. Практикум называет минимальный кегль 14 px и контраст по стандартам WCAG. Kokoc уточняет порог: отношение цвета текста к фону не ниже 4.5:1. Текст в подвале нельзя терять на тёмном или пёстром фоне, где ссылки сливаются с картинкой.

Размер области нажатия на смартфоне важнее, чем кажется. Практикум рекомендует минимум 44 px по высоте. Это строже требования критерия WCAG 2.2 уровня AA: он требует цели размером не менее 24 на 24 CSS-пикселей, кроме случаев с исключениями. Ориентируйтесь на 44 px, а 24 px считайте нижней границей.

На телефоне пять колонок превращаются в длинную простыню. Kokoc советует сворачивать длинные перечни в аккордеоны и оставлять на первом экране три-пять главных пунктов. Для интернет-магазина с глубоким каталогом он предлагает мегафутер с группировкой, а для лендинга микрофутер.

Для доступности используйте семантический тег footer. MDN предупреждает про проблему с программой чтения с экрана VoiceOver, которая не добавляет такой элемент в список ориентиров, и советует добавить атрибут role со значением contentinfo. Решение дешёвое, а ориентироваться по странице становится проще.

Следите и за скоростью. Тяжёлый сторонний код в подвале, по словам Kokoc, способен ухудшить Core Web Vitals, а Ру-центр напоминает, что карта и виджеты не должны замедлять загрузку. Подробнее об удобстве интерфейса - в справочнике про UX и UI.

Соберём всё в практический пример по материалам Adlook. Для компании, которая продаёт и монтирует кондиционеры, в подвал кладут логотип с кратким описанием, телефон, адрес и кнопку консультации, ссылки на доставку, гарантию и обслуживание, юридическую информацию с политикой и ИНН и значки соцсетей. Такой набор занимает мало места, но отвечает на главные вопросы посетителя.

Какие ошибки встречаются в футерах?

Практикум и Топвизор в совокупности называют восемь типичных промахов. Сверьте с ними свой макет:

• нет иерархии: ссылка на политику выглядит так же ярко, как ссылка на каталог;
• хаос в мобильной версии: десктопные колонки превращаются в бесконечную ленту;
• устаревший копирайт: старый диапазон лет выдаёт, что проектом не занимаются, поэтому год обновляйте автоматически;
• слишком яркий дизайн: подвал ярче основного контента отвлекает от финала;
• больше двух уровней вложенности и непонятные названия ссылок;
• спрятанный или неразборчивый подвал;
• облако тегов: Антон Смирнов называет его устаревшим и предупреждает о возможных санкциях Яндекса;
• длинный текст или видео о компании вместо обязательных элементов.

Пример последней ошибки приводит Топвизор: на странице в подвал добавили слишком много текста о компании, но в нём не нашлось ни политики конфиденциальности, ни контактов, ни формы обратной связи. Посетитель дочитывал до конца и не получал ни одного следующего шага.

Есть и спорные элементы. Топвизор относит карту со схемой проезда к вредным, а Ру-центр и Яндекс Бизнес советуют её для офлайн-точек. Разумный выход: оставьте карту, если клиенты приходят по адресу, и проверьте, что она не тормозит страницу. Социальные виджеты тоже требуют осторожности: Orbit Media предупреждает, что посты из ленты появятся на каждой странице, и выбирать их стоит осознанно.

Перед запуском пройдите по короткому списку:

1. Есть ли политика конфиденциальности, оферта и контакты, а юридические формулировки проверены юристом?
2. Ссылки разбиты на группы с заголовками, а кнопки нажимаются пальцем?
3. Копирайт обновляется автоматически?
4. Вес подвала не ухудшает скорость страницы?
5. Вы проверяли изменения подвала A/B-тестом или картой скроллинга?

Частые вопросы