Структура сайта: что это, как составить

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

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

Что такое структура сайта и зачем она нужна

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

У неё две стороны:

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

Зачем она нужна:

• Посетитель быстро находит нужное. Закупщик пришёл за конкретной позицией — и видит её раздел в меню, а не ищет через поиск по сайту.
• Поиск понимает, что показывать по запросу. Когда у каждой темы своя страница, в выдачу попадает именно она, а не главная.
• Сайт растёт без переделки. Новый вид продукции встаёт в свой раздел, а не в конец меню.

Ошибку в структуре видно не сразу. На странице о разработке сайтов мы описываем типичный сценарий: рекламу запускают, трафик идёт, заявок нет. «Претензии предъявляют рекламе, хотя причина — в структуре сайта».

Чтобы спланировать структуру, сначала разберём, из каких частей состоит сайт.

Из чего состоит сайт: что входит в структуру сайта

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

Что обычно входит в сайт компании:

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

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

Структура страницы сайта: шапка, основной блок, подвал

Каждая страница состоит из трёх частей:

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

Шапку и подвал проектируют один раз, основной блок — под каждый шаблон. Над заголовком часто ставят хлебные крошки — строку вида «Главная / Каталог / Кабель», которая показывает, где посетитель находится.

Связать разделы между собой можно по-разному — отсюда виды структуры.

Виды структуры сайта: линейная, древовидная, блочная, решётчатая

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

Линейная структура сайта

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

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

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

От главной расходятся разделы, от разделов — подразделы, от них — конечные страницы. Например: главная → каталог → силовой кабель → карточка марки.

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

Блочная и решётчатая структура

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

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

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

Как составить структуру сайта: пошагово

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

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

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

Примеры структуры сайта: лендинг, корпоративный сайт, сайт производственной компании

Набор разделов зависит от того, для чего нужен сайт. В таблице — четыре типа и их разделы.

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

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

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

Мы собрали данные: конверсию — долю посетителей, которые оставили заявку, — тепловые карты, записи звонков, обратную связь менеджеров. Данные показали, что покупатели ППУ-труб ведут себя иначе. Решение — два лендинга вместо одного сайта, каждый говорит со своим покупателем: truby-sp.kz — о стальных трубах, ppu-sp.kz — о ППУ-трубах.

Результат из кейса: «truby-sp.kz — 8%, ppu-sp.kz — 15%» — это конверсия каждого лендинга; как её считать, мы разбирали в статье про конверсию сайта. Вывод кейса: «если у вас два продукта с разной аудиторией на одном сайте — вы разговариваете сразу со всеми и ни с кем конкретно».

ЦСС Кабель: две структуры у одной компании. У ЦСС Кабель был многостраничный сайт с каталогом кабеля на 10 000 позиций: под каждый вид кабеля — отдельная страница.

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

По данным кейса, «Конверсия 17,3% — вдвое выше многостраничника». Многостраничный сайт при этом остался: он принимает посетителей из поиска и тех, кто приходит целенаправленно, а реклама ведёт на мультилендинг. Вывод этого кейса не в том, что каталог хуже лендинга: под разные источники посетителей нужна разная структура.

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

Если вы планируете новый сайт или переделку текущего, обсудим его структуру на ваших данных: кто покупает, что ищет, откуда приходит. Что входит в разработку сайта, — в описании услуги.

Структурная схема сайта: как нарисовать

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

Как нарисовать:

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

Хватит листа бумаги или любой программы для диаграмм. Важно другое: схему обсуждают с отделом продаж и правят до прототипа, пока правка — это исправленный лист, а не переделка сайта.

Так выглядит схема сайта производственной компании из таблицы выше:

Правильная структура сайта: частые ошибки

Ошибки, из-за которых сайт мешает и посетителю, и поиску:

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

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

Вопросы и ответы

Из чего должен состоять сайт?

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

Чем структура сайта отличается от карты сайта?

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

Какие этапы создания сайта?

Этапы создания сайта у нас — десять работ: проектирование структуры, дизайн, вёрстка, программирование, настройка контекстной рекламы, интеграция с CRM, подключение аналитики, наполнение контентом, тестирование и запуск.

Сколько в среднем берут за создание сайта?

Стоимость сайта у нас указана на странице услуги: «Лендинг — от 400 000 тенге. Корпоративный сайт — от 600 000 тенге. Точная стоимость зависит от объёма задач». Состав работ — на странице разработка сайтов.

Итог

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

Если вы планируете новый сайт или переделку старого, давайте вместе разберём, из каких разделов он должен состоять. Diple на рынке с 2015 года, больше 200 проектов. Что мы делаем в работе над сайтом, — на странице «Разработка сайтов».