JavaScript enabled, dynamic menus allow you to pack a lot of information in a tight space and make it easier for shoppers to find what their looking for. But for years, SEO professionals have advised against using JavaScript menus, warning that search engines can’t read JavaScript. In times past, that was true. But search engines have come along way since. Unfortunately, old information still exists on forums and in blogs, and many are confused about JavaScript and SEO, and how to do things right.
Examples of fly-out or mega menus
The most common form of JavaScript enabled menu is what designers call a “fly-out” or “mega” menu. Fly-outs can be seen on hundreds or even thousands of online retail sites.
The key features of this sort of menu are that:
- Only top-level product or site categories are displayed by default
- Sub-category information displays when a user hovers over a top-level label
- All of the sub-categories are anchors, linking to very specific product category pages
Mega menus may also be used for “navandising” – including images or graphics that cross-sell or up-sell related products, services, or offers.
Benefits for shoppers
Some online retailers have a significant number of product offerings or variations across many product lines. While that variety is often a boon for shoppers and merchants alike, it can make finding specifically what you’re looking for something of a challenge. Fly-out menus make it easier to sort through available products.
SEO-friendly mega menus: it’s all in the code
It is true that JavaScript can be written in a way that hides anchor tags from some search engines. For example, if we built a mega menu that was added to the document object model by the JavaScript, some search engine bots might not be able to “see” the menu.
But most mega menus include all of the links and tags in the actual HTML markup, typically in the form of an unordered list. These lists are then hidden from view with a cascading style sheet (CSS), JavaScript, or a combination thereof.
For example, Aldo Shoes’ mega menu sub-categories are coded directly into the HTML, creating several rich, text-based links for search engine bots to spider and index:
In fact, the HTML for a mega menu can look surprisingly similar to the HTML for a site map, which most SEO pundits praise.
Too many links?
If there is any SEO concern with JavaScript-driven mega menus it is not that search engine bots cannot “see” the anchor links, rather it is that there are too many links that effectively dilute or at least don’t focus Page Rank.
Page Rank is one of several elements that search engines like Google evaluate when deciding which pages to display for a given query. It is a sort of voting system that assumes that pages only link to other pages when there is value in doing so. Each individual page has a certain amount of clout that it can share with the pages it links to. If it links to five pages, each receives 20 percent of the first page’s clout or Page Rank. With ten links, each link gets 10 percent, and so on.
In fly-out or mega menu navigation, we are adding a significant number of links to every page, so that if anything we may want to limit which links get a percentage of the Page Rank.
Again, if there is any concern with mega menus it is not that they won’t get crawled by search engines.
The Take Away
JavaScript mega menus are generally very SEO-friendly, and are likely to help search engine bots index your site. If you are using an internal linking structure, you may wish to limit some mega menu tags with “rel=’nofollow’” attributes which will inform search bots not to use a link for the purpose of Page Rank. But otherwise use mega menus without fear of any SEO problems.
For more information on how to build an SEO-friendly JavaScript menu, check out my previous Get Elastic post, Build SEO-Friendly JavaScript Menus.
This post was contributed by our guest columnist Armando Roggio. Armando is a journalist, web designer, technologist and the site director for Ecommerce Developer.
Tidak ada komentar:
Posting Komentar