Brian Hollenbeck 3

What, aside from title, link tags for CSS and script tags, are good meta tags to include in any website? For example, I've been wondering about links to robots.txt, RSS and other features. Are there any templates for headers out there?

6 answers

Jens Hedqvist 1356
1
point
  • Description
  • Favico
  • <links> to related sites (i.e. on my portfolio I have a link to my blog)

Try not to put to much stuff up there. Many things are not needed. Check the source of your favorite developers and 1337s out there (like happycog, 456bereastreet, simplebits, snook, alistapart and so on).

Answered 8 months ago by Jens Hedqvist
Olly Hodgson 357
1
point

I'm not sure about best practise. Here's an example of the sort of things I tend to include:

<head>
    <title>Something</title>

    <!-- Sort out some IE bits and bobs -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="ImageToolbar" content="false">
    <meta http-equiv="ClearType" content="true">    
    <meta name="MSSmartTagsPreventParsing" content="true">

    <!-- Standard keywords, description, etc -->
    <meta name="description" content="Something">
    <meta name="keywords" content="Something">
    <meta name="copyright" content="&copy; Copyright 2009 Someone">

    <!-- Feed -->
    <link rel="alternate" type="application/rss+xml" title="RSS feed" href="rss.xml">

    <!-- CSS, Javascript -->
    <link rel="stylesheet" type="text/css" href="framework.css">
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="library.js"></script>

    <!-- This is used if someone puts a link to our site on their iphone home screen -->
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
</head>

Most of it's fairly obvious stuff. The IE bits and bobs come down to pragmatism. I'd rather not include them, but if I don't then things like the image toolbar and smart tags tend to annoy / get in the way. I set X-UA-Compatible to edge so I'm always using the newest version of their engine.

Answered 8 months ago by Olly Hodgson
Doug 780
1
point

My thoughts with comments...

Required by HTML spec:

<title>Title</title>

You already know if you need these. Use external stylesheets and JS so they can be cached. Try to include a print stylesheet when appropriate.

<link rel="stylesheet" href="style.css" type="text/css" 
  media="screen, projection">
<link rel="stylesheet" href="print.css" type="text/css" 
  media="print">
<script type="text/javascript" src=""></script>

This is not necessary if the webserver is properly configured, but you never know... Also, if a user saves a webpage as a text file, this line ensures it is displayed correctly when they view it from their local drive.

<meta http-equiv="Content-Type" content="text/html; 
  charset=UTF-8">

True, webcrawlers will look for the robots.txt file automatically, but fine-tuned, page-specific instructions are usually easier to automate within the HTML. For example, if content shows up in multiple place (e.g., individual articles can show up in dated archives, author archives, search results, etc.), you will want search engines to only catalog a single canonical location.

<meta name="robots" content="index,follow">

Bonus tip: In WordPress, I use the following code:

if((is_home() && ($paged < 2 )) || is_single() || is_page() 
  || is_category()) 
  echo '  <meta name="robots" content="index,follow" />';
else 
  echo '  <meta name="robots" content="noindex,follow" />';

These are not required, but always great to have for search engines:

<meta name="keywords" content="">
<meta name="description" content="">

Again, not required, but highly recommended. Try to use the right MIME type here. MS ICO files will be automatically used by IE, but other browsers (correctly) require a link. Any 16×16 image format can be used as long as you specify it here and serve it correctly.

<link rel="shortcut icon" href="/favicon.ico" 
  type="image/vnd.microsoft.icon">

If you have an RSS/ATOM feed, definitely include a link in the header, so it can be picked up by automated software, like Google Reader. Don't just rely on a little orange button somewhere within the page.

<link rel="alternate" type="application/rss+xml" 
  title="News and Updates" href="">

Patches for Microsoft browsers. Again, you already know if you need these. Try to keep to a minimum.

<!--[if IE 6]><link rel="stylesheet" href="" 
  type="text/css" media="screen,projection"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="" 
  type="text/css" media="screen,projection"><![endif]-->

"rel" links like bookmark, contents, home, index, next, prev, etc. are of limited usefulness, and I find not worth the effort to program. YMMV.

<link rel="next" title="Next Article" href="">

And finally, I do NOT recommend the following:

There is (or was) a lot of controversy about this one. I won't go into it here, but I'll just say this: forget about it. Code to standards and let the browsers keep up if they can.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

These two items attempt to change browser behavior, which is never a good idea. There are settings available to the user to enable or disable these if desired. IMO, these are equivalent to using CSS to change the scrollbar colors or JS to disable the context menu. The User Agent (i.e., the browser) belongs to the user, not the developer.

<meta http-equiv="ImageToolbar" content="false">
<meta name="MSSmartTagsPreventParsing" content="true">

Update

Some extra tips from Camen Design:

  • Make sure the stylesheet is the first external link in the head so it is downloaded quickly (allowing your page to display faster).
  • Put the print stylesheet inside the screen stylesheet using an @media block to reduce HTTP requests. (Be sure to change the media attribute to "all.")
  • If your shortcut icon is located at "/favicon.ico", no link is necessary; all (?) browsers will download it automatically.

From Google:

  • "Google does not use the keywords meta tag in web ranking." (But do others?)

Update 2 (2009-12-03)

From Mark Pilgrim:

  • For security reasons, include a charset declaration before any content, including the title.
Answered 8 months ago by Doug
Oli Studholme 640
0
points

HTML5-style charset—while <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> still works fine, the HTML5 version is simpler (with or without the XHTML-style trailing slash):

<meta charset="utf-8">

Note that this has to come within the first 512 bytes of the document, so as @Doug says put it immediately after <head>

Answered 7 months ago by Oli Studholme
Dwayne Anderson 660
0
points

This one is always good to include...

<meta http-equiv="imagetoolbar" content="false"> <!-- IE is dumb -->
Answered 8 months ago by Dwayne Anderson
danwellman 3775
0
points

You mean in the <head> as opposed to a visible header in the <body> right?

You mention <script> tags in your question - these should go at the end of the <body> for performance reasons. Most scripts can be moved to the end of the page with no visible change in the site, other than that it loads quicker ;)

I always include the content-type meta tag:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Also you'll probably want to serve up some IE-specific stylesheets:

<!--[if IE 7]>
  <link rel="stylesheet" href="/css/ie7.css" type="text/css" />
<![endif]-->
<!--[if lt IE 7]>
  <link rel="stylesheet" href="/css/ie.css" type="text/css" />
<![endif]-->

That should put the troublesome IE in its place! Remember to put them after the other stylesheets...

Also the favicon, as mentioned elsewhere:

<link rel="SHORTCUT ICON" href="/favicon.ico" />

You don't need to link to robots.txt - the robot will look in the root of your site automatically for this file and read it if found.

This is pretty much what goes in my headers :D

Answered 8 months ago by danwellman
Log in to post your answer