Formula Prompt Koding Landing Page
🔹 KONTEKS + STRUKTUR + DESAIN + TEKNOLOGI + OUTPUT
- Konteks → Tujuan landing page, siapa target audiensnya.
- Struktur → Bagian-bagian halaman (hero section, fitur, testimoni, CTA, dsb.).
- Desain → Warna, layout, tipografi, dan elemen visual lainnya.
- Teknologi → HTML, CSS, Bootstrap, JavaScript, dsb.
- Output → Format hasil yang diinginkan (kode lengkap, template siap pakai, atau hanya struktur dasarnya).
📌 Contoh Prompt 1 – Landing Page Produk Digital (HTML + Bootstrap)
Saya ingin membuat landing page untuk produk digital "PLR THR Hack".
Struktur: Hero section dengan headline menarik, keunggulan produk, daftar produk dalam kartu, testimoni pengguna, dan CTA ke WhatsApp.
Desain: Warna biru navy dengan sudut elemen membulat, tampilan modern.
Gunakan HTML dan Bootstrap.
Berikan output dalam bentuk kode HTML lengkap yang siap digunakan.
📌 Contoh Prompt 2 – Landing Page Jasa SEO (HTML, Bootstrap, & Meta Pixel)
Buatkan landing page untuk jasa SEO dengan Meta Pixel terpasang.
Struktur: Header dengan logo, hero section dengan headline dan CTA, layanan utama, testimoni, portofolio, dan footer dengan kontak.
Desain: Tema ungu, border dengan shadow, teks kontras untuk CTA.
Gunakan HTML, Bootstrap, dan sertakan tracking Meta Pixel.
Output berupa kode HTML lengkap yang bisa langsung digunakan.
📌 Contoh Prompt 3 – Landing Page Jual Skincare Pria (HTML + JavaScript Interaktif)
Saya ingin membuat landing page untuk produk skincare pria dengan efek animasi saat scroll.
Struktur: Hero section dengan gambar produk, keunggulan produk dalam ikon, testimoni dalam slider, dan CTA untuk order via WhatsApp.
Desain: Tema gelap dengan aksen emas, font modern dan maskulin.
Gunakan HTML, Bootstrap, dan JavaScript untuk efek animasi.
Output: Kode HTML lengkap yang siap digunakan.
🔹 KONTEKS + STRUKTUR + DESAIN + TEKNOLOGI + SEO + OUTPUT
- Konteks → Tujuan landing page, siapa target audiensnya, niche produk/jasa, dan manfaat utama yang ingin ditonjolkan.
- Struktur → Bagian-bagian halaman (hero section, fitur, testimoni, CTA, dsb.) dengan hierarki H1-H6 yang tepat.
- Desain → Warna, layout, tipografi, gambar responsif, dan elemen UX yang meningkatkan pengalaman pengguna.
- Teknologi → HTML, CSS, Bootstrap, JavaScript, serta optimasi kecepatan loading (lazy loading, minifikasi, CDN, dsb.).
- SEO → Meta title, meta description, alt text untuk gambar, schema markup, internal linking, heading structure, mobile-friendly design, keyword density yang natural, page speed optimization.
- Output → Format hasil yang diinginkan (kode lengkap, template siap pakai, atau hanya struktur dasarnya).
📝 Contoh Prompt SEO untuk Koding Landing Page
"Buatkan kode landing page menggunakan HTML, Bootstrap, dan JavaScript yang SEO-friendly untuk jasa pembuatan website. Target audiens adalah UMKM yang ingin meningkatkan penjualan online. Landing page harus memiliki:
- Struktur SEO dengan H1 sebagai judul utama, subjudul menggunakan H2-H3.
- Meta title dan meta description yang mengandung keyword "Jasa Pembuatan Website UMKM".
- Schema markup untuk meningkatkan visibilitas di Google.
- Optimasi kecepatan (lazy loading gambar, minifikasi CSS & JS).
- Mobile-friendly & responsive design menggunakan Bootstrap.
- Call to Action (CTA) yang jelas untuk mengarahkan pengunjung ke WhatsApp.
- Gambar dengan alt text yang mengandung kata kunci.
- Internal linking ke halaman artikel dan layanan lainnya."
Dengan formula ini, landing page yang dibuat akan SEO-ready, mudah diindeks oleh Google, dan memiliki pengalaman pengguna yang baik. 🚀
Langkah langka buat Landingpage
1. siap produk ( gambar, deskripsi, konten )
2. siap media ( wsp, https://yukngoding.biz.id/28sept/, divibes.biz.id )
3. siap prompt ( masukan semua yang sudah disiapkan kedalam prompt )
4. eksekusi prompt
5. copy hasil prompt ( skrip kedalama media )