Docs HTML exécutables : Redirection HTML

Q: Comment rediriger une page HTML vers une autre page ?

Ajoutez dans le de l'ancienne page, et un lien normal vers la nouvelle page dans le body comme solution de repli. Si vous contrôlez le serveur, une redirection 301 est préférable.

Q: Comment rediriger après 5 secondes en HTML ?

Mettez le délai en secondes avant le point-virgule : . Indiquez sur la page que le lecteur va être redirigé, et donnez-lui un lien.

Q: Comment actualiser une page automatiquement ?

Utilisez une meta refresh avec un délai et sans URL : recharge la page toutes les 30 secondes. Elle recharge toute la page et interrompt le lecteur, donc pour des données en direct, mettre à jour une partie de la page en JavaScript est généralement préférable.

Q: Comment faire une redirection en JavaScript ?

Utilisez location.replace('https://example.com/new'). Elle remplace la page actuelle dans l'historique, donc le bouton retour ne revient pas sur la page qui a redirigé. location.href = url fonctionne aussi mais garde l'ancienne page dans l'historique.

Rediriger avec une balise meta refresh

En HTML pur, une redirection est une balise <meta http-equiv="refresh"> dans le <head> de l'ancienne page :

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

Le nombre est le délai en secondes, puis viennent un point-virgule, url= et l'adresse de destination. 0 redirige dès que la page se charge. Voici un fichier complet « la page a déménagé ». Le délai est fixé à une heure pour que cet aperçu reste en place ; sur une vraie page, vous utiliseriez 0 ou quelques secondes :

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

Deux solutions de repli rendent la page sûre : le lien visible (pour ceux dont le navigateur ne suit pas l'actualisation, et pour les utilisateurs de lecteurs d'écran qui veulent choisir), et <link rel="canonical">, qui indique aux moteurs de recherche quelle URL est la vraie. Si vous passez le délai à 0 ici, l'aperçu lui-même partira vers example.com ; appuyez sur Reset pour retrouver l'exemple.

Actualiser une page automatiquement

Omettez l'URL et la page se recharge elle-même après le délai. content="5" recharge toutes les 5 secondes. La première boîte ci-dessous est une petite page avec cette balise, pour que vous puissiez l'observer : son heure de chargement saute toutes les 5 secondes, et le texte tapé dans son champ est effacé par le rechargement. La seconde boîte garde son horloge à jour en JavaScript, et garde votre texte :

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

Une actualisation recharge toute la page, donc ce que faisait le lecteur est interrompu. C'est acceptable pour une page avec laquelle personne n'interagit, comme un écran d'état affiché au mur. Pour les tableaux de bord, les scores et les fils d'actualité, ne mettez à jour que la partie qui change, comme le fait la seconde boîte.

Rediriger en JavaScript

Quand la redirection dépend de quelque chose que seul le navigateur connaît (le choix de l'utilisateur, une connexion, une taille d'écran), utilisez 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';

Pour une redirection, location.replace est presque toujours ce qu'il vous faut. Avec location.href, appuyer sur Retour ramène sur la page qui a redirigé, qui redirige à nouveau, et l'utilisateur est coincé.

Préférez une redirection serveur

Une meta refresh ou un script ne s'exécute qu'une fois l'ancienne page téléchargée par le navigateur. Une redirection serveur répond à la requête avec un code de statut et la nouvelle adresse, avant l'envoi de tout HTML :

301 (déplacé définitivement) ou 308 : la page a une nouvelle adresse pour de bon. Les moteurs de recherche transfèrent le classement de l'ancienne URL vers la nouvelle.
302 (trouvé) ou 307 : un déplacement temporaire ; l'ancienne URL reste la principale.

La mise en place dépend de votre hébergeur. Quelques formes courantes :

# 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

Utilisez une meta refresh quand vous ne pouvez rien changer au serveur, par exemple sur un hébergement statique sans règles de redirection. Google traite une meta refresh instantanée comme une redirection permanente et une meta refresh avec délai comme une redirection temporaire, donc un délai de 0 est l'équivalent le plus proche d'une 301.

Redirections avec délai et accessibilité

Une redirection avec délai peut emmener un lecteur ailleurs au milieu d'une phrase. Les règles d'accessibilité (WCAG) considèrent les redirections minutées comme un échec ; une redirection instantanée ne pose pas de problème. Si vous devez attendre, dites-le sur la page (« Vous allez être redirigé dans 10 secondes »), et incluez toujours le lien pour que chacun avance à son rythme.

Erreurs fréquentes

Une boucle de redirection. Deux pages qui s'actualisent l'une vers l'autre font rebondir le lecteur sans fin. Vérifiez où la page cible envoie les gens.
Une URL relative qui pointe au mauvais endroit. url=new-page est résolue par rapport à l'URL actuelle, donc depuis /docs/old elle mène à /docs/new-page. Utilisez un chemin complet comme url=/new-page en cas de doute.
Pas de lien de repli. Ajoutez toujours un lien normal vers la nouvelle page dans le body.
Utiliser location.href pour les redirections. Le bouton retour mène alors dans une boucle de redirection. Utilisez location.replace.
Utiliser meta refresh alors que vous contrôlez le serveur. Configurez plutôt une 301 ; elle est plus rapide et plus claire pour tous les outils.

Questions fréquentes

Comment rediriger une page HTML vers une autre page ?

Ajoutez <meta http-equiv="refresh" content="0; url=https://example.com/new"> dans le <head> de l'ancienne page, et un lien normal vers la nouvelle page dans le body comme solution de repli. Si vous contrôlez le serveur, une redirection 301 est préférable.

Comment rediriger après 5 secondes en HTML ?

Mettez le délai en secondes avant le point-virgule : <meta http-equiv="refresh" content="5; url=https://example.com/new">. Indiquez sur la page que le lecteur va être redirigé, et donnez-lui un lien.

Comment actualiser une page automatiquement ?

Utilisez une meta refresh avec un délai et sans URL : <meta http-equiv="refresh" content="30"> recharge la page toutes les 30 secondes. Elle recharge toute la page et interrompt le lecteur, donc pour des données en direct, mettre à jour une partie de la page en JavaScript est généralement préférable.

Une redirection meta refresh est-elle mauvaise pour le SEO ?

Google la suit : une meta refresh instantanée (délai 0) est traitée comme une redirection permanente et une meta refresh avec délai comme une redirection temporaire. Une 301 côté serveur reste la méthode recommandée, car elle est plus rapide et comprise par tous les robots et navigateurs.

Comment faire une redirection en JavaScript ?

Utilisez location.replace('https://example.com/new'). Elle remplace la page actuelle dans l'historique, donc le bouton retour ne revient pas sur la page qui a redirigé. location.href = url fonctionne aussi mais garde l'ancienne page dans l'historique.

Concepts liés