How to Set Up an HTML 404 Redirect on Your Website

An HTML 404 redirect (sometimes called a meta refresh or meta redirect) is a way in the HTML source code to redirect one HTML page to another. HTML redirects include instructions in the about section of the document that tell the web browser to automatically refresh a different page, with an optional time delay before the refresh occurs.

Home Page / 404 Redirect on Your Website

HTML 404 Redirect

You Will Be Read Here:

HTML 404 Redirect

How to set up HTML 404 Redirect 301, 302 on your website.

Our trick works with plugin and without plugins.

If you frequently update your business, blog, news, or personal website, you’re probably familiar with redirects. A redirect essentially tells the user’s browser, “Hey, the content you’re looking for isn’t at this URL. But don’t worry, we’ll send you to the right place.”

While it’s best to avoid redirects when possible, most site owners usually need them at some point, whether it’s moving a page, rearranging the website structure, moving domains, or updating URLs from HTTP to HTTPS. Proper redirection ensures that both visitors and search engines don’t end up with a 404 page, which can harm your user experience and SEO rankings in one fell swoop.

Whatever your reason for redirecting, there are a few ways to go about it. In this post, you’ll learn one common method, HTML redirection. We will discuss what HTML redirects are and how to add them to your website, even if you don’t have in-depth knowledge of HTML. We will also look at some alternative methods for better accessibility. Let’s get started.

What is HTML 404 Redirect..?

HTML redirects are the easiest way to redirect a URL. They involve only a small modification to the source code of the old HTML page, and can be created easily and quickly. An HTML redirect will send both human users and search engines to the page you want them to see.

Additionally, an HTML redirect lets you set a delay time (in seconds) before the user or search engine bot is sent to the new page. This delay comes in handy if you want to display a brief message before the redirection occurs.

How to redirect to another page from HTML:

To redirect one HTML page to another, you need to add a <meta> tag inside the <head> section of your HTML page or the header.php in your Theme Editor.

The <head> section of an HTML document contains metadata that is useful to the browser, but invisible to users viewing the page.

The syntax of this <meta> tag is as follows:

 
<meta http-equiv="refresh" content="delay_time; URL=new_website_url" />

In HTML redirects, the tag has two attributes, http-equiv and content. The value of http-equiv is always refresh – this tells the browser that you want the page to refresh automatically.

You need to make two changes to the syntax:

1- delay_time is a numeric value that sets the delay before the browser loads the new web page. For example, a value of 3 will force the browser to wait three seconds on the old page before redirecting.

2- new_website_url is the URL of the web page you want to redirect to.

Be sure to put these two values inside a pair of double quotes separated by a semicolon for the content. Otherwise, the redirect will not work.

If you want to send users to new web pages immediately, simply set your delay time to 0. However, there may be instances when you might want to set a delay before redirecting. The most common reason is to notify users that the current page no longer exists and that they will be redirected soon. This message usually includes a link to send users to the new page if they are not redirected within a set amount of time.

If a visitor is using an older web browser, it’s also possible that the <meta> tag won’t be read properly and the redirect won’t occur. If this happens, setting a delay can prevent the user from clicking a hyperlink on the old page and being sent to the new page.

Code for an HTML page that redirects users to https://mnsgranth.com after a three-second delay. Note that the <meta> tag is placed inside the <head> of the document.

<!DOCTYPE html>
<html>
    <head>
        <title>Old Page</title>
     <meta charset="UTF-8" />
     <meta http-equiv="refresh" content="3; URL=https://mnsgranth.com/" />
   </head>
   <body>
     <p>This page has been moved. If you are not redirected within 3 seconds, click <a href="https://mnsgranth.com/">Here</a> to go to the MNSGranth Homepage.</p>
   </body>
</html>

This page has moved. If you are not redirected within 3 seconds, click here to visit the MNSGranth homepage.

This code is a good example of writing an HTML redirect for a few reasons. First, the delay is short enough to not disrupt the user experience too much, while providing enough time for most users to read the message on the screen.

Second, the message gives users the option to immediately go to the new page. It also gives users an out if HTML refresh doesn’t work due to browser incompatibility—these visitors can simply click the anchor link to go to the new page.

HTML Redirect Issues and Alternatives:

While HTML redirects are the easiest way to implement redirects, they also introduce accessibility issues. Some older browsers will not render the <meta> tag properly, resulting in the old page flashing on-screen before the new page loads (even if you set a delay greater than 0), or the page not refreshing at all.

If you see that this is a problem for many users, you can set the delay time to 0 and, if the browser does not automatically load the new page, include an anchor link to the new page in the section as shown in the example above.

To avoid these problems, consider using another redirect method on your website. The most common redirect method today is an HTTP redirect. HTTP redirects are configured on the server hosting the website, and can be either a 301 (permanent) redirect or a 302 (temporary) redirect.

Your process will depend on what specific technologies you use to power your website. For example, if you run a WordPress website, your best bet is to use a WordPress redirect plugin, which will take care of the back-end stuff for you and allow you to manage and track all redirects on your site from your dashboard.

JavaScript redirects are another common option, although they require some knowledge of JavaScript programming and are likely more trial-and-error to get right. To learn more about JavaScript redirects, you can check out this beginner’s tutorial.

HTML Redirect: Send Users to the Right Place:

For situations when you need to quickly direct users from one page to another, HTML redirects come in handy and are a great tool for any website owner to have in their back pocket.

However, this kind of redirect probably shouldn’t be your go-to every time. It’s often better to implement a standard HTTP 301 (permanent) redirect for all users. When in doubt, reach out to your platform support team to get their opinion on what’s best for your users and your SEO.

Home Page