Link HREFLANG

By  on  

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
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

Discussion

  1. Does this redirect users to a culture’s URL matching the system language? Also what does the title attribute do, I notice it’s only locaized in Arabic?

  2. Sebastian Steinmann

    Is this actually used by any browser and/or Google?

  3. Added updates gentlemen!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!