Apa itu splash page? Memahami pengertian, cara membuat, dan optimasinya

Splash page adalah halaman overlay yang biasanya muncul di atas homepage website, berfungsi sebagai “layar pembuka” sebelum pengunjung masuk ke konten utama website.

Sesuai namanya, halaman ini dirancang untuk memberikan “kejutan” (splash) bagi pengunjung, bisa berupa kesan pertama yang baik, informasi penting, atau bahkan pengalaman yang dipersonalisasi.

Kami akan membahas semua tentang splash page di artikel ini, mulai dari perbedaannya dengan jenis halaman web lain, fungsinya, dan cara membuat splash page yang efektif. Lanjutkan membaca di bawah ini yuk!

Perbedaan splash page dan landing page

Splash page sering disamakan dengan landing page karena keduanya merupakan halaman individu yang muncul sebelum halaman lain atau sebagai pengganti halaman website biasa.

Untuk memahami perbedaannya, Anda perlu tahu dulu apa itu landing page. Berikut perbandingan detailnya:

ElemenSplash pageLanding page
TujuanMenarik perhatian dan menyampaikan informasi penting dengan segera sebelum masuk ke website utamaMendorong pengunjung melakukan tindakan tertentu, seperti mendaftar atau membeli
Waktu munculDitampilkan sebelum homepage atau konten utamaDiakses melalui link dari iklan atau email marketing
Panjang kontenSingkat, biasanya berupa judul dan teks pendekLebih mendetail, mencakup judul, informasi promosi, dan CTA
NavigasiMinimal, biasanya hanya ada satu tombol seperti “Masuk ke Website” atau pilihan bahasaBiasanya tidak ada, agar pengunjung tidak terganggu dari tujuan utama

Perbedaan splash page dan homepage

Splash page dan homepage sama-sama merupakan halaman pertama yang dilihat pengunjung di website. Meski tujuannya berbeda, keduanya masih sering dianggap sama. Berikut cara membedakannya:

ElemenSplash pageHalaman homepage
PeranLayar pembuka sebelum konten utamaKonten utama website dan pusat navigasi
Waktu munculMenginterupsi pengalaman pengguna sejenak untuk menampilkan sesuatu yang spesifikTerus-menerus memandu pengunjung menjelajahi website
KontenMinimal, dengan elemen visual dan teks yang ringkasMenampilkan banyak konten, dengan menu navigasi lengkap yang tertaut ke halaman-halaman utama dalam tata letak terstruktur
Target audiensBisa ditampilkan berdasarkan lokasi, perangkat, atau campaignBisa dilihat oleh semua pengunjung secara default
DurasuBersifat sementara atau musiman, sering dipakai untuk pengumuman atau promosiBagian permanen dari struktur website
KeterlibatanSatu tindakan cepat: klik, pilih, atau konfirmasiTerus-menerus, memungkinkan pengunjung menjelajahi berbagai bagian website

Cara membuat splash page

Langkah-langkah untuk membuat splash page akan bergantung pada metode pembuatan website yang Anda pilih. Namun, secara umum, Anda perlu melakukan hal-hal berikut:

  1. Tentukan tujuan Anda. Misalnya, toko online yang menjual produk dengan batasan usia mungkin memerlukan splash page untuk memverifikasi usia demi memenuhi persyaratan hukum.
  2. Tulis pesan yang jelas dan ringkas. Fokuslah pada informasi yang perlu diketahui pengunjung atau tindakan yang harus mereka lakukan sebelum masuk ke website.
  3. Rancang tata letaknya dengan baik. Buat tata letak yang simpel, tapi gunakan elemen visual atau latar belakang yang cukup mencolok untuk menarik perhatian. Jangan lupa, sertakan judul yang jelas dan CTA yang sesuai dengan tujuan Anda.
  4. Tambahkan unsur branding. Splash page akan menjadi hal pertama yang dilihat pengunjung, jadi pastikan halaman ini mencerminkan identitas brand Anda dan selaras dengan tampilan website secara keseluruhan.
  5. Sediakan alur keluar halaman. Tambahkan link atau tombol keluar bagi pengunjung yang ingin langsung membuka homepage. Link ini harus terlihat jelas dan mudah diakses.
  6. Tentukan cara splash page muncul. Tergantung pada platform yang digunakan, atur splash page agar muncul sebelum homepage atau dipicu berdasarkan lokasi atau perangkat pengunjung.
  7. Uji coba dan publikasikan. Pastikan semua elemen yang bisa diklik berfungsi dengan baik dan tampilan visualnya jelas di semua ukuran layar sebelum Anda mengonlinekannya.

Tahukah Anda?

Meskipun Website Builder Hostinger belum memiliki fitur pop-up bawaan, Anda tetap bisa membuat splash page dengan memodifikasi salah satu template landing page yang ada menggunakan editor drag-and-drop. Website Builder Hostinger juga mendukung integrasi pihak ketiga dan kode kustom.

Manfaat splash page dan hal-hal yang membuatnya efektif

Berikut alasan mengapa Anda masih perlu menggunakan splash page untuk website Anda:

Menarik perhatian secara langsung

Karena splash page muncul sebelum homepage, pengunjung akan langsung melihat pesan yang ingin Anda sampaikan. Dengan menggabungkan elemen visual yang menarik dan pesan yang jelas, splash page sangat efektif untuk menampilkan promosi, peluncuran produk baru, atau pengumuman penting.

Splash page juga ideal untuk menampilkan bukti sosial (social proof). Contohnya, DreamCloud menampilkan angka penjualan mereka untuk mendorong pengunjung berlangganan dan mendapatkan diskon pembelian pertama. Hanya dengan satu splash page, produsen kasur ini berhasil membangun kepercayaan dan meningkatkan konversi.

splash page website dreamcloud menampilkan formulir subscribe

Menyoroti informasi utama

Baik untuk acara mendatang, penawaran terbatas, maupun menyampaikan pernyataan, splash page memastikan pengunjung langsung melihatnya. Halaman ini juga menghemat waktu Anda karena tidak perlu mengupdate banyak halaman untuk mendapatkan manfaat yang sama.

Contohnya, Black Sheep menggunakan splash page untuk menampilkan pernyataan mereka. Pengunjung yang berlokasi di Amerika Serikat akan disambut dengan pesan konfirmasi bahwa perusahaan pakaian sepeda asal Australia ini melayani pengiriman ke sana, lengkap dengan detail biaya tambahannya.

splash page website blacksheep

Mempersonalisasi pengalaman pengguna

Splash page membantu mempersonalisasi strategi marketing dengan memungkinkan pengunjung memilih lokasi, bahasa, atau usia mereka. Setelah itu, Anda bisa mengarahkan mereka ke versi website yang sudah disesuaikan. Dengan begitu, mereka akan melihat konten yang lebih relevan sehingga peluang konversi pun meningkat.

Website Love, Bonito melakukan strategi serupa dengan meminta pengunjung memilih lokasi pengiriman mereka (defaultnya diatur ke Amerika Serikat). Kalau pengunjung memilih wilayah lain, website ini akan mengalihkan mereka untuk menunjukkan produk dan promo khusus untuk wilayah tersebut.

splash page website love, bonito menampilkan pilihan lokasi

Membantu mematuhi hukum dan aturan

Kalau website Anda menerapkan sistem verifikasi usia, persetujuan, atau konfirmasi lokasi, splash page bisa menyediakan cara yang praktis dan sistematis untuk melakukannya.

Sebagai contoh, website Heineken menggunakan splash page untuk memverifikasi usia pengunjung. Karena merupakan produsen minuman beralkohol, perusahaan ini meminta verifikasi usia di websitenya. Setelah itu, pengguna akan diarahkan ke website utama untuk melihat-lihat produk dan melakukan pembelian.

splash page website heineken menampilkan verifikasi usia

Meski tidak dirancang untuk meningkatkan konversi seperti landing page, splash page tetap memainkan peran penting. Halaman ini mendukung tujuan utama untuk meningkatkan brand awareness dan memandu pengunjung ke halaman yang tepat.

Selain itu, halaman ini membantu meningkatkan pengalaman pelanggan e-commerce dengan personalisasi, yang sangat penting dalam menaikkan angka transaksi.

Cara mengoptimalkan splash page

Splash page yang tidak dirancang dengan baik bisa meningkatkan bounce rate, yang tentu saja berdampak buruk pada upaya SEO Anda. Berikut beberapa tips optimasi splash page agar lebih efektif dalam mendukung tujuan Anda:

  • Gunakan judul yang tepat. Atur konten dengan tag H1 dan H2 yang benar, meskipun halamannya pendek. Cara ini memudahkan teks untuk dibaca dan membantu mesin pencari mengindeks halaman.
  • Tambahkan link internal. Sertakan minimal satu link ke website Anda agar splash page tetap menjadi bagian dari struktur website dan tidak menjadi orphan page.
  • Gunakan alt text untuk gambar. Pastikan elemen visual Anda bisa dipahami oleh mesin pencari dan pengunjung yang menggunakan aplikasi pembaca layar. Praktik ini juga menunjukkan komitmen Anda terhadap aksesibilitas.
  • Buat splash page mobile-friendly. Pastikan splash page Anda responsif agar tampilannya tetap optimal dan berfungsi dengan baik di semua perangkat.

Cara Google mengindeks splash page dan cara mencegah masalah crawling

Crawler mesin pencari akan memindai website Anda untuk memahami konten dan strukturnya. Semakin mudah crawler membaca struktur website, semakin besar peluang halaman Anda mendapatkan peringkat yang bagus di hasil pencarian.

Karena sebagian besar splash page berisi sedikit teks atau bahkan tidak sama sekali, mesin pencari mungkin kesulitan memahami isinya. Nah, menambahkan link internal bisa membantu crawler menjangkau bagian lain dari website Anda. Crawler akan lebih memahami konteks halaman website sehingga halaman-halaman utama Anda bisa tetap mendapatkan peringkat.

Google juga sangat memprioritaskan pengalaman pengguna di perangkat seluler. Agar performa splash page Anda tetap optimal, halaman tersebut harus memenuhi standar pengindeksan mobile-first. Artinya, halaman harus mudah ditutup dan memiliki tampilan visual yang bersih dengan gambar berkualitas tinggi.

Selain itu, kecepatan loading merupakan faktor utama dalam SEO splash page. Hampir separuh pengunjung mengharapkan waktu loading hanya dua detik atau kurang. Kalau splash page Anda terlalu lambat, pengunjung bisa merasa kesal dan langsung menutup website Anda. Semakin tinggi bounce rate, semakin rendah peringkat Anda di mesin pencari.

Faktor utama untuk membuat splash page yang efektif

Informasi, fungsi, dan konsistensi yang jelas adalah beberapa faktor utama yang membuat splash page benar-benar efektif. Dengan desain yang baik, splash page memandu pengunjung menelusuri website Anda tanpa membuat mereka kewalahan, mencerminkan identitas brand Anda, dan menyertakan CTA yang jelas.

Kalau Anda masih bingung, cobalah melakukan audit UX singkat untuk menemukan area yang perlu ditingkatkan. Meskipun tidak ada aturan pasti, komponen utama berikut ini bisa membantu Anda membuat splash page yang efektif.

Hierarki visual

Hierarki visual membantu mengarahkan perhatian pengunjung, menunjukkan area yang harus dilihat dulu lalu memandu alurnya sampai akhir. Anda bisa melakukannya dengan menyesuaikan ukuran, warna, kontras, atau penempatan elemen di halaman.

Contohnya, toko obat online Hebe menggunakan tata letak berbentuk piramida sederhana untuk membuat splash page yang mudah dipahami. Dimulai dari logo di bagian atas, diikuti judul CTA yang jelas, dan diakhiri dengan pilihan negara, desain minimalis ini membantu menjaga fokus pengunjung tanpa distraksi yang tidak penting.

splash page hebe menampilkan pilihan negara

Karena rentang perhatian orang cenderung pendek, desain yang sederhana dan ringkas membuat splash page lebih mudah dilihat dalam sekilas. Landing page yang lebih pendek bahkan lebih efektif 13,5% daripada yang panjang, membuktikan bahwa desain minimalis terkadang justru lebih maksimal.

Desain yang konsisten

Desain splash page dan homepage yang saling berpadu akan membuat pengalaman pengunjung terasa lebih lancar. Menggunakan warna, font, dan gaya yang sama di seluruh halaman menunjukkan bahwa Anda memperhatikan estetika visual untuk menunjukkan gaya dan ciri khas brand Anda, yang bisa turut membangun kepercayaan pengunjung.

Perusahaan pakaian Pact berhasil menerapkan metode ini dengan menggunakan warna-warna ‘earth tone’ dan estetika minimalis yang sama pada splash page websitenya. Ketika Anda menutup halaman ini, Anda tidak akan merasa asing seperti dialihkan ke website lain.

Berikut perbandingan splash page (atas) dan homepage (bawah) website Pact. Perhatikan bagaimana keduanya tetap senada dalam hal visual.

perbandingan splash page dan homepage Pact

Kalau tujuan Anda membuat splash page adalah membangun followers, pertimbangkan untuk menambahkan beberapa elemen komunikasi.

Misalnya, tambahkan formulir subscribe untuk mengumpulkan email dari pengunjung yang tertarik berlangganan newsletter Anda, atau link media sosial untuk memudahkan mereka terhubung dengan Anda di berbagai platform. Keduanya efektif untuk meningkatkan jangkauan dan keterlibatan.

Untuk formulir, cukup buat desain yang simpel. Idealnya, sertakan tiga kolom dalam formulir subscribe untuk mengajak pengunjung menjadi pelanggan. Anda juga bisa menambahkan kolom nama dan tanggal lahir untuk meningkatkan personalisasi email.

Jangan takut untuk membuat kombinasi sendiri yang sesuai dengan tujuan Anda, seperti yang dilakukan oleh AYBL. Perusahaan pakaian olahraga ini menggunakan dua kolom saja, yaitu email dan kotak centang. Pengunjung bisa memilih konten yang ingin diterimanya untuk menyesuaikan newsletter sesuai minat mereka.

splash page website AYBL

Kemudian seperti yang tadi dijelaskan, tambahkan juga link keluar bagi pengunjung yang tidak ingin bergabung. Penempatan yang paling umum adalah di bawah CTA, seperti di website AYBL.

Tahukah Anda?

Dengan solusi email marketing Hostinger Reach, Anda bisa menggunakan AI untuk mendesain formulir subscribe, membuat campaign email marketing, dan memantau performanya cukup dari satu platform.

Setelah membuat splash page, apa lagi?

Setelah splash page Anda tayang, pantau performanya dan optimalkan lagi berdasarkan data yang Anda peroleh. Gunakan tool seperti Google Analytics untuk memantau perilaku pengguna (waktu kunjungan, jumlah klik CTA, dan tingkat keluar halaman) untuk menentukan efektivitas splash page Anda. Uji berbagai CTA, judul, dan tata letak untuk menemukan strategi yang paling sesuai dengan audiens.

Apabila masih belum mendapatkan hasil yang diinginkan, coba lihat area lain di website Anda. Bisa jadi Anda masih perlu meningkatkan desain UX website, misalnya menambahkan CTA khusus yang bisa mengarahkan lebih banyak klik. Perhatikan juga navigasi website Anda dan pastikan pengunjung bisa mengaksesnya tanpa masalah.

Nah, kalau menggunakan AI Website Builder Hostinger, Anda bisa meningkatkan desain website Anda tanpa harus memiliki skill coding tingkat lanjut. Platform ini menyediakan template siap pakai yang mobile-friendly dan bisa disesuaikan dengan preferensi Anda.

Editor drag-and-drop dan tool AI yang disertakan memudahkan Anda mendesain dan mengoptimalkan website meskipun belum punya pengalaman mengelola website.

Anda bisa mencoba website builder kami sekarang dengan uji coba gratis selama 7 hari. Kalau cocok, Anda bisa upgrade paket dengan harga mulai dari Rp24900.00 per bulan.

Tenang, masih ada jaminan uang kembali 30 hari kalau Anda tidak puas dengan tool atau layanan kami. Yuk, coba sekarang!

Author
Penulis

Faradilla Ayunindya

Faradilla, yang lebih akrab disapa Ninda, sudah berpengalaman selama 10 tahun sebagai linguist dan 5 tahun sebagai Content Marketing Specialist di Hostinger. Ia suka mengikuti tren teknologi, digital marketing, dan belajar bahasa. Melalui tutorial Hostinger ini, Ninda ingin berbagi informasi dan membantu pembaca mengatasi masalah yang dialami. Kenali Ninda lebih dekat di LinkedIn.