Sunday, January 9, 2011

Meta Tag Basics

Posted By CodeNique @ 11:59:01 PM
The <meta> tag also known as meta data provides additional information about your web page, for example, keywords, author information, language type, description and much more. The <meta> tag is also used to embed information about your web page that most search engines use to index and categorize your web page. The information within the <meta> tags may be used by servers and browsers as well.
The <meta> tag should be placed within the <head> tags usually after the <title> tags for most <meta> tags, in certain cases the <meta> tag should be placed before the <title> tags. In HTML, the <meta> tag has no end tag but in XHTML an end tag is required. You are allowed to have more then one <meta> tag in your web pages.
Now the <meta> tag has seven main attributes, which include name, content, charset, scheme, http-equiv, id and lang. I will explain the required content attribute first. The content attribute gives a value to the <meta> tags property. The value can be any string of characters that must be contained inside a matching pair of single or double quotation marks. The content attribute should always be used with either the name or http-equiv attributes.
The content attributes value changes with the value of the name or http-equiv attributes. The content attributes value sometimes can have multiple values that should be separated by commas, semicolons or whatever delimiter the browser allows.
Now the http-equiv attributes value is converted by browsers into the HTTP header along with the content attributes value that the server sends ahead of the web page, in the format of "name : value" pair and treats them as if they came directly from the server. You can have either the http-equiv attribute or the name attribute in the <meta> tag but not both. The http-equiv attribute has many values so I will only list a few, which include pics-label, content-type, expires, refresh, content-script-type, content-language, window-target, pragma and much more that can’t possibly be covered in this tutorial alone, but I will do my best to explain to you the most common and useful <meta> tags used in future tutorials.
The name attribute gives a name to the <meta> tags information property. Both HTML and XHTML standards do not specify any predefined meta names. So basically, you can use any name you like.
One of the most commonly used values for the name attribute is keywords, which defines a set of keywords for your web page, which may be used by search engines to categorize your web page. Now if the name attribute is not provided the name of the "name : value" pair will be taken from the http-equiv attribute.
There are many more values for the name attribute that you can use, for example, description, generator, author, rating, robots and much more. I will cover some of the most common name values later on in future tutorials.
The id attribute, which is an XHTML only attribute assigns a unique identifying name to the <meta> tag.
The scheme attribute provides additional information for the interpretation of the meta data.
Now the lang attribute can be used to indicate the language for the content attributes value.
And the charset attribute states the type of language or in other words what type of character set to be used for the web page though this type of method is not recommended. You should code your character set by using the content and the http-equiv attributes for the <meta> tag.
Now let me explain the two most popular types of meta tags, which I will show you how to code in a sec for this tutorials example. I will explain the keywords <meta> tag first, which also needs the name and content attributes. Now the name attribute has to have the value of keywords and the content attributes value can be any words or phrases that describes your web page; make sure to separate each keyword or phrase with a comma (,). Keywords are usually used by search engines to help make your web pages more searchable.
Next, I will explain the description <meta> tag. The description <meta> tag also requires the name and content attributes. The name attribute has to have the value of description and the content attribute can have any value that describes your site. Search engines will display only some of the content attributes value if it is to long, also some search engines will ignore the description <meta> tag. There is no standard on how long your description should be and it varies from search engine to search engine on how many characters are allowed.
Here is how to code in the keywords and description <meta> tags using XHTML standards.
<html>
<head>
<title>Welcome To HTML & XHTML</title>
<meta name="keywords" content="html, xhtml, learn html, learn xhtml, hypertext markup language, html tutorials, xhtml tutorials" />
<meta name="description" content="Learn everything you need to know about HTML and XHTML with our in-depth and visually illustrated tutorials only at CodeNique.com so visit us today!" />
</head>
<body>
</body>
</html>

No comments: