Link, Gambar, dan Media

Landing page tanpa link dan gambar itu seperti brosur kosong. Di chapter ini kamu akan belajar dua elemen HTML yang pasti ada di setiap halaman: anchor link dan image.

Link: Menghubungkan Halaman

Tag <a> (anchor) dipakai untuk membuat teks atau elemen yang bisa diklik dan mengarahkan pengunjung ke URL tertentu:

<a href="https://wa.me/6281234567890">Chat via WhatsApp</a>

Hasilnya: teks “Chat via WhatsApp” yang bisa diklik, mengarah ke link WhatsApp.

Bagian-bagian penting dari tag <a>:

• href — URL tujuan. Ini atribut wajib, tanpa ini link tidak akan berfungsi.
• Teks di antara tag — Apa yang terlihat dan bisa diklik oleh pengunjung.

Membuka Link di Tab Baru

Kalau kamu ingin link terbuka di tab baru (supaya pengunjung tidak meninggalkan landing page), tambahkan target="_blank":

<a href="https://tokopedia.com/toko-saya" target="_blank" rel="noopener noreferrer">
  Lihat Produk di Tokopedia
</a>

Atribut rel="noopener noreferrer" itu urusan keamanan. Tidak perlu dihafalkan, cukup selalu sertakan setiap kali pakai target="_blank".

Link Internal (dalam satu halaman)

Untuk membuat navigasi yang melompat ke bagian tertentu di halaman yang sama:

<!-- Tombol navigasi -->
<a href="#harga">Lihat Harga</a>

<!-- Seksi tujuan -->
<h2 id="harga">Pilihan Paket Harga</h2>

Tanda # menunjukkan bahwa link mengarah ke elemen dengan id yang sesuai. Teknik ini sangat berguna untuk landing page panjang yang punya banyak seksi.

Gambar: Menampilkan Visual

Tag <img> dipakai untuk menampilkan gambar:

<img src="foto-produk.jpg" alt="Sepatu sneakers hitam ukuran 42" width="600" height="400">

Bedah atributnya:

• src — Sumber gambar. Bisa path lokal atau URL lengkap.
• alt — Teks alternatif yang muncul kalau gambar gagal dimuat. Ini juga dibaca oleh screen reader (alat bantu tunanetra) dan search engine. Tulis deskripsi yang jelas, bukan cuma “gambar produk”.
• width dan height — Ukuran gambar dalam piksel. Menyertakan ini membantu browser mengalokasikan ruang sebelum gambar selesai dimuat, sehingga halaman tidak “loncat-loncat”.

Perhatikan bahwa <img> tidak punya tag penutup. Mirip seperti <br> yang kamu pelajari di chapter sebelumnya.

Tips Gambar untuk Landing Page

Dari pengalaman saya mengoptimasi landing page untuk kampanye iklan, ada beberapa hal penting soal gambar:

1. Ukuran file menentukan kecepatan loading. Gambar 5MB akan bikin halaman lambat, dan halaman lambat = bounce rate tinggi = biaya iklan membengkak. Kompres gambar dulu sebelum upload, gunakan tool gratisan seperti TinyPNG.

2. Pakai format yang tepat. JPEG untuk foto, PNG untuk gambar dengan background transparan, WebP kalau mau ukuran file paling kecil dengan kualitas tetap bagus.

3. Alt text yang bagus membantu SEO. Daripada alt="gambar", tulis alt="Dashboard analytics menampilkan grafik pertumbuhan penjualan bulanan".

Menggabungkan Link dan Gambar

Kamu bisa membuat gambar yang bisa diklik dengan membungkus <img> di dalam <a>:

<a href="https://wa.me/6281234567890">
  <img src="banner-promo.jpg" alt="Promo diskon 50% untuk pendaftaran bulan ini">
</a>

Ini teknik yang sangat sering dipakai untuk banner CTA di landing page.

Video Embed

Untuk menampilkan video YouTube di halaman, gunakan <iframe>:

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/VIDEO_ID" 
  title="Video testimoni pelanggan"
  frameborder="0" 
  allowfullscreen>
</iframe>

Ganti VIDEO_ID dengan ID video YouTube. Kamu bisa mendapatkan kode embed lengkap langsung dari YouTube dengan klik Share > Embed.

Video testimoni di landing page itu conversion booster yang powerful. Tapi pastikan video tidak memperlambat loading halaman, ya. Kalau landing page kamu khusus untuk iklan, kadang lebih baik pakai thumbnail gambar yang link-nya ke YouTube daripada embed langsung.

Praktik

Coba buat seksi hero sederhana dengan gambar dan CTA:

<img src="https://placehold.co/800x400" alt="Ilustrasi produk">
<h1>Solusi Manajemen Iklan untuk UMKM</h1>
<p>Kelola semua kampanye iklanmu dari satu tempat.</p>
<a href="#daftar">Mulai Gratis Sekarang</a>

Chapter berikutnya, kita masuk ke elemen yang bisa langsung meningkatkan konversi: tombol CTA dan formulir.