Dokumentasi HTML interaktif: Redirect

Q: Bagaimana cara mengarahkan halaman HTML ke halaman lain?

Tambahkan ke halaman lama, dan link biasa ke halaman baru di body sebagai cadangan. Kalau kamu mengelola server-nya, redirect 301 lebih baik.

Q: Bagaimana cara redirect sesudah 5 detik di HTML?

Isi angka sebelum titik koma dengan jeda dalam detik: . Beri tahu pembaca di halaman itu bahwa mereka akan dialihkan, dan sediakan sebuah link.

Q: Bagaimana cara membuat halaman memuat ulang dirinya sendiri secara otomatis?

Pakai meta refresh dengan jeda dan tanpa URL: memuat ulang halaman setiap 30 detik. Cara ini memuat ulang seluruh halaman dan mengganggu pembaca, jadi untuk data langsung, memperbarui sebagian halaman dengan JavaScript biasanya lebih baik.

Q: Bagaimana cara redirect dengan JavaScript?

Pakai location.replace('https://example.com/new'). Cara ini mengganti halaman saat ini di riwayat, jadi tombol kembali tidak membawa ke halaman yang melakukan redirect. location.href = url juga berfungsi, tapi halaman lama tetap ada di riwayat.

Redirect HTML: Meta Refresh, JavaScript dan Redirect 301

Arahkan satu halaman ke halaman lain dengan tag meta refresh di HTML biasa, dengan JavaScript, atau di server. Pelajari sintaks meta refresh, cara refresh halaman otomatis, kenapa redirect 301 di server adalah pilihan yang lebih baik, dan apa yang dilakukan mesin pencari dengan masing-masing cara.

Halaman ini dilengkapi editor yang bisa dijalankan. Edit, jalankan, dan lihat output-nya seketika.

Oleh Kevin Spektor, Co-founder & CTO

Diterbitkan Sep 24, 2026

Redirect dengan tag meta refresh

Di HTML biasa, redirect adalah tag <meta http-equiv="refresh"> di <head> halaman lama:

<meta http-equiv="refresh" content="0; url=https://example.com/new-page">

Angkanya adalah jeda dalam detik, lalu titik koma, lalu url= dan alamat tujuannya. 0 langsung mengalihkan begitu halaman dimuat. Berikut file "halaman sudah pindah" yang lengkap. Jedanya diatur satu jam supaya preview ini tetap di tempat; di halaman sungguhan kamu akan memakai 0 atau beberapa detik:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="refresh" content="3600; url=https://example.com/new-page">
  <link rel="canonical" href="https://example.com/new-page">
  <title>This page has moved</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>This page has moved</h1>
  <p>Go to the <a href="https://example.com/new-page">new page</a>.</p>
  <p id="out" style="color: #6b7280;"></p>
  <script>
    const content = document.querySelector('meta[http-equiv="refresh"]').content;
    const [seconds, target] = content.split(';');
    document.getElementById('out').textContent =
      'The browser will go to ' + target.trim().slice(4) + ' in ' + seconds + ' seconds.';
  </script>
</body>
</html>

Dua cadangan membuat halaman ini aman: link yang terlihat (untuk siapa pun yang browsernya tidak mengikuti refresh, dan untuk pengguna screen reader yang ingin memilih sendiri), dan <link rel="canonical">, yang memberi tahu mesin pencari URL mana yang asli. Kalau kamu mengganti jedanya menjadi 0 di sini, preview-nya sendiri akan pergi ke example.com; tekan Atur ulang untuk mengembalikan contohnya.

Refresh halaman secara otomatis

Kalau URL-nya tidak ditulis, halaman memuat ulang dirinya sendiri sesudah jeda. content="5" memuat ulang setiap 5 detik. Kotak pertama di bawah adalah halaman kecil dengan tag itu, jadi kamu bisa mengamatinya: waktu muatnya melompat setiap 5 detik, dan teks yang kamu ketik di kolomnya terhapus oleh pemuatan ulang. Kotak kedua menjaga jamnya tetap terbaru dengan JavaScript, dan teksmu tetap ada:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Auto refresh</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .pane { flex: 1; min-width: 220px; border: 2px solid #e5e7eb; border-radius: 8px; padding: 10px; }
    iframe { width: 100%; height: 110px; border: 0; }
    h2 { font-size: 14px; margin: 0 0 6px; }
  </style>
</head>
<body>
  <div class="row">
    <div class="pane">
      <h2>meta refresh, content="5"</h2>
      <iframe id="refreshing" title="Page that refreshes itself"></iframe>
    </div>
    <div class="pane">
      <h2>JavaScript, setInterval</h2>
      <p>Time: <strong id="clock"></strong></p>
      <input placeholder="Type here">
    </div>
  </div>
  <script>
    document.getElementById('refreshing').srcdoc =
      '<meta http-equiv="refresh" content="5">' +
      '<body style="font-family: system-ui, sans-serif; margin: 0;">' +
      '<p>Loaded at: <strong id="t"></strong></p>' +
      '<input placeholder="Type here">' +
      '<script>t.textContent = new Date().toLocaleTimeString();<\/script>';
    const tick = () => { document.getElementById('clock').textContent = new Date().toLocaleTimeString(); };
    tick();
    setInterval(tick, 1000);
  </script>
</body>
</html>

Refresh memuat ulang seluruh halaman, jadi apa pun yang sedang dilakukan pembaca di sana terputus. Itu masih bisa diterima untuk halaman yang tidak dipakai berinteraksi, seperti layar status di dinding. Untuk dashboard, skor dan feed, perbarui hanya bagian yang berubah, seperti yang dilakukan kotak kedua.

Redirect dengan JavaScript

Kalau redirect bergantung pada sesuatu yang hanya diketahui browser (pilihan pengguna, status login, ukuran layar), pakai JavaScript:

// Replaces the current page in the history: Back skips it
location.replace('https://example.com/new-page');

// Adds a history entry: Back returns to this page
location.href = 'https://example.com/new-page';

Untuk redirect, location.replace hampir selalu yang kamu butuhkan. Dengan location.href, menekan Back membawa ke halaman yang melakukan redirect, yang langsung mengalihkan lagi, sehingga pengguna terjebak.

Utamakan redirect di server

Meta refresh atau script baru berjalan sesudah browser mengunduh halaman lama. Redirect di server menjawab permintaan dengan kode status dan alamat baru, sebelum HTML apa pun dikirim:

301 (moved permanently) atau 308: halaman itu pindah ke tempat baru untuk selamanya. Mesin pencari memindahkan peringkat URL lama ke URL baru.
302 (found) atau 307: pindah sementara; URL lama tetap menjadi yang utama.

Cara memasangnya tergantung hosting-mu. Beberapa bentuk yang umum:

# Apache (.htaccess)
Redirect 301 /old-page https://example.com/new-page

# nginx (inside a server block)
location = /old-page { return 301 https://example.com/new-page; }

# Netlify or Cloudflare Pages (_redirects file)
/old-page  /new-page  301

Pakai meta refresh kalau kamu sama sekali tidak bisa mengubah server, misalnya di hosting statis tanpa aturan redirect. Google memperlakukan meta refresh langsung sebagai redirect permanen dan yang memakai jeda sebagai redirect sementara, jadi jeda 0 lebih mendekati 301.

Redirect berjeda dan aksesibilitas

Redirect dengan jeda bisa memindahkan pembaca di tengah kalimat. Pedoman aksesibilitas (WCAG) menganggap redirect berjeda sebagai kegagalan; redirect langsung tidak masalah. Kalau memang harus menunggu, sebutkan di halaman ("Kamu akan dialihkan dalam 10 detik"), dan selalu sertakan link-nya supaya orang bisa pergi sesuai kecepatannya sendiri.

Kesalahan umum

Redirect loop. Dua halaman yang saling mengalihkan ke satu sama lain membuat pembaca terpental selamanya. Periksa ke mana halaman tujuan mengarahkan orang.
URL relatif yang mengarah ke tempat yang salah. url=new-page dibaca relatif terhadap URL saat ini, jadi dari /docs/old tujuannya menjadi /docs/new-page. Pakai path lengkap seperti url=/new-page kalau ragu.
Tanpa link cadangan. Selalu tambahkan link biasa ke halaman baru di body.
Memakai location.href untuk redirect. Tombol kembali lalu membawa ke redirect loop. Pakai location.replace.
Memakai meta refresh padahal kamu mengelola server-nya. Atur redirect 301 saja; lebih cepat dan lebih jelas bagi setiap alat.

Pertanyaan yang sering diajukan

Bagaimana cara mengarahkan halaman HTML ke halaman lain?

Tambahkan <meta http-equiv="refresh" content="0; url=https://example.com/new"> ke <head> halaman lama, dan link biasa ke halaman baru di body sebagai cadangan. Kalau kamu mengelola server-nya, redirect 301 lebih baik.

Bagaimana cara redirect sesudah 5 detik di HTML?

Isi angka sebelum titik koma dengan jeda dalam detik: <meta http-equiv="refresh" content="5; url=https://example.com/new">. Beri tahu pembaca di halaman itu bahwa mereka akan dialihkan, dan sediakan sebuah link.

Bagaimana cara membuat halaman memuat ulang dirinya sendiri secara otomatis?

Pakai meta refresh dengan jeda dan tanpa URL: <meta http-equiv="refresh" content="30"> memuat ulang halaman setiap 30 detik. Cara ini memuat ulang seluruh halaman dan mengganggu pembaca, jadi untuk data langsung, memperbarui sebagian halaman dengan JavaScript biasanya lebih baik.

Apakah redirect meta refresh buruk untuk SEO?

Google mengikutinya: meta refresh langsung (jeda 0) diperlakukan seperti redirect permanen, dan yang memakai jeda seperti redirect sementara. Redirect 301 di sisi server tetap cara yang disarankan, karena lebih cepat dan dipahami oleh setiap crawler dan browser.

Bagaimana cara redirect dengan JavaScript?

Pakai location.replace('https://example.com/new'). Cara ini mengganti halaman saat ini di riwayat, jadi tombol kembali tidak membawa ke halaman yang melakukan redirect. location.href = url juga berfungsi, tapi halaman lama tetap ada di riwayat.

Konsep terkait