Kurzantwort

Vibe-codierte Apps werden clientseitig gerendert, sodass Crawler ein leeres <div> sehen. Sie beheben das Problem, indem Sie entweder einen Cloudflare Worker zwischen Ihre Domain und Lovable setzen, der vom Server gerendertes HTML an Bots zurückgibt, oder indem Sie das Projekt auf einen echten Stack (Claude Code + Supabase + Vercel) migrieren, bevor Sie in Marketing investieren.

Tools wie Lovable, Bolt und v0 eignen sich hervorragend, um innerhalb eines Nachmittags eine Idee umzusetzen. Sie sind keine herausragenden SEO-Experten. Die gesamte Seite ist ein clientseitiges React-Bundle, was bedeutet, dass Googlebot beim ersten Crawlen ein leeres <div id="root" /> sieht. Kein Inhalt. Keine Überschriften. Kein Schema. Keine Rangliste. Für einen MVP, der auf organischen Traffic setzt, ist das ein Problem aus dem Gründungsjahr.

Hier sind die beiden Fixes, die wir bei Start Apps Studio verwenden, geordnet vom kleinsten Aufwand bis zum größten Gewinn.

Lösung 1: Cloudflare Worker SSR-Proxy

Ein Cloudflare Worker sitzt zwischen Ihrer Domain und Lovable. Wenn eine Anfrage eingeht, überprüft der Worker den User-Agent: Echte Besucher werden wie gewohnt an Lovable weitergeleitet; Bots (Googlebot, Bingbot, GPTBot, PerplexityBot, ClaudeBot) erhalten vom Server gerendertes HTML mit echtem Inhalt und vollständigem Schema-Markup von derselben URL.

Dies ist kein Cloaking, wenn es richtig gemacht wird. Der Inhalt, den der Bot empfängt, muss mit dem übereinstimmen, was der Benutzer schließlich sieht, sobald der JS ausgeführt wird. Die Einrichtung besteht aus zwei Schritten:

  1. Fügen Sie Ihrem DNS einen CNAME hinzu, der Ihre benutzerdefinierte Domäne auf den Cloudflare Worker verweist.
  2. Fügen Sie eine Eingabeaufforderung in Lovable ein, damit der Worker über ein kanonisches Seiteninventar verfügt, aus dem er auf dem Server rendern kann.

Fix 2: Mit Claude Code von Lovable migrieren

Der Arbeiter verschafft Ihnen Zeit. Wenn die App jedoch in einem Jahr seriös ranken, dynamische Inhalte verarbeiten oder von Menschen gewartet werden muss, sollten Sie auf einen „normalen“ Web-Stack umsteigen. Der schnellste Weg, den wir gesehen haben, besteht darin, Claude Code die Migration für Sie durchführen zu lassen.

Das 10-stufige Migrationsrezept

  1. Schieben Sie Ihr Lovable-Projekt auf GitHub, damit Claude problemlos damit arbeiten kann.
  2. Installieren Sie Claude Code lokal, damit Ihr Repo direkt gelesen und bearbeitet werden kann.
  3. Zeigen Sie Claude auf Ihr Repo (GitHub-Remote- oder lokaler Pfad).
  4. Erstellen Sie ein Supabase-Projekt für Datenbank und Authentifizierung (ca. fünf Minuten).
  5. Bitten Sie Claude mit der folgenden Eingabeaufforderung, das Projekt von Lovable weg zu migrieren: „Migrieren Sie dieses Lovable-Projekt in einen normalen Web-Stack und organisieren Sie das Repo sauber.“
  6. Hosting auf Vercel einrichten. Das kostenlose Kontingent deckt die meisten MVPs ab.
  7. Fragen Sie Claude, welche Umgebungsvariablen und API-Schlüssel erforderlich sind. Es ist überraschend gut darin, sie zu identifizieren.
  8. Generieren Sie die Schlüssel und erstellen Sie eine .env-Datei (Supabase-Schlüssel, API-Token usw.).
  9. Bitten Sie Claude, die Bereitstellung zu konfigurieren. Es kann den GitHub → Vercel-Flow vernetzen und Supabase verbinden.
  10. Beheben Sie alles, was kaputt geht, indem Sie Claude bitten, einen Fehler nach dem anderen zu debuggen.

Dieses Setup ist letztendlich flexibler als Lovable selbst. Sie zahlen keine Credits mehr pro Eingabeaufforderung für App-Änderungen und können für kleine Änderungen auf kostenlose Modelle zurückgreifen, da Lovable Claude bereits die meiste Zeit seiner Generation unter der Haube verwendet.

Der Lovable- + Claude-Hybrid

Wenn Sie sich mitten im Projekt befinden und noch nicht bereit für die Migration sind, gibt es einen Mittelweg, den mehrere r/lovable-Benutzer validiert haben: Verbinden Sie Lovable mit GitHub und gewähren Sie Claude Code dann Zugriff auf dasselbe Repo. Claude sitzt auf einer Ebene über Lovable und führt es durch komplexe Funktionen, Debugging und Verbesserungen, während Sie SQL direkt in Supabase für Datenbankänderungen ausführen (Lovable berechnet für die Ausführung einer Abfrage keine Kosten, ist also kostenlos).

Ergebnisse: weniger verbrannte Credits für blockierende Komponenten (Benutzer berichten, dass mehr als 100 Credits für eine einzelne Komponente eingespart wurden), besserer Umgang mit verwickelter Logik und, was für diesen Artikel entscheidend ist, genügend Kontrolle über den Ausgabe-HTML, sodass Sie SSR und Schema inkrementell nachrüsten können.

Welchen Fix sollten Sie wählen?

  • Nur Marketing-Site oder Landingpage → Cloudflare Worker SSR. Am günstigsten, am schnellsten.
  • Produkt mit dynamischem Inhalt, das ranken muss → auf Claude Code + Supabase + Vercel migrieren.
  • Mitten im Projekt und kann nicht neu erstellt werden → Lovable + Claude-Hybrid, dann SSR auf den wichtigen Seiten nachrüsten.

Häufig gestellte Fragen

Warum kann Google Lovable-Seiten nicht direkt indizieren?

Lovable liefert ein vom Client gerendertes React-Bundle, sodass der anfängliche HTML-Code ein leeres Root-Div ist. Der First-Pass-Crawling des Googlebot erfasst diesen leeren HTML-Code. Es kann später zurückkommen (oder auch nicht), um JavaScript zu rendern. Bei neuen Domänen ohne Autorität wird das Rendern im zweiten Durchgang oft nie ausgelöst.

Gilt der Cloudflare Worker-Fix als Cloaking?

Nicht, wenn der Bot denselben Inhalt sieht, den ein Benutzer schließlich sieht, sobald JS ausgeführt wird. Das Bereitstellen von vorgerendertem HTML für Bots ist ein etabliertes SEO-Muster. Es wird nur dann zum Cloaking, wenn Sie Bots andere Inhalte bereitstellen als Benutzern.

Wie viel kostet die vollständige Migration?

DIY: ein Wochenende und ein kostenloses Vercel + Supabase-Konto. Wird von Start Apps Studio bereitgestellt: in der Regel etwa ein Sprint, gebündelt in unserem MVP-Produktionspaket.

Kann ich die visuelle Bearbeitung nach der Migration fortsetzen?

Sie verlieren den browserinternen Editor von Lovable, erhalten aber eine normale Entwicklungsschleife und können jedes visuelle Tool (oder einen anderen KI-Builder) auf das Repo bringen. Den meisten Teams entgeht es nicht, wenn sie sehen, wie viel schneller Claude Code iteriert.