Коротко: seo7.es — наша собственная площадка полного цикла. Трёхъязычный сайт, блог со статьями, которые генерирует ИИ-фабрика, портфолио кейсов, калькулятор услуг с корзиной, брифинг с ИИ и админ-панель работают на одном бэкенде. Мы сделали для себя ровно то, что делаем клиентам, поэтому витрина возможностей студии одновременно служит её рабочим инструментом.
Клиент: собственный проект SEO7 · Сайт: https://seo7.es · Категория: платформа студии
Что главное в проекте?
- Три языка из коробки: русский, español и English, с языковым контролем против смешения локалей.
- Блог с ИИ-фабрикой статей под классический поиск, ответные блоки и нейросети.
- Калькулятор услуг с корзиной: клиент сам собирает смету и видит цену до разговора.
- Пререндеринг страниц ради поисковых и ИИ-краулеров, которые почти не исполняют JavaScript.
- Шесть страниц направлений и портфолио кейсов с внутренними страницами.
- Собственная админка для контента, блога и заявок.
На чём собран проект?
- Frontend:
- React 18 + Vite + TypeScript + Tailwind CSS v3
- Backend:
- Node.js (Express) + Prisma ORM + MySQL
- ИИ:
- каскадная генерация и перевод статей, языковой QA-гейт против смешения локалей
- SEO-инфраструктура:
- пререндеринг SPA (SSG) под поисковики и AI-краулеры, sitemap, robots, llms.txt, JSON-LD Schema.org
- Дизайн:
- золотое сечение, анимации framer-motion, самохостинг шрифтов (Manrope), без render-blocking
- Деплой:
- статичный фронт, бэкенд на VPS, CI с автодеплоем
С чего всё началось?
Студии нужен был не сайт, а доказательство. Показать клиенту скриншоты чужих проектов может каждый, а вот отдать ссылку на собственную платформу и сказать «вот так у вас и будет работать» может не всякий.
Поэтому свою площадку строили по тем же правилам, что и клиентские: производительность, доступность, микроразметка, трёхъязычность и пререндеринг под краулеров. Всё то, что мы обычно защищаем в чужих проектах, здесь пришлось выдержать на себе.
Второй смысл платформы прикладной. Калькулятор считает смету без нашего участия, ИИ-брифинг собирает задачу словами клиента, блог наполняется фабрикой статей, а заявки падают в админку. Витрина работает как инструмент, а не как папка со скриншотами.
Что реализовано?
🌐 Из каких страниц состоит сайт?
- Главная с анимированным hero: золотое сечение, ротатор слова с бликом, бегущая лента реальных кейсов
- Прелоудер бренда «SEO7.ES» с переливающимся бликом до загрузки приложения
- Отдельные мобильный и десктопный hero-компоненты (не «сжатый десктоп»)
- Верхнее меню (CardNav) с локалями, поиском и логином, сворачивающийся логотип при скролле
- Страница «О студии», «Контакты», футер с белым логотипом
- Скролл-индикатор, плавные переходы между секциями
- Адаптив под 375 / 768 / 1024 / 1440, без горизонтального скролла
🧭 Как устроены 6 страниц направлений?
- Создание сайтов, SEO, ИИ-SEO, реклама/трафик, ИИ-боты, автоматизация
- На каждой — H2/lead под локаль, пакеты, сетка микро-услуг, направленный CTA
- Tier-разметка функций (Start / Pro / Max) с легендой и цветовой шкалой
- Раскрытие пакета на 3–4 колонки с анимацией ~1 сек, тултипы на этапах
- Локальные козыри в topFeatures, измеримые KPI в гарантиях
🧮 Как работают калькулятор услуг и корзина?
- Интерактивный выбор микро-услуг по 6 направлениям, цена в реальном времени
- Глобальная корзина «Ваш набор» (PricingCartContext), боковая панель (Drawer)
- Подарки от агентства: дешёвые из выбранного + базовый пул бонусов
- Чекбоксы на строках этапов, deep-link на раскрытую карточку услуги
- Страница /precios с 6 направлениями и таблицей спецпредложений
📝 Как устроен блог с искусственным интеллектом?
- Автогенерация статей в формате «эталон»: SEO + AEO + GEO в одной структуре
- Базовый язык ES → перевод на RU/EN с языковым QA-гейтом (детект кириллицы в es/en)
- Атомарные блоки 40–60 слов, Quick Answer, definition boxes, цитаты экспертов
- FAQ-блок с FAQPage Schema, связанные статьи, внутренняя перелинковка
- Статья = одна запись с тремя локалями (etalonData), draft/published
- Автоматизация публикации, генерация обложек, плановые джобы
💼 Как показаны портфолио и кейсы?
- Витрина проектов: карточки с реальными скриншотами (ноутбук + телефон, DeviceDuo)
- Страница кейса: split-hero, фишки 2×2, блок устройств, список функций, FAQ
- Бегущая лента проектов на главной (десктоп — hover-подсказки, мобайл — свайп)
- Листинг /portfolio с JSON-LD ItemList / CollectionPage
- Sitemap кейсов подтягивается из реестра при сборке
🌍 Как сделана мультиязычность (RU / ES / EN)?
- Три полноценные локали, автоопределение языка по маршруту
- hreflang между локалями, канонические URL, чистка трекинговых параметров
- Отдельный контент на каждой странице, без машинного «налёта»
- Защита от протекания одного языка в поля другого (на уровне генерации и валидации)
🔍 Что сделано для SEO?
- Компонент <SEO>/PageSeo: title, description, OG/Twitter, canonical, robots
- sitemap.xml и robots.txt, генерация sitemap из данных при сборке
- Единый граф Schema.org (@graph): Organization, WebSite, BreadcrumbList
- Пререндеринг страниц в статический HTML для индексации поисковиками
🤖 Что сделано для GEO и AI-поиска?
- llms.txt для управления доступом LLM к контенту
- Контент-структура под цитируемость в ChatGPT, Perplexity, AI Overviews
- JSON-LD рендерится в DOM (вне Helmet) — виден краулерам без JS
- Schema.org Article + FAQPage на статьях блога
♿ Как обеспечена доступность (WCAG 2.2 AA)?
- Один h1 на экран (визуальные заголовки — div, SEO-h1 — sr-only)
- Видимые фокус-стейты, aria-метки на иконочных кнопках, alt у изображений
- Контраст по AA, закрытие тултипов по Escape, aria-hidden у декора
- Учёт prefers-reduced-motion во всех анимациях (ротатор, лента, блики)
⚡ Как ускорен сайт?
- Самохостинг шрифтов (Manrope) без render-blocking Google Fonts
- Ленивая загрузка изображений, width/height против скачков layout (CLS)
- Код-сплит по маршрутам, анимации только на transform/opacity
- Пререндер ключевых страниц → быстрый первый экран
🎨 Как устроены дизайн-система и анимации?
- Дизайн-токены (--c-*), единый макет шириной 1400px, типографика Manrope
- Пропорции по золотому сечению (φ≈1.618): ритм, тайминги бликов, сплит-колонки
- Оркестрованные анимации: слово → блик слова → блики кнопок → смена
- Онлайн-страница /style-guide как источник правды по стилю
🗂 На чём работают бэкенд и API?
- Express + Prisma ORM + MySQL, сервисный ключ для автоматизаций
- Эндпоинты блога, генерации статей, брифинга, заявок
- Усечение полей под лимиты БД, идемпотентная перегенерация по slug
- Логирование фронтенд-ошибок с троттлингом в админку
🛠 Что умеет админ-панель?
- Отдельная панель управления контентом, блогом и заявками
- Локаль-табы при редактировании, статусы draft/published
- Frontend-логи ошибок, настройки и сервисные операции
📦 Как устроены DevOps и деплой?
- Статичный фронт + бэкенд на VPS, CI с автодеплоем по push
- Healthcheck после деплоя, бэкапы базы
- Раздельные окружения (dev / прод), переменные окружения без секретов в коде
Какой результат?
| Показатель | Значение |
|---|---|
| Языковых версий | 3: русский, español, English |
| Направлений услуг на сайте | 6 |
| Блог | статьи генерирует ИИ-фабрика |
| Расчёт стоимости | калькулятор с корзиной, без звонка |
| Подготовка под краулеров | пререндеринг, sitemap, robots, llms.txt, Schema.org |
| Доступность | стандарт WCAG 2.2 AA |
| Деплой | CI с автодеплоем по push и healthcheck |
| Сборка и деплой после push | около 7 минут |
| Ответ на заявку с сайта | 24-48 часов |