• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / HTML / Common HTML Meta Tags

Common HTML Meta Tags

10 October 1997 / 2 Comments

You may have heard talk of HTML meta tags on the Web, most likely in connection with search engines. This is because one of the common uses of meta tags is to give search engines additional information about your web page when they index it. In fact there are over 200 different types of “meta-information” that you can place in your Web page with the aid of the HTML meta tag.

What does a meta tag look like?

Meta tags go inside the <head></head> element of your Web page, and take the following format:


Either:      <meta name="name" content="content">	

Or:          <meta http-equiv="name" content="content">

So, which should you use? Well, it depends on what type of meta tag you’re using. The reason is a little boring, but basically http-equiv is designed for meta tags that emulate the equivalent HTTP header (e.g. "refresh" and "pragma"), whereas name is for all the rest (e.g. "author" and "description"). A rule of thumb is as follows: If the meta-information is designed to be interpreted by a Web server or proxy, use http-equiv; if it’s designed for a page editor or search engine, use name.

Don’t worry about this too much, as most tutorials on meta tags (including this one) tell you which format to use!

An HTML meta tag example

This snippet of HTML is from an imaginary page about dog training, and shows how you can use the description and keywords meta tags to improve your ranking with the search engines:


<head>

<title>Marcia's Dog Training Page</title>

<meta name="description" content="This Web page
contains information on dog training, including modern
training techniques, training news, info on training
centres and links to other dog-training sites.">

<meta name="keywords" content="Dog,
training, puppy, techniques, centres, links, leash,
teaching, commands, sit, stay, fetch, beg">

</head>

Notice that we used two meta tags here, both within the <head></head> element of our Web page. The description tag is often used by search engines such as Google to display a short summary of your web page in their search results pages. The keywords are used to help index your page, so that when people type in the word “fetch” into their favourite search engine, your page will be one of the pages returned.

Common meta tags

OK, you get the basic idea. Here are some more really useful meta tags that you can use to improve your website. Don’t forget that all meta tags should go inside the head element in your page.

Example #1 – Author


<meta name="author" content="author's name">

This lets you tell search engines and browsers that you wrote this page!

Example:


<meta name="author" content="Marcia Westley">

Example #2 – Refresh


<meta http-equiv="refresh" content="delay;url=new-url">

This meta tag is great if you move your Web page to a different directory or server, or have to rename it for some reason. You can use this tag to redirect the browser to to the new page! delay is the delay in seconds to wait before refreshing. new-url is the URL of the page to jump to (it can be the same page, in which case the same page will continually refresh.) If you specify a delay of zero, then the browser will jump immediately to the new page.

Example:


<meta http-equiv="refresh" content="0;url=newpage.html">

Example #3 – Robots


<meta http-equiv="robots" content="[noindex|nofollow]">

This is another one for the search engines (also known as robots!). You can use this meta tag to tell search engines whether they should add your page to the index or not, and whether they should follow links from your page to look for other pages to index.

Normally the search engines will index your page if they find it, and follow all the links on the page to look for other stuff to index. The following example will tell robots not to add your page to the index (they can still follow links on your page):

Example:


<meta http-equiv="robots" content="noindex">
You can also add a file called robots.txt to your home directory, to tell search engines which page to index and which to ignore. This is the preferred method; however the above method lets you specify index requirements for each page individually.

Example #4 – Caching


<meta http-equiv="pragma" content="no-cache">

This meta tag tells browsers not to store a copy of your page in the cache on your hard drive. The cache is normally used to store recent pages that you have visited, so that the browser doesn’t have to go off to the server to download commonly-visited pages all the time. However, if you are updating the page frequently and want users to see the newest version at all times, then use this meta tag.

Example #5 – Expiry date


<meta http-equiv="expires" content="date">

This tag is similar to the pragma meta tag above, except that with this one you can tell the browser when to consider the page out of date (in other words, when it should retrieve a new copy from the server). For example, if you update a page every month, you would want to set the page to expire a bit less than month after you last updated it.

Example:


<meta http-equiv="expires" content="Sun, 4 Oct 1998 15:00:00 GMT">

That’s enough meta tags!

That should be enough to keep you busy for now! These are the more common meta tags, but there are hundreds more. Don’t be daunted though — you’ll probably never use more than ten of them, and you’ve just learned the most useful ones! Find out more about meta tags at Wikipedia.

Filed Under: HTML Tagged With: cache, caching, description, head, html, html help, html tutorials, keywords, metatags, redirect, refresh, SEO

Reader Interactions

Comments

  1. capecape says

    19 January 2011 at 7:24 am

    HI,

    Good Post. Only one thing.

    <meta http-equiv=”Pragma” content=”nocache”>

    is not correct

    The correct is
    <meta http-equiv=”Pragma” content=”no-cache”>

    Reply
  2. matt says

    20 January 2011 at 1:56 pm

    @capecape: Good catch – I’ve fixed up the article. Thanks for the feedback!

    Matt

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits