The above links demonstrate a basic navigational structure using an unordered list styled with CSS. Use this as a starting point and modify the properties to produce your own unique look. If you require flyout menus, create your own using a Spry menu, a menu widget from Adobe's Exchange or a variety of other javascript or CSS solutions.

If you would like the navigation along the top, simply move the ul.nav to the top of the page and recreate the styling.

Best Practices For Successful SEO

You want to see your website in the first position of popular search engines such as Google or Yahoo!, right? Of course you do – in fact, all Web professionals do – but how do you make that happen? Search engines utilize proprietary algorithms that determine how websites rank on their search results pages (SERPs) for keywords (those individual words and phrases that define the products or services featured on our websites).  There are many important components of websites that influence their rankings and fortunately, not much in the way in terms of elementary basics has changed. Of course, search engines aren’t about to publish a white paper like this one telling you all the secrets as everyone would rush to game the system. Search engines do however provide guidelines about optimization and over time have come to be known as accepted methods and strategies – standards for SEO success if you will.

One of the factors that influence rankings on search results pages that many professional search engine optimization experts have come to know make a difference are meta tags. When website pages are created, they are often created in HTML. This programming language forces Web browsers such as Internet Explorer, Safari and Firefox to present the coded information in a pleasing, graphic format. Fortunately for those responsible for getting their websites to the top of search result pages, Web browser software is dumb – real dumb. So dumb in fact that the many creators of Web browser software taught these browsers to understand additional information in order to present pages properly. Over time, search engines began using this meta information to help them in indexing pages properly. You can see where this is going, right? When something becomes public knowledge, it’s going to be abused – and that is just what happened. Smart Web professional began manipulating their meta-information in an effort to game their position within search results pages. Search engines such as Yahoo! and Google then devalued how large a part meta-tags played in indexing pages for the SERPs. Over time however, meta information has made a comeback and is now one of the many factors that continue to influence how our websites and their individual pages rank.

Defining Meta-Tags
Meta-tags are HTML tags which provide additional information about a web document. Unlike regular tags, meta tags do not provide formatting information for the browser. Instead they provide such information as the author, date of creation or latest update for the page, titles, descriptions and keywords which indicate the subject matter. For the purpose of SEO, those last three (titles, descriptions and keywords) are what matters the most.  Of lesser but great importance are also alt tags (which provide additional information about images) and header tags (which indicate to users important areas of content features on your site).

The Importance of Meta-Tags
Meta-tags are important for two reasons – they help users understand what a Web page is about when they are reviewing the listing on a search result page and, of course, they influence (albeit only slightly) how well our individual pages rank on those same results pages. All major search engines now utilize (if only partially) meta descriptions and title tags in an effort to understand the relevance and rank the site accordingly against competitive sites, but they also look at alt tags (immensely important in a new media landscape which features video, images, etc.).

The Basics of Meta Elements & Tags
Meta tags are not something you should spend an inordinate amount of time worrying about but focusing on crafting them in a way which properly reflects your site and its mission will go a long way towards helping you secure competitive positions on the search results pages.

Title Elements:

<title>Meta Tags In Twenty Minutes - Best Practices For Successful SEO</title>

While no hard and fast rules have been established about title elements (incorrectly called title tags), it is widely accepted that they are an important part of a Web page to optimize.

While many SEO’s debate about the ideal number of characters to be included in title metadata, a few things are widely agreed upon. For example, title metadata should contain the most important keyword for a specific webpage. Reinforce the importance of the keyword by repeating the keyword you are optimizing for within the body of your webpage, preferably in a headline (H1) of your copy.

Title metadata should never exceed 65 characters as this is the point where most search engines replace the remaining text with an ellipsis - the “…”sometimes seen on longer listings within the SERPs). While many sites routinely exceed this character limit, the value expressed by a clear and concise title tag far outweighs any benefit you may obtain from repeating the keyword or including keyword derivatives.

The placement of the keyword or key phrase is equally important to users and search engines as it is 1) the “clickable” portion of a search return listing, and because 2) search engines do take these keywords into consideration when weighting the value of the page so it’s best to include keywords where they will be found – leading the title tag or closely thereafter.

Title tags are also an excellent location to emphasize (or establish) your brand, particularly if your company or website name features the keyword or phrase you are optimizing for placement in the search engines. One way you can achieve this and establish trust over time with users to optimize title tags by utilizing dividers such as dashes ( - ), arrows ( > ) or pipe bars ( | ). The advantage of using title tag dividers is that it indicates to users the separation of brand and the keywords which reveal navigational status. Remain consistent however when using dividers as flipping between various title tag presentation negatively impacts user perception.

Many SEO’s that are truly tuned in to their websites analytics understand that targeting the intent of users often yields a higher click-through rate and can even influence the number of conversions. For example, your analytics solutions might inform you that you have earned a decent, yet modest ranking of seventh place on the SERPs for the keyword “buy blue widgets”. Creating a title tag which reads “Widget Inc. | Buy Blue Widgets” would be more compelling than a title which reads “Cheap Widgets of All Colors and Shapes”.

Description Elements:

<meta name=”description” content=”This is a compelling description”>

The description is one of several metadata elements which assist users in determining whether a resource will be useful to them when conducting queries at search engines. It can convey the purpose of the resource in a clear, objective manner for these users and in some instances (should the search engines not find something better within the copy of your webpage) is used for search engine results.

When you write a description for a Web page, think of your audience and the information you wish to convey. The description element is intended to assist users in determining if a listed resource will be useful to them, so stuffing keywords into this element and being cute instead of clear carries the potential to dissuade, or worse, alienate a user from actually visiting your website.

Typically, the first 180 characters of the description are created for the purpose of display on search engine results pages and should therefore be as concise, coherent and objective as possible with the result being a very high level summary. 180 characters correspond to what most search engines can display on a results page and, typically, users scan rather than read this information. As such, overloading and repeating keywords within the description

Should you need a longer description, ensure that meaningful information is contained in the first 250 characters. The second part of the description is optional and can be as many characters as are required to provide an adequate summary of the main content of the information object. The length will differ according to the complexity of the resource but the objective is to be as concise as possible. The best practice is to focus on blending keywords that appear on the Web page with a clear and compelling marketing message.

Keyword Meta Tag Element

<meta name=”keywords” content=”title tag, description tags, keyword tags, alt tags”>

The keyword tag on a webpage is of the least importance in optimizing metadata, but it does service some implicit purposes. Namely, for those search engines which still use the element as a means to index pages. There are only a few rules to the proper use of meta keywords within your head tags. First, keeping the number of keywords included to a minimum – no more than ten – helps you focus the content of your pages. For example, if you right about widgets, the keyword tag is an exceptional place to utilize the keyword research gathered from analytics solutions such as “bright widgets, heavy widgets, widget sale, best widgets” should be used within the keyword element. Keywords appearing once in the keyword element should not be repeated and of course be unique in content to the web page itself.

It is important to realize that search engines assign little value to the keyword tag as it has been and is still abused by those attempting to game the search results pages. The real advantage is establishing formality in content assignment, rending all future additions to the page simpler and more manageable as guidance is provided therein.

Image Elements (Alt attribute, Alt tags)

<img src=”accessseo-logo.gif” alt=”Access SEO Home”>

Image elements or “alt tags” are the alternative text that the browser displays when a Web surfer is unable (or unwilling) to see the images present in a web page. The alt attribute was initially utilized to help those with visual disabilities and use was required to be in what is referred to as 508 compliance. With the rise in popularity of CSS (Cascading Style Sheets) however, alt tags are used much less often than they have been in the past as style sheets separate style from content. Since images offer styling to a Web page and are not a necessity, they began to fall out of favor with SEO’s until the rise of blended or universal search, wherein images were and still are being displayed in the search results pages. When images are included outside of the CSS however, they do provide an opportunity to provide additional information about the image – which many argue influences rankings on search engines.

While the alt attribute should not be overused, it should most definitely be used, especially when presented images which support existing body content.

Final Words on Metadata Elements & Tags

Meta data is but one component of a successful search engine optimization campaign. Internet marketers however have control over this meta data and can craft this information to the benefit of their Web traffic. It is important to understand that all of these elements play some role in how your website will rank, but there are many other factors including the depth of content, the sites popularity as defined by the number of inbound links and even site architecture. As such, it is optimal to think of this meta data as an opportunity to market your site, more than a way to game the search engines.

When it comes down to being successful with meta-data, make sure that your site meets the character guidelines, feature clear and compelling marketing messages and the keyword being optimized for, and natural search traffic will undoubtedly increase.