Best practices for language selector (and why not to use flags)

The common practice for representing language selector on websites is to use country flags. Unfortunately, it’s not a good way of doing so in terms of UX.

I know it is tempting to go with the crowd and just throw icon flags on your website and be done with it. Like most of us, at some point, I used to do that too. But a little research shows that it’s a bad way of presenting users the possibility to change the language. Let’s find a better approach and use it from now on.

Best practices for presenting languages

  • Use the native language names
  • Try to detect the user’s language and show the appropriate content
  • Display the language selector in a clear way, e.g. with a globe icon in the footer, in the header, or in the main navigation
  • Use flags only if the content is specific to the country
  • Remember about HTML hreflang

HTML tags

Tell Google and other search engines about localized versions of your page:

<link rel="alternate" hreflang="lang_code" href="url_of_page" />

Further reading

Newsletter

Level up your skills with useful web development & UX tips via e-mail.

Comments

If you have any thoughts, please contact me on LinkedIn or see the contact page for more options.