Ditulis oleh: Ditulis pada: 8/20/2018
Cara Redirect Halaman Error 404 Ke Homepage Dengan Javascript - Bisa saja sebuah blog memiliki halaman error 404 atau halaman tidak ditemukan. Biasanya halaman tersebut telah dihapus atau oleh penyebab lain seperti kesalahan penulisan URL postingan, dan lain-lain.Untuk itu, biasanya blog atau web membuat halaman atau landing page khusus untuk halaman error 404 dengan memberikan keterangan bahwa halaman yang dituju sudah dihapus atau sudah tidak ada. Selebihnya diberikan tombol menuju homepage atau disediakan kotak pencarian untuk mencari kembali post yang diinginkan.
Nah kali ini saya akan memberikan trik untuk mengalihkan atau redirect halaman error 404 secara otomatis ke hompage sehingga pengunjung tidak perlu mengklik tombol ke homepage.
Sebenarnya postingan seperti ini sudah banyak di Google, namun ada sahabat Kompi yang kesulitan menerapkannya karena script-nya tidak jalan di beberapa template, khususnya template yang menggunakan conditional tag untuk halaman error 404.
Untuk demonya silahkan coba halaman error Kompi Ajaib ini https://www.kompiajaib.com/404, namun untuk blog Kompi Ajaib ini hanya untuk perangkat desktop saja, untuk mobile AMP saya belum menemukan caranya yang valid AMP.
Jika ingin mencobanya, silahkan copy kode javascript berikut ini dan simpan di atas kode
</body> atau <!--</body>--> </body>1. Untuk blog non AMP
<b:if cond='data:blog.pageType in {"error_page"}'>
<script>
setTimeout(function () {
window.location.replace("<data:blog.homepageUrl/>");
}, 8000); //akan memanggil fungsi setelah 8 detik.
</script>
</b:if>
Kode di atas akan meredirect otomatis halaman error 404 ke homepage setelah 8 detik, sehingga pengunjung masih bisa membaca pesan di halaman error 404, Anda bisa mengatur/mengganti angka
8000 untuk mengatur waktu tunggu. 1 detik = 1000.Jika ingin langsung redirect, gunakan kode berikut.
<b:if cond='data:blog.pageType in {"error_page"}'>
<script>
setTimeout(function () {
window.location.replace("<data:blog.homepageUrl/>");
});
</script>
</b:if>
Atau
<b:if cond='data:blog.pageType in {"error_page"}'>
<script>
window.location.replace("<data:blog.homepageUrl/>");
</script>
</b:if>
2. Untuk blog yang menggunakan URL mobile ?m=1 sebagai AMP, gunakan kode berikut yang hanya akan berlaku pada URL desktop.
<b:if cond='data:blog.pageType in {"error_page"} and data:blog.isMobileRequest == "false"'>
<script>
setTimeout(function () {
window.location.replace("<data:blog.homepageUrl/>");
}, 8000); //akan memanggil fungsi setelah 8 detik.
</script>
</b:if>
Atau
<b:if cond='data:blog.pageType in {"error_page"} and data:blog.isMobileRequest == "false"'>
<script>
setTimeout(function () {
window.location.replace("<data:blog.homepageUrl/>");
});
</script>
</b:if>
3. Ini juga bisa digunakan di Wordpress, silahkan simpan kode ini di bagian 404.php di paling bawah.
<script>
setTimeout(function () {
window.location.replace("<?php echo home_url('/'); ?>");
}, 8000); //akan memanggil fungsi setelah 8 detik.
</script>
Atau
<script>
setTimeout(function () {
window.location.replace("<?php echo home_url('/'); ?>");
});
</script>
Semoga bermanfaat....