How to implement a drop down correctly for SEO
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.
Example of search engines not ‘seeing’ links…
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…
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)…
And neither does Google Webmaster tools…
Which supports the fact that neither search engine are able to interpret the links in the drop down box as real links.
Why do search engines not see these links?
If we look at a simplified version of the code behind the drop down box, this is what we see…
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…
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…
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