Link HREFLANG

By David Walsh on February 11, 2014

If you work on a website that is offered in more than one language, you deserve a medal. The need to localize almost everything is tough and sometimes feels very limiting. No adding text to imagery, never knowing how different translation will affect layout, maintaining different templates, etc. A very necessary task but damn, it can be tough.

Here's one easy part of localizing that's easy: adding link elements which reference alternate URLs per language. Here's how you'd use it:

<!-- Used on CNN -->
<link href="http://edition.cnn.com" hreflang="en-gb" rel="alternate" title="CNN International" type="text/html"/>
<link href="http://arabic.cnn.com" hreflang="ar" rel="alternate" title="CNN Arabic" type="text/html"/>
<link href="http://mexico.cnn.com" hreflang="es" rel="alternate" title="CNN Mexico" type="text/html"/>

<!-- Used on MDN -->
<link rel="alternate" hreflang="ar" href="https://developer.mozilla.org/ar/docs/Web/CSS" title="ورقة الأنماط الإنسيابية">
<link rel="alternate" hreflang="bn-BD" href="https://developer.mozilla.org/bn-BD/docs/CSS" title="CSS">
<link rel="alternate" hreflang="ca" href="https://developer.mozilla.org/ca/docs/CSS" title="CSS">
<link rel="alternate" hreflang="cs" href="https://developer.mozilla.org/cs/docs/CSS" title="CSS">
<link rel="alternate" hreflang="de" href="https://developer.mozilla.org/de/docs/Web/CSS" title="CSS">
<link rel="alternate" hreflang="es" href="https://developer.mozilla.org/es/docs/CSS" title="CSS">
<link rel="alternate" hreflang="fa" href="https://developer.mozilla.org/fa/docs/Web/CSS" title="CSS">
<link rel="alternate" hreflang="fr" href="https://developer.mozilla.org/fr/docs/CSS" title="CSS">
<link rel="alternate" hreflang="id" href="https://developer.mozilla.org/id/docs/Web/CSS" title="CSS">
<link rel="alternate" hreflang="it" href="https://developer.mozilla.org/it/docs/CSS" title="CSS">
<link rel="alternate" hreflang="ja" href="https://developer.mozilla.org/ja/docs/Web/CSS" title="CSS">
<link rel="alternate" hreflang="ko" href="https://developer.mozilla.org/ko/docs/CSS" title="CSS">
<link rel="alternate" hreflang="nl" href="https://developer.mozilla.org/nl/docs/CSS" title="CSS">
<link rel="alternate" hreflang="pl" href="https://developer.mozilla.org/pl/docs/CSS" title="CSS">
<link rel="alternate" hreflang="pt-BR" href="https://developer.mozilla.org/pt-BR/docs/CSS" title="CSS">
<link rel="alternate" hreflang="pt-PT" href="https://developer.mozilla.org/pt-PT/docs/CSS" title="CSS">
<link rel="alternate" hreflang="ru" href="https://developer.mozilla.org/ru/docs/CSS" title="CSS">
<link rel="alternate" hreflang="vi" href="https://developer.mozilla.org/vi/docs/CSS" title="CSS">
<link rel="alternate" hreflang="zh-CN" href="https://developer.mozilla.org/zh-CN/docs/CSS" title="CSS">
<link rel="alternate" hreflang="zh-TW" href="https://developer.mozilla.org/zh-TW/docs/CSS" title="CSS">

The code is very self-explanatory so I won't break it down, but it's something you should be adding when a page is available in more than one language.

Recent Features

By Landon SchroppApril 14, 2014

Write Better JavaScript with Promises

You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

By David WalshNovember 2, 2015

JavaScript Promise API

While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready? Promises are becoming a big part of the JavaScript world...

Incredible Demos

By David WalshApril 27, 2010

Using Dotter for Form Submissions

One of the plugins I'm most proud of is Dotter. Dotter allows you to create the typical "Loading..." text without using animated images. I'm often asked what a sample usage of Dotter would be; form submission create the perfect situation. The following...

By David WalshJune 23, 2008

MooTools 1.2 Tooltips: Customize Your Tips

I've never met a person that is "ehhhh" about XHTML/javascript tooltips; people seem to love them or hate them. I'm on the love side of things. Tooltips give you a bit more information about something than just the element itself (usually...