99 Website System: Создание идеального SEO-сайта на Astro с Claude Code и Fal.ai за $1.50
Пошаговый пайплайн генерации локальных SEO-сайтов на Astro с Claude Code, Fal.ai и Cloudflare: Lighthouse 100%, Schema.org и синхронизация с Google Maps.
Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
🎯 О чём этот конспект: Пошаговый разбор пайплайна «99 Website System» для автоматизированной генерации многостраничных локальных SEO-сайтов с показателями Google Lighthouse 99–100%. Включает связку Claude Code, фреймворка Astro, хостинга Cloudflare Pages, API генерации изображений Fal.ai (Flux) и инструментов парсинга данных.
👤 Кому будет полезно: Вайбкодерам, веб-разработчикам, владельцам диджитал-агентств и локальным предпринимателям, которым нужно массово и предсказуемо создавать конвертящие SEO-сайты под ключ с минимальной себестоимостью.
✨ Что получите: Готовую 7-этапную систему: от глубокого сбора бизнес-контекста и кластеризации ключевых слов до генерации десятков WebP-изображений в едином стиле, микроразметки Schema.org, оптимизации под Agentic Browsing и деплоя на Cloudflare.
1. Архитектура и стек системы «99 Website»: почему Astro и жесткий пайплайн
Контекст: Большинство сайтов терпят неудачу в поисковой выдаче Google не из-за плохого текста, а из-за пропуска базового технического чек-листа: тяжелые изображения, кривая структура заголовков, отсутствие Schema-разметки, медленная загрузка и хаотичные ключевые слова. Полноценный SEO-сайт — это строгий алгоритмический список требований. Чтобы исключить человеческий фактор и галлюцинации нейросетей, процесс разбивается на дискретные фазы с контрольными точками (Human-in-the-Loop), где агент останавливается и ждет утверждения человека. В качестве базы используется фреймворк Astro, отдающий чистый статический HTML с околонулевым объемом клиентского JavaScript.
Тайминг: , ,
Выгода:
99–100% баллов по всем категориям Google Lighthouse.
Себестоимость готового сайта из 24+ страниц с 40+ кастомными фото — около $1.24–$1.50.
Сокращение времени сборки проекта с нескольких дней до 25 минут (при повторном запуске).
Как применить:
Шаг 1: Подготовка изолированного окружения — Создайте отдельную папку под проект или отдельный workspace в терминальном клиенте (например, Claude Code с оберткой CoWork / Cox или официальный Claude Desktop).
Шаг 2: Установка зависимостей и CLI — Убедитесь, что в системе установлены Node.js, Astro CLI, Cloudflare Wrangler CLI и заданы API-ключи для генератора изображений (Fal.ai).
# Инициализация новой папки проектаmkdir local-business-site && cd local-business-site# Проверка и установка Cloudflare Wranglernpm install -g wrangler# Экспорт ключей API в окружениеexport FAL_KEY="ваш_токен_fal_ai"export CLOUDFLARE_API_TOKEN="ваш_токен_cloudflare"
Результат: Подготовленное рабочее окружение с настроенными интеграциями для бесшовного запуска агентных команд.
2. Этап 0 и 1: Настройка и глубокий Business Intake (сбор контекста)
Контекст: Качество финального продукта на 90% зависит не от «идеального промпта», а от полноты контекста бизнеса. На этапе Business Intake агент либо сканирует уже существующий сайт клиента, вытягивая прайс-лист, услуги, географию и уникальные торговые предложения, либо проводит структурированное интервью. Все собранные данные сохраняются в локальный Markdown-файл (business-context.md). Этот файл становится постоянным источником истины (Source of Truth), к которому нейросеть обращается на каждом последующем шаге, что предотвращает деградацию контекстного окна.
Тайминг: , ,
Выгода:
Исключение галлюцинаций относительно цен, контактных данных и перечня услуг.
Экономия токенов за счет фиксации контекста в локальном файле без необходимости повторного объяснения задачи.
Как применить:
Шаг 1: Запуск агента сбора требований — Передайте агенту вводную инструкцию для анализа сайта конкурента/старого сайта или запуска структурированного интервью.
Ты — ведущий бизнес-аналитик и технический SEO-архитектор. Твоя задача — провести глубокий Business Intake для компании.Если предоставлен URL текущего сайта:1. Выполни краулинг всех доступных страниц.2. Извлеки: структуру услуг, цены, зоны обслуживания (города/районы), УТП, целевые действия (форма, звонок, онлайн-запись).3. Задай мне уточняющие вопросы по пробелам в данных.Если URL нет:Задай мне серию персонализированных (не шаблонных) вопросов:- Точное название и физическая локация бизнеса.- Основной Call to Action (звонок или лид-форма).- Полный список основных и сопутствующих услуг.- Ценовая политика и ключевые преимущества перед конкурентами.Сформируй итог в файл `business-summary.md` и жди моего подтверждения перед переходом к исследованию ключевых слов.
Шаг 2: Валидация саммари человеком (Checkpoint 1) — Проверьте сгенерированный business-summary.md, скорректируйте спорные моменты (например, формулировку главного CTA).
Результат: Файл business-summary.md в корне проекта с полным профилем бизнеса, готовый для SEO-проектирования.
3. Исследование ключевых слов и генерация карты сайта (Sitemap Architecture)
Контекст: Типичная ошибка в SEO — погоня за ключами с максимальной частотностью. Для локального бизнеса важнее релевантность и конверсионный интент, чем абстрактный объем трафика. Часто у бизнеса формально «2 услуги», но клиенты ищут их по 8 разным паттернам (например, «дренаж участка», «монтаж французского дренажа», «ливневая канализация»). Подключение агента к поисковым API (например, DataWise) позволяет выгрузить реальные поисковые объемы, конкурентов в выдаче и сформировать матрицу страниц: 1 страница = 1 целевой ключевой запрос.
Тайминг: , ,
Выгода:
Иерархическая структура сайта, исключающая каннибализацию ключевых слов.
Разделение интентов на транзакционные (страницы услуг/локаций) и информационные (статьи блога для захвата околоцелевого трафика).
Как применить:
Шаг 1: Генерация матрицы ключевых слов и структуры — Запустите промпт для построения карты сайта на основе сохраненного бизнес-контекста.
Используя данные из `business-summary.md`:1. Проведи кластеризацию ключевых запросов для локального рынка [Указать город/регион].2. Создай структуру URL по принципу: - Главная: общий высокочастотный локальный ключ (напр. "Charlotte Landscaping"). - Услуги (/services/[service-slug]): узкие коммерческие ключи (напр. /services/lawn-care, /services/retaining-walls). - Локации (/areas-served/[city-slug]): гео-страницы под каждый обслуживаемый район. - Блог (/blog/[topic-slug]): информационные запросы с калькуляторами и разбором цен (напр. "French drain cost").3. Экспортируй результат в файлы: - `keywords.csv` (столбцы: Keyword, Search Intent, Target URL, Priority) - `sitemap-plan.md` (полное дерево страниц) - `content-plan.md` (темы для блога)
Шаг 2: Верификация структуры (Checkpoint 2) — Убедитесь, что все реальные услуги компании покрыты отдельными посадочными страницами.
Результат: Файлы keywords.csv и sitemap-plan.md, служащие жестким ТЗ для генерации контента и роутинга в Astro.
4. Конверсионный дизайн и «Правило 2 секунд» (2C Rule)
Контекст: Сайты, созданные ИИ без жестких дизайн-ограничений, часто страдают типичными болезнями: кислотные градиенты, абстрактные плавающие фигуры (blobs), избыточные parallax-эффекты и scroll-анимации, которые ломают верстку на мобильных и роняют показатели Core Web Vitals. Для локального бизнеса дизайн должен быть предельно утилитарным и подчиняться «Правилу 2 секунд» (2-Second Clarity Rule): в первые 2 секунды после открытия любой страницы посетитель должен однозначно понять три вещи:
Какую конкретно услугу вы оказываете.
В каком конкретно городе/районе.
Какое целевое действие от него ожидается прямо сейчас (позвонить или оставить заявку).
Отсутствие мусорного CSS/JS кода, обеспечивающее мгновенный First Contentful Paint (FCP).
Как применить:
Шаг 1: Формирование дизайн-системы без AI-клише — Задайте агенту строгие правила визуального оформления компонентов Astro.
Создай дизайн-систему и базовые UI-компоненты на Tailwind CSS для Astro:ЖЕСТКИЕ ПРАВИЛА:1. Запрещены: градиенты, фоновые blobs, parallax-скролл, тяжелые JS-анимации.2. Внедрить "Правило 2 секунд" (2C Rule) в первый экран (Hero Section) на ВСЕХ страницах: - Четкий H1 с указанием услуги и локации (напр. "Retaining Wall Installation in Charlotte, NC"). - Два контрастных CTA: кнопка "Получить расчет" (открывает модалку/якорь на форму) и кликабельный номер телефона "Позвонить сейчас". - Реалистичное фоновое/соседнее фото конкретного результата работы.3. Цветовая палитра: строгая, корпоративная, соответствующая нише (2 основных цвета + 1 акцентный для CTA).4. Продемонстрируй код `Hero.astro` и `Header.astro` для утверждения.
Шаг 2: Утверждение дизайн-языка (Checkpoint 3) — Проверьте Hero-блок в браузере перед масштабной генерацией остальных страниц.
Результат: Легковесные, высококонверсионные шаблоны первого экрана и дизайн-система на Tailwind CSS.
5. Пакетная генерация реалистичных фото через Fal.ai (Flux) и оптимизация под WebP
Контекст: Генерация изображений «на лету» во время сборки каждой отдельной страницы приводит к разрозненному стилю: на одной странице фото яркое и глянцевое, на другой — тусклое или мультяшное. Правильный подход: сначала собрать полный скелет сайта с плейсхолдерами, составить точный реестр всех требуемых изображений (Hero-баннеры, карточки услуг, 4 пошаговых фото процесса выполнения работы на каждую услугу), а затем пакетно сгенерировать их через API Fal.ai с использованием моделей Flux Pro. Промпты должны содержать единый модификатор стиля и реальную геолокацию, имитируя работу одного штатного фотографа.
Тайминг: , , ,
Выгода:
40+ кастомных реалистичных фото в едином стиле обходятся суммарно в $1.20–$1.50.
Все изображения автоматически сохраняются в формате .webp с минимальным весом и прописанными SEO Alt-тегами.
Как применить:
Шаг 1: Составление спецификации изображений — Сформируйте список изображений на основе структуры страниц:
Проанализируй все страницы из `sitemap-plan.md` и составь манифест генерации `images-manifest.json`.Для каждой услуги требуется:1. Главное фото услуги (Hero).2. 4 пошаговых фото процесса (Process step 1..4: подготовка, монтаж, финиш, результат).Требования к промптам для Fal.ai (Flux Pro):- Стиль: профессиональная фотография на полнокадровую камеру 35mm, естественное дневное освещение в [Название города].- Никаких ИИ-артефактов, перенасыщенности и неестественного глянца.- Конвертировать весь вывод в формат .webp и положить в `public/images/`.- Сгенерировать релевантные Alt-теги с вхождением ключевых слов.
Шаг 2: Выполнение скрипта пакетной генерации — Запустите обращение к API Fal.ai через Claude Code или Node.js скрипт.
// Пример вызова Fal.ai Flux Proimport { fal } from "@fal-ai/client";async function generateImage(prompt, outputPath) { const result = await fal.subscribe("fal-ai/flux-pro", { input: { prompt: `${prompt}, authentic residential photography, shot on Sony A7IV, natural lighting, realistic textures, Charlotte NC setting`, image_size: "landscape_16_9", output_format: "webp" } }); // Сохранение файла в public/images/...}
Результат: Папка public/images/ с оптимизированными .webp файлами и таблица сопоставления URL изображений с Alt-тегами.
6. Технический SEO-аудит: Schema.org, Agentic Browsing и Google Lighthouse 100%
Контекст: Полноценная поисковая оптимизация современного сайта включает не только классические метатеги (Title, H1, Meta Description), но и глубокую семантическую микроразметку Schema.org (LocalBusiness, Service, FAQPage), а также оптимизацию под ИИ-поисковики (Agentic Browsing / Perplexity / GPT Search). При тестировании на Cloudflare Pages (staging-домен *.pages.dev) оценка SEO в Lighthouse может показывать заниженный балл из-за системного тега noindex — это нормальное поведение до привязки кастомного продакшен-домена. Все остальные категории (Performance, Accessibility, Best Practices) должны строго показывать 100%.
Тайминг: , , ,
Выгода:
Попадание в расширенные сниппеты Google (Rich Snippets).
Готовность сайта к индексации автономными ИИ-агентами (Agentic SEO).
Идеальный балл 100/100 в Chrome Lighthouse.
Как применить:
Шаг 1: Внедрение глобальной и постраничной Schema.org разметки — Добавьте генерацию JSON-LD в базовый layout Astro:
Шаг 2: Прогон через Chrome DevTools Lighthouse — Откройте страницу, нажмите F12 -> вкладка Lighthouse -> выберите все категории (Performance, Accessibility, Best Practices, SEO) -> нажмите Analyze page load.
Шаг 3: Исправление ошибок — Если балл ниже 98–100%, скормите лог ошибок Claude Code для мгновенного исправления контрастности или отсутствующих атрибутов aria-label.
Результат: Полностью валидный код со структурированными данными и высшим баллом производительности.
7. Деплой на Cloudflare, привязка домена и синхронизация с Google Business Profile
Контекст: Завершающий этап пайплайна — вывод сайта в продакшен. Хостинг на Cloudflare Pages дает бесплатный глобальный CDN, автоматическое сжатие ресурсов и мгновенную инвалидацию кэша. После делегирования DNS и подключения домена critical-важно подтвердить сайт в Google Search Console и синхронизировать список услуг на сайте с карточкой компании в Google Business Profile (GBP). Если на сайте создано 8 страниц услуг, эти же 8 услуг должны быть буква в букву добавлены в панель Google Business Profile — это ключевой триггер для попадания в локальный Map Pack (топ-3 на картах).
Тайминг: , ,
Выгода:
Бесплатный высокоскоростной глобальный хостинг с поддержкой SSL.
Максимальный синергетический эффект между органической выдачей Google и локальным блоком Google Maps.
Как применить:
Шаг 1: Сборка и деплой на Cloudflare Pages через CLI — Выполните сборку проекта и публикацию через Wrangler:
# Сборка статического сайта Astronpm run build# Деплой папки dist в Cloudflare Pagesnpx wrangler pages deploy dist --project-name local-seo-site
Шаг 2: Привязка домена в Cloudflare Dashboard — Перейдите в раздел Custom Domains созданного проекта Pages и добавьте основной домен.
Шаг 3: Верификация в Google Search Console (GSC) — Добавьте DNS TXT-запись через Cloudflare DNS для мгновенной верификации домена и отправьте sitemap.xml.
Шаг 4: Синхронизация услуг в Google Business Profile (GBP) — Откройте профиль компании в Google, перейдите в раздел «Услуги» (Services) и создайте пункты меню, строго дублирующие заголовки H1 с посадочных страниц вашего сайта.
Результат: Работающий на кастомном домене сайт с полной индексацией в GSC и идеальной связкой с Google Картами.
FAQ
В: Почему именно Astro, а не Next.js или WordPress? О: Astro по умолчанию компилирует страницы в чистый HTML без лишнего JavaScript («Zero JS by default»). Это обеспечивает почти мгновенную загрузку страниц на мобильных устройствах и гарантирует 100 баллов в тестах Google Lighthouse без сложной ручной оптимизации, что критично для ранжирования.
В: Почему на staging-домене Cloudflare Pages Lighthouse SEO показывает не 100%? О: По умолчанию Cloudflare Pages отдает заголовок X-Robots-Tag: noindex для технических доменов *.pages.dev, чтобы поисковые роботы не индексировали черновики. После привязки основного домена этот тег снимается, и показатель SEO поднимается до 100%.
В: Сколько реально стоит создание одного такого сайта? О: При использовании связки Claude Code (по подписке или API) и Fal.ai для генерации 24–44 фото высокого разрешения через Flux Pro затраты на генерацию изображений составляют около $1.20–$1.50. Хостинг на Cloudflare Pages бесплатен.
В: Что такое «Правило 2 секунд» (2C Rule) в веб-дизайне? О: Это принцип компоновки первого экрана: пользователь за первые 2 секунды должен без скролла понять: 1) какую услугу предлагает компания, 2) в каком городе/локации, 3) какое конкретное действие нужно совершить (позвонить или нажать кнопку заявки).
В: Зачем генерировать по 4 фото процесса на каждую страницу услуги? О: Пошаговые уникальные фото процесса выполнения работ («Process Photos») делают контент каждой сервисной страницы уникальным в глазах поисковика Google. Это предотвращает признание страниц дубликатами и резко повышает шансы на 100% индексацию всех URL сайта.
В: Обязательно ли переносить домен именно на Cloudflare Registrar? О: Нет, не обязательно. Вы можете оставить домен у любого регистратора (Namecheap, Hostinger и т.д.), но переключить NS-серверы на Cloudflare. Это позволит бесплатно пользоваться CDN, SSL и удобным DNS-менеджментом для Google Search Console.
В: Что такое Agentic Browsing и почему это важно в 2025–2026 годах? О: Это готовность структуры сайта к чтению автономными ИИ-агентами (Perplexity, ChatGPT Search, Google Gemini). Чистый семантический HTML, четкая иерархия заголовков и микроразметка Schema.org позволяют ИИ-агентам легко извлекать факты о компании и рекомендовать ее в ответах пользователям.
Ресурсы и ссылки
Astro — Веб-фреймворк для контентно-ориентированных и быстрых сайтов — упомянут в видео.
Fal.ai — Платформа для инференса ИИ-моделей генерации изображений (Flux Pro) — упомянут в видео.
Cloudflare Pages & Wrangler CLI — Платформа хостинга и бессерверного деплоя — упомянут в видео.
DataWise — Инструмент для парсинга и анализа реального объема ключевых слов — упомянут в видео.
AI Ranking School — Премиум-сообщество автора по локальному SEO и ранжированию — упомянут в видео.
Конспект создан на основе видео «How to Build a 99+ SEO Score Website with AI» канала Wes McDowell / AI Ranking. Все права на оригинальный материал принадлежат авторам.Источник: https://www.youtube.com/watch?v=1w3X1RxudYY
