Share via


How to implement a drop down correctly for SEO

image Whilst drop down boxes are commonly used to present web users with a list of many choices for a destination page to be routed to, if they are not implemented correctly the ‘links’ will not be counted by search engines and no PageRank will be passed.

For example, if you look on this page - https://support.microsoft.com/kb/935791 you will see a drop down box which is linking to translations of the English article…

image

However, Yahoo Site Explorer does not register the English article as linking to the Italian (or any other language) version of the Article (https://support.microsoft.com/kb/935791/it)…

image

And neither does Google Webmaster tools…

image

Which supports the fact that neither search engine are able to interpret the links in the drop down box as real links.

If we look at a simplified version of the code behind the drop down box, this is what we see…

image

There are in fact no HTML hyperlinks (<a>) pointing to the local versions of the article, but instead there is a Javascript function which redirects to the page based on the selection made by the user. 

Whilst this works fine when using the webpage, search engine crawlers are not capable of interpreting the Javascript, so they do not register that the English page is linking to any translated versions listed in the drop down.

A crawlable drop down list

Our site manager and SEO champ Charles Li from China recently found a solution to this problem which allowed us to continue to provide our customers with a drop down list, but in a way that the search engine crawlers would recognise the links and pass PageRank to the destination pages.  The modified drop down list can be view on this page - https://support.microsoft.com/fixit

image

This list differs from the previous example because it is created using ACTUAL HTML hyperlinks, contained within a DIV tag which is hidden/displayed when the drop down box is clicked on.

Importantly, if Javascript and CSS is not enabled then all of the links will be visible (and CRAWLABLE) on the page.  So when a search engine crawler reaches the content, they will see all of the links without having to interpret the Javacsript.  PageRank will be passed to the destination pages.

The Result

The first version of this page used a similar format drop down box to the first example shown (a form based javascript function).  Neither Google or Yahoo registered the links which were contained in that version of the drop down.

After making the switch to the improved CSS/Javascript drop down, both Google and Yahoo! now register the links, e.g. here are the acknowledged links for the Chinese version of the page…

image

image

We also saw a significant increase in the referrals to the affected pages which coincided with this change

Author: Chris Moore is a program manager from Microsoft working on Search Engine Optimisation.  Follow him on Twitter