Структура сайта: принципы, правила и пошаговый алгоритм создания крепкого фундамента интернет проекта


Структура сайта - это базис, фундамент любого интернет ресурса, будь то интернет магазин или информационный сайт. 

Благодаря качественной, грамотно спроектированной структуре поисковые системы быстро совершают обход сайта, не расходуют напрасно ресурсы робота (crawl budget, бюджет на обход). Это приводит к быстрой индексации сайта поисковыми системами. У хорошо спроектированного сайта новые документы могут попадать в индекс практически через день после размещения на интернет ресурсе. 

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

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

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

Именно поэтому тщательная подготовка, анализ и планирование -  это критически важные шаги при работе над структурой любого сайта, будь то небольшой сайт услуг или огромный classified (пример: Авито).

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

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

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

Фото 1: Пример кулинарного сайта, который сгруппировал виды блюд в категории, сделав что-то наподобие поваренной книги.

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

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

Принципы построения структуры сайта

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

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

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

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

  • Сайт-визитка

  • Коммерческий сайт

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

  • Информационный сайт

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

Сайт-визитка

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

Фото 2: Пример структуры простого сайта визитки какой либо небольшой компании.

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

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

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

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

Фото 3: Пример структуры более сложного коммерческого сайта, где каждая страница сайта раскрывает информацию о том или ином направлении бизнеса или услуге.

На этот раз количество связей имеет более разветвленный вариант и из раздела “Услуги” мы можем перейти в рубрику “Ремонт квартир”, а уже из неё попасть на документ “Капитальный ремонт”.

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

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

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

Фото 4: Пример структуры базового интернет магазина с каталогом товаров, карточками и фильтрами (тегами).

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

Информационные сайты 

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

Информационные сайты можно разделить на два вида, от которых будет зависеть их структура:

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

  • Сайты порталы, посвященные какой то широкой проблеме (материнство, мода, прически, домашние животные).

Нишевые сайты

Пример информационного сайта с узкой тематикой фитнеса:


Фото 5: Упрощенная структура информационного сайта об упражнениях и здоровом образе жизни.

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

Порталы

Вариант портала - это тот же информационный сайт, но с гораздо более широкими направлениями и он может представлять из себя “связку” узких информационных направлений, в рамках одной темы. Примером популярного информационного портала может быть женский журнал woman.ru.

Если бы мы делали портал про фитнес, раздел "Спорт”, мог бы быть одним из разделов со своими рубриками и статьями:

Фото 6: Многоуровневая структура раздела обусловлена большим количеством рубрик, которые планируется развить.

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

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

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

Требования ПС Яндекс к структуре

Поисковая система Яндекс имеет подробную инструкцию по работе со структурой сайтов - ссылка. Если не вдаваться в детали, в общем можно выделить следующие ключевые рекомендации:

  • Каждый документ должен относиться к своему разделу.

  • Чем больше вложенность страницы, тем дольше Яндекс будет ее индексировать. То есть, если страница в структуре выглядит так: eda.ru/salaty/olivie то она проиндексируется быстрее, чем eda.ru/bluyda/prazdniki/novyj_god/olivie.

  • Используйте карту сайта sitemap.

  • Ограничивайте индексирование служебной информации. Например, не стоит индексировать “результаты поиска по сайту”. Для поисковых систем они не сыграют роли в скорости индексации или ранжировании, но общую скорость проверки сайта замедлят и расходуют бюджет на обход сайта роботом. Такой функционал должен быть прежде всего для пользователей, нежели для роботов.

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

  • Желательно, чтобы формат URL давал представление о том, что находится на странице куда он ведет. То есть ЧПУ хорошо воспринимается не только пользователями, но и поисковыми системами.

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

  • Проверяйте корректность symlink-ов. То есть не должно быть цикличных страниц с большим количеством повторений, например semyadro.pro/sbor/sbor/sbor/sbor.

Указанные рекомендации позволят создать правильную структуру не только для Яндекса, но и для пользователя.

Требования ПС Google к структуре

Google так же имеет свои требования к правильной структуре сайта.

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

  • Используйте ЧПУ. Гугл так же ориентируется на ЧПУ для определения релевантности страницы.

  • Используйте пунктуацию в ссылках. То есть для разделения нескольких слов в ссылках необходимо использовать знаки пунктуации: не /sineeplatje, а /sinee-platje. Гугл рекомендует “-”, а не “_”.

  • Не используйте сложные URL.

Так же информация по структуре и не только есть в руководстве по оптимизации от самой компании Google - ссылка.

Как правильно составить структуру сайта в виде схемы

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

Анализ конкурентов

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

Итак, у нас есть тематика. Допустим, это интернет магазин бытовой электроники. Структуры интернет магазинов как правило самые подробные и разветвленные. Чтобы не продумывать каждый раздел мы поступим проще - посмотрим у конкурентов. Будьте уверены, что конкуренты давно проделали всю работу за нас. Чтобы исключить ошибки тех же конкурентов - мы будем анализировать нескольких.

Алгоритм изучения конкурентов на примере интернет магазина бытовой электроники.

Поиск конкурентов в каталогах

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

Liveinternet - рейтинг сайтов по категориям, где можно взять список лидеров ниши.

Фото 7: Перечень категорий сервиса Liveinternet. Категории достаточно широкие, это несколько усложняет задачу.

Top 100 Rambler - удобный топ с конкретными разделами.

Фото 8: Рамблер удобно сгруппировал сайты по направлениям, можно смело использовать.

Яндекс Каталог - каталог от поисковой системы Яндекс.

Фото 9: Яндекс.Каталог - хороший источник качественных сайтов.

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

Серпстат - так же сервис для поиска и выгрузки структуры конкурентов по Яндекс и Google.

Арсенкин - инструмент для выгрузки ТОП сайтов по запросу.

Что нам необходимо сделать - нам нужно найти нашу категорию в рейтингах сайтов и выписать оттуда конкурентов, например в таблицу excel или в гугл таблицы (Google speadsheets).

Фото 10: Составляем таблицу с url сайтов конкурентов в нашей тематике. Лучше брать крупных игроков, т.к. выше шанс что у них в плане структуры все в порядке.

Расширение через Serpstat, Semrush и сервис Arsenkin

Затем переходим к сервисам - получаем базу сайтов по ключевому слову “бытовая техника”. Подробнее об использовании сервисов: Серпстат и Семраш.

Проверка запроса в серпстат.

Фото 11: Ищем топ конкурентов по ключевому слову в тематике.

Мы получаем “Конкурентов в поисковой выдаче”:

Фото 12: Серпстат показывает список наиболее видимых сайтов в выдаче по запросу.

Выписываем получившийся список в нашу таблицу.

Фото 13: Создаем новую колонку и вносим в нее данные.

 Далее переходим к Семраш.

Фото 14: Повторяем операцию в сервисе Semrush.

Не забываем поменять регион на RU. Получаем список конкурентов по Google.

Фото 15: Список конкурентов из Семраш.

 В Семраш есть возможность экспорта получившегося ТОП 100 если у вас приобретена подписка (99$), в ином случае переносим необходимые данные вручную.

Фото 16: Экспорт доступен только при активной подписке.

Так же добавляем в нашу таблицу Excel. 

Фото 17: Создаем отдельную колонку для конкурентов, полученных из Semrush.

Ту же операцию проделываем на сайте Арсенкина.

Чистка и объединение

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

Фото 18: Итоговый список после чистки на дубликаты.

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

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

Рассмотрим на примере магазина М-Видео. Для выгрузки структуры сайта у нас есть 2 варианта:

  • Визуальное ознакомление со структурой и её воспроизводство в excel таблице.

  • Выгрузка URL’ов с помощью сервисов.

Ручная выгрузка структур конкурентов

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

Фото 19: Дочерние страницы раздела "Компьютеры и мониторы" на сайте М-Видео.

То, как мы переносим в нашу рабочую таблицу (краткий пример).

Фото 20: Создаем древовидную структуру в excel таблице по образу и подобию того, что мы видим на сайте.

Таким образом нам необходимо выгрузить структуру каждого отобранного сайта.

Автоматизированная выгрузка с использованием сервисов

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

Фото 21: Анализируем сайт через Serpstat.

Жмем поиск и затем в разделе “SEO анализ” находим “Страницы сайта”:

Фото 22: Наша задача - найти инструмент "Страницы сайта".

В итоге мы получаем такой результат:

Фото 23: Serpstat показывает нам все документы выбранного сайта.

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

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

Объединение структур

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

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

Фото 24: Берем структуру сайта М-Видео в качестве базиса.

Как происходит наполнение? Все просто - мы смотрим схожие разделы у других интернет магазинов и переносим сюда их содержимое. Для удобства можно каждый раздел разбить на колонки. Есть 2 вариант работы: добавлять только уникальные разделы, которых нет в основной структуре, либо добавлять всё и затем удалить дубли. Второй вариант подходит для объемных структур.

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

Фото 25: Дополняем раздел отсутствующими марками, дубли чистим потом.

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

Чистка и удаление неэффективных разделов

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

Чтобы оценить спрос того или иного раздела мы будем использовать Кей Коллектор. Для начала нам необходимо подготовить так называемую матрицу парсинга. Для этого перейдем к нашей таблице. На примере мониторов это будет выглядеть так:

Фото 26: Копируем марки мониторов в отдельную вкладку.

Чтобы составить матрицу парсинга необходимо для каждой марки добавить слово “монитор”, для последующего добавления в Key Collector.

Фото 27: Дополняем матрицу.

Копируем полученный результат и отправляем его на парсинг в Key Collector. О том, как настроить Key Collector для эффективного парсинга можно прочитать в этой статье.

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

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

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

Программы для построения структуры сайта

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

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

Наиболее удобные ПО для создания структур сайта:

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

  2. Draw.io - бесплатный онлайн сервис для создания структур и диаграмм. Требует наличия почты от Google. В арсенале инструментария побольше, чем у X-mind, присутствует ряд технических и инженерных шаблонов (для наших целей не интересны). Еще одним плюсом является возможность выгрузки результата на Google диск и прочие сервисы наравне с выгрузкой на ПК.

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

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

Схема структуры сайта в X-Mind

Мы рассмотрим построение структуры в программе X-Mind. Чтобы наглядно увидеть все наши разделы, рубрики и категории переносим данные из excel таблицы в x-mind карту. Для добавления подраздела можно использовать кнопку Tab, переносить разделы можно мышью.

Краткий пример одного из разделов в итоге будет выглядеть так:

Фото 28: Структура нашего интернет магазина в виде майнд карты в программе X-Mind.

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

Выводы

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

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

Основные моменты:

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

  • Проверяем актуальность разделов через Key Collector. Разделы без спроса могут быть полезны, но с коммерческой точки зрения они не принесут ощутимой пользы (релевантно только для ecommerce сайтов, для информационных проектов разделы и рубрики обычно формируются по логическому принципу).

  • Используем ЧПУ. Это помогает как роботам поисковых систем, так и пользователям.

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

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