hreflang across the globe

hreflang across the globe

ISS Munich - #iss #hreflang - @jdevalk

Today!• What is hreflang?

• Design choices

• Common issues

• Useful tools


What is hreflang?


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


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


What is it meant for?


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:




& rest of world



href="http://www.example.com/de-de/" hreflang="de"href="http://www.example.com/de-at/" hreflang="de-at"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.”




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?





• Someone searching in Spanish would get the country / language selector.




& rest of world



href="http://www.example.com/de-de/" hreflang="de"href="http://www.example.com/de-at/" hreflang="de-at"href="http://www.example.com/de-ch/" hreflang=“de-ch"href="http://www.example.com/de-de/" hreflang=“x-default"

hreflang design choices


hreflang implementation options• HTML meta tags

• HTTP headers

• XML sitemap


HTML meta tagsEasiest 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 headersVery 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



• but easiest to maintain



• but easiest to maintain

• doesn’t add kilobytes to each page load


hreflang breaks - often


Common issuesYes. Common.

This very scientifically correct pie chart from David Sottimano is sadly close to the truth:


Hreflang implementation

5%

95%

Screwed upGot 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.




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




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.




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




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

So, in our earlier example:

5. It looks fine but it says it’s broken!


Maybe you have two implementations? If so… Get rid of one!

Useful tools

hreflang tag generator

http://yoa.st/hreflanggenerator


http://yoa.st/hreflanggenerator

hreflang XML sitemap generatorhttp://www.themediaflow.com/tool_hreflang


http://www.themediaflow.com/tool_hreflang

hreflang tag validator

http://flang.dejanseo.com.au/


http://flang.dejanseo.com.au/


http://yoa.st/hreflangchrome

hreflang tag recognition

http://yoa.st/hreflangchrome


hreflang tag recognition

Keep auditing

It works now!


It works now!No. It works now.


It works now!No. It works now.

It will break.


Common reasons for breakage


Common reasons for breakagePages that are redirected, but the hreflang wasn’t updated.



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



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 auditsTo prevent breakage, you need to audit regularly.


Regular auditsTo prevent breakage, you need to audit regularly.

If you have continuous integration, add hreflang tests.


Setup (regular) testsManually with Screaming Frog, or automated.


Audit source code


Audit source codeMake sure the code that generates hreflang:



• has documentation that explains why;




• points to documentation on the how;





• explains special cases like x-default;





• 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


https://yoast.com/

http://facebook.com/yoast

hreflang across the globe

Internet