Search-engine friendly country site select boxes

Design often has the final say in a redesign project – or at best, a very powerful voice – which isn’t always a good, or acceptable, situation.

Recently I was part of a project where I needed to preserve an aspect of the old design for SEO reasons. The new design had included a select box, but I needed those “options” to be real links that would pass link-love. So, I offered this search-engine friendly solution.

Country links

To give a bit more background, the old site had a footer that contained links to every single country site within the organisation. This was about 26 links. On every page of the site. Most of those country sites had a similar footer, making most of the links reciprocal. That’s quite an international network of inter-linked international top level domains.

I obviously wanted to maintain that network of links after the redesign. It clearly wasn’t going to help the position of any of the sites in SERPs by removing them.

Country select box

The design that was produced had “simplified” the list of countries in the footer to be a select box drop down menu. Although this is not unusual for companies with multiple country sites, it’s not always a good thing for usability (I like populating the select box using geolocation as a solution – but that would be another blog post!) and it’s really not a good thing for search engines.

No link-love for select boxes

Although Google has indexed text in select boxes for a number of years, and also indexes (new) URLs that is discovers within those lists, it doesn’t pass any pagerank to those links. Neither does it attribute the anchor text (or more correctly in this case: option text) to the destination link.

This obviously meant that the international network of inter-linked top level domains would come crashing down to the ground. Not really something that was on the list of requirements…

So in order to preserve the link network, and to honour the design decision, I decided to re-introduce the <a> link list of countries, and in order to not make this visible to (most) end-users, I set it to “display:none”.

Now hold on I can hear you say. Doesn’t Google (and other search engines) consider adding “display:none” to things as cloaking? Well, not necessarily. The key is whether there is a mechanism for making the content visible to visitors or not.

So in order to keep both the search engines and users happy what I did was add the “display:none” only if javascript is enabled. That way we are always serving the same HTML content to all visitors and search-engines, but making parts of it invisible when viewed in the browser by most visitors. Importantly, we are letting the search engines see and index all the links to the countries.

Adding a class

Add a js class to the country link list, or whatever element of the page you want to be hidden when javascript is enabled.

<div class="js">

Include an external js file

Add a link to an external script directly after your CSS styles (you may already have such an external file already)

<script type="text/javascript" src="/script/functions.js">

</script>

Document.write

in that script add a document write to write the additional css style link

document.write('<link rel="stylesheet" 

href="/styles/js-enabled.css" 

type="text/css" media="screen" />');

Display:none

Finally, your js css file. Add the “js” class styling with display:none there.

.js {
	display: none;
}

There are other ways you could achieve the same result; especially if you’re already using an Ajax library such as jquery, but I thought it was good to share with you an example that didn’t force the introduction of that overhead.

Cloaking

Yes, you could argue that this is technically cloaking, but it is better to say that we are offering enhanced content to those with javascript disabled. By doing this we are cloaking in a way that is helping Google and visitors who find long lists within select boxes difficult to use.