How to Use the Meta Refresh Tag

Meta refresh tags are useful for redirecting readers, but use it appropriately.

Web Design
Kohei Hara/DigitalVision/Getty Images

The meta refresh tag, or meta redirect, is one way that you can reload or redirect web pages. The meta refresh tag is easy to use, which means it is also easy to misuse. Let's take a look at why you would want to us this tag and what pitfalls you should avoid when doing so.

Reloading the Current Page with the Meta Refresh Tag

One of the things you can do with the meta refresh tag is to force a reload of the page that someone is already one.

To do this, you would place the following meta tag within the <head> of your HTML document. When used to refresh the current page, the syntax looks like this:

<meta http-equiv="refresh" content="600">
  • <meta> is the HTML tag. It belongs in the head of your HTML document.
  • http-equiv="refresh" tells the browser that this meta tag is sending an HTTP command rather than text content. The word refresh is an HTTP header tells the web server that the page is going to be reloaded or sent somewhere else.
  • content="600" is the amount of time, in seconds, until the browser should reload the current page. You would change this to whatever amount of time you'd like to elapse before the page reloads.

One of the most common uses of this version of the refresh tag is to reload a page with dynamic content, such as a stock ticker or weather map. I've also seen this tag used on HTML pages that were being shown at trade shows in display booths as a way to refresh the page content.

Some people also this meta tag to reload ads, but this will annoy your readers as it could force a page to reload while they are actually reading it!  Ultimately, there are better ways today to refresh page content without needing to actually use a meta tag to refresh the entire page.

Redirecting to a New Page with the Meta Refresh Tag

Another use of the meta refresh tag is to send a user from the page that they requested to a different page instead.

 The syntax for this is nearly the same as reloading the current page:

<meta http-equiv="refresh" content="2;url=http://webdesign.about.com/">

As you can see, the content attribute is slightly different.

  • content="2;url=http://webdesign.about.com/": The number is the time, in seconds, until the page should be redirected. Following the semicolon is the URL of the new page to be loaded.

Be Careful. The most common error when using a refresh tag to redirect to a new page is to add an extra quotation mark in the middle.

For example, this is incorrect: content="2;url="http://newpage.com". If you set up a meta refresh tag and your page is not redirecting, check for that error first.

Drawbacks to Using Meta Refresh Tags

Meta refresh tags have some drawbacks:

  • Meta refresh redirects have been used by spammers to fool search engines. Search engines now often remove those sites from their database. If you use a lot of meta refresh tags to redirect pages, the search engines may decide your site is spam and delete it from their index. If you need to redirect an old URL to a new one, tt’s better to use a 301 Server Redirect instead. That redirect will actually let search engines know that a page has been permanantly moved and that they should transfer any link rankings from that old page to the new one.
  • There can be a usability problem if the redirect happens quickly (less than 2-3 seconds). This prevents users of older browsers from using the “Back” button.
  • If the redirect happens quickly and goes to a non-existant page, your readers may get stuck in a loop without seeing any content other than a 404 page. 
  • Refreshing the current page can be confusing. If a user didn’t request the reload, they may become concerned about your site's security.

Edited by Jeremy Girard on 2/2/17