Meta Tags? I don't need no stinking Meta Tags.

Oh, but you do. Today we continue our exploration into search engine optimization. Our topic? Meta Tags. This tag gives search engines a summary of what the page is about. Different from titles, which could be just a few words or a phrase, the page's description meta tag could be a couple of sentences or a short paragraph.

Like the title tag, the description meta tag is placed within the head tag of your HTML document. See the example below. You'll have to imagine the brackets around the html, head, title and meta name tags. Blogger was reading them as HTML when I tried to insert them.

html
head
title Jordan Shay Design-Custom Website Design in Kansas /title
meta name="description=" content="Jordan Shay Design can build the website of your dreams. I will use my web development skills to help your business succeed. "
/head
/body

Merits of Description Meta Tags
Description meta tags are important because Google might use them as snippets for your pages. Alternatively, Google may decide to choose a relevant section of your page's text if it matches the user's search. Google may also use your site's description in the Open Directory Project if your site is listed there.

So, the importance of adding a description meta tag to your pages is in the case that Google can't find a selection of text to use in the snippet. Words in your snippet are in bold text if they match the user's search. This helps the user determine whether the page's content matches what he or she is looking for. More tips for meta tags are below.

Accurately summarize the page's content

• Write a description that would both inform and interest users if they saw your description meta tag as a snippet in a search result.

Avoid:

• writing a description meta tag that has no relation to the content on the page
• using generic descriptions like "This is a web page" or "Page about web design"
• filling the description with only keywords
• copying and pasting the entire content of the document into the description meta tag

Use unique descriptions for each page

• Having a different description meta tag for each page helps both users and Google, especially in searches where users may bring up multiple pages on your domain (e.g. searches using the site: operator). If your site has thousands or even millions of pages, hand-crafting description meta tags probably isn't feasible. In this case, you could automatically generate description meta tags based on each page's content.

Avoid:

• Using a single description meta tag across all of your site's pages or a large group of pages

As the Googlebot would say, "Use description meta tags to provide both search engines and users with a summary of what your page is about!" Source: Google

Styling Links using Love/Hate

Links can be styled with any CSS property, e.g. color, font-family, etc.). Links are super special, because they can be styled differently depending on what state they are in. (NIFTY!)

The four links states are:

1. a:link - a normal, unvisited link
2. a:visited - a link the user has visited
3. a:hover - a link when the user mouses over it
4. a:active - a link the moment it is clicked

Example:

• a:link {color:blue} /* unvisited link */
• a:visited {color:purple} /* visited link */
• a:hover {color:darkpurple} /* mouse over link */
• a:active {color:olive} /* selected link */

Now, I just colored those examples with colors I made up. They may be similar to what the default is in your browser. Default link settings are ugly and should be avoided...at all costs. Restyling your links is easy, but you have to know the order rules:

• a:hover must come after a:link and a:visited
• a:active must come after a:hover

Guess what? Nobody can remember all that without looking it up each time. Luckily for you and me, there is an anagram to help you remember. Remember the order like this: LoVe/HAte. Link is first, then visited, then hover, then active. Voilà! (To get that spelling I literally Googled "How do you spell the word that sounds like Walla--worked like a charm)

Common Link Styles

In the example above, the link changes color depending on what state it is in. Another way to style links is through text decoration. The text decoration property is mainly used to control things that are underlined or not underlined. Default link style is a vile, blue, underlined word. Let's say you want your links to be normal but when a user hovers over our link, you want it underlined to indicate a link. Try this.

To get Underline-free Links but Underline your Hover and Active:

• a:link {text-decoration:none;}
• a:visited {text-decoration:none;}
• a:hover {text-decoration:underline;}
• a:active {text-decoration:underline;}

Change to your specifications. Play around! Have fun with it!