Архитектура сайта: структура, навигация и разметка

Зачем думать о структуре до того, как делать страницы

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

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

Правило трёх кликов и глубина

Главное правило: до любой важной страницы пользователь должен добираться за три клика с главной. Это не закон физики, но если ключевая страница закопана на 4-5 уровней вглубь, что-то спроектировано неверно.

Старайтесь делать структуру максимально плоской, сохраняя навигацию чистой. Уровни иерархии:

• L0 - главная (/)
• L1 - основные разделы (/features, /blog, /pricing)
• L2 - страницы раздела (/features/analytics, /blog/seo-guide)
• L3 и глубже - детальные страницы (/docs/api/authentication)

Для большинства сайтов хватает трёх уровней. Глубже - только для интернет-магазинов и больших баз документации. Удобный способ нарисовать структуру - ASCII-дерево:

Главная (/)
├── Возможности (/features)
│   ├── Аналитика (/features/analytics)
│   └── Автоматизация (/features/automation)
├── Цены (/pricing)
├── Блог (/blog)
│   └── [Категория: SEO] (/blog/category/seo)
├── О нас (/about)
└── Контакты (/contact)

Навигация: меньше пунктов, больше ясности

Главное меню в шапке - 4-7 пунктов максимум. Больше - и наступает паралич выбора. Правила хорошей шапки:

• Кнопка призыва к действию ("Начать", "Попробовать") - крайняя справа.
• Логотип ведёт на главную и стоит слева.
• Порядок по важности - самые посещаемые страницы первыми.
• Текущее местоположение подсвечено в навигации цветом или насыщенностью.

Навигация должна стоять одинаково на всех страницах - не меняйте её расположение от типа страницы к типу. Не смешивайте навигационные паттерны на одном уровне иерархии.

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

Главная > Возможности > Аналитика

Адреса страниц: читаемые и логичные

URL должен читаться человеком и отражать иерархию. Принципы:

• По-человечески: /features/analytics, а не /f/a123.
• Дефисы, не подчёркивания: /blog/seo-guide, не /blog/seo_guide.
• Всегда в нижнем регистре.
• Коротко, но понятно: /blog/landing-page-conversions лучше, чем /blog/how-to-improve-landing-page-conversion-rates.

Частые ошибки: даты в адресах блога (/blog/2024/01/15/post - длинно и бесполезно), избыточная вложенность, ID вместо понятных слов. И самое важное при переезде: каждый старый адрес должен получить редирект 301 на новый. Без этого вы теряете накопленный поисковый вес и ломаете чужие закладки.

Внутренние связи: чтобы не было страниц-сирот

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

Рабочие правила связывания:

• Описательный текст ссылки - "наши возможности аналитики", а не "нажмите здесь".
• Важные страницы - чаще: на главную, ключевые разделы и цены ссылайтесь активнее.
• Блоки "похожее" внизу статей.

Для контентных сайтов работает модель "хаб и спицы": одна большая обзорная страница (хаб) и набор узких статей (спицы), каждая из которых ссылается обратно на хаб, а хаб - на все спицы.

Структурированная разметка: как объяснить сайт машине простыми словами

Поисковик видит вашу страницу как набор текста и догадывается, что есть что: где заголовок, где цена, где автор. Структурированная разметка (schema) - это способ убрать догадки и прямо сказать машине: "вот это - статья, вот это - её автор, вот это - дата публикации". Технически это небольшой блок данных в формате JSON-LD, который вставляется в код страницы и не виден пользователю.

Зачем это нужно:

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

Базовые типы разметки под частые задачи:

• Organization - для главной и страницы "о компании" (название, адрес сайта, логотип, соцсети).
• Article / BlogPosting - для статей (заголовок, изображение, дата, автор).
• Product - для товаров (название, изображение, предложение с ценой и наличием).
• FAQPage - для блоков вопросов и ответов.
• BreadcrumbList - для хлебных крошек.

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

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Главная", "item": "https://site.ru/" },
    { "@type": "ListItem", "position": 2, "name": "Блог", "item": "https://site.ru/blog" }
  ]
}

Три принципа разметки: она должна точно отражать содержимое страницы (не размечайте то, чего на странице нет), использовать формат JSON-LD (его рекомендует Google) и проходить проверку. Перед публикацией прогоните разметку через Google Rich Results Test - он покажет ошибки до того, как их увидит поисковик.

С чего начать прямо сейчас

Соберите архитектуру в три шага. Первый - нарисуйте ASCII-дерево всех страниц с адресами. Второй - спроектируйте шапку (4-7 пунктов плюс кнопка действия) и подвал по колонкам, проверьте правило трёх кликов. Третий - спланируйте внутренние ссылки так, чтобы не осталось сирот, и добавьте базовую разметку Organization на главную и Article на статьи. Этот каркас удержит сайт в порядке, даже когда страниц станет в десять раз больше.