Blog

SEO Friendly Design: Part 3 – Navigation

Continuing our discussion of search engine friendly design considerations I offer you part 3 of a 6 part series on SEO friendly design and the important design aspects of website construction and how these practices relate to the subject of SEO.

Use text and css for navigation whenever possible.

Search engines love clear, keyword rich, text links. There is nothing more certain in the universe.

The second most certain thing is that designers like to create visually rich navigation schemes out of images. This is a mistake if you do it the wrong way. Your site navigation is a very important part of how search engines and users get around the site so you should make it extremely easy for them.

Most designers lay out their designs in Photoshop, cut out the images, assemble the files in Dreamweaver and link the images as the navigation. I’ve seen this countless times from graphic design companies and other design focused sites. By looking at their site you can clearly tell that they have a command of their design skills but they know very little about how to design a site for the search engines.

They might even take the time to put alt tags on the images and that’s a good first step but unfortunately most have no idea what an alt tag is because they’ve never studied the language.

I can attest to this because I’ve been there.

I started out in 1994 and a colleague forced me to learn the HTML language. I knew what alt tags were when I first started designing sites but I didn’t care. My goal was to make a visually rich design, not to get geeky with the code (even though I understood it).

Eventually I learned to take the time. Even if alt tags are on the page though, studies have shown that rankings can definitely be improved if the search engines have a good, keyword-rich link to follow.

This has been an ongoing argument for years because designers (and SEO consultants) claim that you can embed keywords into your alt tags and that will solve the problem.

It’s also claimed that you can put your main navigation links into the footer nav and if you’re proficient with css you can position these links at the top of your page in the code so search engines see them and follow them. Semi-true. What happens if you have a large site? There is no perfect answer except whatever choice you make, MAKE SURE that the search engines can get around easily.

A good tool to test this is the fabulous seo-browser.com that shows you exactly what your site looks like to the engines. If you don’t see your links when viewing your site here you’ve done something wrong.

You’re goal should be to link as many pages from your homepage as possible and build the links so they can be seen and followed.

But what is the ideal solution? I’ve seen a lot of people discussing this topic over the years and the definitive answer to the question is most certainly to build your navigation as text and css. I’ve seen listings move up significantly as soon as graphic links with alt tags are converted to a text based nav element. For whatever reason, this is the way of the world and what the Google Gods desire; you might as well bow down or you’ll be mowed under by the crowd.

You may also opt to design your navigation with css so it looks like it’s an image. What is this you say? If you have a decent command of css and html you can build navigation that looks like images but is pure css and text. It takes a little bit of effort and a knowledge of css but it can be worth it if you’re goal is to compete in the search engine listings. If you’re dead set on image-like nav elements and you’re not able to accomplish this yourself it will definitely be worth hiring someone that can pull this off for you. Techniques like this are what separate the big boys from the children in the world of SEO design.

In my humble opinion, I like simple text links for navigation.

My theory of design throughout my entire life is that less is more. I hate it when someone hangs a beautiful picture on the wall and then proceeds to cover the wall with busy wall paper. How does this enhance what you just placed on the wall? It adds static to the beauty and takes away from the focal point.

I believe the same holds true for navigation design. It might be your first reaction as a designer to jazz up the navigation and try to “wow” the client but sometimes this can be a disservice if you’re not highly skilled. If you look at the navigation on this site you’ll see that it’s simple and clean. There is no clutter and you know from a mile away what you need to do to get around.

The goal of this navigation on this site is to get you to the information and nothing more.

Simple, bold, clean white text on black draws in the eye and is easily read. This my friends is the ultimate goal.

If you have a decent command of design theory you also know that white and negative space can accomplish a lot. You don’t need gradients and gloss effects to be a great designer. It’s all about the little details that make a design great. This too is what separates the Gods from the wannabes in the design world. (Not that I claim to be anything more than a wannebe myself)

My point here is that you can accomplish a lot with text if you know what you’re doing or hire someone who does. The search engines will love you for it.

Obviously this is not the definitive answer because there are reasons to go above and beyond when designing a hip website. You do have to consider the demographic and target audience and there are occasions where you can step outside of the box and go a little crazy.

For the most part, web design is about getting users to content and getting search engines to index that content. You’re navigation should always help make this easy for your users and the search engines. The best way to do that is to keep your elements simple, clean, text-based and keyword rich.

Design your site so you can get to every page on the site with a maximum of 3 clicks

We’ve touched on this issue in the past but it’s an important point for several reasons.

First, you want your users to find your content quickly and easily. Ideally you should be able to access every major section of your site from the homepage. You can accomplish this with direct links or if you have a larger site you can design a navigation scheme that allows users to utilize a system of drop down menus. An example of this can be found at a site like acmestores.com where you have broad, top level categories and sub-navigation that directs the users to every individual page on the site. With navigation like this there is no need for more. If you view this site in seo-browser.com you’ll see what I mean.

What happens if this doesn’t work for your site? Consider the use of a site map.

A sitemap is essentially one page on your site that links to every other page on your site (with keyword-rich links obviously). The sitemap is usually linked from the homepage or the header of every page on the site.

A sitemap should also be placed at the top of your code so the search engines find the link easily and follow on to the rest of the site pages.

A site map doesn’t have to be fancy, it just needs to accomplish it’s job and that’s to help the search engines index all the content available on your site.

Site maps can be built and maintained manually or you can automate the process.

In a perfect world the site map will be used by your users too but if you design your navigation in a clear way they shouldn’t need it. It’s simply a easy way to document and clearly link to ALL content on your site.

A sitemap also a way to embed keywords into links that otherwise might not fit appropriately into your content. This all helps search engines determine what they’re looking at and how relevant your content is. In the SEO world this practice is called deep linking and/or cross linking.

An excellent way to get a sitemap for you site is to generate an XML sitemap. Google has this to say about XML sitemaps:

A sitemap is an XML file that lists URLs for a site, along with additional information about each URL. Sitemaps give Google and other search engines important information about your website, including A complete list of all URLs on your site, How often the pages on your site change, The date each page was last modified, The relative importance of pages on your site. Sitemaps are particularly helpful if your site has dynamic content, your site has pages that aren’t easily discovered, Your site is new and has few links to it, Your site has a large archive of content pages that are not well linked to each other.

This is not the ultimate answer to getting your pages indexed properly but it’s a darn good start. I would recommend signing up for a Google Webmaster account and uploading a XML sitemap to your site as soon as possible if you don’t have a physical sitemap on your site.

Even if you already have a sitemap, an XML sitemap will be a great help to Google and you know how we all love Google. Go! Get started right away.

avatar

Chris Auman is a veteran Internet marketer, website developer, and designer with over 20 years of experience in the trenches. As President and Senior Strategist at Sanctuary, Chris has successfully guided the online marketing efforts for companies large and small. Chris’ clients range from family owned & operated retail operations with a local footprint of 1-10 stores to multinational Fortune 500 companies.

FacebookTwitterLinkedInGoogle+christopherauman.com

Bear