Inside Links

Last Updated: 07/14/2003

Introduction

Internal linking structure, as referred to by SEO, commonly known as Web site navigation, is a fundamental requirement for your end user and search engine spiders. Logical and intuitive navigation will assist your Web visitor in finding their way around your Web site effortlessly; and help increase your response rates (be it sales, phone calls, or simply readers). A well-constructed and coded linking structure will help search engine spiders navigate your site. This will ultimately help search engine users locate your content.

This article will go through the various types of navigational elements one can apply within an internal linking structure strategy. Each navigation element has its pros and cons, and this article will explore most of them. In addition, we will discuss the different methods of combining the various navigational elements in order to achieve the best linking structure for your Web visitor and the search engine spiders.

Below are the sections this article will cover:
- Simple Hyper Text Links
- Graphical Navigation Icons or Buttons
- JavaScript or DHTML Dropdown or Pulldown Menus
- Animated Gifs and Flash Navigation
- Image Map Navigation
- Framed Navigation

Before we dive into the various linking elements, let's briefly discuss the two basic types of links. We have absolute and relative links. An absolute link defines a specific location of a Web page whereas a relative link specifies a location of a Web page within a major directory.
Example of an absolute link: <a href="http://www.rustybrick.com/company.php">RustyBrick Company Information</a>

Example of an relative link: <a href="../company">RustyBrick Company Information</a>

Now lets discuss Simple Hyper Text Link.

Simple Hyper Text Links

Hypertext links are the simplest navigational elements available for building an internal linking structure. Hypertext is defined by the American Dictionary 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". The basic component of a hypertext link includes a URL and a set of words that are known as anchor text. An example of a simple hypertext link looks like <a href="page.html">anchor text</a>. The <a href="page.html"> is the code that specifies where the Web visitor should be sent when clicked on the anchor text.

Search engine spiders prefer the simplicity of the hypertext link to any other form of linking structure elements. In fact, the anchor text is deemed very important in the eyes of the search engines and is assigned more weight within the search engine algorithms then ordinary body text. The reason search engines assign more weight to the anchor text is based on the simple logic that search engines believe that you would only link to a page that you deem important. If you deem a page important, so should the search engines. So when creating hypertext links, make sure to link to your important pages and use specific keywords for the page you are linking to.

There are however disadvantages to hypertext links which include:
- Hypertext links are less attractive then other forms of navigation elements.
- By default, Hypertext links create blue underlined text and if used too much will make a page illegible.
- If overused, can interfere with a Web page's keyword density.

Understand the benefits and disadvantages of using hypertext links will aid you in your internal linking strategy. A good strategy is to use hypertext links as a secondary navigation. With technologies such as CSS one can create attractive looking hypertext links as primary navigation elements. Additionally, it is wise to create a site map with hypertext links; and point your "file not found" errors (or 404) to the site map. Finally, one might consider using a breadcrumb trail as an additional internal linking strategy to help your end user keep track of where he or she is and to increase the keyword rich anchor text.

If you are looking to use a more intense graphical internal linking structure strategy, please read the next Graphical Navigation Icons or Buttons section.

Graphical Navigation Icons or Buttons

Graphical navigation icons and buttons are as popular as hypertext navigation. The graphical icon or button is a graphic, generally a GIF or JPEG formatted image, that links to either an absolute URL or relative URL. An example of a graphical navigation button would look like this <a href="page.html"><img src="pics/button.gif"></a>. The <a href="page.html"> is already familiar to you. As you can see the <img src="pics/button.gif"> is in the place of the anchor text. "img" stands for image and "src" stands for source, so the piece of code says image source is found in the directory pics and is named button.gif. Wrapping the <a href="page.html"></a> around the image activates that image as a link.

There are many obvious benefits to using the graphical navigation icons or buttons as primary text links. One of the benefits includes using high-impact fonts and colors that are not supported through regular HTML. Increasing the look of the links on your site can help attract more clicks by the end user to the page of interest.

However, search engines can not see the graphic and if the graphic is really a graphical representation of a word - such as About Us - then how does a search engine know that? In all cases where graphics are used as navigation, it is wise to use alternative text tag within the source code of the image. For example, one would embed the alternative text into the above example as such:

<a href="page.html"><img src="pics/button.gif" alt="Short Text Explaining Where the Graphic Link will Take you"></a>

The alt tag (alternative) gives search engines as well as screen readers (used by the blind) the ability to assign a meaning to the graphic, in place of the anchor text. Hence, it is important to use keyword specific words that apply to the page you are linking to in the alternative tag area.

There are additional concerns that can arise when using graphical navigation within a site. Many Web designers use 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. Web designers use this to show the user when he or she is within a section. They primarily change the color or size of the image to show the difference. The problem is not with the graphic, it is with the JavaScript code that generates the mouseover affect. Let's take a look at the following example of a JavaScript that enables the classic mouseover affect:

<a href="page.html"

onmouseover="changeImages('nav_page', 'pics/nav_page_mouseover.gif'); return
true;"

onmouseout="changeImages('nav_ page', 'pics/nav_page.gif'); return true;">

<img name="nav_page" src="pics/nav_page.gif" alt="Page
Contents">

</a>

As you can see the old simpler version of the graphic link has turned into this long complex piece of code. Lets break the code down to better understand how it functions. 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 not only activates the mouseover action, it is also widely used to construct pull down menus. We will now discuss the JavaScript or DHTML/CSS dropdown or pulldown menu navigational elements.

JavaScript or DHTML Dropdown or Pulldown Menus

Many sites utilize the pulldown or dropdown menu to allow users to locate sections of a site quickly. There are two basic forms of the dropdown or pulldown menus. The first form is the JavaScript pulldown and the second form is the DHTML dropdown.

The JavaScript pulldown menu is found at the top right of this site (i.e. SEOChat.com), right next to the go button. As you can see this form of navigation allows your Web visitor to quickly jump from one section of the site to another section. The main problem with this type of navigation is that search engine spiders have a difficult time reading the URLs within the JavaScript. In addition, usability experts tend not to like JavaScript pulldown menus and recommend offering alternative navigation in addition to the JavaScript pulldown menu. It would be wise to use hypertext links as primary or secondary navigation when utilizing JavaScript pulldown menus for both usability and search engine visibility.

The DHTML dropdown menus are dazzling to the eye and a great way to fit subsections into main section navigation. As you can see on my corporate site, RustyBrick, Inc., the homepage utilizes a multitude of DHTML, CSS and JavaScript to perform the dropdown menu like navigation. This also makes for a very complex piece of hyperlink navigation that search engine spiders tend to choke on when reading. In order help the search engines spider the site; my company has utilized alternative hypertext link navigation throughout the homepage as well as the "noscript tag". The noscript tag looks like <noscript>alternative web page</noscript>. The noscript tag enables browsers with JavaScript disabled to display an alternate form of the Web site that is contained within the <noscript></noscript> 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 and its flagship product, Flash, has redefined the limitations of the Web. Flash has taken Web design to levels once thought unachievable. 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. Flash has undoubtedly changed the Internet forever.

Flash Web sites tend to be one of the worse types of Web sites in terms of search engine visibility. Most search engine spiders cannot read the contents within the SWF (file extension for published Flash files) files. Google and FastSearch are able to read the URLs within a Flash file, but nothing more at the time this article was written. That is why it is important when creating Flash sites to also create a simple but text rich HTML Web site for spiders and for Web users that prefer the less eye-candy media.

There are several ways to use Flash within a site's design that can help reduce the negative qualities of the Flash files. The first method is to use a partial flash site and partial HTML site. Many sites opt for this solution because you can have the eye-candy with the benefits of the HTML site. A second method is to create a splash page that gives the user the ability to choose either an HTML version or a Flash version. This solution is very common as well. The spiders will eat up (no pun intended) the HTML version while your Web visitor will be dazzled by 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 site by clicking on a portion (X and Y coordinate) of the graphic. Images maps are used for two primary reasons, (1) to reduce file download size and (2) to simplify the coding of the links within complex graphics. Let me first explain the first reason given, to reduce file download size. One image takes less time to download then five images. For example you can have one single image with five links within them. That one image might be 10 kb. In contrast five images of the same "on" image might take up a total of 14 kb. For example, each smaller image will have to be published at 3kb each, adding up to a total of 14kb as compared to the same one image totaling 10 kb. The second reason given, to simplify the coding of the links within complex graphics, means that if one has a graphic with links embedded throughout a none uniform design, it is extremely hard to program the links without using an image map. To embed a link in one of the five single graphics, the programmer would have to cut out each one and reprogram the site to lay out the graphics in a uniform manner. This can be very challenging for non-uniform graphics. With image maps you can specify the X and Y coordinates and determine on a click of a particular X and Y coordinate where the user shall be taken.

Now that we understand why image maps are used, let's discuss them in search engine optimization terms. Images maps are complex and look something like this:
<map name="imagemap_code">

<area shape="rect" coords="18, 126, 112, 143" href="page_one.html"
alt="page one">

<area shape="rect" coords="18, 109, 112, 126" href="page_one.html"
alt="page two">

</map>

You can see that there are complex numbers and variables that drive where the user shall be taken. For this reason image maps are not search engine friendly; and if used, one should always use a search engine friendly secondary form of navigation - like hypertext links.

Framed Navigation

There are many sites on the Web that are built with frames. Frames tend not to be search engine friendly for many reasons. One of the most obvious reasons is that it gives search engine spiders a challenge determining which file is the primary site content. Think of a framed site as a site that has many sites within it. So one might build a site in frames to leave the side bar navigation in a static position on the left, while giving the Web user the ability to scroll up and down on the right for the page with the content. Normally, when one clicks on a hyperlink within the left side frame box it will generate an action to replace the contents of the frame to its right. However, search engines do not know to look in that right frame and it stays within the navigation frame missing out on all your content. As you can see, the more frames utilized within a site the less search engine friendly the site is.

There is an acceptable standard available that can achieve the look of frames while making your site much more search engine friendly. This standard has been released by the World Wide Web Consortium (also known as the W3) and is known as CSS or Cascading Style Sheets. I will not be getting into the specifics of CSS in this article. If you would like more information on CSS, feel free to search the Web or contact my company for help at http://www.rustybrick.com/.

If you insist on using frames, there are some guidelines you should follow to help increase the search engine spiders' ability to index your pages.
- Make sure that you include links from frameset to your internal pages
- Try to submit each internal page to search engines
- Try to obtain links from external sites to your internal pages
- Include text links at the bottom of each page
- Include breadcrumb trail at the top of the page
- Include text links within body text
- Build a site map that links to each internal page
- Utilize the noframe tag

Conclusion

We have completed the discussion of the internal linking structure strategy. As you can see, there are many methods of performing an internal linking strategy, each with its pros and cons. While each method has its advantages, I always recommend using secondary hypertext links at the bottom of each page. I also recommend building a simple site map that contains a link to each internal page of your site.

The contents of this article included:
- Simple Hyper Text Links
- Graphical Navigation Icons or Buttons
- JavaScript or DHTML Dropdown or Pulldown Menus
- Animated Gifs and Flash Navigation
- Image Map Navigation
- Framed Navigation


Best of luck building or rebuilding your internal linking structure!

RustyBrick SEO Articles

• Search Engine Friendly "Magic" Buttons
• WebmasterWorld PubCon # 7 Las Vegas Conference Recap
• Web Links from the Search Engine's Perspective
• Search Engine Friendly E-Commerce Catalogs
• Urchin 5.5 - Web Analytics Product Review
• Teoma - The Superior Search Engine?
• Search Engine Strategies Conference Chicago 2003 Reviewed
• Keyword Selection Strategy
• SEO & Reporting: After the work is done or is it?
• Internal Linking Structure Elements Strategy
• Dynamic URLs In The Eyes Of A Search Engine
• Fundamental Differences Between Search Engines And Web Directories

For more information on our search engine optimization and search engine placement services, please contact us at 877-GO-RUSTY or 845-369-6869 or via email at our contact page.