Docs ejecutables de HTML: Redirección HTML

Q: ¿Cómo redirijo una página HTML a otra página?

Añade al de la página antigua, y un enlace normal a la página nueva en el body como alternativa. Si controlas el servidor, es mejor una redirección 301.

Q: ¿Cómo hago que una página se recargue sola automáticamente?

Usa un meta refresh con retardo y sin URL: recarga la página cada 30 segundos. Recarga la página entera e interrumpe al lector, así que para datos en vivo suele ser mejor actualizar parte de la página con JavaScript.

Q: ¿Cómo redirijo con JavaScript?

Usa location.replace('https://example.com/new'). Reemplaza la página actual en el historial, así que el botón Atrás no vuelve a la página que redirigió. location.href = url también funciona, pero mantiene la página antigua en el historial.

Redirigir con una etiqueta meta refresh

En HTML puro, una redirección es una etiqueta <meta http-equiv="refresh"> en el <head> de la página antigua:

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

El número es el retardo en segundos, luego va un punto y coma, y después url= y la dirección a la que ir. 0 redirige en cuanto carga la página. Aquí tienes un archivo completo de "esta página se ha movido". El retardo está puesto en una hora para que esta vista previa se quede quieta; en una página real usarías 0 o unos pocos segundos:

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

Dos alternativas hacen la página segura: el enlace visible (para cualquiera cuyo navegador no siga el refresh, y para quienes usan lectores de pantalla y quieren decidir), y <link rel="canonical">, que les dice a los buscadores cuál es la URL real. Si cambias aquí el retardo a 0, la propia vista previa se irá a example.com; pulsa Reset para recuperar el ejemplo.

Recargar una página automáticamente

Omite la URL y la página se recarga sola tras el retardo. content="5" recarga cada 5 segundos. La primera caja de abajo es una pequeña página con esa etiqueta, para que la veas: su hora de carga salta cada 5 segundos, y el texto que escribas en su campo se borra con la recarga. La segunda caja mantiene su reloj al día con JavaScript, y conserva tu texto:

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

Una recarga vuelve a cargar la página entera, así que lo que estuviera haciendo el lector en ella se interrumpe. Es aceptable para una página con la que nadie interactúa, como una pantalla de estado en una pared. Para paneles, marcadores y feeds, actualiza solo la parte que cambia, como hace la segunda caja.

Redirigir con JavaScript

Cuando la redirección depende de algo que solo sabe el navegador (la elección del usuario, si ha iniciado sesión, el tamaño de pantalla), usa 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';

Para una redirección, location.replace es casi siempre lo que quieres. Con location.href, al pulsar Atrás se llega a la página que redirigió, que vuelve a redirigir, y el usuario queda atrapado.

Mejor una redirección en el servidor

Un meta refresh o un script solo se ejecutan después de que el navegador haya descargado la página antigua. Una redirección en el servidor responde a la petición con un código de estado y la nueva dirección, antes de enviar ningún HTML:

301 (movida permanentemente) o 308: la página tiene un nuevo hogar para siempre. Los buscadores trasladan el posicionamiento de la URL antigua a la nueva.
302 (encontrada) o 307: un traslado temporal; la URL antigua sigue siendo la principal.

Cómo configurarla depende de tu alojamiento. Algunas formas habituales:

# 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

Usa un meta refresh cuando no puedas cambiar nada del servidor, por ejemplo en un alojamiento estático sin reglas de redirección. Google trata un meta refresh instantáneo como una redirección permanente y uno con retardo como temporal, así que un retardo 0 es lo más parecido a una 301.

Redirecciones con retardo y accesibilidad

Una redirección con retardo puede llevarse al lector a mitad de una frase. Las pautas de accesibilidad (WCAG) consideran un fallo las redirecciones temporizadas; una redirección instantánea está bien. Si tienes que esperar, dilo en la página ("Serás redirigido en 10 segundos"), e incluye siempre el enlace para que cada persona vaya a su ritmo.

Errores comunes

Un bucle de redirección. Dos páginas que se redirigen entre sí hacen rebotar al lector para siempre. Comprueba a dónde envía la página de destino.
Una URL relativa que apunta al sitio equivocado. url=new-page se resuelve respecto a la URL actual, así que desde /docs/old va a /docs/new-page. Usa una ruta completa como url=/new-page si tienes dudas.
Sin enlace alternativo. Añade siempre un enlace normal a la página nueva en el body.
Usar location.href para redirigir. El botón Atrás lleva entonces a un bucle de redirección. Usa location.replace.
Usar meta refresh cuando controlas el servidor. Configura una 301; es más rápida y más clara para todas las herramientas.

Preguntas frecuentes

¿Cómo redirijo una página HTML a otra página?

Añade <meta http-equiv="refresh" content="0; url=https://example.com/new"> al <head> de la página antigua, y un enlace normal a la página nueva en el body como alternativa. Si controlas el servidor, es mejor una redirección 301.

¿Cómo redirijo después de 5 segundos en HTML?

Pon como número antes del punto y coma el retardo en segundos: <meta http-equiv="refresh" content="5; url=https://example.com/new">. Avisa al lector en la página de que va a ser redirigido, y dale un enlace.

¿Cómo hago que una página se recargue sola automáticamente?

Usa un meta refresh con retardo y sin URL: <meta http-equiv="refresh" content="30"> recarga la página cada 30 segundos. Recarga la página entera e interrumpe al lector, así que para datos en vivo suele ser mejor actualizar parte de la página con JavaScript.

¿Una redirección con meta refresh es mala para el SEO?

Google la sigue: un meta refresh instantáneo (retardo 0) se trata como una redirección permanente y uno con retardo como una redirección temporal. Una 301 en el servidor sigue siendo la forma recomendada, porque es más rápida y la entienden todos los rastreadores y navegadores.

¿Cómo redirijo con JavaScript?

Usa location.replace('https://example.com/new'). Reemplaza la página actual en el historial, así que el botón Atrás no vuelve a la página que redirigió. location.href = url también funciona, pero mantiene la página antigua en el historial.

Conceptos relacionados