# Tips

Isi halaman ini praktik umum menyusun landing page, bukan daftar fitur Biver. Angka-angka di dalamnya (ukuran huruf, batas KB, panjang meta title) adalah patokan yang lazim dipakai, bukan aturan mati.

## Struktur halaman

1. **Hero**: headline kuat dan CTA utama
2. **Social proof**: testimoni atau logo klien
3. **Value proposition**: keuntungan produk atau layanan
4. **Fitur dan manfaat**: detail fitur dengan ikon
5. **CTA penutup**: call-to-action di akhir halaman
6. **FAQ**: pertanyaan yang sering muncul
7. **Footer**: link dan informasi legal

### Prinsip 3 detik

Pengunjung memutuskan bertahan atau pergi dalam 3 detik pertama. Checklist:

- [ ] Headline jelas dan menarik
- [ ] Value proposition langsung terlihat
- [ ] CTA (Call-to-Action) tampak jelas
- [ ] Tidak ada elemen yang mengganggu

### Formula headline

| Formula | Contoh |
|---------|--------|
| **Hasil + Timeframe** | "Dapatkan 1000 Follower dalam 30 Hari" |
| **Problem + Solution** | "Stop Struggling dengan Desain" |
| **Benefit + No Risk** | "Tingkatkan Penjualan atau Uang Kembali" |
| **How To + Benefit** | "Cara Membuat Website Tanpa Coding" |

## SEO on-page

### Meta title dan description

Title dibuat 50-60 karakter dengan keyword utama di awal. Contoh:

`Jasa Desain Logo Profesional | Biver`

Description 150-160 karakter, memuat keyword dan CTA. Contoh:

`Butuh desain logo profesional? Jasa desain terbaik dengan harga terjangkau. Pesan sekarang dan dapatkan desain dalam 24 jam!`

### Struktur heading

```
H1: Jasa Pembuatan Website Profesional (hanya 1 per halaman)
├── H2: Mengapa Memilih Kami?
│   ├── H3: Tim Berpengalaman
│   └── H3: Harga Terjangkau
├── H2: Layanan Kami
│   ├── H3: Website Company Profile
│   └── H3: Landing Page
└── H2: Testimoni Klien
```

Jangan melompati level, misalnya dari H2 langsung ke H4. Keyword tetap disisipkan, tetapi dengan kalimat yang wajar dibaca.

### Gambar dan alt text

- Format: WebP (prioritas), JPEG, PNG
- Ukuran: Maksimal 200KB per gambar
- Dimensi: Sesuaikan dengan container
- Alt text: Deskriptif dengan keyword

Contoh alt text:

```
❌ "gambar-123.jpg"
✅ "Jasa desain logo profesional untuk UMKM di Jakarta"

❌ "foto.jpg"
✅ "Tim desainer grafis kami sedang bekerja pada proyek logo"
```

## Optimasi konversi

### Value proposition

Formula:

```
Untuk [target customer]
yang [problem/need],
[product name]
adalah [product category]
yang [key benefit].
Tidak seperti [competitors],
kami [unique differentiator].
```

Contoh:

```
Untuk UMKM yang kesulitan membuat website profesional,
Biver adalah platform landing page builder
yang memungkinkan membuat website dalam 5 menit tanpa coding.
Tidak seperti agency web yang mahal dan lama,
kami menawarkan solusi cepat, mudah, dan terjangkau.
```

### CTA

Teks tombol:

```
❌ "Submit"
✅ "Dapatkan Proposal Gratis"

❌ "Klik di sini"
✅ "Mulai Trial Gratis 14 Hari"

❌ "Download"
✅ "Download Ebook SEO Gratis"
```

Warnanya harus kontras dengan background, dan tombolnya cukup besar untuk langsung terlihat. Asosiasi warna yang umum dipakai: hijau untuk growth, oranye untuk energy, biru untuk trust.

### Social proof

- Testimoni dengan foto dan nama asli.
- Case study dengan data konkret.
- Trust badge dan sertifikasi.
- Jumlah pengguna, misalnya "10,000+ UMKM mempercayai Biver".

## Tampilan di HP

### Jangkauan jempol

```
┌─────────────────────┐
│   🔴 Sulit          │ ← Hindari CTA penting di sini
│                     │
│   🟡 Mungkin        │
│                     │
│   🟢 Mudah          │ ← Tempatkan CTA utama di sini
│                     │
│   🟢 Sangat Mudah   │ ← Navigasi utama di sini
└─────────────────────┘
```

### Ukuran teks

| Elemen | Ukuran |
| --- | --- |
| Body text | Minimum 16px. Di bawah itu iOS ikut zoom. |
| Heading | 24px - 32px |
| Line height | 1.5 - 1.6 |

### Ukuran tombol dan jarak

| Elemen | Ukuran minimum |
| --- | --- |
| Tombol | 44x44px, idealnya 48x48px |
| Jarak antar elemen | 8px |
| Input form | Tinggi 48px |

## Kecepatan halaman

### Gambar

Aktifkan lazy loading untuk gambar di bawah fold. Format dan batas ukurannya sama seperti di bagian SEO on-page.

### Kode

Minify CSS dan JS, defer JavaScript yang tidak kritis, inline CSS yang kritis, lalu buang kode yang tidak terpakai.

### CDN dan caching

Biver memakai jaringan pengiriman global: CDN, caching otomatis, proteksi DDoS, dan sertifikat SSL gratis.

## Tips lanjutan

### Personalisasi

Gunakan dynamic content berdasarkan:

- Lokasi pengunjung
- Waktu kunjungan
- Sumber traffic (Google Ads, Facebook, organic)
- Behavior sebelumnya

### Retargeting

Pasang Facebook Pixel dan Google Remarketing Tag, lalu susun audience dari:

- Pengunjung yang tidak convert
- Cart abandoner
- Pengunjung halaman spesifik

### Lead magnet

Lead magnet adalah sesuatu yang Anda berikan gratis untuk ditukar dengan kontak pengunjung. Misalnya:

- Ebook
- Checklist yang bisa diunduh
- Template
- Webinar
- Konsultasi gratis
- Kode diskon

## Checklist sebelum publish

### Fungsi

- [ ] Semua link berfungsi
- [ ] Submit form terkirim
- [ ] Payment gateway berfungsi
- [ ] Halaman thank you muncul
- [ ] Pesan error jelas

### Kecepatan

- [ ] Halaman terbuka di bawah 3 detik
- [ ] Semua gambar sudah dikompres
- [ ] Tidak ada gambar yang rusak
- [ ] Tampilan rapi di layar HP
- [ ] Jalan di lebih dari satu browser

### SEO

- [ ] Meta title dan description terisi
- [ ] H1 unik dan relevan
- [ ] Alt text untuk semua gambar
- [ ] Struktur URL rapi
- [ ] Sertifikat SSL aktif

### Analytics

- [ ] Google Analytics terpasang
- [ ] Google Search Console terverifikasi
- [ ] Facebook Pixel terpasang
- [ ] Pelacakan aksi untuk aksi konversi
- [ ] Goal atau conversion sudah didefinisikan

## Setelah publish

Tidak ada landing page yang sempurna sejak awal. Ubah satu bagian, ukur hasilnya, simpan yang lebih baik. Kalau traffic Anda sudah cukup untuk dibandingkan, jalankan A/B test.

## Tujuh hal yang paling menentukan

Kalau seluruh dokumen ini terlalu panjang, ini intinya:

1. **Kenali pembacanya.** Halaman untuk ibu rumah tangga dan halaman untuk manajer pengadaan tidak bisa sama.
2. **Sebutkan keuntungannya, bukan fiturnya.** Pembaca membeli hasil, bukan spesifikasi.
3. **Kurangi hambatan.** Tiap field form tambahan memotong jumlah yang mengisi.
4. **Bangun kepercayaan.** Testimoni, jumlah pembeli, garansi, nomor yang bisa dihubungi.
5. **Uji, jangan menebak.** Ubah satu hal, ukur, simpan yang menang.
6. **Mobile lebih dulu.** Mayoritas pengunjung datang dari ponsel.
7. **Kecepatan itu konversi.** Tiap detik tambahan waktu muat menurunkan jumlah yang bertahan.

---

*Dokumen ini terakhir diperbarui: Maret 2026*  
*Versi: 1.0*