On-Page SEO Анализатор
AgriciDaniel/on-page-seoИнструмент для on-page SEO аудита: анализирует до 500 страниц по 74 метрикам, отслеживает Core Web Vitals, обнаруживает страницы через Firecrawl и DataForSEO. Подходит для маркетологов и разработчиков.
Установка
git clone https://github.com/AgriciDaniel/on-page-seo.gitREADME
On-Page SEO Анализатор
Комплексный инструмент для on-page SEO анализа, который помогает проводить аудит и оптимизировать SEO-показатели вашего сайта. Анализируйте до 500 страниц одновременно с детальными данными по 74 SEO-метрикам.
Как это было создано
Смотрите на YouTube: от n8n-воркфлоу до полноценного приложения
Возможности
- Обнаружение страниц: автоматическое сканирование страниц сайта через Firecrawl
- Комплексный анализ: 74 SEO-метрики на каждую страницу через DataForSEO
- Core Web Vitals: отслеживание показателей LCP, FID и CLS
- Прогресс в реальном времени: наблюдайте за ходом аудита с live-обновлениями
- Экспорт результатов: выгрузка отчётов в CSV или JSON
- Тёмная тема: полная поддержка dark mode
Технологический стек
Frontend:
- React 19 с TypeScript
- Vite для быстрой сборки
- TanStack Router и React Query
- Tailwind CSS с компонентами Shadcn/ui
- Recharts для визуализации данных
Backend:
- Node.js с Express
- SQLite (better-sqlite3)
- TypeScript
- Firecrawl API для обнаружения страниц
- DataForSEO API для SEO-анализа
Требования
- Node.js 18+
- npm или yarn
- Firecrawl API Key
- Аккаунт DataForSEO
Быстрый старт
1. Клонируйте репозиторий
git clone https://github.com/AgriciDaniel/on-page-seo.git
cd on-page-seo2. Установите зависимости
# Установка всех зависимостей (root, client и server)
npm run install:all3. Настройте окружение
cp .env.example .env
Отредактируйте .env, указав свои настройки, или задайте API-ключи через страницу настроек приложения.
4. Запустите серверы разработки
npm run dev
Запускает клиент (http://localhost:3005) и сервер (http://localhost:3001) одновременно.
Скрипты
| Команда | Описание |
|---|---|
npm run dev | Запустить клиент и сервер в режиме разработки |
npm run dev:client | Запустить только клиент |
npm run dev:server | Запустить только сервер |
npm run build | Собрать клиент и сервер для продакшена |
npm run start | Запустить продакшен-сервер |
npm run install:all | Установить зависимости для root, client и server |
Структура проекта
on-page-seo/
├── client/ # React frontend
│ ├── src/
│ │ ├── components/ # Переиспользуемые UI-компоненты
│ │ ├── features/ # Модули по функциональности
│ │ ├── lib/ # API-клиент и утилиты
│ │ ├── routes/ # Маршруты TanStack Router
│ │ └── types/ # TypeScript-типы
│ └── ...
├── server/ # Express backend
│ └── src/
│ ├── routes/ # API-маршруты
│ ├── services/ # Бизнес-логика
│ └── db/ # Слой базы данных
├── shared/ # Общие типы
│ └── types/
├── data/ # SQLite база данных
└── ...
API Endpoints
| Метод | Endpoint | Описание |
|---|---|---|
| POST | /api/audits | Запустить новый SEO-аудит |
| GET | /api/audits | Список всех аудитов |
| GET | /api/audits/:id | Получить детали аудита с результатами |
| GET | /api/audits/:id/progress | SSE-поток для прогресса в реальном времени |
| GET | /api/audits/:id/export | Экспорт аудита в CSV или JSON |
| DELETE | /api/audits/:id | Удалить аудит |
| GET | /api/settings | Получить статус конфигурации API |
| PUT | /api/settings | Обновить API-учётные данные |
Деплой в продакшен
Сборка для продакшена
npm run build
Запуск продакшен-сервера
NODE_ENV=production npm run start
Сервер будет раздавать собранные файлы клиента и обрабатывать API-запросы на одном порту.
Участие в разработке
Вклад приветствуется! Не стесняйтесь отправлять Pull Request.
Лицензия
Проект распространяется под лицензией MIT — подробности в файле LICENSE.
Для полного пайплайна от анализа до публикации контента смотрите Rankenstein.
Автор
Создано Agrici Daniel — архитектором AI-воркфлоу.
- Блог — глубокие разборы AI-автоматизации маркетинга
- AI Marketing Hub — бесплатное сообщество, 2800+ участников
- YouTube — туториалы и демо
- Все open-source инструменты