Ausführbare HTML-Docs: HTML Weiterleitung

Q: Wie leite ich eine HTML-Seite auf eine andere Seite weiter?

Füg dem der alten Seite hinzu und als Fallback einen normalen Link auf die neue Seite in den body. Wenn du den Server kontrollierst, ist eine 301-Weiterleitung besser.

Q: Wie lädt sich eine Seite automatisch neu?

Mit einem Meta Refresh mit Verzögerung und ohne URL: lädt die Seite alle 30 Sekunden neu. Es lädt die ganze Seite neu und unterbricht den Leser, für Live-Daten ist es also meist besser, einen Teil der Seite mit JavaScript zu aktualisieren.

Q: Wie leite ich mit JavaScript weiter?

Mit location.replace('https://example.com/new'). Das ersetzt die aktuelle Seite im Verlauf, der Zurück-Button führt also nicht zur Seite zurück, die weitergeleitet hat. location.href = url funktioniert auch, behält die alte Seite aber im Verlauf.

Weiterleitung mit einem Meta-Refresh-Tag

In reinem HTML ist eine Weiterleitung ein Tag <meta http-equiv="refresh"> im <head> der alten Seite:

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

Die Zahl ist die Verzögerung in Sekunden, dann folgen ein Semikolon, url= und die Zieladresse. 0 leitet weiter, sobald die Seite geladen ist. Hier ist eine vollständige Datei „Seite ist umgezogen“. Die Verzögerung steht auf einer Stunde, damit diese Vorschau bleibt, wo sie ist; auf einer echten Seite würdest du 0 oder ein paar Sekunden nehmen:

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

Zwei Fallbacks machen die Seite sicher: der sichtbare Link (für alle, deren Browser dem Refresh nicht folgt, und für Screenreader-Nutzer, die selbst entscheiden wollen) und <link rel="canonical">, das Suchmaschinen sagt, welche URL die echte ist. Wenn du die Verzögerung hier auf 0 änderst, verlässt die Vorschau selbst die Seite in Richtung example.com; drück auf Reset, um das Beispiel zurückzubekommen.

Eine Seite automatisch neu laden

Lass die URL weg, und die Seite lädt sich nach der Verzögerung selbst neu. content="5" lädt alle 5 Sekunden neu. Der erste Kasten unten ist eine kleine Seite mit diesem Tag, damit du zusehen kannst: Ihre Ladezeit springt alle 5 Sekunden, und Text, den du in ihr Feld tippst, wird durch das Neuladen gelöscht. Der zweite Kasten hält seine Uhr stattdessen mit JavaScript aktuell und behält deinen Text:

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

Ein Refresh lädt die ganze Seite neu, was auch immer der Leser gerade darauf tut, wird also unterbrochen. Für eine Seite, mit der niemand interagiert, wie einen Statusbildschirm an der Wand, ist das in Ordnung. Für Dashboards, Spielstände und Feeds aktualisierst du nur den Teil, der sich ändert, wie im zweiten Kasten.

Weiterleitung mit JavaScript

Wenn die Weiterleitung von etwas abhängt, das nur der Browser weiß (die Auswahl des Nutzers, ein Login-Zustand, eine Bildschirmgröße), nimm 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';

Für eine Weiterleitung willst du fast immer location.replace. Mit location.href landet man mit Zurück auf der Seite, die weitergeleitet hat, die wieder weiterleitet, und der Nutzer steckt fest.

Lieber eine Weiterleitung auf dem Server

Ein Meta Refresh oder ein Skript läuft erst, nachdem der Browser die alte Seite heruntergeladen hat. Eine Weiterleitung auf dem Server beantwortet die Anfrage mit einem Statuscode und der neuen Adresse, bevor überhaupt HTML gesendet wird:

301 (moved permanently) oder 308: Die Seite ist dauerhaft umgezogen. Suchmaschinen übertragen das Ranking der alten URL auf die neue.
302 (found) oder 307: ein vorübergehender Umzug; die alte URL bleibt die Haupt-URL.

Wie du eine einrichtest, hängt von deinem Hoster ab. Ein paar übliche Formen:

# 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

Nimm einen Meta Refresh, wenn du den Server gar nicht ändern kannst, zum Beispiel bei einem statischen Hoster ohne Weiterleitungsregeln. Google behandelt einen sofortigen Meta Refresh als dauerhafte und einen verzögerten als vorübergehende Weiterleitung, eine Verzögerung von 0 kommt einer 301 also am nächsten.

Verzögerte Weiterleitungen und Barrierefreiheit

Eine Weiterleitung mit Verzögerung kann einen Leser mitten im Satz wegschicken. Die Richtlinien für Barrierefreiheit (WCAG) werten zeitgesteuerte Weiterleitungen als Fehler; eine sofortige Weiterleitung ist in Ordnung. Wenn du warten musst, sag es auf der Seite („Du wirst in 10 Sekunden weitergeleitet“), und gib immer den Link an, damit jeder in seinem eigenen Tempo weitergehen kann.

Häufige Fehler

Eine Weiterleitungsschleife. Zwei Seiten, die per Refresh aufeinander weiterleiten, schicken den Leser endlos hin und her. Prüf, wohin die Zielseite weiterleitet.
Eine relative URL, die an die falsche Stelle zeigt. url=new-page wird relativ zur aktuellen URL aufgelöst, von /docs/old aus geht es also zu /docs/new-page. Nimm im Zweifel einen vollständigen Pfad wie url=/new-page.
Kein Fallback-Link. Füg im body immer einen normalen Link auf die neue Seite hinzu.
location.href für Weiterleitungen verwenden. Der Zurück-Button führt dann in eine Weiterleitungsschleife. Nimm location.replace.
Meta Refresh verwenden, obwohl du den Server kontrollierst. Richte stattdessen eine 301 ein; sie ist schneller und für jedes Tool eindeutiger.

Häufig gestellte Fragen

Wie leite ich eine HTML-Seite auf eine andere Seite weiter?

Füg dem <head> der alten Seite <meta http-equiv="refresh" content="0; url=https://example.com/new"> hinzu und als Fallback einen normalen Link auf die neue Seite in den body. Wenn du den Server kontrollierst, ist eine 301-Weiterleitung besser.

Wie leite ich in HTML nach 5 Sekunden weiter?

Setz die Zahl vor dem Semikolon auf die Verzögerung in Sekunden: <meta http-equiv="refresh" content="5; url=https://example.com/new">. Sag dem Leser auf der Seite, dass er weitergeleitet wird, und gib ihm einen Link.

Wie lädt sich eine Seite automatisch neu?

Mit einem Meta Refresh mit Verzögerung und ohne URL: <meta http-equiv="refresh" content="30"> lädt die Seite alle 30 Sekunden neu. Es lädt die ganze Seite neu und unterbricht den Leser, für Live-Daten ist es also meist besser, einen Teil der Seite mit JavaScript zu aktualisieren.

Ist eine Weiterleitung per Meta Refresh schlecht für SEO?

Google folgt ihr: Ein sofortiger Meta Refresh (Verzögerung 0) wird wie eine dauerhafte Weiterleitung behandelt und ein verzögerter wie eine vorübergehende. Eine 301 auf dem Server bleibt trotzdem der empfohlene Weg, weil sie schneller ist und jeder Crawler und Browser sie versteht.

Wie leite ich mit JavaScript weiter?

Mit location.replace('https://example.com/new'). Das ersetzt die aktuelle Seite im Verlauf, der Zurück-Button führt also nicht zur Seite zurück, die weitergeleitet hat. location.href = url funktioniert auch, behält die alte Seite aber im Verlauf.

Verwandte Konzepte