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 WalshJune 2, 2015

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 Eduardo BouçasJanuary 5, 2015

Write Simple, Elegant and Maintainable Media Queries with Sass

I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...

Incredible Demos

By David WalshAugust 3, 2009

iPhone Checkboxes Using MooTools

One of the sweet user interface enhancements provided by Apple's iPhone is their checkbox-slider functionality. Thomas Reynolds recently released a jQuery plugin that allows you to make your checkboxes look like iPhone sliders. Here's how to implement that functionality using the beloved...

By David WalshSeptember 14, 2015

9 Incredible CodePen Demos

CodePen is a treasure trove of incredible demos harnessing the power of client side languages. The client side is always limited by what browsers provide us but the creativity and cleverness of developers always pushes the boundaries of what we think the front end can do. Thanks to CSS...