Kısa yanıt

Vibe kodlu uygulamalar istemci tarafında oluşturulur, böylece tarayıcılar boş bir <div> görür. Bunu, alan adınız ile Lovable arasına sunucu tarafından oluşturulan HTML'yi botlara döndüren bir Cloudflare Worker koyarak veya pazarlamaya yatırım yapmadan önce projeyi gerçek bir yığına (Claude Code + Supabase + Vercel) taşıyarak düzeltirsiniz.

Lovable, Bolt ve v0 gibi araçlar, bir fikri öğleden sonra sunmak için harikadır. SEO konusunda harika değiller. Sayfanın tamamı istemci tarafında bir React paketidir; bu, Googlebot'un ilk taramasında boş bir <div id="root" /> gördüğü anlamına gelir. İçerik yok. Başlık yok. Şema yok. Sıralama yok. Organik trafiğe dayanan bir MVP için bu bir kuruluş yılı sorunudur.

İşte Start Apps Studio'da kullandığımız iki düzeltme, en küçük çabadan en büyük getiriye doğru sıralanmıştır.

Düzeltme 1: Cloudflare Worker SSR proxy'si

Bir Cloudflare Worker alan adınız ile Lovable arasında çalışır. İstek geldiğinde Worker, User-Agent'i denetler: gerçek ziyaretçiler her zamanki gibi Lovable'a proxy'lenir; botlar (Googlebot, Bingbot, GPTBot, PerplexityBot, ClaudeBot) ise aynı URL'den gerçek içerik ve eksiksiz şema işaretlemesi içeren sunucu tarafında oluşturulmuş HTML alır.

Doğru yapıldığında bu gizleme değildir. Botun aldığı içeriğin, JS çalıştırıldığında kullanıcının sonunda göreceği içerikle eşleşmesi gerekir. Kurulum iki adımdır:

  1. DNS'nize, özel alanınızı Cloudflare Worker'a işaret eden bir CNAME ekleyin.
  2. Çalışanın sunucu tarafından oluşturulabilecek standart bir sayfa envanterine sahip olması için Lovable'ın içine bir bilgi istemi yapıştırın.

Düzeltme 2: Claude Code ile Lovable'dan geçin

İşçi size zaman kazandırır. Ancak uygulamanın ciddi bir şekilde sıralanması, dinamik içeriği işlemesi veya bir yıl sonra bakımının insanlar tarafından yapılması gerekiyorsa, "normal" bir web yığınına geçmek isteyeceksiniz. Gördüğümüz en hızlı yol, Claude Code'un geçişi sizin için yapmasına izin vermektir.

10 adımlı geçiş tarifi

  1. Claude'un kolayca çalışabilmesi için Lovable projenizi GitHub'a aktarın.
  2. Deponuzu doğrudan okuyup düzenleyebilmesi için Claude Code'u yerel olarak yükleyin.
  3. Claude'u deponuza (GitHub uzak veya yerel yol) yönlendirin.
  4. Veritabanı ve kimlik doğrulama için bir Supabase projesi oluşturun (yaklaşık beş dakika).
  5. Claude'dan şu komut istemiyle projeyi Lovable'dan başka bir yere taşımasını isteyin: "Bu Lovable projesini normal bir web yığınına taşıyın ve repoyu temiz bir şekilde düzenleyin."
  6. Vercel'de barındırma kurulumu yapın. Ücretsiz katman çoğu MVP'yi kapsar.
  7. Claude'a hangi ortam değişkenlerinin ve API anahtarlarının gerekli olduğunu sorun; onları tanımlama konusunda şaşırtıcı derecede iyidir.
  8. Anahtarları oluşturun ve bir .env dosyası (Supabase anahtarları, API belirteçleri vb.) oluşturun.
  9. Claude'dan dağıtımı yapılandırmasını isteyin. GitHub → Vercel akışını bağlayabilir ve Supabase'e bağlanabilir.
  10. Claude'dan her seferinde bir hata olmak üzere hata ayıklamasını isteyerek bozulan her şeyi düzeltin.

Bu kurulum Lovable'ın kendisinden daha esnektir. Uygulama değişiklikleri için istem başına kredi ödemeyi bırakırsınız ve küçük düzenlemeler için ücretsiz modellere dönebilirsiniz; çünkü Lovable, neslinin büyük bir bölümünde zaten Claude'u kullanıyor.

Lovable + Claude hibriti

Projenin ortasındaysanız ve geçişe hazır değilseniz, birden fazla r/lovable kullanıcısının doğruladığı bir orta yol vardır: Lovable'ı GitHub'a bağlayın, ardından Claude Code'un aynı depoya erişmesine izin verin. Claude, Lovable'ın üzerinde bir katmanda çalışarak karmaşık özellikler, hata ayıklama ve iyileştirmelerde ona rehberlik eder; siz de veritabanı değişiklikleri için SQL'i doğrudan Supabase'de çalıştırırsınız (Lovable sorgu çalıştırmak için ücret almaz; dolayısıyla ücretsizdir).

Sonuçlar: bileşenleri engellemede daha az yakılan kredi (kullanıcılar tek bir bileşende 100'den fazla kredi kaydedildiğini bildiriyor), karmaşık mantığın daha iyi ele alınması ve bu makale için kritik olarak, çıktı HTML'si üzerinde SSR'yi ve şemayı aşamalı olarak iyileştirebileceğiniz yeterli kontrol.

Hangi düzeltmeyi seçmelisiniz?

  • Yalnızca pazarlama sitesi veya açılış sayfası → Cloudflare Worker SSR. En ucuz, en hızlı.
  • Sıralanması gereken dinamik içerikli ürün → Claude Code + Supabase + Vercel'e geçiş yapın.
  • Projenin ortasındaysanız ve yeniden inşa edemiyorsanız → Lovable + Claude hibriti; ardından önemli sayfalara SSR ekleyin.

Sık sorulan sorular

Google, Lovable sayfalarını neden doğrudan dizine ekleyemiyor?

Lovable, istemci tarafından oluşturulan bir React paketi gönderir, bu nedenle ilk HTML boş bir kök div'dir. Googlebot'un ilk geçiş taraması bu boş HTML'yi yakalar; JavaScript'i oluşturmak için daha sonra geri gelebilir (veya gelmeyebilir). Yetkisi olmayan yeni alan adları için bu ikinci geçiş oluşturma genellikle hiçbir zaman tetiklenmez.

Cloudflare Worker düzeltmesi gizleme olarak mı değerlendiriliyor?

Bot, JS çalıştırıldığında kullanıcının sonunda göreceği içeriğin aynısını görürse, hayır. Önceden oluşturulmuş HTML'yi botlara sunmak yerleşik bir SEO modelidir; yalnızca botlara kullanıcılardan farklı içerik sunarsanız gizleme olur.

Tam geçişin maliyeti ne kadar?

Kendin Yap: bir hafta sonu ve Vercel + Supabase ücretsiz katman hesabı. Start Apps Studio tarafından sunulur: Genellikle yaklaşık bir sprint boyunca MVP Üretim paketimizde paketlenir.

Taşıma işleminden sonra görsel olarak düzenlemeye devam edebilir miyim?

Lovable'ın tarayıcı içi düzenleyicisini kaybedersiniz, ancak normal bir geliştirme döngüsü kazanırsınız ve herhangi bir görsel aracı (veya başka bir AI oluşturucuyu) deponun üzerine getirebilirsiniz. Çoğu ekip, Claude Code'un ne kadar hızlı yinelendiğini gördükten sonra bunu kaçırmaz.