Filter By:

SEO Friendly Design: Part 3 – Navigation

Continuing our discussion of search engine friendly web 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.

Today we’re talking about SEO friendly design again. This is part two in our series where I provide tips to help you design your site in a way that benefits your SEO instead of hurting it.  Many people don’t consider “design” an  important part of SEO. But when you consider that “design” includes related topics like UX (User experience) and UI (User Interface design), you’ll start to see how many of these practices can make or break your SEO — all while doing everything you can to improve the overall experience of your website visitors.
To get started… lets focus this episode around designing great looking, well functioning, fast, and SEO-friendly website navigation.
Search engines love clear, keyword rich, text links. There is nothing more certain in the universe.
The second most certain thing in the universe is that designers like to create visually rich website designs and content elements out of images. (LOL)
This is a mistake if you do it the wrong way and I’m going to do my best today to convince you that you need to reduce the number of images on your site starting with your navigation. 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.
Many designers lay out their designs in a design program like Photoshop or Sketch. They don’t have a deep knowledge of proper programming, so they cut out the images, assemble the files in website design program like Dreamweaver, and link the images as the navigation. I’ve seen this countless times from graphic design companies, and other design focused firms. By looking at their site you can clearly tell that they have a strong command of their design skills, but they know very little about programming and how to develop a site that is good for search engines and SEO.
They might even take the time to put what are called “alt tags” on the images, and that’s a decent first step because it will give the search engine an idea of what might be found behind that image. But, unfortunately many designers have no idea what an alt tag is, and they have zero knowledge about why they’re important to optimizing a site and images for search engines.
TIP: If you’re wondering what an alt tag is, here is a short summary: Alt tags are found in the code attached to images and provide context to what an image is displaying, informing search engine crawlers, and allowing them to index the subject of the image correctly. Alt text is also important when browsers are unable to render the images on a page properly, therefore giving them a description of what they should be seeing on the page.
The same idea works for search engines when they encounter an image. They can’t see it, so you need a way to help them decipher what the image is about.
I started out working professionally in 1996 and a colleague forced me to learn the HTML language. I kinda knew what alt tags were when I first started designing sites, but I didn’t care. This was technical nerd speak and I was a designer! My goal was to make a visually rich design, not to get geeky with the code. I resisted and he persisted and it ended up being a good thing for me in the end because I learned what I could do with code and why it was important.
At the time, I created incredibly unique and complex websites — nothing like you’d see today. Some where the equivalent of an artist splattering paint on a canvas because it was all new to me. The designs I created simply wouldn’t work in today’s mobile world. I’m not sure they really worked well back then. But they sure we’re unique and “creative” and they were ALL made out of images.
Eventually I learned to take the time to do what was needed thanks to my persistent colleague, and he pushed me to balance the art part, with the technical part, and create a great looking website, all while working with the code and that helped me to eventually understand SEO better.
So where do you start? I would say, make sure that whenever you link to a page, you’re doing it with text.
Your first goal should be to link your key pages from your top-level navigation, and build the links so they can be seen, understood and followed from any page on your site.
As I mentioned, start by checking the navigation your your site, and if the navigation is a bunch of images, this is one great reason to justify a redesign.
A good tool to test this through the eyes of a search engine, is the fabulous If you don’t see your links when viewing your site here you’ve done something wrong. It will also do a good job at showing you where you missed your descriptive alt tags, as well as important data such as page load speed and your header structure.
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. I’ve seen listings move up significantly as soon as graphic links with alt tags are converted to text-based navigation. This is the way of the world and what the Google Gods desire.
Here’s another little tip: If you’re inclined to develop something that’s more creative and visual, you can actually design your navigation with css so it looks like it’s an image. 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 programming but it can be worth it if you have any interest in competing with SEO. 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.
Designing the navigation of your website is an art. There are many ways to go about it, but In my humble opinion, I like simple text links for navigation. Navigation should be simple, clean, the fonts should be large enough to be clearly legible and you should be designed using a sans-serif font family.
My theory of design 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 and get “creative” with fancy shaped buttons and unique fonts, but sometimes this can be a disservice to the client and the user of the website. I still fight this urge today. The goal of navigation is to get you to the information and nothing more. It’s not about making a statement.
If you have a decent command of design theory you also know that negative space can accomplish a lot to draw the eye. Yes, actually making an effort to remove elements and create “air” and “space” within your design actually helps people to “see” better. You don’t need gradients and gloss effects and a million bring colors to create a great design. It’s all about the little details that make a design great and sometimes the most successful designs remove instead of adding, and that’s what makes them successful.
My point here is that you can accomplish a lot with text if you know what you’re doing. This in turn will help with your SEO too. The top navigation on your site should be text, secondary information should be text, and when you link to additional pages and information, you should always link to it using a text link that summarizes the topic and is clearly understood. The search engines will love you for it.
Obviously this is not the definitive and final answer on the subject because there are reasons to go above and beyond when designing a great website. You do have to consider the target audience and there are occasions where you can step outside of the box and go a little crazy.
But, for the most part, effective web design, and especially the design of your navigation, is about getting users to content that they want and need, and getting search engines to find and index that content. Your 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.
My next tip is to design your site so you can get to every page on the site with as few clicks as possible.
This is an important design and SEO consideration for several reasons.
You want your users to find your content quickly and easily. You want the same for search engines. This improves their user experience and is an important goal in user interface design. Ideally you should be able to access every major section of content from every page on your site. 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. There are many examples of websites that have broad, top level categories and sub-navigation that quickly direct the users to every individual page on the site. Visit complex sites like to get an idea how you can create a simple navigation for your site on the surface, but still make it easy to link directly to all sections of the site with just a few clicks or movements of their mouse, all without leaving the current page.
Here’s another tip. Even if your site content is organized well, easy to navigate and linked properly, do the search engines a favor and setup an XML sitemap to help them easily find every little nugget.
Here’s what Google has to say about XML sitemaps:
A sitemap is a file where you provide information about the pages, videos, and other files on your site, and the relationships between them. Search engines like Google read this file to crawl your site more efficiently. A sitemap tells Google which pages and files you think are important in your site, and also provides valuable information about these files.
In closing here are a few more reasons  that you site navigation should be text-based and why you should generally strive to reduce the number of images on your site.
Designing a great, mobile-friendly, responsive website that works on all devices and platforms is critical these days. The more images that you have, the harder this goal is going to be to achieve for multiple reasons.
First, the more images that you have, the more time it’s going to take to download your site. Reducing page load time is a critical aspect of SEO-friendly design because your site can actually be penalized in the search results if your site is extremely slow to load — sorry to say.
Second, the more images you have, the more issues you’re going to have presenting those images to users on all the different devices — everything from small phones, to wall-sized projection screens. What works on a desktop, will certainly not work on a small phone. So even if you are designing a responsive site, you will likely need to redesign your images to be presented properly at every different break point. This is not ideal. Imagine having to do this with your navigation if it were all images. It would be a nightmare. Having text based navigation whenever possible makes this process so much easier.
Organizing your site and making it easy to navigate and understand using keyword-rich text links, integrating simple tactics like XML sitemaps, and designing a site that is fast and, quite honestly, easier to build and maintain, are just a few of the best practices of good SEO-friendly navigation design. Following these simple rules is easy and we’ll be providing more tips in the near future.
Share this:
About Chris Auman:

Chris Auman is a veteran digital marketer with over 25 years of experience in the trenches. As Sanctuary’s founder and President, Chris has successfully guided online marketing efforts for companies large and small.

Learn more about Chris.

Related Articles:

Articles, News, Videos, Podcasts and more! Subscribe for our Academy newsletter for updates and future benefits.

Security Icon

Your privacy is a priority. View our Privacy Policy.

The Academy is a service of Logo