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

Какую роль играет футер на сайте

Футер (footer, или подвал) — нижняя часть сайта, до которой пользователь добирается в последнюю очередь. И если выше он не нашел ответов на свои вопросы, то в подвале самое время дать ему эти ответы. Такую информацию, как контакты компании, пользователи намеренно могут искать в футере, если не увидели ее в шапке.

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

Вот с чем еще может помочь грамотно оформленный футер.

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

Соблюдать закон. Если вы собираете на сайте данные пользователей, должны соблюдать федеральный закон от 27.07.2006 № 152-ФЗ «О персональных данных» и разместить на каждой странице сайта ссылку на политику конфиденциальности. Чаще всего эту ссылку размещают в футере, чтобы она не отвлекала пользователей от основного контента. Подробно мы рассказывали об этом в статье «Как соблюдать федеральный закон „О персональных данных“».

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

Улучшать поведенческие факторы. Разместите в подвале список полезных ссылок. Досмотрев страницу, некоторые посетители сайта будут переходить по ссылкам, просмотрят больше страниц и проведут больше времени на ресурсе. Так поисковики поймут, что сайт полезен для людей.

Что можно разместить в футере сайта

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

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

В футере должны быть следующие три элемента.

Ссылка на политику конфиденциальности. Это документ, в котором вы прописываете правила сбора и защиты личных данных пользователей.

Ссылка на условия использования. Это страница, на которой содержатся правила пользования сайтом.

Копирайт ©. С его помощью вы даете посетителям сайта понять, что копирование информации с него — плагиат.

Контактная информация

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

Адрес. Этот пункт более актуален для региональных компаний, которые работают с клиентами в офисах, магазинах или на своих базах. Дополнительно такие компании указывают время работы.

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

Карта. Если компанию сложно найти просто по адресу, можно в дополнение к нему разместить в футере или перед ним карту и указать на ней нужную точку. Так пользователи остаются на сайте, а не уходят на сторонние ресурсы, такие как «Яндекс Карты» или «Google Карты».

Встроить карту на сайт можно следующими способами:

• С помощью плагинов. Например, у «Яндекс Карт» есть плагин для WordPress «YaMaps».
• По API. Для этого потребуются навыки программирования. Вот подробная информация от «Яндекса», как это сделать.
• С помощью виджета. Так, на «Яндекс Картах» можно кликнуть на три точки в правом верхнем углу, нажать «Поделиться», скопировать код виджета и вставить его в футер сайта.

Для «Google Карт» работают аналогичные способы. Но в любом варианте проследите, чтобы из-за карты не упала скорость загрузки сайта, иначе посетителям будет сложно им пользоваться.

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

Код для вставки номера телефона в виде ссылки выглядит так:

<a href="tel:+7 (999) 111-22-33">+7 (999) 111-22-33</a>

Скопируйте его, подставьте свой номер и вставьте в футер на сайте.

Email. Его тоже стоит оформить ссылкой: при нажатии на нее на компьютере откроется почтовая программа, а на телефоне — приложение почты. Скопируйте этот код, подставьте в него свой email и добавьте в футер.

<a href="mailto:company@mail.ru">company@mail.ru</a>

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

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

СТА-элементы

Если пользователь не нажал на кнопки или не заполнил формы на странице выше, отличный способ удержать потенциального клиента — предложить ему в футере что-то полезное или интересное. Вот несколько вариантов calls to action, которые помогут удержать пользователя на сайте или перевести его в другой канал связи (email, приложение, общение по телефону).

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

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

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

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

Навигационные элементы

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

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

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

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

• покупателям важна информация о том, как сделать заказ, получить или вернуть товар;
• тем, кто хочет работать в компании, — данные о вакансиях;
• тем, кто хочет стать партнером, — информация о том, как это сделать.

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

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

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

Элементы, которые повышают доверие к компании

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

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

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

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

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

Что еще можно разместить в футере

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

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

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

Например, посетителям сервиса бронирования отелей неважно, где расположен офис компании, но будет интересен список горячих направлений для поездок. А в футере сайта медицинского центра не будет ничего о доставке, но пригодится кнопка для онлайн-записи на прием.

Как сделать футер

Проще всего создать футер на сайтах, которые собираются в конструкторах. Если сайт сделан в конструкторе от RU-CENTER, читайте блок про футер в нашей инструкции. А вот инструкция для тех, у кого сайт на «Тильде».

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

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

Чек-лист: какие элементы можно использовать и что учесть при оформлении футера

Если вы не знаете, что разместить в футере, посмотрите на этот список — возможно, он натолкнет вас на идеи.

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

• ссылка на политику конфиденциальности,
• ссылка на условия использования,
• копирайт ©.

Контактная информация:

• адрес,
• карта,
• телефон,
• email,
• соцсети и мессенджеры.

Навигационные элементы:

• ссылки на основные страницы и разделы;
• ссылка на карту сайта с полным списком страниц;
• ссылки на сервисные страницы: доставки, оплаты, возврата, вакансий и т. д.

Элементы для повышения доверия к компании:

• оценки, отзывы, награды, рейтинги;
• статьи о компании;
• информация о партнерах;
• документы.

Дополнительно:

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

Важные моменты:

• Отделяйте футер от остального сайта визуально, например цветом фона.
• Если добавляете карту, следите, чтобы она не снижала скорость загрузки сайта.
• Оформляйте номера телефонов и email ссылками.
• Если у вас есть приложение, добавьте и ссылки на магазины приложений, и QR-код для скачивания.
• Если в футере есть формы, не забудьте запросить у пользователей согласие на обработку персональных данных.
• Не перегружайте футер информацией: размещайте ссылки не на все страницы сайта, а только на самые важные.
• Разбивайте ссылки на тематические группы.
• Не забывайте про CTA-элементы: предлагайте пользователям подписаться на вас или оставить заявку, чтобы со временем превратить их в клиентов.

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

• Как сделать правильную структуру сайта для SEO
• Как организовать юзабилити-тестирование сайта
• Как настроить публичную оферту на сайте