Блог: сайты · 17 мин

Футер сайта: что это и что в нём должно быть

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

внизу каждой страницы · одинаковый на всём сайте · по-английски footer, по-русски подвал · контакты, разделы, документы

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

Когда посетитель просматривает длинный текст или изучает карточки услуг, внимание постепенно смещается от вводной части к финалу. Если в конце страницы его встречает пустота или случайный обрыв повествования, пользователь часто просто закрывает вкладку. Грамотно спроектированный подвал служит естественной страховкой: он подхватывает интерес человека, предлагает удобные варианты связи и показывает, куда перейти дальше.

Команда digimoОбновлено

Содержание

Футер на сайте: что такое подвал и зачем он нужен

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

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

Футер на сайте одинаковый на всех страницах, поэтому разработчики настраивают его один раз, а изменения сразу отображаются по всему сайту. Это экономит время при обновлении контактных данных или изменении списка ключевых направлений работы.

Что такое сквозной блок

Это часть сайта, которая одинаково повторяется на всех страницах: правите её один раз, и она меняется везде.

Качественный подвал решает сразу несколько прикладных задач взаимодействия между пользователем и владельцем сайта.

  • Куда идти дальше после текста Человек изучил предложение, дочитал материал и сразу видит ссылки на ключевые разделы, не возвращаясь к началу.
  • Контакты там, где их ищут Многие посетители по устоявшейся привычке сразу прокручивают страницу до упора, чтобы найти телефон, почту или адрес офиса.
  • Кто стоит за сайтом Внизу страницы посетитель видит официальное название организации, реквизиты, сведения о регистрации и понимает, с кем имеет дело.
  • Служебные ссылки, которым не место в меню Ссылки на правила обработки данных, пользовательские соглашения и оферты не перегружают шапку, но всегда доступны.

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

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

Как называется нижняя часть сайта

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

Нижняя часть сайта: как называется в разговоре и в работе

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

Как называется подвал сайта по-английски, знает любой разработчик: термин происходит от английского слова footer, образованного от foot, что переводится как ступня, основание или подножие. Англоязычное слово стало глобальным стандартом в документации, макетах и технической литературе.

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

Подвал сайта: как называется в макете и в коде

Как называется подвал на сайте в коде: стандартный язык разметки использует для него специальный структурный тег footer, обозначающий нижний колонтитул документа. Этот тег появился в стандарте HTML5 и заменил собой безымянные контейнеры общего назначения.

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

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

Что такое нижний колонтитул

Это одинаковая служебная строка в нижней части каждой страницы документа или книги, где обычно указаны номер листа, автор или название главы.

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

Хедер и футер: что это такое на сайте и чем они различаются

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

Что такое хедер

Это верхний сквозной блок страницы с логотипом, главным навигационным меню и основными контактами компании.

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

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

Таким образом, хедер и футер работают в паре, взаимно дополняя друг друга. Шапка задает общее направление движения в начале пути, а подвал подводит итог и предоставляет подробную справочную информацию в конце.

Футер сайта: что в нём должно быть

Содержимое подвала не должно формироваться стихийно. Если собрать внизу страницы случайный набор ссылок, кнопок и виджетов, блок превратится в захламленную зону, в которой невозможно ориентироваться. Чтобы подвал приносил пользу, его состав делят на базовые элементы, необходимые практически каждому коммерческому проекту, и специализированные блоки, добавляемые под конкретные бизнес-задачи.

Нужно почти любому сайту

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

  • Название компании или логотип Помогает посетителю зафиксировать в памяти бренд и понять, чей сайт он просматривает.
  • Контакты ссылками Телефон и электронная почта оформляются кликабельными ссылками, чтобы посетитель мог сразу набрать номер или написать письмо с устройства.
  • Главные разделы Несколько прямых ссылок на ключевые страницы услуг или категорий помогают быстро продолжить навигацию.
  • Ссылки на документы Внизу страницы принято размещать ссылки на политику обработки персональных данных, пользовательское соглашение и оферту. Подробный разбор того, какие именно правила действуют для бизнеса, читайте в нашей статье какие документы нужны сайту.
  • Строка со знаком © и годом Обозначение авторских прав с актуальным годом подтверждает, что сайт поддерживается владельцем и функционирует в текущем времени.
  • Что такое кликабельный номер телефона Это ссылка со специальным протоколом tel, при нажатии на которую смартфон сразу начинает вызов без ручного набора цифр.
  • Что такое знак копирайта Это специальный символ охраны авторского права в виде буквы C в окружности, рядом с которым ставят имя правообладателя и год первой публикации.

Вокруг знака авторского права нередко возникают заблуждения. Сам по себе символ © не создает юридическую защиту и не наделяет владельца исключительными правами: в соответствии с законодательством исключительные права на оригинальные статьи, дизайн и фотографии возникают у автора автоматически в момент их создания. Знак служит публичным уведомлением для окружающих и помогает добросовестным пользователям понять, кому принадлежат материалы и с какого года сайт ведет публичную деятельность.

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

Добавить по задаче

В зависимости от формата работы бизнеса, географии продаж и особенностей аудитории стандартный набор элементов расширяют прикладными блоками.

  • Адрес и часы работы Если к вам регулярно приходят клиенты или покупатели забирают заказы сами, точный адрес офиса и график работы внизу страницы снимут лишние вопросы.
  • Ссылки на социальные сети Значки сообществ и каналов компании позволяют посетителю перейти на привычную площадку и следить за новостями.
  • Кнопка или короткая форма связи Лаконичное поле для ввода номера или кнопка заказа обратного звонка позволяют оставить заявку сразу после прочтения страницы.
  • Ссылка на карту сайта Отдельная страница со списком всех материалов и разделов помогает пользователям и поисковым системам охватить структуру целиком.
  • Кнопка «Наверх» На длинных посадочных страницах и в объемных статьях плавающая или статичная кнопка быстро возвращает человека к началу экрана.
  • Что такое карта сайта Это отдельная веб-страница со структурированным списком ссылок на все основные разделы и страницы сайта для удобного обзора его структуры.

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

Какой подвал нужен вашему сайту

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

Какой сайтЧто в подвале нужно всегдаЧто добавить по задаче
Сайт-визитка или лендингНазвание компании, кликабельный телефон, почта, ссылки на обязательные документы, знак копирайта с текущим годомМессенджеры, адрес офиса, кнопка обратного звонка, кнопка возврата к началу экрана
Сайт услуг компанииЛоготип, прямые телефоны, электронная почта, ключевые направления услуг, ссылки на документы, копирайтГрафик работы, адрес с ориентирами, ссылки на социальные сети, форма быстрой консультации, ссылка на карту сайта
Интернет-магазинЮридическое наименование, контакты клиентской службы, основные категории каталога, документы и правила возврата, знак копирайтаУсловия доставки и оплаты, статус заказа, личный кабинет, ссылки на мобильные приложения, социальные сети
Блог или информационный порталНазвание проекта, контакты редакции, ссылки на главные тематические рубрики, политика обработки данных, копирайтФорма подписки на рассылку, ссылки на каналы авторов, поиск по архиву материалов, ссылка на карту сайта

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

Собираете сайт с нуля? Соберём сайт под ключ за 3-5 дней, от 45 000 ₽: структура под то, что вы продаёте, мобильная версия, форма заявки, домен и хостинг на вас.

Футер и поиск: что помогает, а что вредит

Внутренняя навигация в подвале действительно участвует в поисковой оптимизации (SEO). Поисковые роботы Яндекса и Google регулярно обходят страницы сайта, переходя по внутренним ссылкам. Поскольку подвал является сквозным элементом, размещенные в нем ссылки доступны роботам из любой точки сайта. Это ускоряет обнаружение новых материалов, помогает распределять ссылочный вес между важными разделами и гарантирует, что поисковый робот не пропустит ключевые посадочные страницы.

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

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

Как оформить подвал сайта, чтобы им пользовались

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

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

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

На мобильных устройствах длинный список ссылок часто превращается в бесконечную вертикальную простыню, которую утомительно прокручивать. Решением этой проблемы служат сворачивающиеся аккордеоны: посетитель видит лишь заголовки групп («Каталог», «Клиентам», «Контакты») и раскрывает нужный раздел нажатием на плюс или стрелку. Это сохраняет компактность экрана и бережет время пользователя.

Типичные ошибки в футере

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

  • Свалка ссылок без структуры Когда десятки ссылок свалены сплошным текстом без колонок и заголовков, найти нужный раздел невозможно. Разделите ссылки на три-четыре тематические группы с четкими названиями.
  • Непонятные названия ссылок Абстрактные фразы вроде «Полезное» или «Разное» сбивают с толку. Называйте разделы прямо и емко: «Цены», «Гарантии», «Доставка».
  • Номер телефона простым текстом Если телефон указан без ссылки, посетителю на мобильном устройстве приходится вручную копировать цифры. Оформите номер через ссылку с атрибутом tel.
  • Старый год и битые ссылки Устаревший год в копирайте создает впечатление заброшенного сайта, а неработающие ссылки вызывают раздражение. Настройте автоматическое обновление года в коде и регулярно проверяйте доступность страниц.
  • Разный подвал на разных страницах Если состав футера внезапно меняется от раздела к разделу, пользователь теряет привычные ориентиры. Сохраняйте сквозную структуру единой для всего сайта.
  • Тяжелая интерактивная карта на каждой странице Встроенный интерактивный виджет карты в сквозном подвале замедляет загрузку абсолютно всех страниц сайта. Замените его текстовым адресом и ссылкой на полноценную страницу контактов.

Когда разработчики встраивают интерактивную карту города в сквозной футер, браузер пользователя вынужден загружать тяжелые внешние скрипты, тайлы и графические маркеры на каждой открытой странице сайта. Это существенно замедляет скорость отображения контента, расходует мобильный трафик и ухудшает технические показатели страницы. Гораздо эффективнее указать точный адрес текстом, добавить статичную схему проезда и дать ссылку на отдельную страницу контактов, где интерактивная карта действительно уместна.

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

Вопросы и ответы о подвале сайта

Нужен ли футер на лендинге из одной страницы?

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

Должен ли подвал быть одинаковым на всех страницах?

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

Сколько ссылок можно ставить в футер?

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

Как называется низ сайта по-английски?

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

Нужно ли каждый год менять год в строке с ©?

Да, год в строке копирайта необходимо поддерживать актуальным, чтобы посетители видели: компания активно работает, а сайт регулярно обновляется. Устаревшая дата пятилетней давности подсознательно воспринимается как признак заброшенного проекта или недействующего бизнеса. При этом сам по себе знак охраны авторских прав не создает юридическую защиту с нуля — права на оригинальные тексты и фотографии возникают у автора автоматически в момент их создания. Проще всего настроить вывод текущего года через программный скрипт, чтобы дата менялась автоматически 1 января.

Нужно ли указывать реквизиты в подвале?

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

Читайте также

Блог

Полезные статьи