hreflang across the globe

hreﬂang across the globe
ISS Munich - #iss #hreﬂang - @jdevalk

Today!
• What is hreflang?

• Design choices

• Common issues

• Useful tools

What is hreﬂang?

What is hreﬂang?
“Google uses the rel="alternate"
hreflang="x" attributes to serve the correct
language or regional URL in Search results.”

What is hreﬂang?
In short: serve the right language version to the
user, based on their locale and location.

What is it meant for?

• Fully translated sites

• Sites with regional variation

• Sites with regional variation
• Only the template gets translated, main
content is the same (but don’t do this!!)

English site Dutch siteGerman site
hreflang=“de” href=“http://example.com/de/”
hreflang=“en” href=“http://example.com/en/”
hreflang=“nl” href=“http://example.com/nl/”

What would happen?
• Someone searching in Dutch would get the Dutch site.

• Someone searching in German would get the German site.

• Someone searching in English would get the English site.

German site
for Germany
German site
for Switzerland
German site
for Austria
href="http://www.example.com/de-de/" hreflang="de-de"
href="http://www.example.com/de-at/" hreflang="de-at"
href="http://www.example.com/de-ch/" hreflang="de-ch"

What would happen?
• Someone searching in German in Germany would get
the /de-de/ site.

• Someone searching in German in Austria would get
the /de-at/ site.

• Someone searching in German in Switzerland would
get the /de-ch/ site.

But beware!

But beware!
• In the previous example, which page would German
speaking / seeking people in Belgium get? 

But beware!
• In the previous example, which page would German
speaking / seeking people in Belgium get? 
• A better solution:

German site
for Germany
& rest of world
German site
for Switzerland
German site
for Austria
href="http://www.example.com/de-de/" hreflang="de"
href="http://www.example.com/de-ch/" hreflang="de-ch"

x-default
“The new x-default hreflang attribute value
signals to our algorithms that this page doesn’t
target any specific language or locale and is the
default page when no other page is better
suited.”

https://webmasters.googleblog.com/2013/04/x-default-hreflang-for-international-pages.html

x-default
“The x-default hreflang value signals
to our algorithms that such a page
doesn’t target a specific language or
locale.”

https://webmasters.googleblog.com/2013/04/x-default-hreflang-for-international-pages.html

x-default

hreflang=“de” href=“http://example.com/de/”
hreflang=“en” href=“http://example.com/en/”
hreflang=“nl” href=“http://example.com/nl/”
hreflang=“x-default” href=“http://example.com/”
Country
selector page

What would happen?

What would happen?
• Someone searching in German would get the German
site.

What would happen?
site.
• Someone searching in English would get the English
site.

What would happen?
site.
• Someone searching in English would get the English
site.
• Someone searching in Spanish would get the country /
language selector.

German site
for Germany
& rest of world
German site
for Switzerland
German site
for Austria
href="http://www.example.com/de-de/" hreflang="de"
href="http://www.example.com/de-ch/" hreflang=“de-ch"
href="http://www.example.com/de-de/" hreflang=“x-default"

hreﬂang design choices

hreﬂang implementation options
• HTML meta tags

• HTTP headers

• XML sitemap

HTML meta tags
Easiest when you’re not in full control of everything:

<link rel="alternate" href="http://example.com/en-gb" hreflang="en-gb" />
<link rel="alternate" href="http://example.com/en-us" hreflang="en-us" />
<link rel="alternate" href="http://example.com/en-au" hreflang="en-au" />

HTTP headers
Very useful for non HTML content:

Link: <http://es.example.com/document.pdf>; rel="alternate"; hreflang="es",
<http://en.example.com/document.pdf>; rel="alternate"; hreflang="en",
<http://de.example.com/document.pdf>; rel="alternate"; hreflang=“de"
Not always as easy to maintain for other stuff.


XML Sitemap
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
 
 
<url>
<loc>http://www.example.com/english/</loc>
<xhtml:link rel=“alternate" hreflang="de"
href="http://www.example.com/deutsch/"/>
<xhtml:link rel=“alternate" hreflang="de-ch"
href="http://www.example.com/schweiz-deutsch/"/>
<xhtml:link rel=“alternate" hreflang="en"
href="http://www.example.com/english/"/>
</url>

XML Sitemap
[…]
<url>
<loc>http://www.example.com/deutsch/</loc>
<xhtml:link rel=“alternate" hreflang="en"
href="http://www.example.com/english/"/>
<xhtml:link rel=“alternate" hreflang="de-ch"
href="http://www.example.com/schweiz-deutsch/"/>
<xhtml:link rel=“alternate” hreflang="de"
href="http://www.example.com/deutsch/"/>
</url>

XML Sitemap

XML Sitemap
• horribly ugly

XML Sitemap
• horribly ugly
• but easiest to maintain

XML Sitemap
• horribly ugly
• but easiest to maintain
• doesn’t add kilobytes to each page load

hreﬂang breaks - often

Common issues
Yes. Common. 
This very scientifically  
correct pie chart from  
David Sottimano is sadly  
close to the truth: 
Hreﬂang implementation
5%
95%
Screwed up
Got it right

1. Broken links / relative URLs

If your hreflang href links to:

• broken URLs

• broken URLs
• URLs that are redirected

• broken URLs
• relative URLs

• broken URLs
• relative URLs
It won’t work.

2. Missing return link

If page A says A is English and B is German.

Page B needs to say B is German and A is English.

Page B needs to say B is German and A is English.
It can not lack the return link.

3. Wrong country / region code

Language and Country / Region codes follow strict ISO
specs.

specs.
The first bit is the language, two letters, in ISO 639-1
format.

specs.
The first bit is the language, two letters, in ISO 639-1
format.
The second (optional) bit is the region. In ISO 3166-1
Alpha 2 format.

So Ferrari got it slightly wrong:

<link rel="alternate" hreflang="en-en" href="http://www.ferrari.com/en_en/" />
<link rel="alternate" hreflang="fr-fr" href="http://www.ferrari.com/fr_fr/" />
<link rel="alternate" hreflang="de-de" href="http://www.ferrari.com/de_de/" />
<link rel="alternate" hreflang="es-es" href="http://www.ferrari.com/es_es/" />
<link rel="alternate" hreflang="it-it" href="http://www.ferrari.com/it_it/" />
<link rel="alternate" hreflang="en-us" href="http://www.ferrari.com/en_us/" />
<link rel="alternate" hreflang="ja-jp" href="http://www.ferrari.com/ja_jp/" />
<link rel="alternate" hreflang="zh-cn" href="http://www.ferrari.com/zh_cn/" />
<link rel="alternate" hreflang="nl" href="http://www.ferrari.com/nl_nl/" />
This was on their nl page.

This is btw quite a common issue:

<link href="http://www.independent.co.uk/"
rel="alternate" hreflang="en-uk" />
This should be en-gb of course!

4. Canonical interference

Each language should have a canonical that
points to itself.

points to itself.
If it doesn’t follow that simple rule, it’ll
prevent hreflang from working.

points to itself.
If it doesn’t follow that simple rule, it’ll
prevent hreflang from working.
So, in our earlier example:

5. It looks ﬁne but it says it’s broken!
Maybe you have two implementations? If so…
Get rid of one!

hreﬂang tag generator
http://yoa.st/hreﬂanggenerator

hreflang XML sitemap generator
http://www.themediaflow.com/tool_hreflang

hreﬂang tag validator
http://ﬂang.dejanseo.com.au/

http://yoa.st/hreﬂangchrome
hreﬂang tag recognition

hreﬂang tag recognition

It works now!

It works now!
No. It works now.

It works now!
No. It works now.
It will break.

Common reasons for breakage

Pages that are redirected, but the hreflang wasn’t
updated.

updated.
Pages that have been deleted in one language but
not in the other(s).

updated.
Pages that have been deleted in one language but
not in the other(s).
A developer thought “this can be done so much
simpler”, and breaks it all.

Regular audits

Regular audits
To prevent breakage, you need to audit
regularly.

Regular audits
To prevent breakage, you need to audit
regularly.
If you have continuous integration, add
hreflang tests.

Setup (regular) tests
Manually with Screaming Frog, or automated.

Audit source code

Audit source code
Make sure the code that generates hreflang:

Audit source code
• has documentation that explains why;

Audit source code
• points to documentation on the how;

Audit source code
• explains special cases like x-default;

Audit source code
• explains special cases like x-default;
• explains relationship to canonical.

Regular audits
Regular audits and smart code

documentation will keep your

hreflang happy!

Questions?
Follow along:

• https://yoast.com/

• @jdevalk & @yoast on Twitter

• facebook.com/yoast

hreflang across the globe

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to hreflang across the globe

Similar to hreflang across the globe (10)

More from Joost de Valk

More from Joost de Valk (13)

Recently uploaded

Recently uploaded (20)

hreflang across the globe