Working With Meta Tags in HTML Documents

By: Daniel Imbellino
Updated: Feb 28, 2013

What are Meta Tags, and why are they so important when designing your website? Better yet, what is Meta? The word "Meta" as defined by Wikipedia (Meta info on Wikipedia), literally means "To indicate a concept which is an abstraction from another concept, used to complete or add to the latter". What this means is, take one concept that is somehow related to another concept and put the two together. In the sense of Meta Tags in HTML, this is exactly what we are doing. Meta tags in HTML can be used to provide information about our pages content, while as this information is directly related to that particular content (the web page). Put another way, Meta Tags provide information about information. Just as the definition states, we are taking information that is similar to other information and combining this information into one, so to speak.

Defining A Character Set in HTML:
   One use of Meta Tags, and probably of the most importance, is the "http-equiv" tag. This tag is generally used to define the character-set (character encoding scheme) that will be implemented in your web pages. Just like we have an alphabet that defines the characters for the english language, web pages need a set of characters as well. When we define a character set in our web pages, we are giving browsers and servers critical information that is needed in order to display our pages correctly. What we are doing is providing a format of characters for encoding the data in our web pages for later use. You can think of the viewing of a web page as the decoding process.
You define a character set in HTML like this:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Here we defined the character set for our HTML document, which is "iso-8859-1", which happens to be known as the western-european character set, which consists of the english language, as well as some european languages. The "iso-8859-1" charset consists of all the upper and lower case English alphabet, the numbers 0 thru 9, and some foreign and special characters. This is a widely used format across the world wide web. Also, notice the forward slash at the end of the meta http-equiv declaration, this is required in XHTML, and is NOT valid without it. All "open" tags of this type must have a forward slash the the end of a declaration.

We also indicated the type of document that is being created using the "Content-Type" attribute, and setting our content to "text/html", which is the proper formatting for use with HTML 4.01, and XHTML 1.0 Transitional markup languages. Technically though, the "text/html" value is really not XHTML compliant. The proper character set for XHTML is content="application/html+xml".

UTF-8 <meta http=equiv="Content-Type" content="text/html; charset=UTF-8"> Theres a problem with the western-european character set though, it doesn't cover all languages, as well as a number of scientific and mathematical symbols. This is where "UTF-8" and "UTF-16" come into play. If your making web pages that need to be accessible in multiple languages, then UTF-8 is the best encoding scheme to use. UTF means "Unicode Transformation Format". UTF-8 includes all the characters in the ISO-8859-1 encoding format, along with many characters from other foreign languages. Also, UTF-8 is backward compatible with ASCII (American Standard Code For Information Interchange), which makes up the majority of characters used in the western-european character set. UTF-8 stores characters using one byte (8 bits) of data at a time. Another encoding format known as UTF-16, stores data 2 bytes at a time vs UTF-8's 1 byte. UTF-16 files can get quite large as compared to their UTF-8 counterparts. It's best to stick with either the western-european (iso-8859-1) or UTF-8 encoding formats for your web pages.

Ex: <html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title of your webpage </head>

Meta Name attribute:
You use the Meta Name attribute to specify information about your page, its content, etc. To specify information about your content you would use the Meta "description" and Meta "keywords" attributes like this:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Your web page title</title>
<meta name="description" content="Learn about HTML and CSS. Learn web design concepts."> (Use a description that accurately depicts the content you are trying to present to the reader or user.)
<meta name="keywords" content="html tutorial, css tutorial, html syntax, css syntax"> (Use keywords that define and describe your content.)

   Now theres a big argument as to the importance of Meta Tags and just how valuable or not they are to your actual search results. It's commonly thought that Meta "description" and "keywords" tags are no longer used by search engines. Not true at all! When a user types a search query into Google search, Google then returns a set of links, each with its own URL, and description of the content. Google as an example uses several different methods to to provide a description of the content that is located within a webpage. Some of these methods are, using a strip of a webpages actual content, this could be part of a paragraph or links, using the sites Meta description to fill in the web page description, or by using "Rich Code Snippets" (which is beyond the scope of what we are discussing). Infact, much of the time, Google is still known to return search results to users using the Meta "description" under a pages link. So, Meta Tags are still very much needed and still very much in use. Meta Tags however will not define your "page ranking" for a given search engine. There are a lot of factors involved when determining page rank, and Meta Tags make up a very small portion of these factors. Remember we are using Meta Tags to provide content and formatting information about a particular webpage. If your concerned about your websites overall pagerank, make sure your webpages title, Meta "description" and "keywords" tags, your page headings (h1, h2, etc), as well as your actual content can all be tied together. If your page is about video games, then give an accurate as possible description in all the areas we just covered. If you want to learn more about SEO (Search Engine Optimization) and "pagerank" you can check out our tutorial on "SEO for the real world" under our editorials section.

Continue to Part 2 of Working With Meta Tags in HTML..