26

There are <meta> tags and other things you can place in the <head> of your HTML document. What <meta> tags etc. and best practices do you make use of in your HTML document to make it more accessible, searchable, optimized etc.

1
  • 1
    following andyk suggestions, I also always add in meta section: <meta http-equiv="imagetoolbar" content="no"> this disables the uselss IE image toolbar that appears when passing mouse over images bigger than 200x200 px. May 8, 2010 at 10:58

12 Answers 12

18

In my case:

  • Title (should do [Section Name - Site Name] for better SEO)
  • Meta tag for Content-type, description, and keywords
  • Link to stylesheet(s) (don't forget to specify the media="").
  • <script> tag that links to external javascript files.

All tags should follow the W3C's standard. The W3C site has a more technical and detailed section about the HTML <head> section.

2
  • 1
    Titling like [Section Name - Site Name] has nothing to do with SEO. The meta tag of "keywords" is almost useless.
    – datasn.io
    Mar 5, 2010 at 10:59
  • @Marco Demaio: to specify how a document is to be presented on different media: on the screen (you'll be using this mostly), on paper (print-version), with a speech synthesizer, with a braille device, etc. More info here: w3.org/TR/CSS2/media.html
    – andyk
    May 10, 2010 at 5:09
9

Do your users a favor and make their IE engine switch to Chrome one when Chrome Frame is installed :)

<meta http-equiv="X-UA-Compatible" content="chrome=1">
5

You'll want to put SCRIPT elements at the end of the page before the close of the BODY element. See http://developer.yahoo.com/performance/rules.html#js_bottom for details.

5

Besides the usual doctype, title, etc, I will try and provide you with some things I have learned and implemented that might be of assistance to you.

Firstly, remember that the title, for best user experience should have the most relevant sub section first. This is because it is usually displayed in the title bar/tab list/bookmark name. Consider this page title...

Stack Overflow - HTML head best practices

becomes Stack Overflow... (munched to save room in tab bar/bookmark list)

Now if you had 5 Stackoverflow tabs open (as I often do :P) then how would the user know which one is which?

Also note with CSS the cascading nature... So the order of these will matter. Same with Javascript, any dependencies on other external sites must be allowed for. I put mine in the head and havn't noticed a performance decrease. I put them there because it to me looks more tidy and logical. Though some other people will recommend putting the <script src=""> links in just before </body> so the browser won't temporarily stall... Just use whatever works best for your site.

Also a Meta tag of 'rating' with 'general' let's Net Filtering software know your site is safe for viewers of all ages (as long as it is, of course!)

I also use..

<link rel="start" href="/" title="Home" />

to let the browser know where the home of my site is. And for any browser prefetching systems, though I believe these are yet to be implemented by browsers without assistance of plugins.

Also consider the 'next' and 'prev' <link rel=""> if your pages are in a sequence of sorts.

2
  • I like the next, previous, and start links. There's a toolbar for Firefox which makes use of them.
    – TRiG
    Dec 2, 2009 at 15:50
  • I believe opera uses next and previous meta tags.
    – Nico Burns
    Jan 6, 2012 at 18:41
4

First, make sure the < !DOCTYPE is the verry first element of the document, i.e. no space, tab or corrupted BOM marker.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!-- declare all page rendering and programmatic related tags -->
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- Care about IE ? -->
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <!-- globalise scripting and styling content language  -->
    <meta name="Content-Type-Script" content="text/javascript" />
    <meta name="Content-Type-Style" content="text/css" />
    <!-- title tag is MANDATORY -->
    <title>Short and relevant, about 64 characters/spaces</title>
    <!-- declare all CACHE controll -->
    <meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
    <meta name="revisit-after" content="7 days" />

    <!-- declare all content description tags -->
    <meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.gcf.org/v2.5" labels on "1994.11.05T08:15-0500" until "1995.12.31T23:59-0000" for "http://w3.org/PICS/Overview.html" ratings (suds 0.5 density 0 color/hue 1))'>
    <!-- language specific keywords -->
    <meta name="keywords" lang="en-us" content="vacation, Greece, sunshine" />
    <!-- For french example -->
    <meta name="keywords" lang="fr" content="vacances, Grèce, soleil" />
    <meta name="description" content="about 255 characters/spaces WORDS relevant to the content of the actual page" />
    <meta name="Abstract" content="about 96 characters/spaces PARAGRAPH describing the actual page content within your site" />

    <!-- declare all situationnal and external relativity related tags -->
    <link rel="DC.identifier" type="text/plain" href="http://www.ietf.org/rfc/rfc1866.txt" />
    <link rel="start" href="/" title="Home" />
    <link rel="prev" href="../" title="Parent section" />

    <!-- declare all page rendering cascading style sheets in order of incidence -->
    <link rel="stylesheet" type="text/css" href="globaly-used.css" />
    <link rel="stylesheet" type="text/css" href="specificly-used.css" />
    <!-- declare all page rendering specific cascading style i.e. IE only, hacks etc -->
    <link rel="stylesheet" type="text/css" href="more-specificly-used.css" />
    <link rel="stylesheet" type="text/css" href="i-love-ie.css" />

    <!-- not relevent to subject, declare all javascripts AFTER css linking -->

</head>
<body>
</body>
</html>
0
2

I didn't see this mentioned: the <base> tag, if specified, should be the first element in <head>. (The base URI of the document is assumed to be . before/if not specified.)

1
  • 1
    Um. Why the heck did anyone downvote this? It's absolutely correct. Sep 26, 2009 at 17:43
2

IMHO, the two most important child tags of <head> are <title> and the Content Type meta tag. Search engines actively look at <title>. Whereas the other meta tags are often ignored. As a multi-lingual web user - I cannot stress more the importance of adding the Content Type tag because without it, the browser needs to autodetect the character set of the web page and this operation is often flaky. The result ends up being that various characters are not rendered correctly to the user or sometimes none at all in the case of Japanese or Chinese.

Here is an snippet of some of the header code from a current project of mine:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Reports Blah Blah</title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
...
</head>
1
  • Description is what appears against your listing in most search engines - without it, the search engines will usually guess at a snippet from within the page; It's best not to leave this up to chance. The Keywords META tag is also still used by certain search engines, though it carries only marginal weight. However, I also find it useful to populate, just as a reminder as to which keywords are most important, to which keywords need to be emphasised within the content of the page.
    – CJM
    Sep 29, 2009 at 13:07
1

There is a related question here that may help add some light regarding the order of the tags.

Generally my pages include the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>...</title>
    <meta name="Description" ...>
    <meta name="Keywords" ...>
    <meta name="Copyright" ...>
    <meta name="Author" ...>
    <meta name="Language" ...>
    <style type="text/css" ...>

DocType is important to enforce strict rendering (No quirks mode) by the browser. You may want to use XHTML instead - as long as there is one there. I add Copyright and Author purely because I design and create the pages for other companies. Description is for SEO, and Language is for the browser (if it supports it).

I don't believe it makes to much of a difference which meta tag comes first, or whether the title should be above. What counts in most cases is that it exists on the page, and has the correct content.

1

As far as I'm aware, most search engines ignore any "keywords" or "description" meta tags, instead preferring to read the content of the document.

Getting the page title right however, is of extreme importance.

3
  • They often ignore keywords, but not so much description.
    – kangax
    Sep 26, 2009 at 20:37
  • 1
    Last time I checked keywords and description were completely ignored by Google. This may have changed but it seems unlikely. The basic problem was that they didn't add anything to the content on the page and were frequently used by spammers to load inaccurate keywords or description, thus reducing the accuracy of searches. So Google ignored them.
    – MarkR
    Sep 27, 2009 at 15:50
  • 1
    They still use description (but not keywords, of course) - youtube.com/watch?v=jK7IPbnmvVU&feature=player_embedded
    – kangax
    Sep 27, 2009 at 17:29
0

Title, meta tags for keywords, content-type (if not explicitly set by the web server), and any CSS to be applied to the page.

Declaring the CSS up front allows the browser to lay out the page more efficiently (see http://developer.yahoo.com/performance/rules.html#css_top).

0

I would add an important note: if you're using IE's meta X-UA-Compatible tag to switch rendering modes for Interet Explorer, you must insert it as the first item in HEAD:

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <title>Page title</title>
  ...etc
</head>
0

In addition to the answers above I use the Dublin Core initiative meta-tags.

They are very useful for actual content/papers etc.

<meta name="DC.abstract" content="Document abstract" />
<meta name="DC.audience" content="Target audience" />

etc.

Not the answer you're looking for? Browse other questions tagged or ask your own question.