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

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

Что считать результатом планирования

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

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

Как составить первое дерево страниц

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

1. Выпишите задачи без названий страниц: понять предложение, сравнить варианты, увидеть работу, узнать условия, связаться.
2. Сгруппируйте задачи, которым нужен один ответ и одно действие. Например, примеры работ могут образовать раздел с отдельными карточками проектов.
3. Назначьте каждому будущему документу короткое название и место в дереве. От главной проведите ветки к направлениям и вспомогательным сведениям.
4. Проверьте дерево с точки зрения прямого входа: человек может попасть сразу на внутреннюю страницу и должен понять, куда подняться и куда идти дальше.
5. Отметьте страницы, которые нужны для работы сайта, но не обязаны занимать место в главном меню: условия, политика обработки данных, страница ошибки.

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

Когда делать отдельную страницу, а когда раздел

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

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

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

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

По теме: Как сделать картинку сайтом: от скриншота к веб-странице

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

Создайте таблицу с колонками «Страница», «URL», «Родитель», «Откуда войти», «Куда идти дальше». Например: «Создание сайта | /services/site/ | Услуги | главная, меню услуг | примеры, контакт». Вторая строка: «Проект А | /work/project-a/ | Работы | список работ | создание сайта, контакт». Такой реестр показывает недостающие ссылки до написания кода.

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

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

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

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

Пример маршрута: человек открывает /work/project-a/, переходит по ссылке «Как мы делаем сайты» на /services/site/, изучает условия и нажимает «Обсудить проект» с переходом на /contacts/. Для каждого перехода запишите место и понятную подпись ссылки. Если проект содержит несколько направлений, аналогичный путь нужен для каждого из них.

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

По теме: Как сделать главную страницу сайта: содержание и проверка

Как проверить план на потерянные страницы и тупики

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

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

Для небольшой структуры устройте проверку без подсказок: дайте другому человеку названия двух задач, например «найти пример» и «связаться», и попросите указать маршрут по одному только дереву и подписям ссылок. Если он не может выбрать переход, пересмотрите группировку и названия до вёрстки. Это проверяет план, а не обещает определённую конверсию.

Когда такой план недостаточен

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

Частые вопросы

Сколько уровней должно быть в дереве сайта?

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

Нужна ли отдельная страница для каждого вопроса?

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

Чем план сайта отличается от XML-карты сайта?

План помогает людям спроектировать страницы и переходы до сборки. XML-карта сайта сообщает поисковым системам о важных опубликованных адресах, но не заменяет видимую навигацию и не гарантирует индексацию: документация Google о файлах sitemap.

Можно ли поменять план после публикации?

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