The dreaded 404 page can impact user experience and your website’s overall SEO performance. When it comes to building, redesigning, and optimizing your website, 404 pages are inevitable. However, they do not need to be persistent, if you know how to set up HTML redirects on your business’ website.
HTML redirects are going to be essential for a website’s SEO health and user experience. URL redirects will keep users and search engines from running into dead ends on websites. Whereas, 404 pages and dead ends can be a leading factor when it comes to bounce rate.
A few reasons why you may need a redirect are:
- You have to relocate a page
- A website structure has recently been rearranged
- Transferring to a new domain
- Updating URLs from HTTP to HTTPS
- Changing permalinks for SEO purposes
- Duplicate content and you want to set up a 301 permanent redirect to get rid of the old URL
No matter the reason, the solution is most likely going to be a redirect. First, let’s discuss what HTML redirects are.
Table of contents
What is an HTML redirect?
HTML redirects are the processes taken to redirect a particular URL to a different URL. The HTML redirect places instructions in the <head> section, instructing the web browser to automatically refresh to the targeted redirect page. The redirect can be time sensitive, instructing the page to refresh after a predetermined time delay. Time delays are helpful for displaying messages to users about the redirect.
HTML redirects are relatively simple and will help automatically direct search engines while they are crawling and indexing your page as well as users to the correct page. They consist of small snippets of code that modify the original source code of the page.
We do recommend having a good background of the different types of HTTP status codes (404, 301, and 302) as it will be helpful in understanding the overall process of redirects. Check out our HTTP Status Codes blog before moving on.
Why are HTML redirects important?
Users who are expecting to see a live web page will have a terrible experience if they land on an error page. Whereas, if you are wanting to use your content marketing as a means to convert a user into a customer, client, or email subscriber is significantly reduced when a 404 page is presented to them.
Therefore, to ensure the user experience is seamless make sure to redirect the old URL to an up-to-date different URL. This is because when we click a link, we want to be directed to the proper page rather than being served an error due to its relocation or disappearance. An error page can result in a user immediately exiting your page, and never returning as they may now see your website as not credible, or has issues.
That however, can only happen when there is no redirect established. If a webmaster first redirects the traffic to a new relative URL that is relevant to their search, they will be a happy visitor! More times than not, they wont even know the URL is different as long as you redirect to a page that is highly correlated with the one they were searching for.
Another thing to consider is that search engines will quickly drop a page from the index if it returns a 404 http status code (or another not found error like 410). This means that it will no longer rank or show up on the search result pages for any keywords.
In addition, it’s worth noting that any backlinks pointing to a 404 page are disregarded by Google’s algorithm and wasted (yes, this does happen as an examination of some of the most popular brands’ web pages revealed that thousands of backlinks and their link juice go to waste because they didn’t use any URL forwarding).
Forgetting to implement redirects may cost you valuable link equity from backlinks, search engine rankings and result in more disgruntled customers.
How to Redirect to Another Page in HTML:
In order to redirect one page to another, a <meta> tag will need to be inserted into the <head> section of the pre-existing page. The metadata that is inserted into the HTML document’s <head>, cannot be detected or seen by users but is seen and read by browsers providing them with important directions.
The syntax for this <meta> tag is as follows:
<meta http-equiv=”refresh” content=”delay_time; URL=new_website_url” />
The <meta> tag in HTML redirects contain two attributes, http-equiv and content. The value of http-equiv is always ‘refresh’. The refresh portion of the metadata instructs the browser to automatically refresh the page.
The content attribute portion of the <meta> tag takes on two values:
- First, delay_time is specified. Whereas it is set as a numeric value that determines the length of the delay before the browser redirects or ‘loads’ the new web page. For example, it can be set to a value of 2. This would instruct the browser to wait two seconds on the old page before redirecting or loading the new page.
- Second, the new_website_url section signifies the new URL that the browser should redirect to, and load.
Note, that while setting up the meta tag, you need to place the content value inside one pair of double quotes, and separated by a semicolon. Make sure to follow these rules, or the HTML redirect will not work.
Another point to note is that if you want to redirect a visitor instantly, you will want to set the time delay to 0. However, there are two main reasons why using a time delay is useful.
- A time delay will allow you to show a small message indicating that the page has been removed and the user will be redirected shortly. The page typically contains a redirect link, in case the delay doesn’t work properly.
- Some older browsers are not able to process the redirect properly. Therefore, the time delay message containing the new URL will allow these users to still navigate to the new page. Helping to lower your bounce rate and retain the particular traffic source.
HTML Redirect Code Example
Below we have a code example for an HTML redirect to further our understanding of how they operate.
Below is an example of code that has been generated for an HTML page that will redirect visitors back to the Clear Door SEO home page after an initial time delay of four seconds.
<!DOCTYPE HTML>
<HTML>
<head>
<title>Old Page</title>
<meta charset=”UTF-8″ />
<meta http-equiv=”refresh” content=”4; URL=https://www.example.com/” />
</head>
<body>
<p>This page has been moved. If you are not redirected within 3 seconds, click <a href=”(https://www.example.com)/”>here</a> for Your Website Domain’s homepage.</p>
</body>
</html>
Feel free to use this code on your own website. Just make sure to change the information to your own, and don’t include parentheses around your website. Unless you want to redirect your visitors back to our website. Don’t worry, we won’t mind a little extra referral traffic!
The code is a good example of an HTML redirect as it has a short enough time delay that will allow the user to read your message, but not disturb the overall user experience.
Another reason it is a good example is that it gives the visitor the option to immediately redirect to the new URL, while also providing a URL link to users who might have an outdated browser that doesn’t redirect them automatically.
HTML Redirect Issues
HTML redirects are a simple and easy way to ensure that any broken links and HTTP 404 status pages get fixed. However, they can also be intimidating and present accessibility issues to users that may have not worked in HTML before.
Another issue that may arise is the <meta> tag not functioning properly due to outdated browsers. A common occurrence of this issue is the old page flashing on-screen momentarily before the new page loads. Moreover, the flashing of the old page can occur even if you are using a time delay.
The last issue, and an even more problematic one, is the page not refreshing or redirecting at all.
If you believe that these issues may occur, it is best practice to set the time delay to 0. Additionally, to combat the browser not redirecting ensure that you include an additional link to the page in the >body> section of your message – as shown in the example above.
HTML Redirect Alternatives
HTML redirects may not be for everyone, they can be difficult for individuals who have never coded before, or who have never worked on the technical side of websites. Therefore, you may want to check out a couple of different options when it comes to HTML redirects.
One option is to configure an HTTP redirect on the server hosting the website. The most common redirects are 301 (permanent redirect) and 302 (temporary redirect).
HubSpot has a guide to setting up 301 redirects which can provide you with more in-depth assistance in these redirects.
If you are using WordPress to host your website, there are multiple plugins that will automatically take care of the redirects for you with minimal input from your side. These plugins will manage all the back-end formatting and coding while setting up redirects which you can easily monitor from the plugins dashboard.
Three WordPress redirect plugins that we recommend for setting up a URL redirection are:
| Plugin Name | Price | What We Like |
|---|---|---|
| Redirection | Free | We put Redirection at the top of our list because it provides an easy-to-use and understandable interface that allows you to manage and create redirects on your WordPress website. Moreover, it will automatically detect changes made to permalinks and create a 301 redirect for you. With the plugin, you can create 301, 302, and 307 redirects depending on if you need a temporary or permanent redirect. |
| 301 Redirects | Free | The WordPress Plugin, 301 Redirects, provides its users with a 404 error log so they can easily track errors that occur on the website. This feature makes it easy to audit the WordPress website so you don’t have to check manually. Once 404 pages have been identified it will allow you to create redirects for each of the pages. The best part about the plugin is that it allows you to do bulk redirects at one time for hundreds of broken links. With the plugin, you can create 301, 302, and 307 redirects depending on if you need a temporary or permanent redirect. |
| Yoast Premium | $89/year | A lot of WordPress users use Yoast for SEO purposes and that’s why we also recommend it for redirects as well. It is a paid service that will cost you, but it is packed full of features that can be found in one plugin, meaning you won’t have to use multiple plugins for different tasks. Yoast plugin allows you to create 301, 302, 307, 410, and 451 redirects or error codes depending on what the redirect calls for. |
HTML Redirects: Make Sure Users Find the Right Page
There can be various reasons why you will need to create redirects for your website. Clear Door SEO recommends keeping them to a minimum, however. As they can become difficult to manage over the long run. The best thing to do is to establish a good permalink strategy from the beginning, and follow SEO best practices.
We know that no matter how much planning and strategizing you may do, you can still run into issues. Therefore, make sure to use redirects when needed as you will want to retain any traffic, as well as the SEO benefits you may have.
If you are new to setting up HTML redirects or are not sure why or when you should do it, you can reach out to us for assistance. Clear Door SEO has an experienced off-page SEO and technical SEO team that will manage your website.
Contact us now, so we can help you retain your website traffic and convert them into sales!
