Question

I’m developing a multilingual website. In the top of the site there is a language switcher.

Language Switcher http://imageshack.us/a/img443/5456/languageswitcher.png

For performance reasons, the flags are wrapped into a single atlas (Atlas http://imageshack.us/a/img834/8260/flagsy.png)and the images are displayed as background of the <a> elements.

<ul class="languages">
    <li><a href=".../en/" class="lang-en"></a></li>
</ul>

a.lang-en { background: url('path-to-atlas.png') -17px 0; }

There is no text in the anchor (<a></a>).

But what about SEO?

What does a crawler do with this link? How can I tell to the crawler that the link’s text is something like 'English (UK)' or 'Italiano'?

I could do something like:

<a href=".../en/" class="lang">English (UK)</a>

a.lang {
    line-height: 0; 
    font-size: 0;
    color: transparent; 
}

But this is ‘hiding the text’ and Google hates it.

What are your suggestions?

Answer 1

I honestly wouldn’t worry too much about this. Google is actively cracking down on over-optimization. Google knows what language is being displayed on a page and will figure it out when it crawls each of those links.

In the general case of a button google will look at the surrounding text and the destination of the button to determine relevance.

The title tag has little to no relevance these days as it is often stuffed with meaningless keywords but it can be helpful to a user that hovers over an element.

Google is all about serving what is best for the user though they may not always get it right and at times something very spammy/black hat slips through the cracks and is ranked #1 but those don’t last. The best thing you can do is provide a great user experience and great content and in the long run it will workout for you.