Dokumentacja HTML z przykładami: Przekierowanie

Q: Jak przekierować stronę HTML na inną stronę?

Dodaj do starej strony, a w treści zwykły link do nowej strony jako rozwiązanie zapasowe. Jeśli masz kontrolę nad serwerem, lepsze jest przekierowanie 301.

Q: Jak zrobić przekierowanie po 5 sekundach w HTML?

Ustaw liczbę przed średnikiem na opóźnienie w sekundach: . Napisz na stronie, że czytelnik zostanie przekierowany, i daj mu link.

Q: Jak sprawić, żeby strona sama się odświeżała?

Użyj meta refresh z opóźnieniem i bez URL: przeładowuje stronę co 30 sekund. Przeładowuje całą stronę i przerywa czytelnikowi, więc przy danych na żywo zwykle lepiej aktualizować fragment strony przez JavaScript.

Q: Jak zrobić przekierowanie w JavaScript?

Użyj location.replace('https://example.com/new'). Zastępuje bieżącą stronę w historii, więc przycisk Wstecz nie wraca na stronę, która przekierowała. location.href = url też działa, ale zostawia starą stronę w historii.

Przekierowanie znacznikiem meta refresh

W czystym HTML przekierowanie to znacznik <meta http-equiv="refresh"> w <head> starej strony:

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

Liczba to opóźnienie w sekundach, potem średnik, potem url= i adres docelowy. 0 przekierowuje zaraz po wczytaniu strony. Oto kompletny plik "strona została przeniesiona". Opóźnienie ustawiono na godzinę, żeby ten podgląd został na miejscu; na prawdziwej stronie używa się 0 albo kilku sekund:

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

Dwa zabezpieczenia sprawiają, że strona jest bezpieczna: widoczny link (dla każdego, czyja przeglądarka nie wykona odświeżenia, i dla użytkowników czytników ekranu, którzy chcą sami zdecydować) oraz <link rel="canonical">, który mówi wyszukiwarkom, który URL jest właściwy. Jeśli zmienisz tu opóźnienie na 0, sam podgląd przejdzie na example.com; naciśnij Reset, żeby odzyskać przykład.

Automatyczne odświeżanie strony

Pomiń URL, a strona sama przeładuje się po upływie opóźnienia. content="5" przeładowuje co 5 sekund. Pierwsze pole poniżej to mała strona z tym znacznikiem, więc możesz to obserwować: jej czas wczytania skacze co 5 sekund, a tekst wpisany w jej pole znika przy przeładowaniu. Drugie pole aktualizuje zegar przez JavaScript i zachowuje twój tekst:

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

Odświeżenie wczytuje całą stronę od nowa, więc to, co robił na niej czytelnik, zostaje przerwane. Można to zaakceptować na stronie, z którą nikt nie wchodzi w interakcję, na przykład na ekranie statusu na ścianie. W dashboardach, wynikach i kanałach aktualizuj tylko zmieniającą się część, tak jak robi to drugie pole.

Przekierowanie w JavaScript

Gdy przekierowanie zależy od czegoś, co wie tylko przeglądarka (wybór użytkownika, stan zalogowania, rozmiar ekranu), użyj 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';

Do przekierowania prawie zawsze potrzebujesz location.replace. Przy location.href naciśnięcie Wstecz trafia na stronę, która przekierowała, a ta znowu przekierowuje i użytkownik utyka w miejscu.

Wybieraj przekierowanie na serwerze

Meta refresh albo skrypt działa dopiero wtedy, gdy przeglądarka pobierze starą stronę. Przekierowanie na serwerze odpowiada na żądanie kodem statusu i nowym adresem, zanim zostanie wysłany jakikolwiek HTML:

301 (moved permanently) lub 308: strona na stałe ma nowy adres. Wyszukiwarki przenoszą pozycję starego URL na nowy.
302 (found) lub 307: tymczasowe przeniesienie; stary URL pozostaje głównym.

Konfiguracja zależy od hostingu. Kilka popularnych form:

# 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

Używaj meta refresh, gdy w ogóle nie możesz zmienić serwera, na przykład na statycznym hostingu bez reguł przekierowań. Google traktuje natychmiastowy meta refresh jak przekierowanie stałe, a opóźniony jak tymczasowe, więc opóźnienie 0 jest bliższe 301.

Przekierowania z opóźnieniem a dostępność

Przekierowanie z opóźnieniem może zabrać czytelnika w połowie zdania. Wytyczne dostępności (WCAG) uznają przekierowania z odliczaniem za błąd; natychmiastowe przekierowanie jest w porządku. Jeśli musisz czekać, napisz to na stronie ("Za 10 sekund nastąpi przekierowanie") i zawsze dodaj link, żeby każdy mógł przejść we własnym tempie.

Częste błędy

Pętla przekierowań. Dwie strony, które odświeżają się nawzajem, odbijają czytelnika w nieskończoność. Sprawdź, dokąd kieruje strona docelowa.
Względny URL, który wskazuje złe miejsce. url=new-page jest rozwiązywany względem bieżącego URL, więc z /docs/old prowadzi do /docs/new-page. W razie wątpliwości użyj pełnej ścieżki, na przykład url=/new-page.
Brak zapasowego linku. Zawsze dodaj w treści zwykły link do nowej strony.
Używanie location.href do przekierowań. Przycisk Wstecz prowadzi wtedy do pętli przekierowań. Użyj location.replace.
Meta refresh, gdy masz kontrolę nad serwerem. Skonfiguruj zamiast tego 301; jest szybsze i jaśniejsze dla każdego narzędzia.

Najczęściej zadawane pytania

Jak przekierować stronę HTML na inną stronę?

Dodaj <meta http-equiv="refresh" content="0; url=https://example.com/new"> do <head> starej strony, a w treści zwykły link do nowej strony jako rozwiązanie zapasowe. Jeśli masz kontrolę nad serwerem, lepsze jest przekierowanie 301.

Jak zrobić przekierowanie po 5 sekundach w HTML?

Ustaw liczbę przed średnikiem na opóźnienie w sekundach: <meta http-equiv="refresh" content="5; url=https://example.com/new">. Napisz na stronie, że czytelnik zostanie przekierowany, i daj mu link.

Jak sprawić, żeby strona sama się odświeżała?

Użyj meta refresh z opóźnieniem i bez URL: <meta http-equiv="refresh" content="30"> przeładowuje stronę co 30 sekund. Przeładowuje całą stronę i przerywa czytelnikowi, więc przy danych na żywo zwykle lepiej aktualizować fragment strony przez JavaScript.

Czy przekierowanie meta refresh szkodzi SEO?

Google za nim podąża: natychmiastowy meta refresh (opóźnienie 0) traktuje jak przekierowanie stałe, a opóźniony jak tymczasowe. Zalecanym sposobem nadal jest 301 po stronie serwera, bo jest szybsze i rozumie je każdy robot i każda przeglądarka.

Jak zrobić przekierowanie w JavaScript?

Użyj location.replace('https://example.com/new'). Zastępuje bieżącą stronę w historii, więc przycisk Wstecz nie wraca na stronę, która przekierowała. location.href = url też działa, ale zostawia starą stronę w historii.

Powiązane zagadnienia