Live Tests

A guide to implementing hreflang

By February 28, 2019 No Comments

How to implement hreflang using the HTML method

Add elements to your page header to tell Google all of the language and region variants of a page. This is useful if you don’t have a sitemap or the ability to specify HTTP response headers for your site.

Each variation of the page should include a set of elements in the element, one link for each page variant including itself. The set of links is identical for every version of the page. See the additional guidelines.

Here is the syntax of each link element:

lang_code
A supported language/region code targeted by this version of the page, or x-default to match any language not explicitly listed by an hreflang tag on the page.
url_of_page
The fully-qualified URL for the version of this page for the specified language/region.
Put your tags near the top of the element. At minimum, the tags must be inside a well-formed section, or before any items that might cause the <head> to be closed prematurely, such as

or a tracking pixel. If in doubt, paste code from your rendered page into an HTML validator to ensure that the links are inside the element. Example Widgets, Inc has a website that serves users in the USA, Great Britain, and Germany. The following URLs contain substantially the same content, but with regional variations:

http://en.example.com/page.html – Generic English language homepage that contains information about fees for shipping internationally from the USA.
http://en-gb.example.com/page.html – UK homepage that displays prices in pounds sterling.
http://en-us.example.com/page.html – US homepage that displays prices in US dollars.
http://de.example.com/page.html German language homepage.
http://www.example.com/ Default page that doesn’t target any language or locale; has selectors to let users pick their language and region.
Note that the language-specific subdomains in these URLs (en, en-gb, en-us, de) are not used by Google to determine the target audience for the page; you must explicitly map the target audience.

Here is the HTML that should be pasted into the section of all the pages listed above. It would direct US, UK, generic English speakers, and German speakers to localized pages, and all others to a generic homepage. Google Search returns the appropriate result for the user, according to their browser settings.

 

How to implement hreflang using the XML sitemap method

You can use a Sitemap to tell Google all of the language and region variants for each URL. To do so, add a <loc> element specifying a single URL, with child <xhtml:link> entries listing every language/locale variant of the page including itself. Therefore if you have 3 versions of a page, your sitemap will have 3 entries, each with 3 identical child entries.

Sitemap rules:

  • Specify the xhtml namespace as follows:
    xmlns:xhtml="http://www.w3.org/1999/xhtml"
  • Create a separate <url> element for each URL.
  • Each <url> element must include a <loc> child indicating the page URL.
  • Each <url> element must have a child element <xhtml:link rel="alternate" hreflang="supported_language-code"> that lists every alternate version of the page, including itself.  The order of these child <xhtml:link> elements doesn’t matter, though you might want to keep them in the same order to make them easier for you to check for mistakes.
  • See the additional guidelines.

Example

Here is an English language page targeted at English speakers worldwide, with equivalent versions of this page targeted at German speakers worldwide and German speakers located in Switzerland. Here are all the URLs present on your site:

  • www.example.com/english/page.html, targeted at English speakers.
  • www.example.com/deutsch/page.html targeted at German speakers.
  • www.example.com/schweiz-deutsch/page.html targeted at German speakers in Switzerland.

Here is the sitemap for those three pages:

<?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/page.html</loc>
    <xhtml:link 
               rel="alternate"
               hreflang="de"
               href="http://www.example.com/deutsch/page.html"/>
    <xhtml:link 
               rel="alternate"
               hreflang="de-ch"
               href="http://www.example.com/schweiz-deutsch/page.html"/>
    <xhtml:link 
               rel="alternate"
               hreflang="en"
               href="http://www.example.com/english/page.html"/>
  </url>
  <url>
    <loc>http://www.example.com/deutsch/page.html</loc>
    <xhtml:link 
               rel="alternate"
               hreflang="de"
               href="http://www.example.com/deutsch/page.html"/>
    <xhtml:link 
               rel="alternate"
               hreflang="de-ch"
               href="http://www.example.com/schweiz-deutsch/page.html"/>
    <xhtml:link 
               rel="alternate"
               hreflang="en"
               href="http://www.example.com/english/page.html"/>
  </url>
  <url>
    <loc>http://www.example.com/schweiz-deutsch/page.html</loc>
    <xhtml:link 
               rel="alternate"
               hreflang="de"
               href="http://www.example.com/deutsch/page.html"/>
    <xhtml:link 
               rel="alternate"
               hreflang="de-ch"
               href="http://www.example.com/schweiz-deutsch/page.html"/>
    <xhtml:link 
               rel="alternate"
               hreflang="en"
               href="http://www.example.com/english/page.html"/>
  </url>
</urlset>

 

David Sottimano

About David Sottimano

Trying to make OpensourceSeo.org the best free information hub for the SEO industry. Personal Website here