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 David WalshNovember 26, 2012

Animated 3D Flipping Menu with CSS

CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more. I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

By David WalshDecember 6, 2012

Vibration API

Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user. One of those simple APIs the Vibration API. The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Incredible Demos

By David WalshMarch 17, 2010

Create a Quick MooTools Slideshow with Preloading Images

I've been creating a lot of slideshow posts lately. Why, you ask? Because they help me get chicks. A quick formula for you: The following code snippet will show you how to create a simple slideshow with MooTools; the script will also...

By David WalshApril 7, 2010

iPad Detection Using JavaScript or PHP

The hottest device out there right now seems to be the iPad. iPad this, iPad that, iPod your mom. I'm underwhelmed with the device but that doesn't mean I shouldn't try to account for such devices on the websites I create. In Apple's...