Как создать структуру сайта понятную посетителям и поисковикам

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

В этой статье мы расскажем о видах структур, рассмотрим их пошаговое создание для web-сайтов, разберем ошибки и дадим дельные советы для работы.

Что такое структура сайта

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

Структура сайта

Технически структура отражена в URL. У каждой страницы есть уникальный адрес, в котором прописан путь к ней с главной. Например, из адреса https://www.web-dius.ru/seo-prodvizhenie/semanticheskoe-yadro/ понятно, что страница услуги по составлению семантического ядра находится в разделе Продвижение на нашем сайте. Вложенность в URL обозначается слэшами (/).

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

Преимущества правильно составленной структуры сайта

Перед созданием сайта необходимо продумать его структуру, это база для успешного продвижения в будущем

Здесь работает знаменитое «правило Парето»: 20 % прилагаемых усилий дают 80 % результата, иначе говоря, для достижения большей части задуманного достаточно небольших, но направленных усилий.

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

  1. Ясная логика позитивно отражается на пользовательском опыте. Посетитель понимает навигацию, ему удобно пользоваться вашим ресурсом, поэтому он не сбегает, роняя тапки, а остается здесь надолго. Так структура улучшает поведенческие факторы, влияющие на ранжирование в поисковых системах.
  2. Чем прозрачнее и логичнее структура, тем быстрее обходит страницы поисковый робот. Это влияет на скорость индексации. Кривоколенные сайты долго индексируются, а на грамотно спроектированном ресурсе новые страницы могут попадать в индекс уже на следующий день после публикации.
  3. Переделка фундамента уже запущенного проекта — дело муторное и дорогое. Помимо затрат на реорганизацию, придется пережидать еще и вынужденное падение трафика, на время, пока роботы распознают и оценят новую структуру.
  4. Структурная схема веб-сайта — это готовый бизнес-план по работе над своим ресурсом. Вы понимаете, какой объем контента вам необходим, можете спрогнозировать расходы на развитие. Логичная структура дает возможность без проблем добавлять нужные разделы по мере роста бизнеса.

Виды структур

Говоря о разработке модели сайта, нужно понимать различия между внешней и внутренней структурой.

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

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

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

Типы внутренних структур сайта

Структура сайта

Пример структуры web-dius.ru

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

Линейная

Линейная схема веб-сайта похожа на анфилады в зданиях XIX века. Пользователь заходит на Главную и последовательно передвигается через все страницы к последней, обычно к Контактам с формой обратной связи. Портфолио, презентации и другие проекты, цель которых поступательная демонстрация посетителю контента, строятся по этой схеме.

Главный минус такой анфиладной структуры — слишком глубокая вложенность страниц. Продвигается только Главная, поэтому для SEO линейный сайт не подходит.

Линейная с ответвлениями

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

Блочная

В блочной структуре все страницы равнозначны и ссылаются друг на друга. Такая схема хороша для SEO, но слишком специфична по своей логике, поэтому встречается редко. Блочная структура применима для сайтов, описывающих конкретный продукт, где под каждую характеристику делается отдельная страница.

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

Древовидная

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

Для SEO это отличная схема, т.к. каждый блок продвигается по своим запросам. От Главной расходятся основные разделы сайта. У каждого раздела есть свои подразделы, и так дробить можно до бесконечности, но все же ниже четвертого уровня спускаться нет смысла. Слишком глубоко запрятанные страницы плохо индексируются и не котируются поисковиками.

Внешняя структура сайта

Внешняя структура — макет страниц сайта — подчиняется своим жестким правилам. Можно сколько угодно экспериментировать со стилем, метаться от минимализма до убойных спецэффектов, оттачивать юзабилити по всем законам UX-дизайна, но кардинально ломать структуру главной страницы сайта в виде исторически сложившейся схемы нельзя. Пользователи ожидают увидеть на экране определенный набор элементов на закрепленных местах, и если сломать систему, велик шанс, что человек просто сбежит в ночь. Никто не любит, когда его ожидания не оправдываются. Вспомните фильм «Амели», когда героиня доводила до сумашествия противного лавочника, подменяя его тапочки.

Итак, что мы все ожидаем увидеть на сайте?

Header сайта

  • Хедер. Шапка в верхней части страницы, где слева расположен логотип, клик по которому возвращает нас на Главную. Дальше идет горизонтальное меню с основными разделами и способ связи: телефон или e-mail.
  • Сайдбар. Боковое меню. Может быть и справа, и слева. Здесь размещают элементы навигации, вспомогательную информацию, все, что способно задержать посетителя на сайте и увести его вглубь.
  • Центральный блок. Собственно, то мясо, ради которого пользователь пришел на сайт. Основная информация должна быть читабельна, по-человечески сверстана и располагаться на первом-втором экране. Не надо длинных подводок в стиле «Вода — это жидкость для питья, состоящая из атомов водорода и кислорода», если вы занимаетесь развозкой бутылей для офисных кулеров.
  • Футер. Подвал в самом низу страницы. Здесь находятся контакты, навигация, правовая и дополнительная информация, кнопки социальных сетей.

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

Перечислим обязательные и дополнительные элементы главной страницы:

  • навигация;
  • УТП (уникальное торговое предложение);
  • графический и текстовый контент, разбитый на смысловые блоки;
  • конверсионные кнопки (купить, заказать, оставить заявку на просчет и т.п.);
  • контакты;
  • информация о компании;
  • если вы что-то продаете, то покупателя точно будет интересовать доставка и способы оплаты.

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

Как тип сайта влияет на структуру

При создании веб-сайта выбор структуры зависит от его типа и функций.

Сайт визитка

Визитка

Структура сайта-визитки самая простая и состоит из двух уровней: с Главной пользователь переходит на страницы с более подробной информацией.

Универсальная структура сайта-визитки:

Главная
  • Услуги
  • Команда
  • Достижения
  • Контакты

Коммерческий

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

Главная
  • Стрижки
    • Мужские
    • Женские
    • Детские
  • Окрашивание волос
    • Тонирование
    • Колорирование
    • Креативное окрашивание
  • Уход за волосами
    • Ламинирование
    • Лечебные маски
  • Маникюр и педикюр
    • Классический
    • Шеллак
  • Услуги визажиста
    • Вечерний макияж
    • Дневной макияж
    • Свадебный макияж
  • Наши мастера
  • Контакты

Информационный

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

Структура тематического информационного сайта о достопримечательностях Санкт-Петербурга:

Главная
  • Парадный Петербург
    • Что построил в Петербурге архитектор Растрелли
    • Почему не падает Медный всадник
    • Как попасть в Эрмитаж и не состариться в очереди
  • Неформальные достопримечательности Питера
    • Это странное место Камчатка
    • Заброшенные особняки на Английской набережной
    • Что делать в Этажах
  • Все о пригородах санкт-Петербурга
    • Версаль или Петергоф — что круче?
    • Исчезающая красота: какие старинные дачи на заливе еще не сгорели.

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

Интернет-магазин

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

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

Упрощенная структура интернет-магазина игрушек:

Главная
    • О нас
    • Контакты
    • Способы оплаты
    • Доставка
    • Каталог
      • Детские игрушки
        • Настольные игры
          • Фильтр: возраст ребенка, цена
        • Мягкие игрушки
          • Фильтр: цена
        • Куклы
          • Фильтр: пупсы, говорящие, Барби, маленькие куколки
        • Машинки
          • Фильтр: гоночные, грузовики, легковые
        • Наборы для творчества
        • Картины по номерам
          • Фильтр: размер, уровень сложности
        • Моделирование
          • Подкатегория: корабли
          • Подкатегория: танки
          • Подкатегория: самолеты
            • Фильтр: цена, уровень сложности, бренд

 

Как построить структуру сайта под SEO

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

1. Семантика

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

Программа Key Collector

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

2. Проработка структуры

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

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

Структура сайта может меняться в зависимости от целевой аудитории, если такое сегментирование заложено в специфику ресурса. Например, на сайте для родителей можно сегментировать ЦА по возрасту детей и предлагать актуальное содержание отдельно для разных групп: родителей грудничков, младшеклассников или подростков.

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

3. Визуализация

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

Сервис Xmind

  • mind42.com
    Бесплатный онлайн-сервис для рисования интеллект-карт. Есть функция командной работы.
  • Flowchart Maker
    Облачный сервис для построения диаграмм и блок-схем. Для работы нужен аккаунт в Google. Есть готовые шаблоны.
  • XMind
    Программа для построения майнд-карт с приличным функционалом в бесплатной версии.

Ошибки при разработке структуры сайта

  • Нет микроразметки хлебных крошек. Навигационная цепочка breadcrumbs показывает, как текущая страница соотносится с общей структурой сайта, и позволяет пользователю легко ориентироваться в пространстве. Это важный навигационный элемент для SEO, т. к. облегчает жизнь и пользователям, и роботам.
  • Слишком глубокая вложенность страниц. В идеале на любую страницу пользователь должен попадать в 3 клика. Слишком детализированное деление на категории приводит к перегрузке навигационного меню. Настраивайте фильтры, чтобы не плодить хаос из кучи подкатегорий.
  • Неинформативные данные. Названия разделов должны быть понятны пользователям и не обманывать их ожиданий. То же касается URL — делайте его человекопонятным (ЧПУ).
  • Нет визуализации структуры на сайте. Все основные категории должны быть отражены в меню на хедере главной страницы.

Требования поисковиков к структуре

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

Yandex о составлении структуры сайта

Яндекс

  • Контролируйте корректность symlink. Следите, чтобы по мере переходов не собирался шлейф из аналогичных URL, типа site.ru/bla/bla/bla/bla.
  • Четко организуйте ссылки на сайте. Каждая страница должна относится к своему разделу, и на каждый документ должна вести хотя бы одна ссылка.
  • Проставьте текстовые ссылки на разделы сайта.
  • Используйте карту ресурса (sitemap.xml).
  • Составляйте уникальный человекопонятный URL для каждой страницы.
  • Оформляйте файл robots.txt

Подробнее о требованиях Яндекса к структуре читайте здесь: https://yandex.ru/support/webmaster/recommendations/site-structure.html

Google

Справка Google

Рекомендации Гугла во многом совпадают с Яндексом.

  • Упрощайте структуру сайта.
  • Прописывайте человекопонятные, простые, логические URL страниц.
  • Используйте для навигации не только графику, но и слова.
  • Для разделения слов в URL применяйте дефис, например, https://www.web-dius.ru/razrabotka/korporativnii-sait/
  • Сделайте страницу навигации и постоянно следите за ее актуальностью, систематизируйте новые страницы с учетом существующей структуры.

Подробнее о требованиях к иерархии сайта от Google читайте здесь: https://support.google.com/webmasters/answer/7451184?hl=ru

Советы по разработке структуры сайта

Перечислим базовые правила создания структуры сайта.

  • Важные страницы, например, Услуги или Прайс, должны быть хорошо заметны пользователям и находиться в одном клике от Главной.
  • Делайте не более 3 уровней вложенности страниц.
  • Проработайте перелинковку внутри сайта, это улучшит ПФ и ускорит индексацию.
  • Соблюдайте логику пути к глубоко вложенным документам:  Главная — Раздел — Подраздел — Статья
  • Следите за слэшем в окончании URL. Это сигнал для поисковика, что индексацию нужно проводить глубже, но, если нет внутренних ссылок, робот будет недоволен.
  • Для ресурсов со сложной структурой и глубиной вложенности страниц более 4 уровней наличие карты сайта обязательно.
  • Пишите человекопонятные URL.
  • Закрывайте служебные страницы от поисковых роботов (файл robots.txt).
  • Обеспечьте пользователю возможность быстро вернуться на Главную (обычно по клику на логотип в шапке или на строчку в верхнем меню).
  • Сделайте xml-карту — это обеспечит индексацию всех страниц.

 

Резюме

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

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

 

Обсудим сотрудничество?

Какие задачи нужно решить:
Разработка сайта / интернет-магазина
Продвижение (SEO, Директ и т.п.)
Контент-маркетинг
Поддержка сайта (информационная, техническая)
Аудит сайта / интернет-магазина
Консультация
Задать вопрос специалисту
Заполните форму и мы вам быстро ответим

Комментарии

Добавить комментарий

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

Провести бесплатный SEO-аудит вашего сайта?

Провести бесплатный SEO-аудит вашего сайта?

Хочу бесплатный аудит
Заказ сайта
Оставить заявку
Заявка на расчет
Оставить заявку
Оставить заявку
Заказ услуги
Заказ услуги
Заказ работ
Продвижение от 10.000 рублей
Form
X
Хочу быть автором