**Please note that quotations used in this article may pose a problem when copying and pasting code. Please make sure you check all quotations before posting comments. Thanks.
The menu or “nav bar” is perhaps one of the most overlooked and misunderstood parts of the website. Designers have made it very eye catching using Flash or roll-over images and it LOOKS great to the human eye, BUT for search engine optimization purposes it is near invisible.
Now please do not start commenting on how important the design is the Website. With over a decade of Graphic Design experience I know of its value, but what is the point of a great looking website if no one can find it?
The nav bar may not be the deciding factor in the Search Page Ranking, but it definitely is a part of the on page optimization. So for those who want to maximize their on page optimization, this article is for you…
As mentioned previously, both Flash and images are not “read” by search engines. You can fill in the “alt” attributes, but these are not given the same weight as actual text. With this in mind, and a little extra effort during the wording of your nav bar selections, you can really improve your on page optimization.
So lets begin by working on a website for the Tire Shop – as an example. They sell tires and their website has four pages: Home, Products, About Us and Contact Us. First, lets optimize the selections on the nav bar to read: Home, Tires, About The Tire Shop and Contact The Tire Shop. This increases the frequency of the keyword “Tire” by three and will also increase its density.
Lets put these selections in a list.
<ul>
<li>Home</li>
<li>Tires</li>
<li>About The Tire Shop</li>
<li>Contact The Tire Shop</li>
</ul>
At this point lets name each page (except home) the same as the selection with hyphens instead of spaces between words. So home will link to index.html, About The Tire Shop to about-the-tire-shop.html, etc… Lets establish each selection as a link to these pages using <a href=”">:
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”tires.html”>Tires</a></li>
<li><a href=”about-the-tire-shop.html”>About The Tire Shop</a></li>
<li><a href=” contact-the-tire-shop.html “>Contact The Tire Shop</a></li>
</ul>
Your list is done and you now have a working nav bar. Now we just need to style it.
So lets define the “navbar” class (we will apply it to the list later). Class is designated by a period followed by the class name. So the navbar class would read as .navbar with all attributes associated with the class between two curly brackets following, like this:
.navbar {enter attributes here}
Since everything in the navbar class is an anchor <a href=”">, lets specify that these attributes apply to all anchors within the navbar class. We do this by putting an a after the class name but before the opening curly bracket like this:
.navbar a {enter attributes here}
Lets specify the font family, size and color to begin with as Arial, 10px and black (Hexidecimal color code #000). This is what people will see initially. We enter these attributes like this:
.navbar {
font-family: Arial;
font-size: 10px;
color: #000;
}
Lets also get rid of the underline beneath the link by entering the text-decoration: none attribute. This will complete the styling for the initial nav bar:
.navbar a {
font-family: Arial;
font-size: 10px;
color: #000;
text-decoration: none;
}
Now we have to cause it to change when a visitor hovers over it. We do this by simply adding the :hover after the a like this:
.navbar a:hover { }
When someone hovers over the link, we want the font family to stay the same, but we want the size and color to change. So lets take the attributes form the original class and just modify, changing the font size to 14px and the color to Red (Hexidecimal color code #ff0000).
.navbar a:hover {
font-family: Arial;
font-size: 14px;
color: #ff0000;
text-decoration: none;
}
Take both of these and place them right above the closing head tag. It should look like this:
.navbar a {
font-family: Arial;
font-size: 10px;
color: #000;
text-decoration: none;
}
.navbar a:hover {
font-family: Arial;
font-size: 14px;
color: #ff0000;
text-decoration: none;
}
Now we just need to apply the navbar class to the list by entering class=”navbar” after the opening ul. The final code in the body looks like this:
<ul class=”navbar”>
<li><a href=”index.html”>Home</a></li>
<li><a href=”tires.html”>Tires</a></li>
<li><a href=”about-the-tire-shop.html”>About The Tire Shop</a></li>
<li><a href=”contact-the-tire-shop.html”>Contact The Tire Shop</a></li>
</ul>
And that is it. Your On Page Optimized nav bar!
If you want to get rid of the bullets before every list item, enter this code within the head tags:
ul {list-style:none}
Need some help? Visit our website at www.beloudonline.com and contact us. We look forward to hearing from you.
