How to make a redirect page on tumblr

New Page

How to set up an HTML redirect on your website

jamie juvilier

jamie juvilier

Updated: June 17, 2022

Posted: April 14, 2022

If you make frequent updates to your company’s website, you’re probably familiar with the redirect. A redirect basically 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.”

person setting up html redirect on laptop

While it’s best to avoid redirection when possible, most site owners usually have to do it at some point, whether it’s moving a page, rearranging the website structure, move domains or update URLs from HTTP to HTTP. A proper redirect ensures that visitors and search engines don’t run into dead-end 404 pages, which can hurt your user experience and SEO ranking all at once.

Whatever your reasons for the redirect, there are several ways to do it. In this article, you will learn about a common method, HTML redirection. We’ll discuss what an HTML redirect is and how to add it to your website, even if you don’t have a deep understanding of HTML. We will also see some alternative methods for better accessibility. Let’s start.

Download Now: Free HTML and CSS Getting Started Guide

What is an HTML redirect?

An HTML redirect (sometimes also called meta update or meta redirect) is a way to redirect one HTML page to another in the HTML source code. An HTML redirect includes instructions in the <head> section of the document that tell the web browser to automatically refresh a different page, with an optional delay before the refresh occurs.

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

Additionally, an HTML redirect allows you to set a delay (in seconds) before the user or search engine crawler is sent to the new page. This delay is useful if you want to display a short message before the redirect occurs.

How to redirect to another page in HTML

To redirect an HTML page to another page, you must add a <meta> tag in the <head> section of the previous HTML page. The <head> section of an HTML document contains metadata 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 an HTML redirect, the <meta> tag contains two attributes, http-equiv and content . The value of http-equiv is always refresh : This tells the browser that you want to automatically refresh the page.

Next, the content attribute takes two values:

  • delay_time is a numeric value that defines the delay before the browser loads the new web page. For example, a value of 3 would cause the browser to wait three seconds on the previous page before redirecting.
  • new_website_url is the URL of the webpage you want to redirect to.

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

If you want to send users to new web pages instantly, just set your delay to 0 . However, there may be times when you want to set a delay before the redirect. The most common reason is to inform users that the current page no longer exists and 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 certain time.

If a visitor is using an older web browser, it is also possible that the <meta> tag may not be read correctly and the redirect may not occur. If this happens, setting a delay allows the user to click the hyperlink on the previous page and be taken to the new page.

This video explains all these steps in more detail.

Example redirect HTML code

Now let’s look at sample code for an HTML redirect to better understand how they work.

This is the code for an HTML page that redirects users to hubspot.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:/ /www.hubspot.com/” /> </head> <body> <p>This page has moved. If you are not redirected within 3 seconds, click <a href=”https://www.hubspot.com/”>here</a> to go to the HubSpot home page.</p> </body></html >

This code is a good example of how to write an HTML redirect for several reasons. First, the delay is short enough not to disrupt the user experience too much, while still allowing enough time for most users to read the on-screen message.

Second, the message gives users the option to immediately access the new page. It also gives users a way out if the HTML update doesn’t work due to browser incompatibility: those visitors can simply click the anchor link to go to the new page.

HTML redirect issues and alternatives

Although HTML redirects are the easiest way to implement a redirect, they also have accessibility issues. Some older browsers do not display the <meta> tag correctly , causing the old page to flash on the screen before the new page loads (even if you set a delay greater than 0) or the page does not does not update at all.

If you expect this to be a problem for many users, you can set the timeout to 0 , and in case the browser doesn’t automatically load the new page, include an anchor link to the new page in the <body section > as shown in the example above.

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

See our guide to setting up 301 redirects for more help here – your process will depend on the specific technologies you use to power your website. For example, if you run a WordPress website, your best option is to use a WordPress redirect plugin, which will take care of the back-end for you and allow you to manage and track all redirects on your site from from your dashboard. .

JavaScript redirects are another common alternative, although it requires some knowledge of JavaScript programming and probably more trial and error to get it right. To learn more about JavaScript redirects, you can check out this beginners tutorial.

HTML redirects: send users to the right place.

In situations where 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.

However, this type of redirect probably shouldn’t be your usual choice. It is often best for all users to implement a standard (permanent) HTTP 301 redirect. If in doubt, reach out to your platform’s support team for advice on what’s best for your users and SEO.

New call to action

Topics: HTML

Don’t forget to share this post!


Video How to make a redirect page on tumblr

Related Posts

How to add seo keywords in wordpress

Contents1 Cómo agregar palabras clave de SEO en WordPress (aumentar el CTR y las clasificaciones)1.1 Post Title1.2 Headline1.3 Header Tags1.4 Introduction and Conclusion1.5 Body Copy1.6 URL1.7 Meta…

How to embed google calendar into wordpress

Contents1 How to Add a Google Calendar in WordPress (Step by Step)2 Add a Google calendar to your website3 calendario de Google3.1 Versatile plans and pricing4 Video…

How to change the logo in wordpress

Contents1 How to Add a Custom Logo to Your Site Header2 Site Logo2.1 Planes y precios versátiles3 Add, remove or edit a custom logo4 Video How to…

How to add a popup on wordpress

Contents1 Easily create a WordPress emergent form (2 forms)1.1 ¿Por qué usar un formulario emergente de WordPress?1.2 Método #1: Crear un formulario emergente con OptinMonster + WPForms1.3…

How to roll back wordpress version

Contents1 How to Revert WordPress: Undo WordPress Updates (Easy Way)2 How to Downgrade WordPress & Roll Back to a Previous Version2.1 1. A WordPress update included significant changes…

How to rollback wordpress version

Contents1 How to Downgrade WordPress and Revert to an Older Version1.1 1. A WordPress update included significant changes that are not compatible with your theme or plugins1.2…