In my last post we took a look at some HTML source code and started exploring ways to optimize the HEAD content of your web pages. So far we’ve only looked at how to use the TITLE tag, but in this post I want to talk about META tags and what they really are.
META tags are the web’s version of metadata. If you’ve never heard of metadata before, don’t freak out. You have probably encountered metadata before but never had it explained to you what you were seeing.
Simply put, metadata is a way of storing extra, non-essential information within computer files. This extra information can provide useful context or background to whatever is being represented in the file, but if the metadata were somehow lost the file would still open and work the way it is supposed to.
Metadata is used in many digital files. For example, if you use a digital camera, your camera most likely adds metadata into your pictures, recording the make and model of camera used to take the picture, and maybe even including the ISO, shutter speed and other technical details about the camera settings when that particular photo was taken.
Some fancy CD recording systems, even iTunes, will often include something called “CD Text” when creating CDs. The CD Text is metadata added to the CD at the time it is created so that CD players that know how to read CD text can display the name of the CD itself, as well as the track names and recording artist. If you burn a CD without including CD Text, it will still play normally, but CD players that know how to display that extra information will have nothing to work with but “Track 1”, “Track 2”, and so on.
In the case of web pages, metadata comes in two basic flavors.
- META tags that tell your web browser something important about the web page.
- META tags that do anything else.
Let’s revisit my source code sample to see what I’m talking about.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<title>Web Page Demo</title>
<p>Welcome to my web page...</p>
In this very simple web page there are no META tags at all, and that’s ok. Like I said, metadata is non-essential. The file will still work without having any metadata, but if we add metadata to the file we can provide useful information to other computers and programs that may encounter this page online.
For example, if we add this line of code right before the TITLE tag:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
That one line of code tells web browsers:
- That this is a text file.
- That the text file is an HTML page, and…
- That the character set to be used in displaying this page is a variable-length character encoding for Unicode.
Yikes! I know… I lapsed into geek-speak there, and I’m sorry. Let me make it up to you by explaining in English.
Unicode is a standard set of numbers, letters and other characters computers use to consistently represent and manipulate text in most of the world’s writing systems. Unicode dates back to the late 1980s when various computer developers tried to figure out how practical it might be to use a consistent and universal set of characters on computers, no matter where they were in the world. Because different languages use different kinds of letters, this is both important and challenging for a variety of reasons.
For more information about Unicode and HTML,
check out this Wikipedia article:
The META tag above is only one example of META tags we can use on the web. Other commonly used META tags can make a page “refresh”, tell search engine robots whether or not to index a page or follow its links, or tell parental control programs that the content of a given page may not be suitable for children.
Now that you understand that META tags how we add extra, non-essential information to web pages, we can explore these different kinds of META tags. Next time, META tags for communicating with web browsers.