Коротка відповідь

Програми з кодом Vibe відображаються на стороні клієнта, тому сканери бачать порожній <div>. Ви виправляєте це, розміщуючи Cloudflare Worker між вашим доменом і Lovable, який повертає роботам HTML-код, відтворений сервером, або переміщуючи проект у реальний стек (Claude Code + Supabase + Vercel), перш ніж інвестувати в маркетинг.

Такі інструменти, як Lovable, Bolt і v0, чудово підходять для реалізації ідеї за день. Вони не дивовижні в SEO. Вся сторінка є пакетом React на стороні клієнта, що означає, що Googlebot під час першого сканування бачить порожній <div id="root" />. Немає вмісту. Без заголовків. Без схеми. Немає рейтингів. Для MVP, який покладається на органічний трафік, це проблема року заснування.

Ось два виправлення, які ми використовуємо в Start Apps Studio, упорядковані від найменшого зусилля до найбільшого результату.

Виправлення 1: проксі Cloudflare Worker SSR

Cloudflare Worker стоїть між вашим доменом і Lovable. Коли надходить запит, Worker перевіряє User-Agent: реальні відвідувачі, як зазвичай, пересилаються на Lovable; боти (Googlebot, Bingbot, GPTBot, PerplexityBot, ClaudeBot) отримують відтворений сервером HTML із реальним вмістом і повною розміткою схеми з тієї самої URL-адреси.

Це не маскування, якщо це зроблено правильно. Вміст, який отримує бот, має збігатися з тим, що зрештою бачить користувач після виконання JS. Налаштування складається з двох кроків:

  1. Додайте один CNAME до свого DNS, який спрямовує ваш власний домен на Cloudflare Worker.
  2. Вставте одну підказку всередину Lovable, щоб працівник мав канонічний інвентар сторінки для рендерингу на сервері.

Виправлення 2: перейдіть з Lovable за допомогою Claude Code

Worker виграє вам час. Але якщо застосунок має серйозно ранжуватися, обробляти динамічний вміст або через рік підтримуватися людьми, варто перейти на «звичайний» вебстек. Найшвидший спосіб, який ми бачили, — доручити міграцію Claude Code.

10-кроковий рецепт міграції

  1. Завантажте свій проєкт Lovable на GitHub, щоб Claude міг легко з ним працювати.
  2. Встановіть Claude Code локально, щоб він міг безпосередньо читати та редагувати ваше репо.
  3. Укажіть Claude ваш репозиторій (віддалений GitHub-репозиторій або локальний шлях).
  4. Створіть проєкт Supabase для бази даних і автентифікації (приблизно п’ять хвилин).
  5. Попросіть Claude перенести проєкт із Lovable таким запитом: «Перенеси цей проєкт Lovable у звичайний вебстек і впорядкуй репозиторій».
  6. Налаштувати хостинг на Vercel. Безкоштовний рівень охоплює більшість MVP.
  7. Запитайте Claude, які змінні середовища та API-ключі потрібні; він напрочуд добре їх визначає.
  8. Згенеруйте ключі та створіть файл .env (ключі Supabase, маркери API тощо).
  9. Попросіть Claude налаштувати розгортання. Він може налаштувати потік GitHub → Vercel і підключити Supabase.
  10. Виправляйте все, що зламається, просячи Claude налагоджувати по одній помилці за раз.

Це налаштування є більш гнучким, ніж сам Lovable. Ви перестаєте платити кредити за кожну підказку за зміни програми, і ви можете повернутися до безкоштовних моделей для невеликих редагувань, оскільки Lovable вже використовує Claude під капотом для більшої частини свого покоління.

Гібрид Lovable + Claude

Якщо ви в середині проєкту й не готові до міграції, є проміжний шлях, перевірений кількома користувачами r/lovable: підключіть Lovable до GitHub, а потім надайте Claude Code доступ до того самого репозиторію. Claude працює на рівні над Lovable, допомагаючи зі складними функціями, налагодженням і вдосконаленнями, тоді як ви виконуєте SQL безпосередньо в Supabase для змін у базі даних (Lovable не бере плату за запуск запиту, тож це безкоштовно).

Результати: менше спалених кредитів на компонентах блокування (користувачі повідомляють про понад 100 кредитів, збережених на одному компоненті), краще оброблення заплутаної логіки та, що важливо для цієї статті, достатній контроль над виведеним HTML, щоб ви могли поступово модифікувати SSR і схему.

Яке виправлення вибрати?

  • Лише маркетинговий сайт або цільова сторінка → Cloudflare Worker SSR. Найдешевший, найшвидший.
  • Продукт із динамічним вмістом, який потребує рейтингу → перейти на Claude Code + Supabase + Vercel.
  • У середині проєкту й не можете перебудувати → гібрид Lovable + Claude, а потім поступово додайте SSR на важливих сторінках.

Часті запитання

Чому Google не може напряму проіндексувати сторінки Lovable?

Lovable доставляє пакет React, відрендерений клієнтом, тому початковий HTML є порожнім кореневим div. Сканування Googlebot першого проходу захоплює цей порожній HTML; він може (або не може) повернутися пізніше для відтворення JavaScript. Для нових доменів без повноважень рендеринг другого проходу часто ніколи не запускається.

Чи вважається виправлення Cloudflare Worker маскуванням?

Ні, якщо бот бачить той самий вміст, що й користувач, коли виконується JS. Обслуговування ботів попередньо відрендереного HTML є усталеним шаблоном SEO; це стає маскуванням, лише якщо ви надаєте різний вміст роботам, ніж користувачам.

Скільки коштує повна міграція?

DIY: вихідні та безкоштовний обліковий запис Vercel + Supabase. Надається Start Apps Studio: зазвичай близько одного спринту, включеного в наш пакет MVP Production.

Чи можу я продовжити візуальне редагування після міграції?

Ви втрачаєте вбудований редактор Lovable, але отримуєте звичайний цикл розробки й можете додати до репозиторію будь-який візуальний інструмент (або інший ШІ-конструктор). Більшість команд не сумують за ним, коли бачать, наскільки швидше ітерує Claude Code.