Building a solid foundation in your site architecture using search engine friendly navigation is a founding principle in good search engine optimization, but what does that actually mean, and what recommendations can you make to enhance your clients (or your own) SEO?
In this article, we’ll look at a few examples of well coded, search friendly navigation and look at ways to enhance your site architecture for SEO.
Technically speaking
What makes for a spider friendly navigation? In today’s out of the box CMS world, most navigation is already pretty SEO friendly, but just every now and again you come across a real car crash of a navigation that needs rebuilding from scratch.
If you’re reviewing a website with a suspect navigation (or "dodgy", as my friends in the US love to hear me say), you’ll probably see some of the following signs:
- No drop downs work with JavaScript disabled
- Global / header links are image based rather than text
- A heap of internal links disappear when you’re browsing the site with JavaScript and CSS disabled
- The SEOmoz toolbar reports a lower than expected number of internal, followed links
- The Google cached, text only version of your page is missing those precious internal links too
Search engine friendly navigation requires only properly structured HTML combined with CSS for all the fancy bits. Technically speaking, if you’re specifying a new navigation for your website, you should be asking for a "cross-browser drop-down cascading validating menu". Can you say that 5 times in a row?
The HTML is fiendishly simple, and you should be looking out for something like this unordered list of links in the cached (text only) or CSS / JavaScript disabled view of your web page:
If you want to see a great list of examples you’d be well advised to bookmark CSSplay.co.uk’s CSS menus page and, while I was researching this post, this CSS styled paginated navigation caught my eye, via this post. If you want to see a live example, take a look at this site with JavaScript and CSS disabled in Web Developer Toolbar:
There are so many other examples out there; I think I spent more time clicking around the interwebs than I did putting this post together! If you have some good examples of amazing, search engine friendly navigation be sure to add them in the comments.
Using CSS navigational elements for SEO
Drop down menus needn’t always be “drop down”, as such. Think about it – have you ever had a problem where design wise, it was too difficult to increase the number of internal links you have in a navigational section on your website? Next time you’re in that situation, think about how you might use this approach to increase the number of links on your pages.
Interested in testing this for yourself? Take a look at these navigational ideas:
- View all hotels in Prague
- See events within 500m of this location
- See more case studies on CRM
- See all flights to Turkey
- Other users also bought / most popular products in this category
- List the top 6 countries by continent (see example below)
Breadcrumb navigation that expands with a CSS drop down:
A simple example expanding a list of options for a user searching for flights:
Improving your navigation can have a positive impact on your site architecture. By making sure these fundamentals are covered, you can build your marketing efforts on a solid foundation knowing your website is crawlable and super-friendly to search engines. What are your favorite examples of great navigation?
I've changed a menu system from CoolMenu's (JavaScript based) to Son of Suckerfish (xhtml/css based) and seen rapid improvements in sub pages ranking.
Worth the effort - if you have a legacy menu change it today!
Ooh - Suckerfish, that's a very handy find, thanks!
When using Joomla to set sites up, I've purchased templates(to get me up and running faster)and one absolute for me is that they have suckerfish menu's.
Great article
It scares me sometimes how often is see dodgy and/or pony site navigation
Not just search engine unfriendly but user unfriendly too!
For me navigation is a top priority in any web design
Pony navigation? If you click the right button you get a free pony ride, if you click the wrong button a horse kicks you in the head
I like it. Users will learn the system fast.
Rightly said.. lol
Thanks for addressing navigation Richard. It's talked about often as necessary, but I haven't seen much written about it. Kudos to you.
Honestly I tried to change navigation a lot to improve SEO. The results were pretty average - his ideas are interesting but in reality do very little to influence google rankings. It's much better to make a navigation bar with users in mind instead.
Anyway, just my 2 cents - François Comeau-Lapointe
Hey Francois. I suppose it's all a matter of how you relate to what Richard is saying. I don't read it as "do this and you will climb 2 pages in the SERPS" It's more of a "best practice" post.
My takeaway is that "good navigation" = "good usability" in addition to being good for the search engines.
For the users that have javascript disabled for safety (they're out there) as well as for the visually impaired, Richard's advice takes care of them.
And for all the search engines out there, ditto.
Richard this is a good post on the basics of building clean, search engine friendly navigation structures. I've recently been trying more advanced techniques by varying the position of navigational elements on the page (i.e. positioning navigation under primary content). I'd be interested in any results you may have noticed from something like this if you've done it.
Helpful post Richard - I recently added a very simple "How To" guide on my website to help less experienced website owners be sure they have the basic components for search engine friendly web page. You drive into areas I haven't covered so I appreciate this level of SEO fundamentals.
I'm happy to hear you confirm that many out of the box CMS systems help control the navigational end of this riddle. It's one more concern my own client's could do without.
I feel your explanation helps a less sophisticated website owner understand more options that are under their control as many are so frustrated with understanding the entire search engine optimization process.
I try to teach them that SEO is now but one part of a bigger inbound marketing picture and should be tackled by implementing the basics on each page, then move on to additional pages, blog & social media development.
Another shift I am seeing is the value of a search ranking report and how we need to educate our readers on using these reports as an evaluation of SEO productivity.
Didn't mean to get off on a rant. My point was merely to say... job well done!
Hi Daniel,
Good points well made and thanks for the kind words!
Richard
Our website before revamping it was extremely messed up because of the navigation, just launched our new site so hopefully it alleviates many of the problems.
Is anyone able to recommend a good tutorial/step-by-step/guide for making CSS drop down menus, like the "More flights to Turkey" mentioned above??
You can find lots of tutorials via the following link:
https://www.cssplay.co.uk/menus/
Example which you have given is so great richard. I think all the designers have to see this post. Because this explains about the navigational structure, design and the technique where they have to learn.
Having a good navigation bar is the first thing you can think of when developing a site. IMO positions of the navigation bar also make a pretty big difference (that is, sidebar navigation bars compared to header navigation bars).
You also forgot to compare a pretty interesting navigation bar - the 'accordion' type which is often seen on Ecommerce sites for 'categories' etc. I hope you can add that to your review as well :)
Great Blog! Just signed up here and already finding very useful info! I am currently toying with the idea of building some sites from scratch and the info here has been a very motivation and insightful. Going to enjoy search around here more often, and very soon! Good post!
Thanks for the post Richard.
I like to have a hunt around the archive before posting questions and this post has given me some direction when understanding why when reviewing a client site Traffic Travis and Moz's own crawl of the page found a high count of internal links and showed the Nav links had H3 attributes. The HTML contains a <nav> tag. Disabling Javascript and viewing Google's text version of the cache that's what we see, although the styling is all over the place.
The problem is likely the Javascript because the HTML is using a <nav> tag. Difficulty in recommending a change is the CMS is proprietary so I'm uncertain how easy implementing change will be.
Thanks for the informative article and I have decided to experiment with the features. As this article deals with site navigation, it would have been great if you could add some information on what kind of links should be made nofollow so that the sanctity on the page for search spiders are maintained.
I like the examples you shared. especially the 'bread crum dropdown'. never saw it before and I really like the concept. thank you for sharing!
Extremely important subject...
Once upon a time I was assured by a web developer that building javascript navigation in a "SEO friendly" way is ok nowadays...
3 months later, only our index page ranks for 20 terms that should be spread throughout internal pages. We had a PA of 65 so it was strong enough to rank for random terms on the page.
Just switched to HTML/CSS nav and within one week...four internal pages are ranking for terms the homepage once controlled.
Good navigation is key for both SEO and user experience. All my navigations are list item only with real text, I occassionally use image sprites and have the real text hidden which works just as well and allows the designer to create visually appealing navigations as well as keeping it SEO freindly.
Making sure your links are easily readable by a user is THE most important thing in my opinion, also making sure it is in the right place. Websites seem to have a standard when it comes to navigation placement, and users automatically look for it in those areas.
Thanks for sharing :)
The thing that frustrates me is that even with a perfect SEO navigation Google will still spread PageRank incoherently. That's beside the point I guess as long as there is a clear link path to your main pages in all browsers then you can do no more.
What's everones thoughts on number of nav links, I always opt for a smallish menu but you see some major ecommerce sites with 200+ links in their dropdown, this surely can't be good for site structure but I'm interested to hear opinions...
Mate u guys are amazing. What ever u write its simply outstanding. From last 6 months i have started reading your blog & changes which i implement on my site shows +ve result. I owe u guys lot.
Started with 2 queries in a month just 6 months back and today i m getting around 80 querries ( lots of biz) Thank u so much keep writing such wonderful things.
I've combined dropdowns with breadcrumb navigation in a search friendly way: https://www.coffeesh0p.com/legal_highs/smoking_mixtures/meen_green/meen_green_5g-me003/
That's a random product, but each level in the breadcrumbs lists all other categories at that same level.
With CSS3, it's easy to do the same menus ( drop down or whatever ) without javascript.
For me, Javascript should be only a user experience improvement.
Sorano, totally, totally agree.
And to add to your comments, any JavaScript should degrade gracefully and not cause any problems with user interaction on different browsers AND platforms. It's why (IMO) HTML5's simplicity combined with CSS3 is such an exciting topic.
I've been reading a lot about CSS3 and it's awesome. I love border-radius and the ability to do gradients without an image. Great stuff.
Progressive enhancement is the future. I totally agree with you!
Really handy to have the links to the tutorial pages here Rich, great stuff! I also like having the resources to check out different approaches to this as I seemingly can never remember an exemplary site (off the top of my head) when I need to demonstrate this stuff.
Thanks very much for this.
Richard, thank you for this post.
I have a client site with lots of javascript links. And although I see evidence that Google crawls these links and even passes PageRank through them, I suspect they don't pass as much PageRank as a I would like. I would be interested if anyone had any testing or hard data to show just how much PR is passed.
Regardless, I'll fight harder for CSS navigation.
Absolutely.
When it comes to navigation, I'm into creating accessible, indexable links that don't introduce "unknowns" eg: relying on the flow of PageRank via JavaScript links (and whether Google crawls / indexes better or worse as a result).
I think it's best to stick to best practices where you can, and this is definitely one of those times!
html navigation is really important for a website to be crawled multi layer navigation is an added advantage
Found this all CSS Multi-level Dropdown the other day. Tried it out on a template I've been working on and it works beautifully. Except in you guessed it, IE. I'm sure a work around can be found but I'm still wet behind my CSS ears so if anyone knows how to achieve the amazing feat of getting something to work in properly in IE let me know. I would really appreciate it.
Appreciate that link - thankyou!
Most of Stu Nicholls' CSS based menus will work just fine in IE6. Felt he should get a mention on this page (lots of menus are based on his code). They get spidered a treat.
The whole menu you linked above can be created without any CSS3 and also IE (7+) support shouldn't be a problem. Support for IE 6 shouldn't be from interest nowadays.
Most websites have so extremely crappy code that they aren't running on Opera but everybody wants to support IE 6. What world are we living in?
I always thought that such basic knowledge like this — no JavaScript navigations — are commonly known by the SEO community out there. It seems, I was wrong.
Has anybody ever tried to deactivate JavaScript at SEOmoz? I couldn't write this comment without JavaScript. Degrading gracefully is something different to me. Again Opera support is bad and I hope you know that Opera follows the ECMA standard nearly 90% (not like other browsers out there).
Wishing IE6 just wasn't there doesn't sound very prudent. I don't know what anyone else's stats look like, but I'm looking at about 10% of visitors. That's thousands of people.
The trouble with IE6 just is not going to go away anytime soon. I don't like it either, but I'm sure as hell not making sites 10% of visitors cannot use.
SEOMoz users are a rather specialised group of people. We know what javascript is, what a modern browser is etc etc. At least I sure hope we all do ;)
Great article Richard, thanks! This is one of the areas where SEO (imo) meets UX. Not only does it need to be perfectly accessible for users/ engines (as you've mentioned above) it also should be logical. I therefore liked the idea of using the breadcrumbs as a navigation, however I wonder if users are ready for it (ie if they will know it's there).
As an SEO and a fanatic in UX, I always like the areas where these two combine/ collide and the navigation is a most common area for this.
I don't have anything much to add to your article, but can only elaborate on the above :) so thanks again!
I thought that Google is getting much better in recognizing javascript and reading it. They surely must have improved it, I am sure there could be a lot of spam behind javascripts.
May be I am wrong ...
Google definitely are getting better at reading Javascript... but they're still a ways off from dealing with it well (from what I have heard/seen). It's also a good idea from a usability standpoint as some folks are stuck in the stone age :)
As for the spam... you make an interesting point. I imagine that will be part of the learning curve as well.
I agree. I think usability is the key thing here.
They may be getting good at identifying links in JavaScript but what you have to remember is that just because it found the URL in the link doesn't necessarily mean that it will transfer value and link text to the target page - that and there are other search engines :)
It's worth keeping in mind that just because Google is getting better at something, doesn't mean the other search engines are. Although Google typically sends the most traffic, what about the traffic and potential conversions you're losing from the search engines that can't do something that Google can/might be able to do. Optimize for the user first, but then for all search engines, not just Google.
Google is getting better but only for inline javascript and its support is very limited (like flash crawl)
Bing and Yahoo(do they even still do search?) dont have any support so relying on it wouldn't be a smart move to me
I've seen instances where Google definitely crawled through and indexed pure JS links. I've also seen instances where they didn't.
With JS and Flash, don't count on Google crawling it, and also don't count on Google not crawling it.
There's no reason not to just use CSS and plain text links anyway, and that way you know for sure how search engines will handle it.
I gave you a thumbs up for "There's no reason not to just use CSS and plain text links anyway, and that way you know for sure how search engines will handle it."
Well put, sir!
Thanks! It sort of seemed like the obvious thing to say. Not much point wasting time worrying about what would happen if you do something there's no good reason to do anyway.
hear hear!
I am glad I started discussion, thanks for your thoughts.
I need to change navigation on few websites to CSS only now.
Good post Richard
I'm just looking at a Linkscape report for a site and comparing mozrank passed by navigational links. Linkscape is saying the highest mozrank passed is through the global header (just an image)- is that an issue or normal?
Good to see a post talking about the importance of a good website navigation. It is very important for any site, because, it creates a better understandabilty not only for the users but also for the search engine spiders. I feel seo's must give more importance to it.
Good guide Richard.
I do agree with Richard, because SEO navigation is essencial when we use to make ranks for innerpages, if your navigation is perfetc you can get a huge space along with the main domain that gives you extra traffic boost,speacialy in Google optimization its realy importent to follow up with.
Thanks for your thoughts...
great post and comments on best practice for navigation.