Çalıştırılabilir HTML Dokümanları: HTML yönlendirme

Q: Bir HTML sayfasını başka bir sayfaya nasıl yönlendiririm?

Eski sayfanın kısmına ekle, yedek olarak body'ye de yeni sayfaya giden normal bir link koy. Sunucuyu yönetebiliyorsan bir 301 yönlendirmesi daha iyidir.

Q: Bir sayfanın kendini otomatik olarak yenilemesini nasıl sağlarım?

Gecikmesi olan ve URL'si olmayan bir meta refresh kullan: sayfayı her 30 saniyede bir yeniden yükler. Bütün sayfayı yeniden yükler ve okuru böler, bu yüzden canlı veriler için sayfanın bir kısmını JavaScript ile güncellemek genellikle daha iyidir.

Q: JavaScript ile nasıl yönlendirme yapılır?

location.replace('https://example.com/new') kullan. Geçerli sayfayı geçmişte değiştirir, böylece geri butonu yönlendiren sayfaya dönmez. location.href = url de çalışır ama eski sayfayı geçmişte tutar.

Meta refresh etiketiyle yönlendirme

Düz HTML'de yönlendirme, eski sayfanın <head> kısmındaki bir <meta http-equiv="refresh"> etiketidir:

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

Sayı saniye cinsinden gecikmedir, ardından bir noktalı virgül, sonra url= ve gidilecek adres gelir. 0 sayfa yüklenir yüklenmez yönlendirir. İşte eksiksiz bir "sayfa taşındı" dosyası. Bu önizleme yerinde kalsın diye gecikme bir saate ayarlandı; gerçek bir sayfada 0 ya da birkaç saniye kullanırsın:

<!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>

İki yedek sayfayı güvenli yapar: görünür link (tarayıcısı yenilemeyi takip etmeyenler ve seçmek isteyen ekran okuyucu kullananlar için) ve arama motorlarına hangi URL'nin gerçek olduğunu söyleyen <link rel="canonical">. Buradaki gecikmeyi 0 yaparsan önizlemenin kendisi example.com'a gider; örneği geri almak için Reset'e bas.

Bir sayfayı otomatik yenilemek

URL'yi yazma, sayfa gecikmeden sonra kendini yeniden yükler. content="5" her 5 saniyede bir yeniden yükler. Aşağıdaki ilk kutu bu etiketi içeren küçük bir sayfa, izleyebilirsin: yükleme zamanı her 5 saniyede bir değişir ve alanına yazdığın metin yeniden yüklemeyle silinir. İkinci kutu ise saatini JavaScript ile güncel tutar ve metnini korur:

<!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>

Yenileme bütün sayfayı yeniden yükler, yani okurun sayfada yaptığı her şey bölünür. Bu, duvardaki bir durum ekranı gibi kimsenin etkileşime girmediği bir sayfa için kabul edilebilir. Panolar, skorlar ve akışlar için ikinci kutunun yaptığı gibi yalnızca değişen kısmı güncelle.

JavaScript ile yönlendirme

Yönlendirme yalnızca tarayıcının bildiği bir şeye (kullanıcının seçimi, giriş yapılmış bir durum, bir ekran boyutu) bağlı olduğunda JavaScript kullan:

// 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';

Bir yönlendirme için neredeyse her zaman istediğin location.replace olur. location.href ile Geri'ye basmak, yönlendiren sayfaya düşer, o da yeniden yönlendirir ve kullanıcı sıkışıp kalır.

Sunucu yönlendirmesini tercih et

Bir meta refresh ya da bir script, ancak tarayıcı eski sayfayı indirdikten sonra çalışır. Bir sunucu yönlendirmesi ise isteği, herhangi bir HTML gönderilmeden önce bir durum kodu ve yeni adresle yanıtlar:

301 (kalıcı olarak taşındı) ya da 308: sayfanın temelli yeni bir yeri var. Arama motorları eski URL'nin sıralamasını yenisine taşır.
302 (bulundu) ya da 307: geçici bir taşınma; eski URL ana URL olarak kalır.

Nasıl kurulacağı hosting'ine bağlıdır. Birkaç yaygın biçim:

# 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

Meta refresh'i sunucuyu hiç değiştiremediğinde kullan, örneğin yönlendirme kuralları olmayan statik bir hosting'de. Google anlık bir meta refresh'i kalıcı, gecikmeli olanı ise geçici bir yönlendirme olarak ele alır, bu yüzden 0 gecikme bir 301'e daha yakın bir karşılıktır.

Zamanlı yönlendirmeler ve erişilebilirlik

Gecikmeli bir yönlendirme okuru bir cümlenin ortasında başka yere götürebilir. Erişilebilirlik yönergeleri (WCAG) zamanlı yönlendirmeleri bir hata sayar; anlık bir yönlendirme sorun değildir. Beklemek zorundaysan bunu sayfada söyle ("10 saniye içinde yönlendirileceksiniz") ve insanlar kendi hızlarında gidebilsin diye her zaman linki ekle.

Sık yapılan hatalar

Yönlendirme döngüsü. Birbirine yenilenen iki sayfa okuru sonsuza kadar sektirir. Hedef sayfanın insanları nereye gönderdiğini kontrol et.
Yanlış yeri gösteren göreli bir URL. url=new-page geçerli URL'ye göre çözülür, yani /docs/old sayfasından /docs/new-page adresine gider. Emin değilsen url=/new-page gibi tam bir yol kullan.
Yedek link olmaması. Body'ye yeni sayfaya giden normal bir link her zaman ekle.
Yönlendirmeler için location.href kullanmak. Geri butonu bu durumda bir yönlendirme döngüsüne götürür. location.replace kullan.
Sunucuyu yönetebildiğin hâlde meta refresh kullanmak. Onun yerine bir 301 ayarla; daha hızlıdır ve her araç için daha nettir.

Sıkça Sorulan Sorular

Bir HTML sayfasını başka bir sayfaya nasıl yönlendiririm?

Eski sayfanın <head> kısmına <meta http-equiv="refresh" content="0; url=https://example.com/new"> ekle, yedek olarak body'ye de yeni sayfaya giden normal bir link koy. Sunucuyu yönetebiliyorsan bir 301 yönlendirmesi daha iyidir.

HTML'de 5 saniye sonra nasıl yönlendirme yapılır?

Noktalı virgülden önceki sayıyı saniye cinsinden gecikmeye ayarla: <meta http-equiv="refresh" content="5; url=https://example.com/new">. Sayfada okura yönlendirileceğini söyle ve ona bir link ver.

Bir sayfanın kendini otomatik olarak yenilemesini nasıl sağlarım?

Gecikmesi olan ve URL'si olmayan bir meta refresh kullan: <meta http-equiv="refresh" content="30"> sayfayı her 30 saniyede bir yeniden yükler. Bütün sayfayı yeniden yükler ve okuru böler, bu yüzden canlı veriler için sayfanın bir kısmını JavaScript ile güncellemek genellikle daha iyidir.

Meta refresh yönlendirmesi SEO için kötü mü?

Google onu takip eder: anlık bir meta refresh (gecikme 0) kalıcı bir yönlendirme gibi, gecikmeli olan ise geçici bir yönlendirme gibi ele alınır. Yine de önerilen yol sunucu tarafında bir 301'dir, çünkü daha hızlıdır ve her tarayıcı ve arama motoru botu onu anlar.

JavaScript ile nasıl yönlendirme yapılır?

location.replace('https://example.com/new') kullan. Geçerli sayfayı geçmişte değiştirir, böylece geri butonu yönlendiren sayfaya dönmez. location.href = url de çalışır ama eski sayfayı geçmişte tutar.

İlgili kavramlar