Створення структури сайту

Структура сайту інтернет-магазину впливає на юзабіліті ресурсу. Логічна та зручна структура дозволяє користувачам легко знаходити потрібні товари. Зрештою, це впливає на конверсію, задоволеність відвідувачів і навіть пошуковий трафік. А ці фактори впливають на фінансові показники магазину: виторг та прибуток. З цієї статті ви дізнаєтесь про створення структури сайту інтернет-магазину.

Що на Вас чекає попереду...

1. Що таке структура сайту?
2. Як створити структуру сайту?
3. Типові помилки під час створення структури сайту?
4. Висновок

Що таке структура сайту та яку роль вона відіграє

Структура сайту - смислова ієрархія сторінок, відображена в системі навігації. Це потрібно пояснити на наочному прикладі. Представте сайт-візитку компанії X. На ній є чотири сторінки: головна, послуги, про компанію та контакти. Це можна у вигляді простої ієрархічної структури.

Найпростіша ієрархічна структура сайту

Структура відображається у системі навігації сайту:

• У меню.
• У хлібних крихтах.
• HTML-карта сайту (для людей).
• У XML-карті сайту (для пошукових роботів).

Завдяки цьому відвідувач розуміє, на якій сторінці, як потрапити на інші сторінки або повернутися на головну.

Хлібні крихти та позначення активного розділу меню допомагають користувачам подорожувати сайтом

Насправді великі сайти мають складнішу структуру. Проте гарна ієрархічна схема завжди залишається логічною та зрозумілою. На ілюстрації можна побачити структуру однієї з категорій каталогу одного із найбільших українських інтернет-магазинів.

Структура категорії «Комп'ютери та ноутбуки»

Як зазначалося вище, головне завдання структури – покращення юзабіліті сайту та створення зручної системи навігації. Це не єдине завдання, тому що сайтом подорожують не тільки живі відвідувачі.

Від логічності структури та реалізації меню навігації залежить коректність індексування сайту пошуковими роботами. Краулери переходять зі сторінки на сторінку за посиланнями. Логічність структури допомагає пошуковим системам обходити всі сторінки і включати їх в індекс.

Пошуковики зчитують структуру сайту з картки sitemap.xml. Якщо її немає, роботи використовують HTML-карту сайту чи результати обходу. Структуру сайту очима Яндекса можна побачити у Вебмайстрі у відповідному розділі.

Структура сайту у «Вебмайстрі»

Як створити структуру сайту

Створення структури сайту умовно складається з двох етапів: планування та реалізації. Розглянемо їх послідовно.

Як спланувати структуру сайту інтернет-магазину

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

Переносимо структуру інтернет-магазину на папір

Для натхнення можна переглянути сайти конкурентів або великих інтернет-магазинів. Але насправді ніхто, крім вас, не знає, які саме сторінки повинні бути на вашому сайті.

Приділіть увагу каталогу. Плануйте його так, щоб мати змогу масштабувати. Для цього сторінки каталогу першого рівня мають бути максимально загальними. Хороший приклад сторінки першого рівня: «Смартфони та планшети». Поганий приклад: "Планшети LG".

Відобразіть основні сторінки каталогу на папері. Найкраще використовувати окремий лист.

Відображаємо сторінки каталогу першого рівня

Тепер подумайте, які дочірні сторінки будуть на сторінках першого рівня. Наприклад, у сторінки «Косметика» у магазині товарів для гоління будуть дочірні сторінки «Косметика до гоління», «Косметика для гоління», «Косметика після гоління».  

Важливий момент: при виборі назв для категорії обов'язково враховуйте інтереси користувачів пошукових систем. Бажано, щоб назва рубрики включала популярний запит, але при цьому не була надто «сеошною». Наприклад, якщо користувачі шукають крем для гоління, це має бути відображено в назві категорії.

Відображаємо сторінки другого рівня

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

Відображаємо сторінки третього рівня

Зверніть увагу, що в каталозі можна реалізувати паралельні структури. Наприклад, косметика може класифікуватися за категоріями до, для і після гоління. Одночасно на сайті можна створити категорію виробників. Тоді паралельна структура виглядатиме так: Косметика – Виробники – Gillette – Сторінка товару.

Існування паралельних структур не суперечить вимогам пошукових систем і покращує юзабіліті сайту. Щоб уникнути дублів, потрібно вказувати на кожній сторінці товару канонічний URL. Більшість популярних двигунів та SaaS-платформ роблять це автоматично.

Коли структура буде готова переходьте до її реалізації на сайті.

Як реалізувати структуру сайту

Відповідь на це питання залежить від конкретного двигуна або SaaS-платформи, з якою ви працюєте. Наприклад, на сайтах під керуванням WordPress структура реалізується за допомогою рубрик та міток. Також можна вказувати ієрархію під час створення нових сторінок.

Створюємо дочірню сторінку «Контакти»

На платформі Recommerce структура каталогу визначається за допомогою розділів. У меню «Каталог» натисніть кнопку «Додати розділ у корінь».

Додаємо розділ у корінь

Вкажіть властивості розділу, додайте фото.

Вказуємо властивості розділу

На вкладці «Текст» додайте текст із описом розділу. На вкладці SEO вкажіть title, description та ключі. Тут можна тимчасово закрити розділ від індексації та вказати URL розділу вручну.

Налаштовуємо SEO сторінки розділу

Перейдіть до меню редагування розділів та створіть потрібні підрозділи. Для цього натисніть на позначену на ілюстрації кнопку.

Створюємо підрозділи

У результаті структура каталогу має бути логічною та зручною для серфінгу.

Можлива структура одного з розділів каталогу

Платформа Recommerce автоматично створює навігацію за каталогом, за допомогою якої користувачі можуть легко знайти потрібний розділ та вибрати товар.

Навігаційне меню створюється автоматично

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

Додаткові елементи навігації роблять структуру зручною.

На платформі Recommerce автоматично створено структуру сервісних сторінок, наприклад «Головна», «Про магазин», «Оплата», «Доставка». Це заощаджує час вебмайстра та створює додаткові зручності для покупців.

Типові помилки під час створення структури сайту

Початківці e-комерсанти і вебмайстра часто припускаються типових помилок при плануванні структури каталогу і сайту в цілому. Ось найяскравіші приклади:

Відсутність загальних категорій

У прикладі магазину косметики товари з категорії «Крем для гоління» мають входити до загальної категорії «Косметика для гоління» або «Косметика для чоловіків». Користувачам незручно подорожувати сайтом, якщо маленькі категорії типу «Креми для гоління» не поєднані з батьківськими рубриками.

Відсутність фільтрів

За допомогою фільтрів користувач може отримати доступ до товарів із однієї або кількох категорій за заданими ознаками. Наприклад, покупець може цікавитись товарами певного бренду з різних категорій чи продукцією у певному ціновому діапазоні.

Відсутність паралельних структур

Додавання товару до кількох тематичних категорій підвищує його видимість. Наприклад, крем для гоління фірми X можна помістити у категорії «Товари фірми X», «Креми для гоління», «Косметика для гоління» та навіть «Ідеї подарунків».

Непомітне навігаційне меню

Користувач має бачити структуру сайту на екрані. Це можливо завдяки навігаційним елементам, які відображають ієрархію категорій.

Висновок

Створення структури сайту починається із планування. На цьому етапі вебмайстру потрібно намалювати на аркуші паперу або будь-якому графічному редакторі ієрархію категорій каталогу та сторінок сайту. Батьківські категорії мають бути максимально широкими. Це дозволяє масштабувати структуру, не порушуючи її логіки.

Реалізація структури залежить від платформи, де ви робите інтернет-магазин. Наприклад, Recommerce дозволяє додавати категорії та підкатегорії каталогу до кількох кліків. Вони автоматично виводяться на сторінках сайту у вигляді блоків навігації.

Під час планування структури вивчайте сайти великих інтернет-магазинів. Вони інвестують ресурси у розробку юзабіліті загалом та навігації зокрема. Ви можете використовувати структури великих гравців як джерело натхнення.

Сподобалася стаття? Поділіться з друзями!