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

Search Engine Optimization...Sounds boring.

Well it kind of is. But it's kind of interesting, too. Search Engine Optimization is essentially the process of improving the visibility of a website or a web page in search engines via the "natural" or un-paid ("organic" or algorithmic") search results. (Thank you Wikipedia)

So what does it mean to you, the webmaster? A lot. The most exhilarating part of the web design process (for me) is all about color, layout, typefaces, backgrounds, graphics, oh geesh you get the idea. However, the cold hard truth is that a beautiful website does your client no favors if search engines can't find that little sucker.

Google has a whole lot of resources for you to check out; here is the main page for Webmasters concerning SEO. Make sure to check out the Search Engine Optimization Guide at the top of that page. It's a handy little PDF and that's where I'm getting most of my info. Another helpful place is the Official Google Webmaster Central Blog.

I'm just going to touch on the first suggestion today, and it's pretty simple (collective sigh of relief): Indicate Page Titles by using Title Tags.

If you didn't know, a title tag tells both users and search engines what the topic of a particular page is. It shows up at the very top of your browser. Use the following suggestions from Google to title your pages.

1. Choose a title that effectively communicates the topic of the page's content. Accurately describe the page's content.
   
2. Avoid: choosing a title that has no relation to the content on the page using default or vague titles like "Untitled" or "New Page 1"
3. Create unique title tags for each page. Each of your pages should ideally have a unique title tag, which helps Google know how the page is distinct from the others on your site.
   
4. Avoid: using a single title tag across all of your site's pages or a large group of pages
5. Use brief, but descriptive titles. Titles can be both short and informative. If the title is too long, Google will show only a portion of it in the search result.
   
6. Avoid: using extremely lengthy titles that are unhelpful to users stuffing unneeded keywords in your title tags.

Pretty easy first step to search engine optimization. Remember, it's so very important when designing websites. Happy Designing!

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!