How to redirect to another page in HTML?
Redirect a page with a meta refresh tag, with location.replace in JavaScript, or better, with a real 301 or 308 HTTP redirect from the server.
With HTML alone, add a <meta http-equiv="refresh"> tag to the <head> with a delay of 0 and the new URL. Put a normal link in the body as a fallback in case the redirect doesn't happen.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="0; url=/new-page">
<title>This page has moved</title>
</head>
<body>
<p>This page has moved to <a href="/new-page">a new address</a>.</p>
</body>
</html>The content value is the delay in seconds, a semicolon, then url= and the address. It can be relative, like above, or a full URL such as https://example.com/new-page.
This works on any static host, but if you can configure the server, a real HTTP redirect is better (see below).
Redirect with JavaScript
// Replaces the current page in the history
location.replace('/new-page');
// Adds a history entry, like clicking a link
location.href = '/new-page';For a redirect, use location.replace(). With location.href, the redirecting page stays in the history, so pressing the back button lands on it and it sends the user forward again. People end up stuck, clicking back over and over.
location.href (or location.assign()) is the right choice when the user did something and should be able to go back, for example after picking a result from a search.
A JavaScript redirect only happens after the script is downloaded and run, and not every crawler runs it. Use it when the target depends on something only the browser knows, like a saved preference.
Best: a real HTTP redirect
When you control the server or the hosting config, send a redirect status code with a Location header. The browser never renders the old page, so it's faster, and search engines move the old URL's ranking to the new one.
301and308are permanent. Use them when a page has moved for good.302and307are temporary.307and308keep the request method, so aPOSTstays aPOST. With301and302, browsers may switch it toGET.
In Next.js, add redirects() to next.config.js:
// next.config.js
module.exports = {
async redirects() {
return [
{
source: '/old-blog/:slug',
destination: '/blog/:slug',
permanent: true, // sends a 308
},
];
},
};permanent: false sends a 307. Other platforms have the same thing in their config: a _redirects file on Netlify, redirects in vercel.json on Vercel, or a redirect rule in your Nginx or Apache config.
Avoid a delayed meta refresh
A value like content="5; url=/new-page" shows the page for five seconds and then leaves it. That's an accessibility problem: people who read slowly or use a screen reader can lose the page in the middle of reading it, and they can't stop it. If the user needs to read something first, show the message with a link and let them click it. Otherwise, redirect immediately with a delay of 0.