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 SchroppMarch 16, 2015

Regular Expressions for the Rest of Us

Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

By David WalshSeptember 27, 2012

5 HTML5 APIs You Didn’t Know Existed

When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It." Can you blame us though? We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

By David WalshOctober 27, 2011

Control Element Outline Position with outline-offset

I was recently working on a project which featured tables that were keyboard navigable so obviously using cell outlining via traditional tabIndex=0 and element outlines was a big part of allowing the user navigate quickly and intelligently. Unfortunately I ran into a Firefox 3.6 bug...

By David WalshAugust 11, 2008

dwImageProtector Plugin for jQuery

I've always been curious about the jQuery JavaScript library. jQuery has captured the hearts of web designers and developers everywhere and I've always wondered why. I've been told it's easy, which is probably why designers were so quick to adopt it NOT that designers...