Купавна Мед: SEO-структура и UI-кит для центра реабилитации с нуля

Задача проекта

Центр реабилитации «Купавна Мед» запускается с нуля. Типичная ошибка на старте — заказать «красивый сайт», а потом полгода переклеивать разделы, потому что структура не выдерживает ни поисковый спрос, ни реальный путь пациента. Я зашёл с другой стороны: сначала информационная архитектура и SEO-каркас, а визуал и разработка — уже поверх готового скелета.

Ниша тяжёлая во всех смыслах. Это YMYL-тематика (здоровье и деньги — Яндекс и Google проверяют такие сайты строже всего), аудитория часто пожилая и в стрессе, а решение принимается быстро и на доверии. Плюс у центра две разные аудитории под одним брендом: тяжёлая реабилитация (решение срочное, тревога) и wellness-профилактика (спокойный выбор). Структура должна обслуживать обе, не смешивая тон.

Результат этого этапа — не трафик (сайта ещё нет), а готовый к разработке чертёж: карта сайта с ЧПУ и приоритетами, модель навигации, поблочные шаблоны страниц, проверенные на сценариях пути пациента, точки конверсии и техническая SEO-база. Это снимает риски и экономит недели переделок. Такую работу я обычно делаю в рамках SEO-стратегии и продвижения медицинского центра.

Шесть принципов, на которых стоит вся архитектура

Каждое решение в структуре выводится из шести принципов — чтобы это была система, а не набор страниц «как у конкурентов».

• Две аудитории — один сайт. Реабилитация и wellness разведены в отдельные ветки с разным тоном, но живут под одним брендом.
• Навигация по ситуации, а не по услугам. Человек ищет «после инсульта», а не «нейромоторную ЛФК». Диагноз — верхний уровень меню, методы и оборудование — внутри страницы направления.
• Доверие — несущая конструкция. Лицензия, аккредитация, реальные врачи, истории «до/после» и измеримые шкалы вынесены в структуру как отдельные опоры, а не прячутся в подвале. Это прямой сигнал E-E-A-T.
• Каждая страница ведёт к контакту. Сквозная конверсия: телефон, мессенджеры, «прислать выписку» и форма доступны с любой страницы. Путь до заявки — максимум 2 клика.
• Локальность как преимущество. Купавна рядом + трансфер из Москвы — весомый аргумент, закреплённый в структуре: контакты, как добраться, трансфер, приём из стационара.
• Поэтапный запуск. Структура размечена по этапам: MVP для старта продаж, затем расширение контента и развитие. Не строим всё сразу.

Карта сайта: навигация по диагнозу и ЧПУ

Спроектировал полное дерево из 40+ страниц на три уровня плюс динамические шаблоны. Главная фишка — верхний уровень строится по диагнозам и ситуациям, а не по методам. Это совпадает с реальным поисковым спросом: люди ищут «реабилитация после инсульта», «восстановление после эндопротезирования», а не «нейромоторная ЛФК». Под этот спрос заточены страницы направлений — их 16+, сгруппированных по категориям: неврология, травмы и ортопедия, боль и хронические состояния, общая реабилитация.

URL — плоские, на латинице, предсказуемые: /napravleniya/insult, /metody/ergoterapiya, /specialisty/:slug. Такая ЧПУ-схема читаема и для человека, и для робота, и её не придётся переделывать с потерей позиций. Методы, оборудование и процесс вынесены в отдельную ветку «Как мы лечим» — они закрывают информационные запросы и снимают сомнения, но не конкурируют со страницами направлений за коммерческий интент.

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

Главное меню и мега-меню

Направлений много (16+), а аудитория часто пожилая — длинный список её потеряет. Поэтому в меню всего шесть смысловых пунктов, а под «Направлениями» раскрывается мега-меню с группировкой по категориям: неврология, травмы и ортопедия, боль и общая реабилитация. Человек сразу находит свой случай, не читая весь список.

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

Поблочные шаблоны страниц

Для ключевых типов страниц расписал структуру по блокам — порядок секций сверху вниз, с пометкой, где первый экран, а где конверсионный блок. Это ТЗ для дизайнера и разработчика — готовый каркас из 11 блоков.

Так же поблочно расписаны главная, wellness-программа, специалисты, стоимость, истории/отзывы, статья блога и контакты. Конверсионные блоки помечены отдельно — их я разбираю в статье про почему SEO не конвертит: трафик без продуманных точек захвата не даёт заявок. Все шаблоны — в шаблонах ниже.

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

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

• Родственник после инсульта (срочно, тревога). Реклама → страница «Инсульт» → истории/результаты → стоимость/как начать → звонок или «прислать выписку». Критично: телефон в каждом экране, «принимаем из стационара 24/7», кнопка «Прислать выписку», обещание трансфера. Минимум текста — максимум быстрых действий.
• Пациент после эндопротезирования (планово, сравнивает). Поиск → направление → процесс и оборудование → специалисты → заявка. Критично: детали методики и оборудования (доверие к компетенции), прозрачный процесс, регалии врачей.
• Офисный клиент, усталость и стресс (wellness). Соцсети → wellness-хаб (другой тон) → пакет → форматы и цена → запись. Критично: отдельный визуальный тон (не больница), продажа ощущения, простая онлайн-запись, цена сразу.

Для каждого пути прописано, что критично именно ему — так структура обслуживает и тревожного «срочника», и рационального «планового», и эмоционального wellness-клиента.

Сквозная конверсия — несколько дверей

Разные люди готовы к разному действию, поэтому в структуру заложено несколько «дверей» к заявке, доступных с любой страницы:

• Телефон в шапке — закреплён на всех страницах, главный канал для тревожной аудитории.
• WhatsApp · Telegram — плавающая кнопка на мобильном, для тех, кому проще написать.
• «Прислать выписку» — самый горячий лид: человек уже готов лечиться. Отдельная короткая форма в хабе «Пациентам» и на страницах направлений.
• Форма консультации — имя + телефон + согласие, внизу каждой смысловой страницы.
• «Узнать стоимость» — перехватывает тех, кто ищет цену, и переводит в диалог.
• Экскурсия в центр — снижает страх «отдать близкого в чужое место».

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

Поэтапный запуск: сначала MVP

Строить сразу 40+ страниц — значит откладывать старт продаж на месяцы. Поэтому карта размечена по трём этапам, и центр начинает зарабатывать уже на первом.

• Этап 1 · MVP — запуск продаж. Главная, 5 ключевых направлений (инсульт, эндопротезирование, спина, боль, ампутация), процесс и шкалы, о центре, специалисты, пребывание, истории и отзывы, стоимость, контакты, «как начать» и «прислать выписку», документы и формы.
• Этап 2 · Расширение — глубина и охват. Методы и оборудование детально, wellness-ветка, блог/журнал, FAQ, трансфер, оплата, аккредитация, доп. направления, поиск по сайту.
• Этап 3 · Развитие — сервис и доверие. СМИ о нас, вакансии, памятки, онлайн-оплата и личный кабинет, версия для слабовидящих, регулярный контент.

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

SEO и техническая база, заложенная в структуру

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

• URL и структура. Плоские ЧПУ на латинице, один H1 на страницу, хлебные крошки на всех вложенных.
• Семантика и запросы. Страницы направлений заточены под «реабилитация после …» — основной коммерческий спрос; методы и оборудование — под информационные запросы и закрытие сомнений. Сбор ядра — это отдельная услуга семантического ядра.
• Микроразметка. Schema.org: MedicalClinic, MedicalProcedure на направлениях, Physician на карточках врачей, Review на отзывах, FAQPage на блоках вопросов, BreadcrumbList — под YMYL и расширенные сниппеты.
• Локальное SEO. Яндекс.Бизнес и карты, единый NAP (имя-адрес-телефон) везде, страница контактов с картой и схемой проезда, упор на «Купавна» и «из Москвы» — это локальное продвижение.
• Доступность и скорость. Крупный шрифт и контраст для пожилых, фокус с клавиатуры, alt у фото, бережная анимация, lazy-load, оптимизация Core Web Vitals.
• Юридическое. Политика обработки ПДн и согласие во всех формах, дисклеймер «Имеются противопоказания…» в подвале, лицензия и документы на видном месте — обязательное для медицины.

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

UI-кит и дизайн-система

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

• Палитра. Основной — глубокий зелёный (#2F6A4F) и его оттенки, тёплый акцент (#E2A75A) для кнопок и конверсии, кремовый фон вместо стерильно-белого.
• Типографика. Onest для заголовков (современная, характерная), Golos Text для текста (отлично читается пожилыми), JetBrains Mono для служебных подписей и URL.
• Компоненты. Пилюли-теги, карточки направлений, мега-меню, шаги-сценарии, конверсионные карточки, бейджи этапов, деревовидная карта — единый набор, из которого собирается любая страница.
• Скругления, тени, состояния — заданы токенами (CSS-переменными), поэтому визуал консистентен и легко правится глобально.

Всё это собрано прямо на этой странице ниже — можно листать и кликать. Полный UI-кит — это 21 раздел компонентов: цвет, шрифты, иконки, кнопки, формы, контролы, карточки (направления, истории, «до/после», врачи), программы-пакеты, теги и бейджи, уведомления и тосты, аккордеон-FAQ, шкалы результата, процесс, таблицы и пагинация, отзывы, обследование, галерея, контакты, крупные блоки (шапка, CTA-баннер, подвал), логотип и токены (радиусы, тени, отступы). Всё построено на CSS-переменных, адаптивно и с рабочими состояниями (hover, focus, ошибки).

Какие фишки применены

Коротко — приёмы, которые отличают профессиональную SEO-структуру от «сайта как у всех»:

• Навигация по диагнозу, а не по услугам — структура совпадает с реальным поисковым спросом «реабилитация после …».
• Две аудитории под одним брендом — реабилитация и wellness с разным тоном, но общей инфраструктурой.
• Мега-меню с группировкой 16+ направлений — пожилой пользователь находит свой случай без чтения простыней.
• Плоские ЧПУ на латинице — читаемые URL, которые не придётся переделывать.
• Доверие как отдельные опоры структуры (E-E-A-T под YMYL): лицензии, врачи, истории «до/после», измеримые шкалы Barthel/FIM.
• Полный слой Schema.org под медицину и расширенные сниппеты.
• Поблочные шаблоны с размеченной конверсией — готовое ТЗ для дизайна и разработки.
• Сквозная конверсия «несколько дверей» — до заявки максимум 2 клика.
• Проверка на путях пациента — структура протестирована на трёх реальных сценариях.
• Поэтапный запуск (MVP → расширение → развитие) — продажи стартуют раньше, риск ниже.
• Локальное SEO как аргумент — «Купавна + трансфер из Москвы» вшито в структуру.
• Доступность для пожилых — крупный шрифт, контраст, клавиатура, бережная анимация.
• Дизайн-система на токенах — консистентный UI, который собирается из кубиков.