Inside your head

2005.06.01

Meta information is an important part of a web page. While providing information about the web page, they also increase the usability and accessibility of a website, and make it attractive to search engines. In this discussion, we will look at some of the common and useful elements that go between <head> and </head>. Atleast, these are the ones I find useful.

Essentials

These are the basics which are essential for any web page, and used by (almost) all web authors. I won’t offend you by going in to details.

content-type

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />

This tag indicates the type of data sent to the browser. It is used by browsers to know what to do with the data that they receive.

title

<title>Importance of meta information</title>

The title should be descriptive of the page contents, and ideally should be the same as the page’s main headline.

keywords

<meta name="keywords" content="meta data, meta tag, xhtml, html" />

keywords meta tag has lost its importance largely due to the misuse by web authors, and it’s no longer used by Google. However, having a short, relevant list of keywords doesn’t hurt anyone, and there are still some search engines that find this useful.

description

<meta name="description" content="how to use meta information to optimize a web page" />

description meta tag is used to provide a short description of the page content. It’s important to get this right, as it’s used by Google when indexing a page, and the description is displayed in search results.

Document Attributes

distribution

<meta name="distribution" content="global" />

This tag specifies the scope of the distribution of the document.
Possible values: global, local, iu
Use global for public pages that are free for distribution anywhere, local for locally distributed pages (whatever that means), and iu (internal use) for things you want to hide (doesn’t mean it effectively hides anything).

resource-type

<meta name="resource-type" content="document" />

This tag specifies what type of a resource the page is. Currently supports only document, so there’s a question about it’s usefulness. I just go ahead and add it anyway.

rating

<meta name="rating" content="general" />

You can give a rating to the page content. Don’t want those kiddies looking at your X rated content.
Possible values: 14 years, general, mature, restricted, safe for kids

copyright

<meta name="copyright" content="Copyright (c) 2005 Tin Woodman" />

There’s no restriction on what you can have as the content, so if needed, specify the license too.

author

<meta name="author" content="Tin Woodman; http://emeraldcity.com" />

Author’s name, and possibly the URL. Having your email there is also OK, but beware of spambots.

Feeding the Robots

robots

<meta name="robots" content="all" />

You can specify whether to index the page or not, and how to proceed.
Possible values: all, none, index,follow, index,nofollow, noindex,follow, noindex,nofollow
all is the same as index,follow and none is the same as noindex,nofollow

revisit-after

<meta name="revisit-after" content="20 days" />

Hopefully the robot will come back after the specified duration. Content is a string of the number of days as in the example.

Navigation

These tags assist the navigation of the website in supporting user agents. For example, the Opera browser displays these links in its “Navigation bar” (View > Navigation bar). It’s also helpful to search engines.

home

<link rel="home" title="Home" href="/path/" />

Link to the home page.

index

<link rel="index" title="Index" href="/path/" />

Link to the site index.

contents

<link rel="contents" title="Contents" href="/path/" />

Link to the site map, or on a site arranged as a book, link to the contents page.

search

<link rel="search" title="Search" href="/path/" />

Link to the search page.

glossary

<link rel="glossary" title="Glossary" href="/path/" />

Link to the glossary page.

help

<link rel="help" title="Help" href="/path/" />

Link to the help page.

start

<link rel="start" title="Start Here" href="/path/" />

Link to the starting point. On a blog, this could be the link to the home page.

first

<link rel="first" title="First" href="/path/" />

Link to the first content section: on a book, the first page; on a blog, the first entry.

next

<link rel="next" title="Next" href="/path/" />

Link to the next content section: on a book, the next page; on a blog, the next entry.

prev

<link rel="prev" title="Previous" href="/path/" />

Link to the previous content section: on a book, the previous page; on a blog, the previous entry.

last

<link rel="last" title="Last" href="/path/" />

Link to the last content section: on a book, the last page; on a blog, latest entry.

up

<link rel="up" title="Up" href="/path/" />

Link to the content section one level above in the hierarchy of the site structure.

copyright

<link rel="copyright" title="Copyright" href="/path/" />

Link to the copyright notice.

author

<link rel="author" title="Author" href="/path/" />

Link to the author’s web page.

In all above elements, the title attribute can be used to provide more information about the link. For example, the “up” link can have a title as “Up one level”.

IE Madness

Internet Explorer needs it’s own meta tags to prevent it from ruining our creation.

imagetoolbar

<meta http-equiv="imagetoolbar" content="no" />

Have you seen the image toolbar in action? You probably don’t want to see it again.

MSSmartTagsPreventParsing

<meta name="MSSmartTagsPreventParsing" content="true" />

We know what we are doing, so there’s no need to ask a dumb browser or application to do any smart things with our web page.

Spice

Shortcut Icon

<link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon" />

OR

<link rel="Shortcut Icon" href="favicon.ico" type="image/ico" />

Create a 16px X 16px image and link it like this so that it’ll show up in the browser’s title bar or (if tabbed browsing is enabled) page tab. I usually save it in png format and rename it to favicon.ico and serve as image/ico. IE has a problem with pngs, so if you wish to serve ye olde browser, save in gif format. If you can create a real .ico file, you can serve it as image/x-icon, which will show up on all browsers.

If there’s a better way to do this, please let me know.

There’s more

This was just a small subset of possible meta tags and other meta data, and I haven’t explained all possible uses of them either. Since meta tags have lost their importance, we need not worry too much about them anyway.

The links to stylesheets and alternative formats (RSS, Atom) are also meta data, but you already know too much about them. Please join the discussion and let us know what other meta information you use on your sites.

Permanent Link | Filed under: Web, Thoughts

7 Comments

Comments Feed

  1. drac

    June 1st, 2005 at 11:41 pm

    On favicons, 32×32 px is also acceptable and provides a bit more flexibility. However, browser support for the larger size is dodgy. MS IE will use the larger size for a bookmark (favourites ?) icon, for example.

    I would suggest taking an image in any popular format and getting a favicon from html-kit.
    It’s not always easy to reduce a detailed image to such a small size without blurring and loss of detail, but they do a better job than a 5 minute photoshop can accomplish :)

    They also create a real icon file, which is a wondrous beastie. An .ico file is actually a container and can encapsulate 16×16 and 32×32 (and even larger sized) images, all in one file.

    Of course, all that complexity doesn’t serve the lowest common denominator so most favico implementations just use a 16×16 icon as you note.

  2. OldBoy

    June 2nd, 2005 at 8:03 am

    Nicely put, Prabhath.

    On favicons, as Drac said html-kit’s tool is handy. Or if you like to save it as a .ico directly from Photoshop, they have a nice plugin here http://www.telegraphics.com.au/sw/

  3. Prabhath

    June 2nd, 2005 at 9:20 am

    Thanks for the pointer to favicon creator and the PS plugin folks. I guess it’s time to update my “padma” (the traditional lotus art I use on this site).

  4. Jim

    June 5th, 2005 at 2:55 am

    Is it really worth switching off “MS Smart Tags”? It was present in a single Internet Explorer 6.0 beta. I’d guess that there are more people using Netscape 4 than Internet Explorer 6.0 betas.

  5. Prabhath

    June 6th, 2005 at 5:40 pm

    Turning smart tags off doesn’t hurt anything else but that IE 6.0 beta. I don’t want to take chances with MS browsers ;-)

  6. udendra

    September 13th, 2005 at 2:11 pm

    I think all these tags should be used according to the intended purpose.
    Note that it isn’t mandatory that you use all of them in your ‘HEAD’.

  7. James AkaXakA

    April 2nd, 2006 at 8:47 pm

    Actually, you shouldn’t put content-type in, as the server already sends it along in the http headers.

    By including it, you’re opening the door for mime-type missmatches. Not a good thing.