Meta Refresh and JavaScript Redirect Guide

Server-side redirects (301/302) are always the right first choice. But sometimes you can't touch the server config, or you need to redirect based on runtime conditions — that's where client-side redirects come in.

HTML meta refresh

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

<!-- Redirect after 3 seconds -->
<meta http-equiv="refresh" content="3; url=https://newdomain.com">

• ✅ Works without JavaScript
• ✅ One line of HTML
• ❌ Can't be cancelled once the page loads
• ❌ Creates a back-button trap (page redirects again on back)
• ❌ Poor SEO — Google discourages it

JavaScript redirect methods

window.location.href (most common)

// Adds current page to history — user can go back
window.location.href = 'https://example.com';

location.replace() (no history entry)

// Replaces current history entry — user cannot go back
location.replace('https://example.com');

location.assign() (same as href)

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

window.open() (new tab)

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

Key differences

History entry

• Adds history entry: location.href, location.assign(), meta refresh
• No history entry: location.replace()

Cancellable

• Can be cancelled: JavaScript (use clearTimeout)
• Cannot be cancelled: meta refresh

When to use each

Use meta refresh when

• You have a static HTML page with no JavaScript
• You need a "page has moved" notice with a countdown

Use location.href when

• You need conditional redirect logic
• You want the user to be able to go back

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

Use location.replace() when

• After login — don't let users back to the login page
• Error page auto-redirect
• Mobile/desktop detection redirect

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

SEO impact

• Meta refresh — Google officially discourages it; may cause ranking loss
• JavaScript redirects — Google can follow them, but processing is slower than server-side redirects
• Neither carries HTTP status codes — search engines can't tell if the move is permanent or temporary

Common pitfalls

Code after redirect still executes

// ❌ Code below still runs
if (needRedirect) { location.href = '/other'; }
doSomethingElse(); // still executes!

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

Mobile redirect loop

// ✅ Guard against re-redirecting
if (isMobile && !location.pathname.startsWith('/mobile/')) {
    location.replace('/mobile' + location.pathname);
}

Lost query string

// ❌ Query string dropped
location.href = '/new-page';

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