Guía de redirecciones Meta Refresh y JavaScript

Las redirecciones del lado del servidor (301/302) siempre son la primera opción correcta. Pero a veces no puedes modificar la configuración del servidor, o necesitas redirigir según condiciones en tiempo de ejecución — ahí es donde entran las redirecciones del lado del cliente.

Meta refresh HTML

<!-- Redirigir inmediatamente -->
<meta http-equiv="refresh" content="0; url=/new-page.html">

<!-- Redirigir después de 3 segundos -->
<meta http-equiv="refresh" content="3; url=https://newdomain.com">

• ✅ Funciona sin JavaScript
• ✅ Una sola línea de HTML
• ❌ No se puede cancelar una vez que la página carga
• ❌ Crea una trampa del botón atrás (la página redirige de nuevo al volver)
• ❌ Malo para SEO — Google lo desaconseja

Métodos de redirección con JavaScript

window.location.href (más común)

// Agrega la página actual al historial — el usuario puede volver
window.location.href = 'https://example.com';

location.replace() (sin entrada en el historial)

// Reemplaza la entrada actual del historial — el usuario no puede volver
location.replace('https://example.com');

location.assign() (igual que href)

location.assign('https://example.com');

window.open() (nueva pestaña)

window.open('https://example.com', '_blank');

Diferencias clave

Entrada en el historial

• Agrega entrada al historial: location.href, location.assign(), meta refresh
• Sin entrada en el historial: location.replace()

Cancelable

• Se puede cancelar: JavaScript (usa clearTimeout)
• No se puede cancelar: meta refresh

Cuándo usar cada uno

Usa meta refresh cuando

• Tienes una página HTML estática sin JavaScript
• Necesitas un aviso de "la página se ha movido" con cuenta regresiva

Usa location.href cuando

• Necesitas lógica de redirección condicional
• Quieres que el usuario pueda volver atrás

if (!user.isLoggedIn) {
    location.href = '/login';
}

Usa location.replace() cuando

• Después del inicio de sesión — no dejes que los usuarios vuelvan a la página de login
• Redirección automática de página de error
• Redirección por detección de móvil/escritorio

if (/Android|iPhone/i.test(navigator.userAgent)) {
    location.replace('/mobile/');
}

Impacto en SEO

• Meta refresh — Google lo desaconseja oficialmente; puede causar pérdida de posicionamiento
• Redirecciones JavaScript — Google puede seguirlas, pero el procesamiento es más lento que las redirecciones del lado del servidor
• Ninguna lleva códigos de estado HTTP — los motores de búsqueda no pueden determinar si el movimiento es permanente o temporal

Errores comunes

El código después de la redirección sigue ejecutándose

// ❌ El código de abajo sigue ejecutándose
if (needRedirect) { location.href = '/other'; }
doSomethingElse(); // ¡sigue ejecutándose!

// ✅ Usa return
if (needRedirect) { location.href = '/other'; return; }
doSomethingElse();

Bucle de redirección móvil

// ✅ Protección contra re-redirección
if (isMobile && !location.pathname.startsWith('/mobile/')) {
    location.replace('/mobile' + location.pathname);
}

Pérdida de query string

// ❌ Se pierde el query string
location.href = '/new-page';

// ✅ Preservarlo
location.href = '/new-page' + location.search;