SEO Fundamentals JavaScript vs Text Based Menus

on

SEO 101: Search Engine Robots Can’t Follow Links in Pure JavaScript Menus

I’ve recently been receiving some interesting quotes for SEO services. As part of the standard procedure I employ when reviewing a prospective client’s site, I inform them that site architecture is very important and therefore must be taken into consideration. On several occasions I’ve suggested the removal of JavaScript based menus, and was met with a challenge. One of the prospective clients asked me why it was necessary. So, I explained the mechanics of a crawler to him in some detail. The other prospective client wasn’t all that trusting at first, so he decided to get a second opinion from another SEO before giving me the go ahead. I didn’t have any problem with that … I’ve been doing SEO for a while now and I’ve yet to find a client that accepted my opinion of a site review on blind faith regardless of the successful campaigns I’ve demonstrated.

SEO Experience Required – A Case for SEO Standardization?

What happened next really surprised me. I expected the need to debate my case with the prospective client that was not all that warm to me. However, I was actually opposed by both client’s SEO’s. Yes, that’s correct. Both of the prospective client’s SEO’s were baffled as to why I suggested having text based menus. Oh yeah … we SEO’s tend to think they know everything …

After receiving the suggestion for the menu removal, one of the SEO’s mentioned to my client, “It’s not important … just make an XML sitemap so the robots can find you … ” I found that rather amusing. However, I found the other SEO’s comment to be just as interesting as the first’s. He simply stated that “He’s even made Flash based sites rank on the first page … ” Thing is, the client requested a quote for services with me primarily due to the SEO’s lack of effectiveness … said SEO didn’t so much as provide one case-in-point example – Pwned. So an experienced SEO is essentially stating that by providing an XML sitemap to the navigation of a site, serious issues arising from JavaScript based menus can be resolved. Okay – I don’t think so … But, let’s see how accurate this is … or isn’t.

To Crawl or Not to Crawl? That Is … Important.

A web site’s internal link structure is very important when considering SEO. Almost any Decent SEO will attest to this. So why is it important? Because a web site is really nothing more than a group of pages linked together. Granted the linking relationships can become quite complex but it’s really just a  Web of Links. When robots can’t determine what is and isn’t a link, they can’t move from link A to B … Link A was never realized.

To demonstrate … Let’s take a look at a site that employs JavaScript navigation and may not necessarily require having highly crawlable links. I’m going to use Deluxe-Menu.com for this example – It’s a very nice site that uses a JavaScript based menu, and does so with impunity – The site’s entire theme is provided on the home page.

From the Eyes of a Spider – Where’s the Web?

JavaScript Based Menu

So what we see here is a screen shot of the site’s navigation … We can clearly see the links for Home, Product Info, Samples, Download, Purchase and Support in the menu. Simple enough. However, if we inspect the internal linking of the page through a text-only browser such as Lynx, it also shows that there are no visible traces to these links. The screen shot below is from the SEO text browser over at domaintools.com which, I have quite a habit of using …

Text Browser View

So what are we’re looking at here? This basically provides a detail of the elements a search engine robot would recognize when they visit a site. Blue signifies an anchor or link element. Red signifies images – for this example it isn’t relevant to us whether those images are also links. The first link we see at the top of the page is for the site’s logo, deluxe-menu.com. The next link we see in the document structure is for the site’s sitemap which comes directly after the JavaScript menu. Notice how there are no links elements recognized by the text browser for the menu. A crawler would not identify this as a link either.

Okay, so I wouldn’t expect someone in the C-Suite to be able to gauge the performance or effectiveness of a web site. But for an SEO? This should be first year … I find an unusually high amount of people claiming to be a “professional SEO” that don’t know the first thing about web design, web development, Server Side programming or even HTML for that matter …

In short … This is old hat.

The following two tabs change content below.
Edward J. Beckett is a passionate software engineer, web developer, server administrator and polyglot programmer with nearly a decade experience building desktop and web applications ranging from simple personal web sites to enterprise level applications on many technology stacks including Java, Java EE, Spring, Spring MVC, Spring Data, Hibernate, SQL, JPA, JMS, HTML, CSS, JavaScript, ColdFusion, PHP, Node.js and more...
  • http://www.edwardbeckett.com Edward Beckett

    @Joel "if you create a html structure of links, that is then redrawn as navigation "

    Absolutely … However, many JavaScript implementations do not apply this technique and therein lies the problem …

  • http://cfruss.blogspot.com Russ

    I believe it is possible to implement a javascript menu without messing up the SEO. The trick is to make the menu look like an plain html menu when javascript is disabled.
    If you have a "site map" page, all of your links will be discovered by crawlers. Then you just have to provide good titles, meta descriptions, and page text to enhance the SEO of each page.
    I’m not an SEO expert, so if you disagree please speak up.

  • http://www.edwardbeckett.com Edward

    Russ … It is possible … It’s just not "good" for SEO … to explain a bit further … A sitemap will show all the pages on a site … But not necessarily all the links … For instance Page A, B, C and so forth … However, If the links are not crawled … by the robots .. from Page A; Link A, B, C, etc to Page B; Link A, B, C … Then there isn’t any recognition for the internal linking … When a robot crawls a page … it looks at the links and the link relationships to and from that page … with a JavaScript menu … those links only exist programmatically …

    HTH … :)

  • Joel

    I agree with russ.. if you create a html structure of links, that is then redrawn as navigation

    <ul>
    <li><a href="homepage">Homepage</a></li>
    <li><a href="page2">Page 2</a></li>
    </ul>

    then this is redrawn as a drop down the spider will lose nothing.

    e.g. http://users.tpg.com.au/j_birch/plugins/superfish/#examples

    You dont have to program javascript to add everything – you can use it, and css, to add just the functionality with the links remaining the same.

    – Joel

    – Joel

  • http://blog.pengoworks.com/ Dan G. Switzer, II

    The problem I have with this article is that you’re bucketing anything that uses JavaScript as bad–and that’s flat out incorrect. There are many ways to add progressive JavaScript to a menu that won’t harm the Search Engines ability to parse the links at all. What you’re essentially referring to, is using a menu system that is completely JS-based.

    However, for someone just trying to wrap their head around the subject, I think they’d come away with "You can’t use JavaScript in a menu and be practicing good SEO" and that just isn’t correct.

  • http://www.edwardbeckett.com Edward Beckett

    @Dan …

    I wasn’t attempting to state that ALL JavaScript are poor for SEO … Just one’s that are pure JavaScript … I agree with you … someone who has little exposure to this might get the wrong idea …

    So … seeing how you responded … I think I’m now obligated to post about some good examples of SEO friendly JavaScript menus …

    Thanks for the extra work Dan …. 😉

  • http://www.edwardbeckett.com Edward Beckett

    @Dan …

    Heading corrected …

  • http://www.edwardbeckett.com Edward Beckett

    @Joel … You are correct … However, these are JavaScript and CSS menus … not Pure JavaScript …

    Hmmm … Now I’ve got to do some more blogging … damn.

    :)

  • http://blog.shortfusion.com jason

    Everyone has their own take on SEO, to be sure, and I would wager to say that inbound links are more important than site optimization, but I feel inclined to disagree with the gist of this post, if only because it asserts that bot accessible navigation is necessarily a virtue.

    Site navigation can be a tricky thing, especially if you are consciously trying to concentrate pageRank. Check out http://www.ianrogers.net/google-page-rank/ for a, hopefully, accurate explanation of pageRank.

    If you are trying to sculpt the site linking structure, a common, bot-accessible navigation scheme can overwhelm your efforts. In so much as the desired linking structure is put in place, it could be a lot easier to construct optimized pageRank flow without the common navigation getting in the way.

    However, I think it is best to think about your user’s experience & site functionality first, in-bound links second, and then get to the rest as time allows and needs demand.

  • http://www.edwardbeckett.com Edward Beckett

    @Jason … Thanks for your view on this …

    Regarding "inbound links are more important than site optimization … "

    I don’t particularly agree with the Links vs Content argument that many subscribe to. I like to use an analogy of cars & traffic to optimization. If we look at links and content as a cohesive unit to a web site then it’s easy to see how both elements work towards a site’s performance. For instance, if we looked at the major components of a race car, we could equate links to the transmission and content to the engine … both components work together to provide the drive train … if one performs well and not the other then the end result is that the car’s performance as a whole suffers. If they are both in good condition … the site performs better.

    Regarding Ian Roger’s Paper … That is one of my favorite articles :) Please note that this topic is not about the manipulation of page rank though … and I agree completely with you there … PageRank is not easy to "trick."

    However, when you referred to my post asserting that bot accessible navigation is a virtue – I entirely believe that. For some good reference articles check out the links below …

    http://www.seomoz.org/article/search-ranking-factors#8

    http://www.vaughns-1-pagers.com/internet/google-ranking-factors.htm

    http://www.webuildpages.com/jim/internal-linking/

    Regarding your view on the priority of factors … usability I consider of the most important … SEO is to get people to a site. Period. But, if the site’s usability is sub-standard … the entire SEO campaign is awash … But again, I don’t necessarily subscribe to the A vs B mentality here either … they are both separate and equally important matters …

    HTH …

  • Pingback: 5 Great Examples of SEO Friendly JavaScript & CSS Menus()