Table of contents

Pernahkah kamu mengunjungi sebuah situs dan malah melihat pesan error seperti "404 Not Found"? Nah, dengan Custom Error Pages, kamu bisa mengganti tampilan error ini agar lebih informatif dan sesuai dengan branding websitemu. Di artikel ini, kita akan membahas pengertian Custom Error Pages dan cara membuatnya di cPanel.

Cara Membuat Custom Error Pages di cPanel

Mengatur custom error pages di cPanel bukan hanya meningkatkan tampilan situsmu, tetapi juga membantu pengunjung memahami kesalahan yang terjadi. Berikut langkah-langkahnya:

Langkah 1. Login ke cPanel

Masuk ke akun cPanel kamu dan cari menu "Error Pages" di dashboard. Jika sulit menemukannya, gunakan kotak pencarian dan ketik "error".

Langkah 2. Pilih Domain dan Kode Error

Setelah masuk ke menu Error Pages, pilih nama domain yang ingin dikustomisasi. Kemudian, pilih kode error yang ingin kamu ubah, misalnya 404 Not Found untuk halaman yang tidak ditemukan.

Langkah 3. Tambahkan Kode HTML

Agar halaman error lebih menarik, tambahkan kode HTML berikut untuk error 404:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - Halaman Tidak Ditemukan</title>
    <style>
        body {
            background-color: #2a87d7;
            color: #fff;
            font-family: Arial, sans-serif;
            text-align: center;
            padding-top: 100px;
        }
        h1 {
            font-size: 6rem;
            color: #ff5733;
        }
        p {
            font-size: 1.5rem;
        }
        a {
            color: #3498db;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>404</h1>
    <p>Oops! Halaman yang kamu cari tidak ditemukan.</p>
    <p>Kembali ke <a href="/">beranda</a>.</p>
/body>
</html>

Setelah itu, klik Save dan uji dengan membuka URL yang tidak valid di website-mu.

Langkah 4. Custom Error Pages untuk Error Lainnya

Selain error 404, kamu juga bisa membuat custom error pages untuk error lainnya:

  • Error 403 - Forbidden
<h1>Error 403</h1>
<p>Oops! Kamu tidak memiliki izin untuk mengakses halaman ini.</p>
<a href="/">Kembali ke beranda</a>
  • Error 500 - Internal Server Error
<h1>500 - Kesalahan Server Internal</h1>
<p>Maaf, terjadi kesalahan pada server kami. Silakan coba lagi nanti.</p>

Dengan langkah-langkah ini, kamu bisa memastikan pengunjung tetap mendapatkan pengalaman yang baik meskipun terjadi error di situsmu. Yuk, optimalkan custom error pages di website-mu sekarang!

Dengan langkah-langkah ini, kamu bisa memastikan pengunjung tetap mendapatkan pengalaman yang baik meskipun terjadi error di situsmu. Yuk, optimalkan custom error pages di website-mu sekarang!

Cara Menambah Tag Dinamis

Agar halaman error lebih informatif, kamu bisa menambahkan tag dinamis. Dengan begitu, pengunjung mendapatkan detail tambahan mengenai kesalahan yang terjadi. Berikut beberapa tag dinamis yang bisa digunakan:

  • Referring URL: Menampilkan halaman yang dikunjungi sebelum terjadi error, membantu pengunjung memahami jalur navigasi mereka.
  • Server Name: Menampilkan nama domain, memastikan pengunjung tahu mereka berada di situs yang benar.
  • Visitor’s IP Address: Menampilkan alamat IP pengunjung, bisa berguna untuk troubleshooting atau keamanan.
  • Visitor’s Browser: Menampilkan jenis browser yang digunakan pengunjung, membantu dalam analisis kompatibilitas.
  • Requested URL: Menampilkan URL yang dicari pengguna, sehingga mereka bisa memastikan apakah ada kesalahan ketik.
  • Redirect Status Code: Menampilkan kode status HTTP yang terjadi saat pengalihan, memberikan kejelasan mengenai jenis error yang muncul.

Pengertian Custom Error Pages

Saat mengelola website, memberikan pengalaman pengguna yang baik adalah hal utama. Salah satu cara untuk meningkatkan pengalaman pengguna adalah dengan menggunakan Custom Error Pages. 

Di cPanel, fitur "Error Pages" memungkinkan kamu menyesuaikan tampilan halaman error sesuai keinginan. Dengan adanya custom error pages, pengunjung tidak akan merasa bingung atau frustrasi saat menemukan kesalahan di situsmu. Sebaliknya, mereka bisa mendapatkan petunjuk yang jelas tentang apa yang harus dilakukan selanjutnya.

Custom error pages berfungsi sebagai jembatan antara pengunjung dan situsmu ketika terjadi kesalahan teknis. Dengan menampilkan pesan yang lebih informatif dan desain yang menarik, kamu bisa meningkatkan profesionalisme situs sekaligus mengurangi bounce rate.

Jenis Custom Error Pages

Di cPanel, ada beberapa jenis custom error pages yang bisa kamu atur:

  • Page Title
    Menampilkan judul error tanpa mengarahkan pengunjung ke halaman lain. Ini berguna untuk memberi tahu pengunjung tentang jenis kesalahan yang terjadi tanpa mengubah tampilan utama situs.
  • Page URL
    Jika ingin memberikan alternatif bagi pengunjung, kamu bisa mengarahkan mereka ke URL tertentu saat terjadi error. Misalnya, jika halaman yang dicari tidak ditemukan (404), kamu bisa mengalihkan mereka ke halaman utama atau halaman sitemap agar mereka tetap bisa menjelajahi situsmu.
  • Page Content
    Menampilkan konten khusus di halaman error yang sama. Kamu bisa memasukkan teks, gambar, atau bahkan tombol untuk mengarahkan pengunjung kembali ke halaman utama atau ke artikel yang relevan.

Jenis Error Pages di Website

Error pages biasanya muncul karena adanya HTTP Status Codes yang mengindikasikan masalah tertentu. Berikut adalah lima jenis error yang paling umum:

  • Error 400 (Bad Request)
    Terjadi ketika server tidak dapat memahami permintaan dari browser karena sintaks yang tidak valid. Ini sering disebabkan oleh URL yang salah format atau permintaan yang tidak sesuai dengan standar HTTP.
  • Error 401 (Unauthorized)
    Muncul saat pengguna mencoba mengakses halaman yang memerlukan autentikasi tetapi belum login atau tidak memiliki kredensial yang valid.
  • Error 403 (Forbidden)
    Kesalahan ini berarti akses ke halaman tersebut dilarang. Bisa jadi karena pengaturan izin yang salah atau ada pembatasan tertentu dari server.
  • Error 404 (Not Found)
    Salah satu error paling umum, menandakan bahwa halaman yang dicari tidak tersedia di server. Solusi terbaik adalah memberikan halaman custom 404 yang menyertakan tautan navigasi agar pengunjung tetap bisa menjelajahi situs.
  • Error 500 (Internal Server Error)
    Kesalahan ini berasal dari masalah di sisi server, seperti konfigurasi yang salah atau masalah pada script website. Biasanya, error 500 bisa diperbaiki dengan memeriksa file .htaccess, izin file, atau kode PHP yang digunakan.

Mengapa Custom Error Pages Penting?

Menggunakan custom error pages sangat penting untuk menjaga pengalaman pengguna tetap positif meskipun terjadi kesalahan di website. Berikut beberapa alasannya:

  • Meningkatkan UX (User Experience)
    Custom error pages membantu pengguna memahami kesalahan yang terjadi dan memberikan navigasi alternatif agar mereka tetap berada di situsmu.
  • Membantu SEO
    Halaman error yang dioptimalkan dapat mengurangi bounce rate dan membantu mesin pencari memahami bahwa situsmu tetap relevan bagi pengguna.
  • Mencerminkan Branding
    Dengan desain yang disesuaikan, halaman error bisa tetap selaras dengan identitas brand, memberikan kesan profesional dan terpercaya.
  • Mengurangi Frustrasi Pengguna
    Pesan error yang informatif dan ramah akan membantu pengunjung memahami masalah dan mengarahkannya ke halaman yang tepat

Kesimpulan

Custom Error Pages adalah fitur penting yang bisa meningkatkan pengalaman pengguna, membantu SEO, dan memperkuat branding website-mu. Dengan membuat halaman error yang lebih informatif dan menarik, pengunjung tetap mendapatkan arahan yang jelas meskipun terjadi kesalahan akses.

Melalui cPanel, kamu bisa dengan mudah mengatur tampilan halaman error sesuai kebutuhan. Mulai dari memilih kode error, menambahkan elemen visual, hingga mengoptimalkannya agar tetap selaras dengan identitas brand.

Jika kamu mengalami kesulitan dalam membuat custom error page di cPanel, jangan khawatir! Tim dukungan pelanggan IDwebhost siap membantu kamu kapan saja. Dengan layanan hosting terbaik dan support yang responsif, IDwebhost memastikan website-mu selalu berjalan optimal.