Just building links for your main web page won’t get your website to come up on top in major search engines. You need to get the search engine spiders to deep inside your website. For that you need strong website navigation. Most people ignore this part of SEO. Hope you have not.

It also helps your visitors to navigate through your website more easily and also help the search engine locate the contents of your website. This article will help you in each element of navigation for your website.

Below are the sections this article will cover:

– Simple Hyper Text Links

– Graphical Navigation Icons or Buttons

– JavaScript or DHTML Dropdown or Pull down Menus

– Animated Gifs and Flash Navigation

– Image Map Navigation

– Framed Navigation

Let’s begin with the basics first, we need to understand what links are. There are two types of links that are into use, absolute and relative links. An Absolute link is used to define specific locations of s webpage and a relative link is used for specifying a location of a webpage within a major directory.

Example of an absolute link: < a xhref=”http://www.i2k2.com/windows-web-hosting.html/” mce_href=”http://www.i2k2.com/windows-web-hosting.html/” >windows Web Hosting< /a>

Example of an relative link: < a xhref=”../windows-web-hosting.html/” mce_href=”../windows-web-hosting.html/” >http://www.i2k2.com/windows-web-hosting.html/< /a>

*** Advisable to use absolute link

Now let us learn something about Simple Hyper Text Link:

According to the American Dictionary Hypertext is defined as “a computer-based text retrieval system that enables a user to access particular locations in Web pages or other electronic documents by clicking on links within specific Web pages or documents.” It is one the simplest navigational elements that you can use for building an internal linking structure. All that you need for a hyper text link is a set of words that can be used as an anchor test for the URL. For example < a xhref=”page.html” mce_href=”page.html” >anchor text< /a > A person will be directed to the page “page.html when he clicks on the anchor text.

People nowadays think that more flashy your website is the more good it looks, but the idea is to keep it simple as it leads to less work for the search engine spiders [though search engine spiders are not real people they are designed by humans so the basic ideas of less work is fed unintentionally into the spiders who can blame them for that]. A search engine believes in a simple logic that anchor text is used for pages which are IMPORTANT to you. So make sure that you have hyper text links for your major pages with specific keywords.

However let me warn you too much of hyper text links in your website also has its disadvantages:

-They make your webpage look less attractive.

-Hypertext links create blue underlined text and if used too much will make a page illegible which is by default.

-It can also interfere with the Webpage keyword density if overused.

So have a balance and understand the benefits and disadvantages of hypertext links. Use it as a secondary navigation system. To create navigation for your website use CSS which will help you to create attractive looking hypertext links as Primary Navigation element.

**One more webmaster tip for you SEO wannabeez, if you create your sitemap with hypertext links and point your “file not found” errors (or 404) to the site map. Also you can use a breadcrumb trail as an additional linking strategy to help your user to keep track of where they are in your website. This also helps to increase the keyword rich anchor text.

Graphical Navigation Icons or Buttons

Graphical navigation Hmmmm pictures have been helpful to describe everything since the stones ages even before text was originated. So our mind has evolved to understand them much better than text so this type of linking is as popular a hypertext navigation. Graphical icons or buttons is a graphic generally GIF or JPEG formatted image that links to a URL i.e absolute or relative. Example

< a xhref=”page.html” mce_href=”page.html” >< img xsrc=”pics/button.gif” mce_src=”pics/button.gif” > . where < img xsrc=”pics/button.gif” mce_src=”pics/button.gif” > replaces the anchor text. “img” stands for

image and “src” stands for source which says that image source is found in the directory pics and is

named button.gif.

Now the benefits of using this navigation are that where high-impact fonts and colors are not supported through regular HTML, increasing the look of the page and making it more users friendly.

There are also disadvantages of using this navigation as Spiders are not evolved the way humans have and they cannot understand images. So the solution for this is to use alternative text tags within the source codes on the image. You can embed the alternative text into the above example as:

< a xhref=”page.html” mce_href=”page.html” >< img xsrc=” pics/button.gif” alt=”Short Text Explaining Where the Graphic Link will

Take you”>< /a>

The alt tag adds the capability to help the search engine understand the meaning of the image. Its also useful for people who are visually impaired who use screen readers to understand the website. So use specific keywords in your alternative tag area.

Also there are more concerns when you are using this navigation method. When using mouseovers, “a JavaScript that automatically switches the image on the screen to a different image when the end user’s mouse’s over the graphic” this option changes the color or size of the image to show the difference. The problem is with the mouseover affect and not the image.

Let’s take a look at the following example of a JavaScript that enables the classic mouseover affect:

onmouseover=”changeImages(’nav_page’, ‘pics/nav_page_mouseover.gif’); return


onmouseout=”changeImages(’nav_ page’, ‘pics/nav_page.gif’); return true;”>


A simple code has changed into a lengthy code now so let understand it better.

Start with “onmouseover” and lets begin to read: On mouse over of the image (entering the image area), initiate to change the image to nav_page_mouseover.gif from nav_page.gif. On mouse out (leaving the image area) return the image from nav_page_mouseover.gif to nav_page.gif. Most search engines have trouble reading the code within the JavaScript initiated mouseover scripts. It is thus best to try to not use mouseovers or if you use mouseovers make sure to use hypertext links as a secondary internal linking structure.

JavaScript or DHTML Dropdown or Pulldown Menus

Pulldown drop menus are a favorite of mine for just a simple reason. I like the way the fall down and go up. Sometimes I just play with these when I have nothing to do. Sorry enough about me now let get going on the details about Pulldown and Dropdown menus. There are two types of dropdown or pulldown menus. JavaScript pulldown and the second type is DHTML dropdown. They are widely used.

The JavaScript pulldown menu allows the user to quickly jump from one section to another section and make it feel like a breeze. The only back draw of this type of navigation is our ever learning spiders of search engines cannot understand these URLs within the JavaScript. It is always advisable to use and alternate navigation with this navigation. It’s wiser to use hypertext links as primary or secondary navigation when utilizing JavaScript pulldown menus for both usability and search engine visibility.

The DHTML dropdowns menus are great to look at and a great way to fit subsections into main section navigation.

** Caution please use this navigation if you wish to choke the spider.

TO help the Spiders you can use alternative hypertext link navigation throughout the homepage as well as the “noscript tag”. The noscript tag looks like . The noscript tag enables browsers with JavaScript disabled to display an alternate form of the Web site that is contained within the tags. This tag is often abused by “Spammers,” and should only be used on JavaScript intensive sites. Search engines do use the content and links within the noscript tag when indexing the contents of a site. So the noscript tag is a good method of utilizing the pulldown and dropdown menus and providing the Web visitor and search engine an alternative method of accessing your site.

Animation and Flash Navigation

Macromedia hats ofd to you guys for your flagship product which has redefined limitations for Web. Now with flash you can take your web design to levels which were earlier impossible. Web designers can create, publish and transmit high definition, motion filled, colorful animations to a broad Internet base without running into the pitfalls of bandwidth limitations and browser support. Internet will never be the same again.

Flash though very useful in terms of giving your website a nice look is a nightmare for search engine spiders, so its better to also create a simple but text rich HTML Web site for spiders and for Web users that prefer the less eye-candy media. You can create a splash page

which gives the user the option to choose between HTML version or a Flash version. The Spiders will be saved from choking as they will run for the HTML version to save there lives and the users will go for the Flash version. One more way to minimize the negative effects of Flash are to use partial flash site and partial HTML site. You get the best of both worlds. The Spiders will be saved from choking as they will run for the HTML version to save there lives 😉 and the users will go for the Flash version. The third method to combat the illegibility of the Flash files is to use the noscript tag or noframe tag when using a flash only site. This is however not the best method and one should only use these tags when there is no other option.

Image Map Navigation

Image maps are assigned to single graphics that enable Web users to access pages of your Web

Please follow & like us :)