Главная страница сайта: какие блоки нужны и в каком порядке

Чем главная отличается от лендинга

Лендинг продаёт одну услугу одному сегменту. Главная многостраничного сайта решает другую задачу.

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

Что должно быть на главной странице: блоки по порядку

1. Шапка

Логотип, меню из 4–7 пунктов, телефон и кнопка мессенджера. На телефоне — логотип, кнопка меню и иконка звонка или мессенджера. Шапка повторяется на всех страницах, поэтому её проектируют один раз и тщательно.

2. Первый экран

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

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

3. Направления услуг

Самый важный блок главной. Карточки услуг, в каждой:

• название услуги словами клиента, а не внутренним термином;
• одна строка, что входит;
• цена «от» или срок;
• ссылка на страницу услуги.

Карточек лучше 3–8. Если услуг 30, сгруппируйте их в направления, а внутри направления дайте список. Порядок карточек тоже важен: первой ставьте услугу, которая приносит больше всего денег или заявок, а не ту, с которой компания начиналась.

4. Почему вам доверяют

Три-пять проверяемых цифр: годы работы, число объектов, гарантия, собственное производство, сотрудники в штате. Без «индивидуального подхода» и «высокого качества». Как писать такие факты, мы показали в статье текст о компании.

5. Как вы работаете

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

6. Примеры работ

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

7. Отзывы

Три-шесть отзывов с именами и, лучше, ссылкой на карты или скриншотом. Как собирать и показывать отзывы, чтобы им верили, — в статье отзывы на сайте.

8. Цены

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

9. Форма заявки

Два-три поля и кнопка с понятным текстом. Рядом — кнопки мессенджеров для тех, кто не любит формы.

10. Контакты и футер

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

Если читаете этот список и понимаете, что ваша главная собрана в другом порядке или половины блоков нет, начинать стоит с первого экрана. Его мы можем нарисовать под ваши услуги.

Что выносить с главной на отдельные страницы

Хвост «что должно быть на главной странице» обычно означает ещё и обратный вопрос: что на ней лишнее.

Правило простое: на главной — короткая версия и ссылка. Человек, которому нужно больше, перейдёт. Человек, которому достаточно, не будет листать лишнее.

Есть и поисковая причина. Отдельные страницы услуг собирают свои запросы: «монтаж отопления в частном доме», «замена водонагревателя». Если всё на главной, по этим запросам у вас одна страница, которая отвечает на всё понемногу. Как спроектировать разделы под спрос, разобрано в статье структура сайта для SEO.

Главная страница и поиск

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

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

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

Условный пример: главная для компании с несколькими услугами

Пример условный, не кейс студии. Компания в Уфе делает три вещи: натяжные потолки, перегородки и подсветку.

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

Стало:

1. Первый экран: «Потолки, перегородки и подсветка для квартир в Уфе. Замер бесплатно, монтаж за 1 день».
2. Три карточки направлений с ценой «от» и ссылкой на страницу каждой услуги.
3. Цифры: 11 лет, 2 400 объектов, гарантия 10 лет на полотно.
4. Этапы работы.
5. Шесть работ: по две из каждого направления.
6. Четыре отзыва.
7. Форма и контакты.

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

Главная страница на телефоне: что меняется

На компьютере главная из десяти блоков — это несколько прокруток колёсиком. На телефоне те же блоки превращаются в 20–30 экранов, потому что карточки встают друг под другом. Поэтому мобильную версию главной мы проектируем отдельно, а не просто проверяем, что ничего не съехало.

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

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

Как проверить свою главную страницу

1. Тест на пять секунд. Покажите первый экран человеку не из вашей сферы. Он должен назвать, что вы делаете и что нажать дальше.
2. Найти услугу за 10 секунд. Попросите знакомого найти на сайте конкретную услугу. Засеките время.
3. Карта скроллинга в Метрике. Посмотрите, до какого блока доходит большинство. Если важный блок ниже точки, где уходят люди, поднимите его. Как открыть отчёт, описано в справке Метрики.
4. Карта кликов. Куда нажимают люди. Если кликают на карточку услуги, а она не ссылка, — сделайте её ссылкой.
5. Мобильная версия. Пролистайте главную на телефоне. Сколько экранов до формы? Если больше 15, сокращайте.
6. Ссылки на услуги. С главной должна вести ссылка на каждую ключевую страницу услуги.
7. Цены. Есть ли на главной хоть одна цифра про стоимость.

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

Частые ошибки главной страницы

• Слайдер на первом экране. Три сообщения по очереди вместо одного ясного.
• Миссия и история компании вторым блоком. Человек пришёл за услугой, а читает про 2008 год.
• Нет ссылок на страницы услуг. Всё в выпадающем меню, которое на телефоне никто не открывает.
• Новости двухлетней давности. Блок «Последние новости» с датой позапрошлого года говорит, что сайт заброшен.
• Партнёры и сертификаты на половину экрана. Логотипы поставщиков клиенту мало что говорят.
• Форма только в самом низу. До неё доходят немногие.

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