Як створити головну сторінку сайту: поради, компоненти, приклади
Головна сторінка – це кільцевий хаб вашого сайту. Саме на неї спершу потрапляє відвідувач. Якщо ви подобаєтесь відвідувачу, він рухається далі – вивчає ваш сайт, переходить за посиланнями. Потім знову повертається на головну та продовжує дослідження сайту.
Домашня сторінка повинна знайомити відвідувача з вами, розповідати про ваші переваги, спонукати до потрібних вам дій, формувати шлях дослідження сайту. Для цього вам потрібно подбати про зміст домашньої сторінки сайту та правильно чергувати блоки головної сторінки вашого сайту.
У цьому матеріалі ми розповімо, як зробити головну сторінку вашого сайту такою, щоб ваш клієнт її точно не закрив.
На що звертати увагу на головній сторінці сайту
Хапайтесь за перевагу. Виберіть для себе основну перевагу, яка визначить цінність вашого сайту чи бізнесу в очах відвідувача чи клієнта. Розповідайте про цю перевагу послідовно на кожному екрані головної сторінки сайту.
Один блок – одна думка. Блок або окремий екран головної сторінки сайту повинен пропонувати одну дію або розповідати тільки про щось одне. Наприклад, до блоку з перевагами не варто додавати відгуки, а на екрані з товарами не варто пропонувати кілька додаткових програм (трейд-ін, розстрочка тощо).
Пропонуйте дії. На головній сторінці сайту обов'язково пропонуйте зробити дію. Для цього розміщуйте посилання та кнопки переходу до тематичних сторінок. Усі переходи мають бути природними (наприклад, у вітрині товару можна гармонійно розмістити посилання на каталог усіх товарів). Тільки не перестарайтеся з цільовими діями – вибір має бути на кожному екрані, але і загубитися у них відвідувач не повинен.
Сторінці потрібен простір. Не перевантажуйте головну сторінку текстом. Для текстів існують блоги. Будьте афористичними: пропозиції повинні бути короткими та місткими. Не зловживайте і зображеннями або ілюстраціями. Правильний ритм для головної сторінки створює чергування тексту, фото, карток, блоків із іконками.
Компоненти на головній сторінці сайту
Всі блоки головної сторінки сайту типові. Їх ви зможете чергувати у потрібному порядку залежно від завдань сайту. Розповідь на вашій сторінці має бути послідовною, а один блок поєднуватись з іншим.
Типові елементи домашньої сторінки сайту: головний екран, про нас або про компанію, процес роботи, товарна вітрина, заклик до дії, відгуки, банери та картки, FAQ, контакти.
Ще ви повинні створити навігацію: шапка та підвал сайту. Ці елементи є на всіх сторінках.
Головний екран. Компоненти головної сторінки сайту
Всі блоки головної сторінки сайту типові. Їх ви зможете чергувати у потрібному порядку залежно від завдань сайту. Розповідь на вашій сторінці має бути послідовною, а один блок поєднуватись з іншим.
У заголовку першого екрану потрібно: назвати ваш бізнес, згадати головну вигоду чи емоцію. У підзаголовку ви доповнюєте сказане у заголовку. Найпростіший спосіб зв'язати між собою заголовок та підзаголовок – зробити комбінацію з раціонального та емоційного твердження. У заголовку ви говорите про емоційне відчуття від взаємодії з вами, а в підзаголовку про способи досягнення цього (ваші товари та послуги). І навпаки.
Про нас чи про компанію. Компоненти головної сторінки сайту
Головна – це ще й чудовий спосіб познайомитися з вашими відвідувачами. Важливо це для бізнесів, у яких виконання робіт тривале чи залежить від виконавця. Наприклад, для конструкторських бюро, юридичних компаній, мовних шкіл.
На головній сторінці ви можете створити блок про нас із таких елементів.
Особи. Вкажіть ключових людей компанії. Додайте їх фото, ім'я, прізвище та посаду. Залежно від ваших завдань, ви можете вказати обов'язки співробітника, додати його цитату або перерахувати факти з біографії.
Факти, здобутки, цифри. Використовуйте іконки або великі цифри з пояснювальним текстом, щоб перерахувати ваші досягнення. Тут ви можете згадати кількість реалізованих проєктів (років успішної роботи, співробітників), нагороди, технології, які ви використовуєте.
Історія. Виберіть компонент таймлайну. На ньому кожна точка – це рік чи ключова подія. Додайте невелике фото, опис події, дату. Ваша історія оформлена.
Процес роботи. Компоненти головної сторінки сайту
Якщо ви надаєте послуги або робите товари на замовлення, візуалізуйте кожен етап вашої роботи. На прямій ви розмістите ці етапи і за допомогою кількох речень опишіть, що відбуватиметься у разі замовлення або надання послуги.
Якщо хочете, зробіть опис подвійним. Назвіть дії, які слід зробити і вам, і клієнту. Наприклад, на першому етапі розробки сайту ваш клієнт передає бриф, а ви створюєте тестовий макет. На другому – ви віддаєте макет на оцінку, а клієнт надсилає відгук.
Товарна вітрина чи вітрина послуг. Компоненти на головній сторінці сайту
На головній сторінці ви можете розмістити найбільш показові товари (або послуги). За допомогою вітрини ви не тільки пропонуєте робити покупки, а й показуєте з чого складається ваш асортимент. Поруч із блоком товарів розташуйте перехід до магазину чи категорій вашого магазину.
Особливість блоку вітрини (так він реалізований і на Weblium) – використання атрибутів товарів з вашого магазину. Тобто після завантаження товарів до вашого інтернет-магазину всі дані товарів відобразяться у картках вітрини автоматично.
Заклик до дії. Компоненти головної сторінки сайту
Уявіть, що у вас є лише одна спроба, щоб звернутися до вашого відвідувача. Це звернення і є заклик до дії (CTA). За допомогою нього ви прохаєте користувача зробити необхідну вам дію. СTA-екрани – це будь-який блок на вашому сайті, в якому ви просто просите здійснити потрібну вам дію.
Класичний варіант структури CTA-екрана такий:
1. Заголовок. Те, що ви просите користувача зробити. Вигода, яку відвідувач отримає від дії. Продукт або послуга, до якого веде посилання, кнопка, картка.
Бажано вмістити текст заголовка в 1-2 рядки. Заголовок не може бути великим – одного погляду має бути достатньо для розуміння сенсу заклику .
2. Підзаголовок. Доповнює зміст заголовка та формує змістову пару з ним. Наприклад, у заголовку ви називаєте вашу послугу, а вже у підзаголовку описуєте переваги цієї послуги.
Обмежень на довжину підзаголовка немає, але краще помістити зміст максимум 3 рядки. Якщо прагнете, щоб підзаголовок прочитали, робіть його в 1 рядок.
3. Кнопка. Використовуйте у тексті вашої кнопки дієслова: завантажити, написати, встановити. Перше слово в кнопці вказує на цільову дію, друге – створює контекст (написати підтримці) або вказує на вигоду (купити на акційних умовах).
Ви можете використовувати дві кнопки, але одну робіть головною. Наприклад, у CTA-екрані швидкої покупки кнопка "Оформити замовлення" основна, "Дізнатися про гарантію" додаткова.
Відгуки. Компоненти головної сторінки сайту
Якими б ви не були красномовними на головній сторінці, але пара добрих слів клієнтів переконують не гірше. Тому обов'язково передбачте на головній сторінці сайту блок із відгуками клієнтів.
Ви можете піти двома стандартними шляхами:
- Попросіть клієнтів написати невеликі відгуки. Створіть на головній сторінці текстові картки, додайте текст та ім'я клієнта. Якщо ваші клієнти погодяться – прикріпіть їхні фотографії.
- Зробіть скріншоти відгуків з різних платформ (соцмереж, сервісів збору відгуків, Google) та каналів спілкування (переписок у месенджерах, електронних листів, чатів підтримки). Сформуйте із скріншотів галерею.
Банери та картки. Компоненти головної сторінки сайту
У вас є спеціальні пропозиції, які часто оновлюються? Або ви знаєте, що кілька товарів вашого магазину можуть лише своєю появою перетворити відвідувача на покупця? Покажіть клієнту найважливіші пропозиції за допомогою банерів чи ховер-карток!
Обидва елементи інтерактивні – з ними відвідувач може взаємодіяти. Банери прокручуються, а зміст ховер-карток проявляється за наведенням або кліком.
Рекламні банери
При формуванні галереї банерів визначтеся з їхнім наповненням. Ви можете розміщувати в слайдах: або однаковий контент (наприклад, оновлення асортименту магазину), або пропозиції для кожної точки контакту з вашим клієнтом (наприклад, акційні пропозиції, корисні матеріали у блозі, оновлення сервісної програми тощо).
Рекламні банери зазвичай розміщуються або зверху сторінки (щоб миттєво запропонувати зробити дію), або ближче до середини сторінки (користувач зацікавився – саме час робити вибір).
Ховер-картки
Картка, яка реагує на наведення, не повинна бути непомітною. Тому підготуйте стильні та якісні зображення для карток. Опис, який проявиться, повинен розміщуватися в 3-4 рядки. Найкраще додавати кнопку або посилання під текстом. Адже не всі користувачі зрозуміють, що перехід відбувається після натискання на картку.
Ховер-картки найчастіше розміщують наприкінці першої половини головної сторінки. У картках доволі багато тексту – у цій частині сторінки користувач досить мотивований, але ще не втомився.
FAQ. Компоненти головної сторінки сайту
Питання, які часто ставляться, вирішують кілька завдань. Вже на головній сторінці користувач може дізнатися інформацію про вас. Ви покращуєте пошукову оптимізацію (пошуковики оцінять корисний текстовий контент з потрібними ключовими словами). А ще ви продемонструєте турботу за відвідувачем, бо ви ще при першому контакті пропонуєте допомогу клієнту.
Робіть блок FAQ компактним. Бажано розміщувати максимум 5-6 питань, а відповідь вміщувати у 70-100 слів. Тоді при одній розгорнутій відповіді відвідувач бачитиме всі питання.
Контакти. Компоненти головної сторінки сайту
Обов'язково розміщуйте на головній ваші контакти: адресу, телефон, електронну пошту. За допомогою віджету карти Google ви безпосередньо позначите ваше положення. Наш конструктор має спеціальний елемент для використання карт. Вказати телефон можна в шапці та підвалі сайту.
Щоб полегшити зв'язок із вами, додавайте віджет онлайн-чату на сайт. Із невеликого меню (воно зазвичай закріплено внизу праворуч на сторінці) ваш відвідувач зв'яжеться з вами в месенджері, здійснить телефонний дзвінок або обговорить питання одразу на сайті.
Приклад головної сторінки інтернет-магазину
Головна сторінка інтернет-магазину повинна показати асортимент, підштовхнути користувача до дослідження магазину та переконати відвідувача у своїй надійності.
1. Банери показують найцікавіші товари. Щойно опинившись на сайті, користувач може зробити перший клік.
2. Головний екран із описом магазину. Розкажіть про галузь своєї діяльності та про те, чому варто робити у вас покупки.
3. Категорії. Розташуйте переходи до окремих тематичних рубрик магазину.
4. СТА-екран з акційною пропозицією. Якщо з якоїсь причини відвідувач ще не здійснив дію – саме час зробити особливу пропозицію.
5. Вітрина товарів. Добірка карток товарів з найпоказовішими позиціями вашого асортименту. Можливо, пошук цих товарів привів відвідувача до вас на сайт.
6. Про нас. Розкажіть про вашу надійність і про конкретні переваги покупки саме у вас.
7. Усі категорії магазину. Сторінку переглянута, тому дайте повну свободу користувачу прийняти рішення.
Приклад головної сторінки сайту послуг
Послуги – це контакт та довіра між замовником та виконавцем. А ще послуги це часто багато кроків під час надання послуг. Тому вам потрібно розповісти про цей порядок.
1. Головний екран. Найкраще почати з емоційної вигоди роботи з вами.
2. Переваги. Згадайте хоча б 3 переваги, які визначають співпрацю з вами.
3. Послуги. Розмістіть кілька основних послуг. Коротко опишіть їхню суть і вкажіть ціну. Додайте посилання, щоб перейти до всіх послуг.
4. Процес надання послуг. Згадайте основні етапи співробітництва і зобразіть їх наочно.
5. Акційні пропозиції. Створіть блок із особливою пропозицією – у цій частині сторінки важливо не втратити користувача.
6. Розкажіть про компанію. Глибина перегляду сторінки велика – клієнт зацікавлений. Мабуть, йому потрібно більше інформації.
7. Додайте відгуки. Соціальне підтвердження важливе для клієнтів у сфері послуг.
8. CTA-екран. Користувач ще не здійснив дію – можливо, у нього є складнощі. Попросіть контактні дані, щоб ви могли проконсультувати клієнта.
9. Усі послуги. Як і на сайті інтернет-магазину, давати повну свободу краще наприкінці. У цей момент відвідувач підготовлений найкраще до цього.
SEO-оптимізація головної сторінки
Ваша головна сторінка буде вдвічі кориснішою, якщо оптимізувати контент на ній для пошукових систем. SEO-оптимізація – це безкоштовне просування.
Основні елементи пошукової оптимізації головної сторінки:
- Заголовки. Усі ваші заголовки мають атрибут ієрархії. Від H1 (найвищий в ієрархії) до H6 (найнижчий в ієрархії). Атрибут H1 вказується для заголовку на першому екрані. Усі заголовки пов'язані деревоподібною структурою (тобто вищі в ієрархії заголовки створюють умовні розділи, у яких розміщуються заголовки нижчого рівня).
- Ключові слова. Пошукові системи оцінюють користь сторінки для користувача, зокрема і виходячи з її текстового наповнення. За допомогою, наприклад, Планувальника ключових слів можна створити набір слів, які найчастіше розміщуються на сторінках схожої тематики. Якщо ви з потрібною періодичністю додасте ці ключові слова до тексту, ваші шанси з'явитися на першій сторінці пошукової видачі підвищаться.
- Метатеги. У налаштуваннях сторінок ви можете вказати спеціальні теги назви та опису (title та description). Назву та опис ви можете прочитати, коли знайомитеся з результатами пошукової видачі.
- Зображення. По-перше, зображення мають бути оптимізованими. Тобто у них має бути оптимальне співвідношення розміру та якості. Чим швидше ваша сторінка завантажується, тим вище її оцінюють пошукові системи. По-друге, у всіх ваших зображень має бути alt-текст – тег опису. Якщо з якихось причин сторінка не завантажиться до кінця, користувач побачить ці текстові описи. Ці описи пошукові системи використовують для пошуку за зображеннями.
Приклади якісних домашніх сторінок
Краще зрозуміти, як зробити домашню сторінку вашого сайту, ви зможете на прикладах. Для прикладів ми використовували шаблони веб-сайтів, які створені дизайнерами Weblium. Щоб переглянути шаблон, перейдіть за посиланням. Після реєстрації на Weblium шаблони доступні безкоштовно.
Поєднання лаконічного впевненого дизайну та правильної розповіді на сторінці. У кожному екрані клієнт отримує нову опцію для дослідження чи унікальну пропозицію.
На сайті багато інформації, але вона розподілена однорідно і сформульована тезово. Усі факти формують одну велику брошуру, яку цікаво гортати.
Сайт, присвячений одному продукту. Тут ви можете зрозуміти, як використати мінімумом тесту, але бути інформативним і ілюстративним.
Якщо хочете подивитись сторінку з великою кількістю впорядкованого контенту – вона перед вами. Тут ви побачите практично всі описані у статті компоненти головної сторінки.
Повторимо? Найголовніше при створенні домашньої сторінки вашого сайту
Щоб отримати ідеальну домашню сторінку:м
- Будьте лаконічними та зрозумілими.
- Нагадуйте про переваги.
- Надайте відвідувачу вибір.
- Формуйте з блоків оповідання на сторінці.
- Подбайте про пошукову оптимізацію.
Створити сайт без дизайнерів та програмістів ви зможете разом із Weblium. Ви вже знаєте, як зробити домашню сторінку, – а усі описані компоненти доступні в бібліотеці готових блоків.