Cara Membuat Tampilan Under Construction Pada Website

Dalam proses pembuatan atau perbaikan sebuah website, ada kalanya situs Anda belum siap untuk dikunjungi oleh publik. Di sinilah pentingnya membuat tampilan under construction (sedang dalam perbaikan). Alih-alih membiarkan pengunjung melihat halaman error atau desain yang masih berantakan, halaman ini memberikan kesan profesional dan informatif.

Setelah proses maintenance atau pengembangan selesai, Anda bisa mempublikasikan ulang website tersebut dengan mudah. Namun, bagaimana cara membuat halaman under construction yang benar agar tetap ramah SEO dan tidak merusak reputasi website Anda?

Artikel ini akan membahas secara lengkap mulai dari fungsi, hingga langkah-langkah membuat tampilan under construction baik secara manual (HTML).

Ringkasan Cepat

• Halaman under construction menjaga citra profesional dan mencegah penurunan peringkat SEO saat website sedang dibangun atau diperbaiki.
• Gunakan tag <meta name="robots" content="noindex"> agar mesin pencari tidak mengindeks halaman sementara ini.
• Website HTML manual bisa dibuat lewat file index.html di cPanel, sementara WordPress dan SitePro masing-masing punya cara lebih praktis lewat plugin atau fitur bawaan.
• Jangan biarkan halaman ini aktif terlalu lama, dan selalu hapus tag noindex begitu website selesai dan siap dipublikasikan ulang.

Apa Itu Halaman Under Construction?

Halaman under construction adalah halaman khusus yang ditampilkan kepada pengunjung ketika website Anda sedang dalam proses pembuatan, perbaikan, atau pengembangan, menggantikan tampilan asli yang belum siap dilihat publik. Alih-alih menampilkan desain yang masih berantakan atau pesan error, halaman ini memberi tahu pengunjung bahwa perubahan sedang berlangsung secara sengaja.

Biasanya, halaman ini berisi informasi singkat seperti status perbaikan, perkiraan waktu website kembali normal, dan kontak alternatif yang bisa dihubungi selama proses berlangsung.

Perbedaan Under Construction, Maintenance Mode, dan Coming Soon

Ketiga istilah ini sering dipakai bergantian, padahal fungsinya berbeda, dan memilih istilah yang tepat membantu Anda menentukan pendekatan yang paling sesuai dengan kondisi website Anda.

• Under construction dipakai untuk website yang benar-benar baru dan belum pernah tayang sama sekali, biasanya ditampilkan selama proses pembangunan awal berlangsung
• Maintenance mode dipakai untuk website yang sebelumnya sudah aktif dan memiliki pengunjung, lalu disembunyikan sementara karena sedang ada perbaikan atau pembaruan
• Coming soon dipakai untuk membangun antisipasi sebelum peluncuran produk atau website baru, biasanya disertai sedikit bocoran informasi atau formulir pendaftaran notifikasi

Meski tujuan dan istilahnya berbeda, ketiganya sama-sama membutuhkan pengaturan teknis yang serupa, seperti tag noindex dan HTTP status code yang tepat, supaya tidak berdampak buruk ke SEO website Anda.

Mengapa Halaman Under Construction Penting?

Sebelum masuk ke tahap pembuatan, penting untuk memahami fungsi utama dari halaman under construction. Berikut adalah beberapa alasan mengapa Anda wajib menggunakannya:

1. Menjaga Citra Profesional, Halaman khusus ini memberitahu pengunjung bahwa Anda sedang melakukan perbaikan secara sengaja, bukan karena website down atau terkena hack.
2. Membangun Antisipasi, Untuk website baru, Anda bisa menggunakan halaman ini untuk memberikan sedikit bocoran atau tanggal rilis (coming soon), sehingga memancing rasa penasaran audiens.
3. Mencegah Penurunan Peringkat SEO, Halaman perbaikan yang diatur dengan benar akan memberi tahu mesin pencari bahwa website hanya ditutup sementara, sehingga peringkat pencarian Anda tidak merosot akibat terdeteksi sebagai halaman error.
4. Memberikan Kontak Alternatif, Anda bisa mencantumkan alamat email, nomor telepon, atau tautan media sosial agar pelanggan tetap bisa menghubungi bisnis Anda selama website diperbaiki.

Cara Membuat Tampilan Under Construction Secara Manual (HTML)

Apabila Anda membangun website dengan script manual atau ingin cara yang paling ringan, Anda bisa membuat file .html sederhana. Berikut adalah langkah-langkah membuat halaman under construction secara manual melalui cPanel:

1. Login ke cPanel akun hosting Anda.
2. Klik menu File Manager > lalu buka folder public_html.
3. Upload file gambar yang akan dijadikan latar belakang atau pemberitahuan under construction.
4. Siapkan file index.html.
   • Penting: Jika di dalam folder public_html sudah terdapat file index.php atau index.html lama, ubah namanya (rename) terlebih dahulu menjadi index_old.php agar tidak tertimpa dan mencegah konflik.
   • Setelah aman, klik menu +File lalu buat file baru dengan nama index.html.

1. Edit file index.html tersebut dan masukkan script HTML5 modern berikut ini:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nama Website Anda - Sedang Dalam Perbaikan</title>
    <!-- Tag noindex penting agar Google tidak mengindeks halaman kosong ini -->
    <meta name="robots" content="noindex"> 
    <style>
        body {
            margin: 0;
            background-color: #eff2fb;
            display: flex;            
            justify-content: center;  
            align-items: center;      
            height: 100vh;            
        }
        img {
            max-width: 100%;
            height: auto;             
        }
    </style>
</head>
<body>
    <!-- Ganti xxxx.png dengan nama file gambar yang Anda upload -->
    <img src="xxxx.png" alt="Website Under Construction">
</body>
</html>

Keterangan Script:

• Pada tag <title>, ubah “Nama Website Anda – Sedang Dalam Perbaikan” dengan nama bisnis/situs Anda sendiri.
• Ubah xxxx.png menjadi nama file gambar yang sebelumnya telah Anda upload (misal: maintenance.jpg).
• Script di atas sudah menggunakan Flexbox CSS sehingga gambar akan otomatis berada di tengah layar dan responsif di perangkat mobile.
• Penambahan <meta name="robots" content="noindex"> sangat penting untuk SEO, agar mesin pencari tidak menganggap halaman sementara ini sebagai halaman berkualitas rendah (thin content).

Tips Tambahan: Mencari Gambar Under Construction (PNG/JPG)

Bagi Anda yang belum memiliki gambar background atau ilustrasi under construction, Anda tidak perlu mendesainnya dari awal. Anda bisa mengunduh gambar secara gratis melalui penyedia stok konten visual seperti Freepik atau Freeimages.

Langkahnya sangat mudah:

1. Kunjungi situs web Freepik (freepik.com) atau Freeimages.
2. Pada kolom pencarian, ketikkan kata kunci “under construction”.
3. Anda akan menemukan banyak pilihan gambar atau ikon PNG yang menarik.
4. Pilih dan unduh salah satu gambar yang paling sesuai dengan tema website Anda, lalu unggah ke hosting (cPanel) seperti pada instruksi nomor 3 di atas, dan sesuaikan nama file pada script HTML Anda.

Opsi 2: Tanpa Gambar 

Jika Anda menginginkan tampilan yang lebih profesional, modern, dan informatif tanpa harus membuat/mencari gambar desain, Anda bisa menggunakan template di bawah ini. Template ini ringan dan sudah dilengkapi dengan informasi kontak serta media sosial bisnis Anda.

Cukup salin script ini ke dalam file index.html Anda, lalu sesuaikan bagian teks (seperti NAMA BISNIS, Email, Nomor Telepon, dan tautan sosial media):

<!DOCTYPE html> 
<html lang="id"> 
<head>     
    <meta charset="UTF-8">     
    <meta name="viewport" content="width=device-width, initial-scale=1.0">     
    <title>Situs Sedang Dalam Pemeliharaan</title>     
    <meta name="robots" content="noindex">
    <!-- Tailwind CSS CDN -->     
    <script src="https://cdn.tailwindcss.com"></script>     
    <link rel="preconnect" href="https://fonts.googleapis.com">     
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>     
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">     
    <style>         
        body {             
            font-family: 'Inter', sans-serif;         
        }     
    </style> 
</head> 
<body class="bg-slate-50 text-slate-800 min-h-screen flex flex-col justify-between items-center p-6">      
    
    <!-- Header / Logo -->     
    <header class="w-full max-w-xl text-center pt-8">         
        <span class="text-xl font-bold tracking-tight text-slate-900">NAMA BISNIS</span>     
    </header>      
    
    <!-- Konten Utama -->     
    <main class="w-full max-w-xl my-auto py-12">         
        <div class="bg-white border border-slate-200 rounded-2xl p-8 md:p-10 shadow-sm text-center">                          
            
            <!-- Ikon Sedang Perbaikan -->             
            <div class="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-6 text-slate-700">                 
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">                     
                    <path stroke-linecap="round" stroke-linejoin="round" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />                 
                </svg>             
            </div>              
            
            <!-- Teks Judul & Deskripsi -->             
            <h1 class="text-2xl md:text-3xl font-bold text-slate-900 mb-3">Situs Web Sedang Diperbarui</h1>             
            <p class="text-slate-600 leading-relaxed mb-8 text-sm md:text-base">                 Kami sedang melakukan pemeliharaan rutin dan peningkatan layanan untuk memberikan pengalaman yang lebih baik. Kami akan segera kembali online.             </p>              
            
            <hr class="border-slate-100 my-6">              
            
            <!-- Kontak & Media Sosial -->             
            <div>                 
                <p class="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-4">Hubungi Kami Lebih Lanjut</p>                                  
                
                <!-- Alamat Email & Telepon -->                 
                <div class="flex flex-col sm:flex-row justify-center items-center gap-3 sm:gap-6 text-sm mb-6">                     
                    <!-- Email -->                     
                    <a href="mailto:kontak@perusahaananda.com" class="flex items-center gap-2 text-slate-700 hover:text-slate-900 font-medium transition-colors">                         
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">                             
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />                         
                        </svg>                         
                        kontak@perusahaananda.com                     
                    </a>                      
                    
                    <!-- Telepon -->                     
                    <a href="tel:+6281234567890" class="flex items-center gap-2 text-slate-700 hover:text-slate-900 font-medium transition-colors">                         
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">                             
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />                         
                        </svg>                         
                        +62 812-3456-7890                     
                    </a>                 
                </div>                  
                
                <!-- Tautan Media Sosial -->                 
                <div class="flex justify-center items-center gap-4 text-slate-500">                     
                    <!-- WhatsApp -->                     
                    <a href="https://wa.me/6281234567890" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp" class="hover:text-slate-800 transition-colors">                         
                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">                             
                            <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981z"/>                         
                        </svg>                     
                    </a>                      
                    
                    <!-- Instagram -->                     
                    <a href="https://instagram.com/akunanda" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="hover:text-slate-800 transition-colors">                         
                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">                             
                            <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>                         
                        </svg>                     
                    </a>                      
                    
                    <!-- LinkedIn -->                     
                    <a href="https://linkedin.com/company/perusahaananda" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="hover:text-slate-800 transition-colors">                         
                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">                             
                            <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>                         
                        </svg>                     
                    </a>                 
                </div>             
            </div>          
        </div>     
    </main>      
    
    <!-- Footer -->     
    <footer class="w-full max-w-xl text-center pb-8 text-xs text-slate-400">         
        &copy; 2026 Nama Bisnis Anda. Hak Cipta Dilindungi Undang-Undang.     
    </footer>  
</body> 
</html>

Cara Mengatur HTTP Status Code yang Tepat (503 vs 200)

Banyak yang mengira tag noindex saja sudah cukup untuk mengamankan SEO saat website sedang diperbaiki, padahal ada satu hal teknis lain yang sering terlewat, yaitu HTTP status code yang dikembalikan halaman tersebut. Secara default, jika Anda hanya mengganti isi file index.html seperti langkah di atas, website tetap mengembalikan status 200 OK, seolah halaman tersebut adalah konten normal yang memang sengaja ditampilkan, bukan tanda bahwa website sedang tidak tersedia sementara.

Google sendiri merekomendasikan agar halaman maintenance mengembalikan status 503 Service Unavailable, disertai header Retry-After yang memberi tahu kapan sebaiknya mesin pencari kembali memeriksa website Anda. Dengan begini, Google memperlakukan kondisi ini sebagai gangguan sementara, bukan konten asli yang kebetulan kosong.

Hal ini terutama penting jika website Anda sebelumnya sudah aktif dan terindeks di Google. Tanpa status 503, dan jika halaman under construction dibiarkan terlalu lama, Google berisiko mulai menurunkan frekuensi crawling, bahkan menghapus halaman-halaman Anda dari indeks karena dianggap kontennya sudah tidak ada. Untuk website yang benar-benar baru dan belum pernah terindeks, risikonya tidak sebesar itu, tapi tetap disarankan sebagai praktik terbaik sejak awal.

Jika Anda menggunakan cPanel, status 503 bisa diaktifkan lewat file .htaccess di folder public_html. Berikut contoh konfigurasinya.

ErrorDocument 503 /index.html
RewriteEngine On
RewriteCond %{REQUEST_URI} !/index\.html$
RewriteRule .* - [R=503,L]
Header Set Retry-After "3600"

Ganti nilai 3600 sesuai perkiraan waktu dalam detik sebelum website Anda kembali normal, misalnya 3600 untuk 1 jam. Setelah proses maintenance selesai, jangan lupa menghapus atau menonaktifkan baris-baris tersebut agar website kembali mengembalikan status 200 seperti biasa.

Membuat Tampilan Under Construction Pada WordPress

Jika website Anda menggunakan CMS WordPress, Anda tidak perlu menyentuh kode HTML sama sekali untuk membuat tampilan under construction. Cara paling mudah adalah memasang plugin khusus, misalnya plugin gratis “Under Construction” yang tersedia langsung di direktori resmi WordPress.

Secara garis besar, langkahnya hanya tiga tahap. Install plugin tersebut lewat menu Plugins > Add New, aktifkan dengan klik Activate, lalu nyalakan mode under construction lewat switch dari posisi “Off” ke “On” pada menu pengaturan plugin yang muncul setelah aktivasi. Begitu diaktifkan, pengunjung dari luar akan melihat halaman under construction, sementara Anda sebagai admin tetap bisa login dan mengedit website seperti biasa.

Selain lewat plugin, Anda juga bisa membuat tampilan under construction yang lebih sesuai branding lewat theme Divi, tanpa perlu plugin tambahan.

Panduan lengkap beserta langkah detail dan screenshot setiap tahapnya bisa Anda baca di artikel Membuat Tampilan Under Construction Pada WordPress.

Membuat Tampilan Under Construction Pada SitePro

Bagi pengguna SitePro Builder, prosesnya lebih sederhana lagi karena semuanya sudah tersedia lewat fitur bawaan, tanpa perlu plugin atau kode tambahan.

Ada dua opsi yang bisa Anda pilih, tergantung kondisi website Anda. Jika website belum memiliki konten sama sekali, Anda tinggal memilih template bertema Under Construction langsung dari galeri template SitePro, lalu klik Publish. Namun, jika website Anda sudah berisi konten dan Anda hanya ingin menyembunyikannya sementara tanpa kehilangan data, gunakan fitur Custom Maintenance Page lewat menu Edit, aktifkan toggle Enabled, sesuaikan tampilannya sesuai kebutuhan, lalu klik Publish.

Setelah proses perbaikan selesai, Anda tinggal menonaktifkan kembali fitur ini dengan meng-uncheck opsi Enabled pada menu yang sama, lalu publish ulang agar website kembali tampil normal.

Panduan lengkap beserta langkah detail dan screenshot setiap tahapnya bisa Anda baca di artikel Cara Membuat Tampilan Under Construction di SitePro.

Berapa Lama Idealnya Halaman Under Construction Aktif?

Tidak ada batas waktu baku yang berlaku untuk semua website, tapi sebagai patokan umum, sebaiknya halaman under construction tidak aktif lebih dari beberapa minggu untuk perbaikan kecil, atau maksimal 1 hingga 2 bulan untuk pembangunan website yang lebih kompleks. Semakin lama halaman ini aktif, semakin besar pula risikonya.

Jika dibiarkan terlalu lama, mesin pencari bisa saja mulai menganggap website Anda memang tidak memiliki konten yang substantif, meskipun Anda sudah memasang tag noindex dan status code yang benar. Pengunjung yang berulang kali menemukan halaman yang sama juga berisiko kehilangan minat untuk kembali lagi di kemudian hari.

Jika proses pembangunan website Anda diperkirakan memakan waktu lebih lama dari itu, pertimbangkan untuk mempublikasikan versi awal website meski belum sepenuhnya selesai, lalu menyempurnakannya secara bertahap sambil website tetap bisa diakses publik.

Kesimpulan

Membuat halaman under construction adalah langkah awal untuk menjaga profesionalitas bisnis Anda di dunia digital. Daripada membiarkan pengunjung melihat error saat Anda melakukan pemeliharaan, halaman ini memastikan audiens tetap terinformasi.

Berikut adalah ringkasan penting dari panduan ini:

• Penting untuk UX dan SEO Memberikan kejelasan kepada pengunjung dan menggunakan tag <meta name="robots" content="noindex"> menyelamatkan peringkat pencarian Anda.
• Gunakan HTML5 & CSS pastikan desain Anda (baik dengan gambar maupun template ) otomatis responsif untuk perangkat seluler.
• Cegah Konflik File, Selalu ingat untuk rename file index utama Anda yang lama sebelum membuat index.html untuk halaman under construction.

Dengan panduan di atas, kini Anda bisa melakukan pemeliharaan website dengan tenang!

FAQ

Berikut adalah beberapa pertanyaan popular tentang membuat halaman under construction pada website.