Looking for the lessons? Get started!
What META tags will, and won't, do for your site.
The entire Web Design Principles section can be accessed through the menu below.
Unfortunately, not everyone's browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won't display the menu, just click on the button and you'll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
Meta tags are not a magic solution. — SearchEngineWatch
Meta tags go in the head of your HTML page. Basically, they identify your site, its contents, its author, and so forth to search engines and such.
There is considerable dispute over how much meta tags help your site achieve high rankings (and therefore high traffic) on Google, Yahoo!, Bing, and other search engines. Back in the day (say, the late 1990s and early 2000s), meta tags were an indisputable necessity for any page to get noticed by search engines. But, the abuse of "search engine optimization" techniques by spammers and overenthusiastic designers led Google and other major search engine hosts to retool their algorithms and de-emphasize the importance of meta tags in getting your site noticed.
Meta tags have never been a guaranteed way to gain a top ranking on crawler-based search engines. Today, the most valuable feature they offer the web site owner is the ability to control to some degree how their web pages are described by some search engines. — SearchEngineWatch
Still, it is important to include at least some meta tags in your pages. I won't attempt to list all the possible meta tags you can use — there are plenty — instead, I'll just list a few that you absolutely should include.
Disclaimer: I am anything but an expert on "search engine optimization," or SEO. To me, a lot of it seems to be nothing more than voodoo and wishful thinking. (Not all of it, by any stretch.) But I cannot tell you how to optimize your site to get you noticed and make you fistfuls of money. I can just tell you how to create and use the meta tags.
Generally, you should put your meta tags under your title in the head of your HTML code.
Meta tags use the <meta name=""> format.
The Title Tag
Okay, almost all meta tags use the <meta name=""> format. Or, a more accurate way to look at it is, the title tag isn't a meta tag at all. However, it serves a "meta" function, to a degree. Your title, which goes here:
<head> ... <title>My Site Title</title> ... </head>
is what most search engines use to list your Web site in their display. It is also the text used by most browsers when you bookmark a site.
Meta Keywords
One meta tag is keywords. Here's what a dummy meta keywords tag might look like:
<meta name="keywords" content="keyword, another keyword, a key phrase">
Note that the selected key words, and phrases, are separated by commas and a space. How do you choose your keywords? Think of words and phrases that describe your Web site. Since this site is about Web design for beginners, I chose some words and phrases that describe my site. Hopefully, people who enter these words or phrases into Google or whatever will find my site.
<meta name="keywords" content="basic HTML tutorial, basic CSS tutorial, beginner, Web design, easy, simple, best practices, Michael Tuck, Black Max Web Design">
Be very careful to avoid anything that might resemble "keyword stuffing," or repeating and re-using the same words and phrases over and over again. While search engines used to ban sites for keyword stuffing and other abusive practices, they no longer take it as seriously. Still, it is anything but best practice, and may lead to problems for both you and your site.
And don't put too much stock in keywords. Most modern search engines either ignore them entirely, or place little weight on them in ranking your site.
Meta Description
This is a brief (1-2 sentences) description of your site. It should reiterate the same keywords that are used in your other meta tag, again without "stuffing" the words by repeating them over and over again. This is most important because many search engines (not Google, sadly) use your description for your site when it pops up on their search results.
Here's the meta description for my site, for better or worse:
<meta name="description" content="Web design walkthroughs and tutorials for beginners, based on modern best practices for HTML and CSS standards. Learn to build Web sites the right way.">
Meta Robots
I've seen quite a few articles rhapsodizing about the many uses of the robots meta tag. It really isn't that useful, except on the occasions when you don't want search engines to index your site. If that's the case (say it's a prototype for a site that isn't ready for public consumption), this is how you do it:
<meta name="robots" content="noindex">
If you don't want the search engines to follow, and index, the pages linked to your main page, use the nofollow element:
<meta name="robots" content="nofollow">
Or just combine them for maximum anonymity:
<meta name="robots" content="noindex, nofollow">
Meta Revisit-After
The revisit-after meta tag tells search engines when to revist your page for new content and updates:
<meta name="robots" content="Revist-After" content="30 Days">
Meta Redirects
One particular meta tag is used to "redirect" users from one site to another. This should only be used in specific instances, say, when you've moved your site from one domain to another, and want people who are still visiting the old, obsolete domain to go to the new site. Don't use it unless you need it!
Here's how it's done. By the way, this doesn't use the name convention, but the even more esoteric http-equiv="refresh":
<meta http-equiv="refresh" content="15; url=http://www.example.com">
Notice the content contains two values inside a single set of quotation marks, a number and a URL.
The number designates how many seconds the site will wait until automatically opening the page at the new URL. In this case, the site visitor gets fifteen seconds at the old site before being transported to the new site; long enough to read a short explanation (i.e. "We've moved! You will be taken to the new site shortly") and a directive to bookmark the new site. (This explanation and so forth does NOT go in the meta tag, but in the body of the HTML page itself. Just so you aren't confused.)
By using the URL of the site your page is at, you can "force" a page refresh every few seconds or few minutes (i.e. using the digit 300 would refresh the page every five minutes, as 60 seconds times 5 equals 300). News sites and other sites that constantly update their content use these. I do not, and most likely, you won't, either.
Other Meta Tags
A large number of other meta tags exist, including to name the author of a site:
<meta name="author" content="Michael Tuck for Black Max Web Design">
There are many others. Mostly, there's little need to bother with these.
