Структура сайта — это способ организации информации на сайте. Структура определяет, как страницы сайта связаны между собой и как пользователи могут перемещаться по сайту.
Когда маркетолог или владелец бизнеса знает, по какой логике выстраивается структура сайта, это помогает общаться с веб-разработчиками. Или даже самостоятельно собрать подходящий ресурс на доступном конструкторе сайтов.
В статье разберём основы создания эффективной структуры сайта для продвижения компании.
👌 Как проверить удобство сайта, программы или приложения рассказываем в статье «Юзабилити-тестирование: как его провести и для чего оно нужно»
Основные принципы, по которым организовывается структура
Вот несколько аспектов структуры сайта:
🍒 Иерархия — как связаны главная страница (home page) и подразделы сайта.
🍒 Навигация — как организована система меню и ссылок для доступа к разделам и страницам.
🍒 Категории и подкатегории — какие будут основные тематические разделы на сайте.
🍒 Ссылки на страницы и перекрестные ссылки — как будут организованы переходы между страницами.
🍒 Файловая структура — где будут располагаться папки на сервере: изображения, стили, скрипты и другие ресурсы.
🍒 Плоская или глубокая структура — насколько глубоко страницы находятся в структуре. В плоской структуре большинство страниц доступны с главной страницы или с нескольких кликов, в то время как в глубокой структуре страницы могут находиться на большем удалении от главной.
![](https://cdn.prod.website-files.com/5af447d8d757cd4646568e20/656d8b8b2c16b8133d2bd132_%D1%81%D0%B0%D0%B8%CC%86%D1%82%20(1)%20(2).jpg)
Пример структуры сайта, составить примерно такую можно с помощью Mindmup.com и потом обработать в Фигме
Почему структура сайта важна для SEO
SEO (Search Engine Optimization) или оптимизация сайта нужна, чтобы поисковые системы видели сайт и показывали его в результатах поиска по запросу пользователя.
Как структура сайта влияет на SEO:
✅ Понятная навигация помогает алгоритмам быстрее находить нужную информацию на сайте
Когда сайт устроен так, что всё в нём на своём месте, то людям и поисковым роботам проще найти нужную информацию.
✅ Сайт с хорошей структурой лучше индексируется
Если путь пользователя понятен и роботы быстро находят все важные места на сайте, то дают ему высокую оценку и топ-10 и даже топ-3 в выдаче.
✅ Продуманная структура делает сайт полезным для людей
Когда сайт понятный, его любят посещать. Чем больше времени люди проводят на сайте, тем выше у него рейтинг.
✅ Структура помогает лучше распределить ссылки на сайте
Если сайт хорошо организован, то есть по сайту эффективно распределены ссылки, то поисковые роботы бегают по нему как зайчики и быстро индексируют страницы сайта.
✅ Снижается показатель отказов
Если всё легко найти, то люди проводят больше времени на сайте.
✅ Сайт лучше адаптирован для смартфонов
Если сайт выглядит красиво с телефона, поисковики оценивают его как полезный и поднимают в топ. С мая 2023 года Гугл оценивает сайт сначала в мобильной версии, а потом уже смотрит десктоп. То же самое касается Яндекса, он понижает рейтинг сайтов, не адаптированных под мобильную выдачу.
Как пример, покажем лендинг, собранный в конструкторе Marquiz Pages. Лендинг имеет адаптивный дизайн для мобильных устройств:
![Простой одностраничный лендинг идеально подходит для просмотра с мобильного телефона](https://cdn.prod.website-files.com/5af447d8d757cd4646568e20/656d8ce6fe805810aaaf9a9a_%D0%9C%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D0%B0%D1%8F%20%D0%B2%D0%B5%D1%80%D1%81%D0%B8%D1%8F%20%D0%BB%D0%B5%D0%BD%D0%B4%D0%B8%D0%BD%D0%B3%D0%B0%20(1).jpg)
Кроме того, быстро загружается и виден поисковикам благодаря метатегам, которые легко прописать во время сборки страницы:
![Как настроить метатеги](https://cdn.prod.website-files.com/5af447d8d757cd4646568e20/656d8d437e8c84e1152a3659_%D0%9C%D0%B5%D1%82%D0%B0%D1%82%D0%B5%D0%B3%D0%B8%20%D0%BF%D1%80%D0%B8%20%D1%81%D0%B1%D0%BE%D1%80%D0%BA%D0%B5%20%D1%81%D0%B0%D0%B8%CC%86%D1%82%D0%B0%20(1).jpg)
📌 Работа по SEO-продвижению связана не только с подстройкой под поисковых роботов, но и с удержанием посетителей на сайте. Если сайт нравится посетителям, они дольше остаются и чаще возвращаются. Это влияет и на алгоритмы.
Виды структуры сайта
Сайт компании является важной частью воронки продаж, даже если сам сайт не продающий. Именно по сайту клиенты составляют впечатление о компании, о её надёжности и компетентности. Поэтому к созданию сайта стоит подойти комплексно.
Выбор структуры зависит от трёх составляющих:
- Требования поисковых систем — если для нас важно продвижение в поисковиках, мы закладываем эту цель, когда выбираем структуру сайта.
- Бизнес-цели компании — мы должны решить, зачем нам сайт. Мы хотим интернет-магазин, или нам нужен сайт-визитка, или лендинг — всё это мы определяем до начала работы над структурой сайта.
- Потребности наших клиентов — тут мы находим, какие проблемы или задачи нужно решить клиенту с помощью нашего сайта.
На этих трёх китах держится решение о выборе структуры сайта.
Далее поговорим, какие бывают варианты.
Линейная структура
Сайт из одной длинной страницы. Пользователи прокручивают содержимое вниз, чтобы увидеть дополнительные разделы.
📌 Пример:
Лендинг для продвижения продукта или мероприятия, где вся информация размещена на одной странице.
Часто бывает так, что нужен быстрый лендинг под определённые рекламные цели. Например, можно собрать такой в Marquiz Pages. Плюс в том, что сайт идёт в связке с квизом, чтобы получать заявки от пользователей.
Бесплатный шаблон лендинга с квизом для зоогостиницы — можно скачать себе в панель Марквиз и адаптировать под свой бизнес
Есть ещё линейная структура с ветвлением, когда одна страница содержит несколько ссылок на другие разделы или внешние ссылки для перехода.
👌 Как объединить несколько ссылок в один мобильный сайт, рассказываем в статье «Что такое Таплинк»
Иерархическая или древовидная структура
Страницы организованы в виде иерархии с главной страницей и подразделами. Используется для крупных сайтов с разнообразным контентом. Организует контент в логическом порядке.
📌 Пример:
Корпоративный сайт с главной страницей, разделами по каждому направлению деятельности, контактами сотрудников, блоге о корпоративной жизни, структурой организации, пресс-центром и медиагалереей.
Также встречается многоуровневая иерархическая структура. Она используется для сайтов с глубокой иерархией, где каждый уровень представляет собой подробную категорию информации – своего рода семейство разных сложных разделов в одном большом сайте.
Например, такая структура у сайта Росатома – меню содержит множество разделов.
![Пример сложной структуры сайта по принципу древа](https://cdn.prod.website-files.com/5af447d8d757cd4646568e20/656d8e79c5982f84701e34ba_%D0%9A%D0%BE%D1%80%D0%BF%20%D1%81%D0%B0%D0%B8%CC%86%D1%82%20%D0%A0%D0%BE%D1%81%D0%B0%D1%82%D0%BE%D0%BC.jpg)
Сетевая структура
Страницы связаны между собой гиперссылками и формируют паутину взаимосвязей. Часто применяется для блогов, портфолио и других сайтов с акцентом на взаимосвязанный контент.
📌 Пример:
Блог, где каждый пост может быть связан с другими постами через теги или категории.
Сетевая структура с центром
Та же сетевая структура, но с главной страницей. Эффективна для сайтов, где центральная тема или продукт сопровождается дополнительной информацией.
📌 Пример:
Сайт Марквиз с главным продуктом – сервисом интерактивных квизов для бизнеса. Все ссылки на сайте образуют эффективную сеть, которая рассказывает о нашем продукте.
![Сайт для центрального продукта — конструктора Марквиз](https://cdn.prod.website-files.com/5af447d8d757cd4646568e20/656d8ea4afb77b344a347bc0_%D0%A1%D0%B0%D0%B8%CC%86%D1%82%20%D0%9C%D0%B0%D1%80%D0%BA%D0%B2%D0%B8%D0%B7%20%D1%81%D0%B5%D1%82%D0%B5%D0%B2%D0%B0%D1%8F%20%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0%20(1).jpg)
Матричная структура
В матричной структуре сайта контент организован в виде матрицы, где каждая ячейка может содержать отдельную тему, раздел или категорию. Подходит для сайтов с несколькими главными темами.
📌 Пример:
Сайт SkillFactory, где плитками даны разные модули для поиска своей темы и выбора: курсы, мероприятия, карьерные тесты и гиды:
![Разные продукты на одном сайте удобно расположить матрицей](https://cdn.prod.website-files.com/5af447d8d757cd4646568e20/656d8f1bde15bc77b1d9285a_%D0%9C%D0%B0%D1%82%D1%80%D0%B8%D1%87%D0%BD%D0%B0%D1%8F%20%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0%20%D1%81%D0%B0%D0%B8%CC%86%D1%82%D0%B0.jpg)
Последовательная структура
Контент представлен в определённой последовательности, например, при обучении или погружении пользователя в историю продукта. Каждая страница связана с предыдущей логической последовательностью.
📌 Пример:
Онлайн-курс обучения, где каждая страница представляет собой новый урок, с последовательным прохождением материала.
![Шаг за шагом последовательно открываются страницы на сайте](https://cdn.prod.website-files.com/5af447d8d757cd4646568e20/656d8efb0314f1e7e87afe23_%D0%BF%D0%BE%D1%81%D0%BB%D0%B5%D0%B4%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%B0%D1%8F%20%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0%20%D0%A1%D1%82%D0%B5%D0%BF%D0%B8%D0%BA.jpg)
Курс на сайте Stepic имеет последовательную структуру – пользователь пошагово проходит обучение, от первого урока до последнего
Примеры
В этом разделе рассмотрим популярные сайты и определим, какие у них структуры.
Сайт-визитка
Сайт-визитка обычно имеет линейную структуру или линейную с ветвлением.
Вот пример типичной структуры для сайта-визитки:
Базовая структура для сайта-визитки позволят посетителям легко получить основную информацию и связаться с владельцем сайта.
Шаблон лендинга для продвижения диджея с готовой структурой – можно добавить себе в личный кабинет Марквиз, кастомизировать и привлекать новых клиентов. По кнопке “Рассчитать стоимость” пользователь переходит к квизу, где может указать пожелания к заказу и оставить свои контакты.
Коммерческий сайт
Стандартный коммерческий сайт, на котором можно узнать о компании, еë продуктах и оставить заявку на созвон с менеджером. Такой сайт, как правило, имеет иерархическую структуру, где каждый уровень контента представляет собой ветвь, а подуровни являются отдельными страницами или даже целыми подразделами.
Пример иерархической структуры корпоративного сайта:
Эта иерархическая структура предоставляет более глубокий уровень информации для пользователей и позволяет им легко перемещаться по разным уровням в зависимости от их интересов и потребностей.
Сайт с иерархической структурой. Пример, как квиз ловит теплых лидов и помогает не потерять интерес к компании
Интернет-магазин
Для интернет-магазина с разделами подходит комбинация нескольких видов структур. Вот возможный вариант:
Сочетание иерархической, сетевой и линейной структур позволяет клиенту находить нужную информацию и быстрее выполнять целевые действия.
![Пример структуры сайта для интернет-магазина](https://cdn.prod.website-files.com/5af447d8d757cd4646568e20/656d9efaad5498c70d9be8ff_%D0%9A%D0%B2%D0%B8%D0%B7%20%D0%B2%20%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82-%D0%BC%D0%B0%D0%B3%D0%B0%D0%B7%D0%B8%D0%BD%D0%B5.jpg)
Пример структуры онлайн-магазина кофе. С главной пользователь может перейти к хитам продаж. В этом разделе можно разместить квиз для подбора подходящего товара. Например, квиз по подбору кофе
Частые ошибки в структуре сайтов
На этапе прототипирования можно выявить ряд признаков, которые указывают на возможные проблемы с будущей структурой сайта.
Вот несколько признаков, которые помогут определить плохую структуру на этом этапе:
❌ Неясная иерархия
Прототип содержит нечëткие иерархические отношения между разделами и страницами. Недостаток логической организации затрудняет пользователям понимание структуры.
❌ Несоответствие целям пользователя
Прототип не соответствует ожиданиям и потребностям целевой аудитории. Отсутствуют функции или информация, важные для пользователей.
❌ Недостаточная навигация
Нет ясных элементов навигации, или они неудачно размещены на прототипе. Механизмы перехода между разделами и страницами не очевидны для пользователя и вызывают затруднения
❌ Плохой адаптив для мобильных устройств
Прототип не учитывает потребности пользователей мобильных устройств. Нет адаптивного дизайна, что может снизить удобство использования на мобильных устройствах.
❌ Неясные и длинные URL-адреса
URL-адреса не отражают структуру контента или сложны для понимания.
❌ Нет оптимизации под SEO
Не уделено внимание использованию ключевых слов, заголовков Н1, Н2, Н3 и других SEO-аспектов. Отсутствие метатегов и других оптимизаций для поисковых систем.
❌ Нет возможности получать обратную связь от пользователей
Не проведено тестирование прототипа с реальными пользователями. Отсутствие обратной связи, которая могла бы указать на проблемы в структуре.
❌ Есть сложности в понимании контента
Прототип не даëт ясности в структуре контента. Непонятно, где находится нужная информация. Если есть эти признаки на этапе прототипирования, нужно внимательно пересмотреть структуру сайта, провести дополнительное тестирование с пользователями и внести коррективы.
Пошаговая инструкция по созданию правильной структуры сайта
Рассмотрим пример создания структуры сайта для компании, которая продаёт интерьерный декор и услуги дизайнера. Разберëм шаги, которые могут помочь определить и составить структуру сайта для такой компании:
Шаг 1. Определяем основные цели сайта
Решаем, для чего нам нужен сайт: продажи, информирование, развлечение и т. д. Устанавливаем приоритеты и определяем, какие действия должны выполнить посетители на нашем сайте в первую очередь.
Цели:
🏆 Продажа декора: получение заявки и передача менеджеру.
🏆 Продвижение услуг дизайнера: предоставление информации о возможностях дизайна и портфолио.
Шаг 2. Проводим исследование целевой аудитории и ключевых запросов
Определяем, кто наша целевая аудитория — какие группы пользователей могут быть заинтересованы в нашей продукции или услугах.
Исследуем ключевые запросы, которые могут использовать пользователи, чтобы найти сайт. Анализируем популярные поисковые запросы в нашей нише.
Целевая аудитория:
👫👫👫 Владельцы городских квартир, ищущие стильный и функциональный интерьер.
👫👫👫 Дизайнеры.
Ключевые запросы:
🏺Дизайн интерьера, интерьерный декор, заказать дизайн, купить декор для квартиры.
💡 Подкаст продакт-маркетолога Марквиз Кирилла Кирсановича: как понять людей, которых мы хотим привлечь
Шаг 3. Собираем семантическое ядро и кластеризируем
- Определяем ключевые слова и фразы, которые связаны с нашим бизнесом.
- Изучаем сайты конкурентов.
- Выделяем ключевые слова, которые они используют для продвижения своих услуг и продукции.
- Составляем семантическое ядро.
- Кластеризуем ключевые слова по темам. Это поможет структурировать контент на сайте и создать логическую иерархию.
- Определяем основные темы, связанные с бизнесом, например, «дизайн интерьера», «электроника для дома», «стильный декор» и т. д.
- Делим ключевые слова на группы по темам. Например, кластеры «декор для гостиной», «светильники для спальни», «дизайн кухонного пространства» и т. д.
- Определяем приоритетные кластеры, которые больше всего соответствуют целям нашего бизнеса и интересам целевой аудитории.
- Для каждого кластера определяем страницы сайта. Например, «Топовые идеи для гостиной», «Лучшие светильники для спальни» и так далее.
Составляем план контента или ТЗ для каждой страницы кластера, с учëтом ключевых слов.
💡 Как правильно собирать коммерчески важную информацию в интернете рассказываем в статье Что такое парсинг, и что о нём нужно знать маркетологам
Шаг 4. Создаём иерархию и категоризируем страницы
На основе семантического ядра создаём иерархию страниц. Определяем основные категории, подкатегории и страницы. Помним, что каждая страница должна соответствовать запросам пользователей.
Например, иерархия может быть такой:
Главная страница →
Квиз для оформления заявки →
Оффер, какую задачу решает компания и краткое введение в услуги →
Услуги →
Портфолио дизайн-проектов
Описание доступных услуг дизайнера
Декор →
Каталог продукции с категориями (например, освещение, текстиль, мебель).
Форма для запроса на покупку декора в рамках проекта.
О нас →
Информация о компании, команде, подходе к дизайну.
Контакты →
Контактная информация и форма обратной связи, квиз.
Предложение оставить запрос для дизайн-проекта.
💡 Как составить призыв к действию рассказываем в статье Что такое CTA
Шаг 5. Проверяем структуру URL
Используем ключевые слова в названиях разделов и URL для повышения видимости нашего сайта в поисковых системах.
Используем лёгкие и читаемые URL-адреса. Например:
URL для страницы с услугами: interiordecor.com/services/design.
URL для страницы с декором: interiordecor.com/decor/lighting.
Шаг 6. Связываем страницы сайта между собой
Ставим внутренние ссылки между страницами сайта. Это поможет распределить вес страниц и облегчит поиск контента пользователям.
Определяем важные страницы: «Главная», «Услуги», «Декор», «О нас», «Контакты».
Создаём логическую иерархию страниц, где каждая страница имеет свою уникальную роль и связана с основными направлениями бизнеса.
На главной странице добавляем внутренние ссылки на основные категории, например, «Услуги», «Декор», чтобы пользователи могли легко переходить к разделам.
Шаг 7. Обеспечиваем удобную навигацию
Продумываем в структуре лёгкий доступ ко всем категориям и разделам.
Посмотрим на сайт, где несмотря на специфичный продукт, всё понятно. Мы видим, что находимся в каталоге, в разделе «Запасные части и комплектующие».
![Пример удобной навигации](https://cdn.prod.website-files.com/5af447d8d757cd4646568e20/656da00b60323cfd6ecf005e_%D0%A1%D0%B0%D0%B8%CC%86%D1%82%20%D0%A3%D1%80%D0%B0%D0%BB%D0%B2%D0%B0%D0%B3%D0%BE%D0%BD%D0%B7%D0%B0%D0%B2%D0%BE%D0%B4%20%D1%81%20%D0%BB%D0%B5%D0%B3%D0%BA%D0%BE%D0%B8%CC%86%20%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%B5%D0%B8%CC%86.jpg)
Другой пример сайта, где нет никакой навигации, нет карточек товара, есть только форма обратной связи:
![Пример сайта, где нет навигации по продуктам, а только форма обратной связи](https://cdn.prod.website-files.com/5af447d8d757cd4646568e20/656d9fffebb36b4f0b37248a_%D0%97%D0%B0%D0%B2%D0%BE%D0%B4%20%D0%9C%D0%BE%D0%BD%D0%BE%D0%BA%D1%80%D0%B8%D1%81%D1%82%D0%B0%D0%BB%D0%BB%20%D0%B1%D0%B5%D0%B7%20%D1%87%D0%B5%CC%88%D1%82%D0%BA%D0%BE%D0%B8%CC%86%20%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%B8.jpg)
Шаг 8. Создаём карту сайта
XML-карта сайта включает все страницы и их иерархию для более эффективной индексации поисковыми системами.
Пример XML-карты:
![Пример карты сайта XML](https://cdn.prod.website-files.com/5af447d8d757cd4646568e20/656d9feae0fd315fa6857dfb_XML-%D0%BA%D0%B0%D1%80%D1%82%D0%B0%20%D1%81%D0%B0%D0%B8%CC%86%D1%82%D0%B0.jpg)
![зачем нужна карта сайта](https://cdn.prod.website-files.com/5af447d8d757cd4646568e20/656dd339e7aa287d56f96bb2_XML%20%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0.jpg)
Шаг 9. Тестируем сайт
Проводим тестирование. Смотрим, чтобы сайт корректно работал на различных устройствах, все ссылки были активны, а навигация интуитивно понятна.
Шаг 10. Проверяем сайтлинки
Отслеживаем внутренние и внешние ссылки, чтобы они соответствовали контенту страниц и целям сайта.
💡 Если делать сайт своими руками, лучше искать битые ссылки с помощью специальных сервисов, например Screaming Frog
Заключение
Когда есть понятная структура сайта, чёткие цели и портрет целевой аудитории, можно попробовать сделать сайт самостоятельно на конструкторе. Этот вариант подходит, если не требуется огромный онлайн-магазин с тысячами товаров или медиапортал, а нужен быстрый лендинг для рекламной кампании.
Попробуйте собрать страницу о компании или продукте с помощью Marquiz Pages без дизайнера и программиста.
Квиз можно установить на существующий сайт компании и увеличить число заявок. Посмотреть готовые квизы для разных бизнесов можно в Галерее шаблонов