Футер сайта: что обязательно разместить внизу страницы

Футер часто проектируют в последнюю очередь, по остаточному принципу: сложили ссылки, добавили копирайт, и готово. Между тем это один из самых посещаемых блоков сайта. Люди прокручивают страницу до конца, когда не нашли нужное в меню, когда хотят проверить надёжность компании или когда готовы действовать и ищут способ связаться.

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

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

Зачем нужен футер и кто им пользуется

У подвала четыре основные группы посетителей.

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

Кроме людей, футер читают роботы поисковых систем. Ссылки внизу страницы дают внутренний вес разделам и помогают индексации. Об этой роли подробнее — в статье про внутреннюю перелинковку. Но злоупотреблять не стоит: сотня ссылок в подвале ухудшает удобство и размывает вес.

Обязательные элементы

Существует набор, без которого футер считается неполным. Состав зависит от типа сайта, но базовые позиции повторяются.

Логотип и краткое описание

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

Навигация по основным разделам

Дублирование главного меню плюс дополнительные страницы, которые не помещаются в шапку. Группируйте ссылки по смыслу и подписывайте группы: «Услуги», «Компания», «Клиентам». Не переносите в футер всё дерево сайта, выбирайте то, что ищут чаще всего.

Контактные данные

Адрес, электронная почта, график работы, ссылки на мессенджеры. Все контакты должны быть кликабельными: почта открывает письмо, адрес ведёт на карту. Для офлайн-бизнеса адрес нужен обязательно, а о том, как ведёт себя география в поиске, мы писали в статье про локальное SEO. Формат контактов должен совпадать на всех страницах и в карточках компании в картографических сервисах, иначе поисковики и посетители начнут путаться.

Юридические документы

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

Копирайт и служебная строка

Название организации и знак авторских прав. Без даты и года, чтобы не пришлось обновлять руками, либо с автоматически подставляемым значением. Не пишите архаичных формулировок, ограничьтесь короткой строкой.

Желательные элементы

• Призыв к действию. Кнопка «Обсудить проект» или «Оставить заявку» ловит тех, кто дочитал до конца. Часто это самые заинтересованные посетители.
• Подписка на рассылку. Поле для почты и обещание конкретной пользы. Как связать сайт с рассылками, подробно в материале про email-маркетинг.
• Социальные сети и мессенджеры. Значки с ссылками. Выбирайте только те каналы, которые действительно ведёте.
• Карта проезда или схема. Для компаний с офисом или точками продаж. Если карта тяжёлая, подгружайте её отложенно, чтобы не замедлять страницу.
• Способы оплаты и доставки. Для интернет-магазинов — значки платёжных систем и служб доставки.
• Награды, партнёры, сертификаты. Небольшой блок доверия. Использовать только реальные.
• Быстрые ответы. Ссылка на раздел с вопросами, например, часто задаваемые вопросы.
• Переключатели. Выбор города, языка или валюты, если сайт их поддерживает.

Структура футера: схемы по типам сайтов

Корпоративный сайт

Здесь подвал решает вопрос доверия и навигации. Обычно это три-четыре колонки: услуги, компания, ресурсы (блог, портфолио, вопросы), контакты. Полезно сверить состав с перечнем разделов из статьи про разделы корпоративного сайта. Если вы рассматриваете формат с нуля, посмотрите нашу услугу по корпоративным сайтам.

Интернет-магазин

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

Лендинг

Подвал лендинга должен быть коротким, чтобы не уводить с единственной цели. Контакты, документы и повтор призыва — достаточный набор. Внутренние ссылки не нужны, если они не помогают принять решение. Принципы построения лендингов описаны в статье про выбор между лендингом и многостраничником и на странице услуг по лендингам.

Визуальное оформление

Цвет и фон

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

Сетка и колонки

Подвал почти всегда строится на колонках. Число колонок определяется числом групп ссылок: от трёх до пяти на широком экране. Выравнивание по общей сетке сайта делает футер аккуратным. Основы описаны в статье про сетку в веб-дизайне.

Типографика

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

Воздух

Ссылки, поставленные слишком плотно, трудно нажимать. Достаточный интервал между строками и колонками позволяет читать и кликать без ошибок. Подробнее — в статье про пустое пространство.

Футер на мобильных устройствах

На смартфоне подвал нередко превращается в длинную ленту из десятков ссылок. Чтобы этого избежать:

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

Принципы разработки для небольших экранов описаны в статьях про mobile first и про адаптивную вёрстку.

SEO и доступность футера

С точки зрения поиска подвал полезен как место для сквозных ссылок на важные разделы. Основные правила:

• ссылки текстовые, с понятными названиями, без «Подробнее» и «Здесь»;
• не стоит перегружать подвал ссылками на сотни страниц, в особенности с одинаковыми анкорами;
• контактные данные оформляются в машиночитаемом виде, чтобы поисковики могли использовать их в карточке компании. Как это делается, рассказывает статья про микроразметку Schema.org;
• ссылки на карту сайта помогают роботам, но для посетителей обычно не нужны.

Для доступности подвал размечается как отдельная область страницы, чтобы пользователи программ экранного чтения могли перейти к нему сразу. Все ссылки должны быть доступны с клавиатуры и иметь видимый фокус. Подробнее — в материале про доступность сайта.

Контент подвала и доверие

Подвал — удобное место для элементов, которые подтверждают надёжность компании. Что можно разместить:

1. Реальные контакты. Не только форма, но и адрес с картой, и почта. Люди чувствуют, когда за сайтом есть живая организация. Наши данные можно увидеть на странице контактов.
2. Ссылки на документы и условия. Прозрачность снижает тревожность.
3. Короткая фраза о компании. «Создаём сайты будущего» работает лучше, чем бессодержательная реклама, если она соответствует делу.
4. Раздел о команде и компании. Адрес на страницы о компании и команды даёт возможность познакомиться ближе.
5. Отзывы и гарантии. Ссылки на отзывы и гарантии для сомневающихся.

Типичные ошибки

• Футер как свалка. Сто ссылок без группировки, из которых посетитель не находит ни одной нужной.
• Отсутствие контактов. Особенно критично для коммерческих сайтов: человеку негде связаться и проверить надёжность.
• Слишком мелкий и бледный текст. Нечитаемый на смартфоне и для людей с ослабленным зрением.
• Несоответствие данных. Разный адрес в подвале, на странице контактов и в картографических сервисах.
• Устаревшие данные. Неактуальные ссылки на закрытые соцсети, прежние названия разделов.
• Отсутствие юридических документов. Формы собирают данные, а политики нет.
• Дубли без логики. Одни и те же ссылки повторяются в нескольких колонках.
• Перегрузка рекламными блоками. Баннеры и всплывающие окна внизу страницы раздражают.
• Разный футер на разных страницах. Если не оправдано контекстом, это сбивает ориентацию.
• Нерабочие ссылки. Ссылки на несуществующие страницы подрывают доверие.

Чек-лист проверки футера

1. Есть ли логотип и краткое описание компании?
2. Присутствуют ли основные разделы сайта и сгруппированы ли они по смыслу?
3. Указаны ли контакты и они кликабельны?
4. Доступны ли документы: политика данных, оферта, условия?
5. Есть ли призыв к действию для тех, кто дошёл до конца страницы?
6. Читаем ли текст на смартфоне, достаточно ли отступов между ссылками?
7. Нет ли неработающих и устаревших ссылок?
8. Совпадают ли данные со всеми другими источниками?
9. Не отнимает ли подвал слишком много экранного пространства?

Этот список входит в проверки, которые мы проводим при запуске сайта. Полный перечень шагов приведён в чек-листе запуска нового сайта.

Итог

Футер — не мусорная корзина для ссылок, а продуманная часть интерфейса. Он помогает найти потерянное, подтверждает надёжность и даёт последний шанс связаться. Хороший подвал содержит краткое описание компании, понятную навигацию, актуальные контакты, документы и один заметный призыв, а выглядит спокойно и читаемо на любом устройстве.

Если вы хотите проверить свой подвал или спроектировать новый сайт целиком, ознакомьтесь с услугой веб-дизайна, посмотрите примеры работ и напишите нам через страницу контактов.