Структура сайта: ключевые требования к составлению и виды структур сайта

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

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

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

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

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

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

Структура должна быть понятной и удобной для пользователя и роботов поисковых систем (сокращенно — ПС), иначе продвижение сайта может сильно замедлиться. Поэтому давайте разберемся, как выбрать правильную схему и какие рекомендации дают Яндекс и Google на этот счет. 

Цели и аудитория сайта

При создании структуры нужно учитывать тип проекта и основные характеристики целевой аудитории.

В первую очередь определитесь с тем, какой сайт вам нужен: 

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

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

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

Пример сайта-визитки — шаблон «Частный программист» в конструкторе Craftum

Коммерческие проекты. К этой категории относятся сайты для средних и крупных компаний, медицинских клиник, школ, интернет-магазинов. Их схема более сложная, чем у визиток. К основным разделам добавляются подразделы, на сайте представлено гораздо больше информации, которую нужно организовать. Например, в структуре для онлайн-магазина может быть более трех уровней вложенности страниц: Главная ⇒ Категории (Женская одежда, Мужская одежда) ⇒ Подкатегории (Брюки, Рубашки, Юбки, Платья) ⇒ Карточки отдельных товаров. 

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

Для примера давайте посмотрим на городской сайт Москвы. На скриншоте ниже мы видим, что только в разделе «Новости» присутствует более 10 подразделов. А таких категорий на портале несколько (Афиша, Объявления, Справка, Интернет-магазин). Каждый из них имеет свою структуру, наполнение, навигацию. 

Пример структуры сайта СМИ

Развлекательные проекты. Обычно имеют сложную структуру. Вспомните Youtube — там есть каталог, где видео рассортированы по жанрам, целый подраздел с роликами из подписок, ссылки на личную библиотеку, творческую студию и многое другое. Или еще один пример — социальная сеть ВКонтакте. Ее пользователям доступны разные категории: Видео, Музыка, Игры, Приложения, Клипы, Фотографии, Маркет и так далее. В каждом из этих разделов есть подразделы и целая куча фильтров. 

Пример структуры сайта ВКонтакте

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

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

Пример навигации на сайте с развивающими упражнениями для детей

Если сайт предназначен для бизнес-аудитории, то структура должна показывать, как компания поможет решить проблемы клиентов. Она может включать следующие разделы: «Портфолио», «Услуги», «Контакты», «Цены», «Отзывы клиентов». 

Пример сайта для бизнеса — шаблон «Юридическое обслуживание бизнеса» в конструкторе Craftum

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

Пример структуры сайта Новосибирского Государственного Университета

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

Навигация и пользовательский путь

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

Обеспечить интуитивно понятную навигацию. В этом поможет меню сайта со ссылками на все разделы, поисковая строка, «хлебные крошки» (цепочка ссылок, по которой движется пользователь). Человек должен понимать, куда ему нужно нажать, чтобы найти интересующую его информацию. 

Пример хлебных крошек на сайте

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

Пример блока со статьями по теме в блоге Craftum

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

Удобочитаемость и адаптивность

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

Поэтому следите за тем, чтобы на сайте был: 

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

Пример оформления текста в блоге Craftum

Адаптивный дизайн. Следите за тем, чтобы сайт корректно отображался на различных устройствах (компьютерах, планшетах, мобильных телефонах). Элементы дизайна не должны «плясать» в разные стороны при изменении разрешения экрана. Для проверки оптимизации проекта под мобильные устройства можно использовать сервис Mobile-Friendly Test от Google. 

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

Читайте также: «Юзабилити сайта: что это такое и как его улучшить».

Требования к структуре сайта с точки зрения поисковых систем Яндекс и Google

Об удобстве поговорили, теперь узнаем, что рекомендуют Яндекс и Google на этот счет. Ранее мы уже писали о том, что хорошая схема положительно влияет на SEO. И вот почему:

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

• Ускоряется индексация. Боты поисковых систем (их еще называют краулерами) лучше и быстрее индексируют сайты, у которых понятная структура и любая страница доступна максимум в 3 клика от главной. Новые материалы будут оперативно попадать в базу ПС, поэтому вы сможете собирать «горячий» трафик (например, на свежие новости).    
• Грамотно распределяется ссылочный вес. Чем больше страниц ссылается на конкретный материал, тем выше его вес в глазах поисковых систем. С помощью структуры можно показать Яндексу и Google, какие страницы на сайте самые важные, а какие — второстепенные. 

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

Рекомендации Яндекс:

• Создавайте четкую ссылочную структуру. Все страницы должны быть связаны и ссылаться друг на друга, иначе у проекта могут возникнуть трудности с индексацией. Попадая на сайт, бот ПС начинает «гулять» по внутренним ссылкам и по ходу добавлять свежие материалы в свою базу. Если на ресурсе есть страницы, на которые не проставлено ни одной ссылки, то краулер о них не узнает, так как не найдет к ним дорогу. 
• Используйте карту сайта (Sitemap). Это документ, в котором собраны ссылки на все страницы. Sitemap можно сравнить с содержанием в конце книги, которое можно открыть и посмотреть список всех глав. Когда бот ПС переходит на сайт, он скачивает эту карту и проверяет наличие новых страниц, которые нужно добавить в базу. Создать Sitemap можно за пару минут с помощью плагина или онлайн-генератора, например, SitemapXML. 
• Ограничивайте индексацию служебных страниц в файле robots.txt. Это могут быть дубли, страницы с результатами поиска по сайту, какая-то служебная информация, которая не имеет ценности для посетителей и поисковых систем. Подробнее о том, что нужно закрывать от индексации и как создать robots.txt, мы писали в статье «Влетаем в ТОП! Пошаговая инструкция по самостоятельной оптимизации и SEO-продвижению сайта».
• Создавайте уникальный адрес (URL) для каждой страницы. Желательно, чтобы это был человекопонятный URL (сокращенно — ЧПУ) и посетитель мог по тексту ссылки понять, где он находится. 

Более подробно ознакомиться с рекомендациями Яндекса к структуре сайта можно в справке. 

Рекомендации Google:

• Давайте страницам понятные названия, соответствующие содержанию контента. 
• Размещайте разный контент на отдельных страницах, не смешивайте все в одну кучу.
• Выделяйте важную информацию более крупным или полужирным шрифтом, используйте визуальные приемы для более легкого восприятия контента (подробнее об этом мы писали в главе про читабельность и адаптивность).
• Разделяйте слова в URL при помощи дефиса и не используйте знаки пунктуации. Более подробные рекомендации Google по структуре URL страниц можно почитать в официальной справке справке. 
• Добавляйте пустое пространство (воздух) между элементами — это облегчит восприятие информации. Для правильного расчета расстояния между блоками можно воспользоваться сетками для веб-дизайна.

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

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

Всего выделяют 5 видов схем: линейную, линейно-разветвленную, иерархическую, сетевую, гибридную.  

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

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

Схема линейной структуры

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

Линейно-разветвленная структура

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

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

Схема линейно-разветвленной структуры

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

Линейно-разветвленная структура на примере онлайн-курса

Иерархическая структура

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

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

Схема иерархической структуры

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

Сетевая структура

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

Схема сетевой структуры

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

Гибридная структура

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

Для примера можно вспомнить какой-либо сайт с онлайн-уроками и курсами. Его верхний уровень (главная и страницы категорий) может иметь иерархическую структуру. На более низких уровнях (разделы с уроками) используется линейная или линейно-разветвленная схема. 

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

Как создать структуру сайта: пошаговая инструкция и советы

Итак, вы определились с типом сайта и примерно понимаете, какую схему будете использовать. Теперь пора переходить к практике: рассмотрим основные шаги для создания структуры. 

Шаг 1. Собираем семантическое ядро. Это ключевые слова и фразы, по которым вы будете продвигать сайт в поисковых системах. Для сбора семантики можно использовать сервисы Keys.so, PromoPult, Ahrefs, SpyWords, Key Collector и другие. Если ключей мало, можете воспользоваться сервисом Яндекс Wordstat. 

Шаг 2. Кластеризуем (группируем) запросы по смыслу. Если ключей меньше 100, это можно сделать вручную. Для крупных проектов лучше использовать автоматизированные сервисы — это сэкономит вам время и силы. Можете почитать подробнее о том, как выполнить кластеризацию и посмотреть примеры группировки ключей. 

Шаг 3. Распределяем группы запросов по категориям и подкатегориям. Например, вы продаете аксессуары для мобильных телефонов. В этом случае можно распределить ключи по категориям «Чехлы», «Зарядные устройства», «Наушники», «Подставки», «Защитные стекла». В категории «Наушники» можно выделить подкатегории «Беспроводные», «Проводные», «С микрофоном». 

Шаг 4. Рисуем наглядную схему. Это можно сделать на обычном листке бумаги или в ментальных картах (сервисы XMind, Diagrams, MindMeister, Simple Mind). Прорисуйте все уровни структуры, посмотрите, каких разделов не хватает, что можно объединить или, наоборот, разделить. Для вдохновения можете посмотреть сайты конкурентов или просто похожие проекты.

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

Когда схема готова, передайте ее программистам и дизайнерам для дальнейшей разработки ресурса. Если вы делаете сайт самостоятельно, то используйте схему как шаблон или каркас, по которому будете строить весь проект.

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

Лучшие практики при создании структуры сайта

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

Сокращение уровней глубины

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

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

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

Как уменьшить уровень вложенности:

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

Карта сайта интернет-магазина Xiaomi

Добавление строки поиска

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

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

Улучшение скорости загрузки

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

Проверить скорость загрузки сайта можно с помощью сервисов PageSpeed Insights от Google, Pingdom Tools, PR-CY, Web Page Test, Site Speed или любых других, которые вам удобны. 

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

Тестирование и анализ поведения пользователей

Не всегда удается с первого раза создать правильную структуру. Иногда схема, которая показалась удобной владельцу сайта, может совсем не подойти посетителям. Выявить проблемы можно с помощью анализа поведения пользователей. Для этого установите на сайт счетчик от Яндекс Метрики и подключите к нему Вебвизор. 

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

Пример статистики в сервисе Вебвизор

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

Заключение

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