Satu panel untuk membangun & menaikkan landing page di
Lovable
Klik tiap modul di sisi kiri untuk membuka riset, keyword, SEO,
integrasi, quick share, dan mobile design — lengkap dengan checklist
dan contoh prompt siap pakai. Diagram di bawah menyala mengikuti
modul yang sedang dibuka.
SKEMA · LANDING PAGE
01
Riset Landing Page
Gunakan Plan mode sebagai meja riset sebelum satu baris kode pun
ditulis — bandingkan struktur, uji ide, dan susun arsitektur
informasi.
Plan mode1 credit/pesanTanpa ubah kode
Checklist riset
Eksplorasi ide produk sebelum komit ke satu arah
Bandingkan minimal 2–3 struktur halaman &
trade-off-nya
Plan yang disetujui tersimpan di
.lovable/plan.md dan tetap bisa dibuka lagi dari
histori chat.
Contoh prompt
Plan mode
Saya ingin membuat landing page untuk [produk/jasa].
Bandingkan 3 struktur landing page yang umum dipakai
kompetitor di industri ini (hero, social proof, fitur, harga,
CTA, FAQ). Jelaskan trade-off tiap struktur untuk goal
konversi sign-up.
02
Riset Keyword
Research SEO with Lovable memakai data Semrush langsung di chat —
tanpa akun terpisah, gratis biaya tambahan sampai 15 Agustus 2026.
Semrush live dataTab SEO & AI searchCredit build biasa
Bisa direset apa saja
Volume pencarian & kesulitan ranking keyword
Keyword yang sudah dirangking kompetitor
Backlink milik kompetitor
Posisi ranking halaman Anda saat ini
Minta Lovable langsung buatkan halaman teroptimasi
Alur nyata dari dokumentasi
Chat — SEO & AI search
Anda: Berdasarkan traffic & kompetitor saya, keyword apa yang
bagus ditarget? Lovable: Anda belum ranking untuk "vibe
coding" (12k/bln) dan "ai app generator" (9k/bln). Mau saya
buatkan halamannya? Anda: Ya, tolong! Lovable: Selesai!
/vibe-coding sudah live dengan title, meta, dan H1 yang
teroptimasi.
03
SEO & AI Search Review
Satu tab untuk SEO (Google/Bing) dan AEO — Answer Engine
Optimization untuk ChatGPT, Perplexity, Claude, Gemini.
SSR via TanStack StartScan gratis semua paketGoogle Search Console
Checklist SEO praktis
Judul halaman < 60 karakter + keyword target
Meta description unik tiap halaman
Alt text deskriptif di semua gambar
Canonical tag untuk konten duplikat
URL deskriptif, bukan /page?id=123
Publish dulu sebelum submit sitemap ke GSC
Langkah menjalankan review
1
Buka tab SEO & AI search di project
2
Klik Scan project / Scan again
3
Review temuan gagal di bagian atas laporan
4
Klik Try to fix per temuan, atau
Try to fix all
5
Publish, lalu scan ulang untuk cek performa &
indexing live
6
Hubungkan custom domain, scan ulang untuk verifikasi
GSC
Menjalankan review = gratis di semua paket. Menerapkan perbaikan
(Try to fix) memakai credit pesan biasa.
04
Integrasi Platform
Tiga jalur integrasi: app connector, chat connector (MCP), dan API
apa pun yang belum tersedia bawaan.
App connector — fungsionalitas di app yang sudah
deploy (HubSpot, Notion, PostHog)
Chat connector (MCP) — konteks saat building, tidak
ikut ter-deploy
API apa pun — hubungkan layanan eksternal
custom
Admin bisa batasi akses konektor per user/workspace
Contoh prompt integrasi API
Agent mode
Integrasikan OpenWeatherMap API. Base URL:
https://api.openweathermap.org/data/2.5 Auth: API key via
query parameter appid Endpoint: GET
/weather?q={city}&units=metric&appid={API_KEY} Docs:
https://openweathermap.org/current
05
Quick Share
Secara resmi disebut "Shared preview link" — cara tercepat
menunjukkan preview app tanpa publish dulu.
Berlaku 7 hariTanpa loginView-only
Karakteristik
URL publik lovable.dev/preview/…, bisa dibuka
tanpa akun
Tidak membuat kolaborator & tidak beri hak edit
Viewer tidak melihat editor, chat, atau source code
Bisa dibagikan sebelum app di-publish
Admin Enterprise bisa nonaktifkan lewat Privacy &
security
Kapan dipakai
→
Menunjukkan progres ke klien
→
Membagikan di media sosial
→
Melampirkan di laporan bug
Beda dengan Publish: publish mendeploy ke URL permanen
dengan kontrol akses sendiri; Quick Share bersifat sementara
untuk demo cepat.
06
Mobile Design
Prinsip mobile-first: rancang layar kecil dulu, baru scale up. Klik
"Lihat mode mobile" di atas untuk melihat skema berubah bentuk.
Buat semua desain benar-benar responsif di setiap breakpoint,
dengan fokus mobile-first. Gunakan best practice UI/UX modern
untuk menentukan bagaimana komponen berubah di tiap
breakpoint. Gunakan breakpoint bawaan shadcn dan Tailwind,
jangan custom breakpoint kecuali diminta secara
spesifik.
07
Alur Kerja End-to-End
Menggabungkan enam modul di atas menjadi satu alur kerja landing
page dari nol sampai live.