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

• 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.”

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?

• 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:

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

• 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

Screwed upGot it right

1. Broken links / relative URLs

If your hreflang href links to:

• broken URLs

• URLs that are redirected

• broken URLs

• relative URLs

• 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.

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 second (optional) bit is the region. In ISO 3166-1 Alpha 2 format.

So Ferrari got it slightly wrong:

This was on their nl page.

This is btw quite a common issue:

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.

So, in our earlier example:

Correct implementation:

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

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

hreflang tag validator

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

http://yoa.st/hreflangchrome

hreflang tag recognition

Keep auditing

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).

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.

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 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

Internet

Transcript of hreflang across the globe

Public Bikesharing: Understanding from Across the Globe

Setting Hreflang for International SERP Success #SMXeast

BrightonSEO - International Targeting with Hreflang Tags

Bitcoin stories from across the globe

Imperialism Across the Globe

Louis Gerard Saliot - Nurturing Lands Across The Globe

Top 5 Most Expensive Phone Across Globe

International sites hreflang

Talen en SEO: HREFLANG

RiskIQ Across the Globe June 2019 · RiskIQ Across the Globe Customer Stories and Partner Integrations Benjamin Powell Technical Marketing Manager

Islam Across the Globe - University of Michigan

Loan Trading Across the Globe

Radius Holiday Parties Across the Globe

Top CEO Names across the globe

RTB’S ACROSS THE GLOBE

Ownership models across the globe John Fox (Australia)

Communicate With Customers Across the Globe

OPEN BANKING REGIMES ACROSS THE GLOBE · 2019-07-11 · OPEN BANKING REGIMES ACROSS THE GLOBE 1 OPEN BANKING REGIMES ACROSS THE GLOBE GTLAW.COM.AU “Open banking” is a term being

Top ten microcontroller manufacturing companies across the globe

18 COUNTRIES ACROSS THE GLOBE