XHTML Page Title Tag
by Tony Turner
Valid XHTML page title tag method in the interest of search engine optimization. According to the W3C we must define a character set (charset) for our valid markup. This part we know, and if not, the validation service at W3C will readily remind us.
“In order to use our title or content, the search engine will want to know what language and set of characters we are using; else wise it is useless data.”
Many SEO training classes and supposed experts would tell us that the page Title Tag must come very first in our HTML markup, should be the first line in the Head of our web pages. This is in the interest of search engine optimization. Their model as so:
<DTD>
<html>
<head>
<title>Page Title Here</title>
<Description, Key Words, Char-Set, CSS links, meta-tags, etc. here>
</head>
<body>
Content
</body>
</html>
This is not the best method, and I’ll tell you why.
When a user agent (browser) begins to read our compliant markup, it first reads the DTD, finds our human language and the opening tag for our HTML. From there, reading on down the head markup until it gets to our charset definition. Then it stops reading the markup after ascertaining the defined charset. Then it begins back at the top to read anew. The user agent needs a charset first. Whether the page title tag comes before it or not, the browser will find the charset and start over again, this time reading and rendering with the defined set of characters. This is a function of the user agent in order to present our content in the proper language and set of characters.
We all know that the page title value appears echoed into the title bar of our browser. The page title is at the top of our window, beginning just after the browser maker’s icon. In order to do this properly, the user agent must know the proper character set to use.
The same goes for search spiders. In order to use our title or content, the search engine will want to know what language and set of characters we are using; else wise it is useless data. They wouldn’t be able to index or localize the content without this information. As with any user agent, a search spider isn’t going to make best use of our content without these necessary values.
In the interest of search engine optimization and even more so, in the interest of efficiency, we must define our charset very first in the head, or before. Our model as so:
<DTD>
<html>
<head>
<Char-Set>
<title>Page Title Here</title>
<Description, Key Words, CSS links, meta-tags, etc. here>
</head>
<body>
Content
</body>
</html>
You may of course do it any way you want. Just know this, the user agent will read down to the charset, and then just turn around and start all over again anyway. So, we are merely just wasting time if we place the page title ahead of the charset in our head markup. The user agent will read on past the Title, find the charset, and start back at the top again, to re-read the title anyway. We gain nothing by having the page title before the charset. We may as well save some time and place the charset first.
Now, we understand that our favorite local SEO “expert” guru may dispute this, they may insist otherwise and stick to the notion that the title must come very first. That is OK, as long as we know the difference ourselves.
A Better Method
For documents with an HTML file extension, such as our static XHTML 1.0 or 1.1 Strict and Transitional documents, there is an even better method. We may do this from the server side using .htaccess. In this manner, we may have the page Title tag appear very first in the Head of our document, still define a charset, with the added bonus of nice Green Validation page at the W3C.
This is very easy to do on our Apache hosting solution by simply placing this as the first line of our .htaccess file in the directory where our pages are located:
AddType ‘text/html; charset=ISO-8859-1′ .html
We may change the charset to suit our needs, and this works for pages with the file extension “.html” only. If you prefer “.htm”, merely change that bit and it will work.
This snippet must be used precisely as given above, and must appear on the very first line of the .htaccess file.
Now our markup may look like this:
<DTD>
<html>
<head>
<title>Page Title Here</title>
<Description, Key Words, CSS links, meta-tags, etc. here>
</head>
<body>
Content
</body>
</html>
(No need for a meta-tag charset definition!)
There is a similar syntax to define PHP document charset, but the W3C validation does not recognize it. We will get an error for no charset, if we do this for pages with a “.php” file extension. It will indeed do the trick though, validating or not, this method is safe. We feel that this is one of those rare cases where the validation service has “some limitations”.
We may also declare charset from the server side with languages such as PHP, CFM, ASP, etc. Those methods are fine too and will do the same job.
In the interest of HTML file types, static sites, charset, search engine optimization, efficiency, and W3C validation, we believe our method is best.
EITHER method offered is fine. Use the charset first in the head as a meta-tag followed immediately after by the page title value. OR… use the .htaccess method and leave out the charset meta-tag and place the page title very first in the head. When practical, the latter of the two methods is preferred.
This is our current best practice method suggestion for page title placement and charset definition. The extra bonus of eliminating one line of markup in each page, site-wide is desirable. This again, is in the interest of site efficiency.
Off-Server Content
When creating HTML documents for distribution on CD or download, as standalone pieces or in GUI, help files, etc. Always define a charset in each and every page file. Use a meta-tag for this.
Not only the HTML/XHTML files, but also define a charset for all CSS external style sheets. For external style sheets on CD or offered as download, as part of a program, etc, use this:
@charset “UTF-8?;
This is the Important part: on the very first line, and only on the very first line.
Of an external CSS style sheet.
Edit that to reflect your choice, such as:
@charset “iso-8859-1?;
Again, on the very first line of an external style sheet. Not even a comment may precede this rule.
Do not use this in HTML pages; the charset already applied in the markup of that document.
More on the .htaccess file
To set the HTTP header with an .htaccess file, use any of these:
AddCharset utf-8 .html
AddCharset utf-8 .css
AddDefaultCharset utf-8
Even better, use the latter of those. It sets the default for all file types.
All of this, with a final word of warning… If we set the server up this way, then if we move the content, we must bring the .htaccess file along with it.
The savings of one line per document throughout an entire site, is a substantial savings. Passing this data to the user agent is easier and quicker for the user agent. Just please remember, offline or we move the site and forget the .htaccess file, our documents will be without charset.
Authoring Techniques for XHTML & HTML Internationalization: Characters and Encodings 1.0
At W3C, http://www.w3.org/TR/i18n-html-tech-char/#IDARVFO says:
If declaring the character encoding in the HTTP header, ensure that the server-side settings will be maintained, especially if the file is moved or the server technology is changed.
These best practice methods suggested for professional content developers with professional hosting solutions.
W3C Articles:
FAQ: CSS character encoding declarations
http://www.w3.org/International/questions/qa-css-charset
Tutorial: Character sets & encodings in XHTML, HTML and CSS
http://www.w3.org/International/tutorials/tutorial-char-enc/
Setting ‘charset’ information in .htaccess
http://www.w3.org/International/questions/qa-htaccess-charset
About the Author: Tony Turner has been a regular contributor to a few select eList resources over the last several years. Helping others to explore and hone web building skills and promoting standards based development. A collection of recent articles can be found at Articles.Cranium-Creations.com. Contact, Link, eList, and current availability information are there as well.
Written by: Tony Turner
This entry was posted on Sunday, October 21st, 2007 at 11:10 pm and is filed under OS WebMaster, Web Help. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
