- Web sites have two audiences:
- The first is human
- The other "spiders", "bots" or "web crawlers"
While the contents of the head tag displays little to human viewers it's important to the bots. Search engines have crawlers (e.g. Google's is called "Googlebot") that constantly surf the net following links from one site to another collecting and indexing everything they find. Google has an algorithm that then decides which pages are most relevant to search terms.
Web sites that read well to spiders are most likely to appear high in search engine results. This is what is called SEO or Search Engine Optimization. Books – big thick books – have been written on SEO. We don't have the time to go into it in great depth, but I will repeatedly touch on it as you proceed through the tutorial.
The single most important thing you can do for SEO is write a good title tag. My title tag for this page is:
<title>Head tag - HTML5 tutorial
</title>. It doesn't appear on the page itself but does show in the bar across the top of the browser and in the button in the taskbar, usually found at the bottom of the monitor on a PC.
The title also appears in Google's search results. For example:
Try to make it keyword heavy, but don't forget that people will also be reading it. Ideally the title should be less than 64 characters in length.
The second most important thing you can do is be realistic. At this point it's all but impossible to get high ranking on popular search words. Jimmy's Flower Shop isn't going to show up when someone searches "Flowers". However google "Jimmy's Flower Shop" or "Ogden Florist" and up comes www.jimmysflowers.com. If some guy's wife in Ogden is really ticked off, Jimmy just made a sale.
Jimmy's web site makes Jimmy money in part because whoever made Jimmy's site took the time to carefully chose the proper keywords and to write a good title. It is astonishing how few web designers take these two simple but crucial steps.
Meta tags also go in the head tag. Two in particular are important; both of which you can see in this page's source code.
- The charset meta tag:
- The description meta tag:
<meta name="description" content="The head tag contains the title and meta tags - important to the search engines, and information for the browser to properly display the page.">.
The former tells the browser what type of letters the page is written in. If your web site is in a language other than English be careful to use the correct charset. If your page is in plain old vanilla English just copy and paste
<meta charset="UTF-8"> just above the title*, and with any luck you'll never have to think about it again.
The latter sometimes shows up in search results and it can help in SEO.
There is also a "keyword" meta tag originally created to help in SEO but has become essentially worthless because so many web designers cheated. In the late '90s searching "dentist in Denver" might lead you to "porno in Portland". If you weren't careful you never would get your teeth fixed.
Spiders, bots or Web crawler
A Web crawler is a computer program that browses the World Wide Web in a methodical, automated manner.
title tag or element
The title of a document is specified by the TITLE element. The TITLE element should occur in the HEAD of the document.
meta tag or element
Meta elements provide information about a given Web page, most often to help search engines categorize them correctly.
When a server sends a document to a browser it also sends information in the Content-Type field of the accompanying HTTP header about what type of data format this is.
* Many SEO sites say the title tag should go first. W3C and WHATWG have
<meta charset="UTF-8"> going first in their examples of code (W3C) so that is what I recommend.