When internationalising an Ecommerce site, one of your major considerations should be to ensure search engines understand which pages belong to which language; which are aimed at which country, and how all of those international versions fit together. This post covers a useful example of a major retailer (ASOS), and one of the elements they use to make sure Google understands how their regional sites fit with each other.
Google & Internationalisation
For many years, Google urged website owners to “do what’s best for the user” repeatedly. Over the last 5 or 6 years that mantra softened, and there are certain areas where Google specifically ask you to do things for them, with no direct impact on users at all. Internationalisation is one of those areas.
The 2 Internationalisation Tasks Google asks of Website Owners
There are 2 main tasks website owners may wish to carry out related to Google & internationalisation are:
- Set up Google Search Console for each international version of your site, so that you are able to monitor them from Google’s point of view.
- Set up ‘HREFLang’ information for each page, across each site, to ensure Google understands how they all inter-relate when it crawls your sites.
If you look around the web you’ll find many posts on each of the above: Some are very good, some are contradictory, some explain things in very technical terms. This post simply covers item 2 above: Setting up HREFLang. It does it purely using one example (ASOS), showing how they handle running several sites across the world, while ensuring Google sends users to the right site for their region.
How ASOS use HREFFLang
Here’s the ASOS Spain homepage:
You’ll notice a few things there:
- The text is in Spanish. That’s helpful to Google, but much of South America speaks Spanish, not just Spain.
- The domain name is ‘.es’. That’s also really helpful, but Some sites use ‘.es’ to cover all of their Spanish-speaking countries, while some have separate country domains for each.
- There’s a Spanish flag there, and the currency is marked as Euros. Those are also flags that Google could expect this to be a page aimed at a Spanish audience.
From all of that, Google could probably figure out that the page is in Spanish, targeted at Spain. But it would not allow them to understand:
- Are there other international versions of this page?
- Are there more than one Spanish Language versions targeted at different countries?
In order to handle that more easily for the entire web, Google offers website owners the opportunity to use ‘HREFLang’ tags to explain how pages on their sites fit together. (HREFLang is not actually a tag, but an ‘attribute’ of the link tag, nevertheless people usually refer to them as tags).
There are 2 main methods for handling HREFLang:
- By providing a sitemap which contains HREFLang information. (Google explain this here: https://support.google.com/webmasters/answer/2620865?hl=en)
- By including HREFLang code directly within pages on your site.
ASOS does the latter – includes code directly within all Google-accessible pages on their site – and acts as a very nice textbook example of this, as their setup is quite complex, and covers most things a website owner may come across:
- They tag up all of the pages Google may crawl with HREFLang tags.
- Their international sites use a mixture of domains, subdomains, and subdirectories.
- They have several international sites targeted at one language (English, where they have UK, USA, and Australian websites).
HREFLang: The ASOS Example, Line-by-Line
As mentioned, ASOS use HREFLang tags on every Google-accessible page across their site. Here’s the full example of this code from the Spanish homepage, as shown above. If you’re looking to follow along, you can see this code at the url ‘www.asos.com/es/mujer/?r=1’:
Just 9 lines (technically 8, as the first is a canonical tag). Here is the explanation of what each line does:
- Line 1 indicates to Google that it should treat ‘http://www.asos.com/es/mujer/’ as the ‘canonical’ version of the page. In other words, even though thepage we’re currently looking at is it ‘www.asos.com/es/mujer/?r=1’, Google should treat it as being a variant of the page without ‘?r=1’ at the end.
- Line 2 is where the internationalisation code begins: This tells Google that there is an ‘alternate’ version of the page, which uses the language ‘en-GB’ (english, Great Britain), located at ‘http://www.asos.com/women/’. You’ll note that the language code appears first here, followed by the country code (‘en-GB’). The language code is mandatory here, the country code is optional. Almost all instances of HREFlang you’ll see will use both. The language portion uses ISO639-1 codes, the country porrtion uses ISO3166 codes.
- Line 3 continues the above, explaining that another alternate version of the page exists using the language ‘en-US’ (english, United States), at the URL ‘http://us.asos.com/women/’. You’ll note here that the first line was at ‘www.asos.com’ the the second at ‘us.asos.com’. Google are quite happy with mixing subdomains and domains when it comes to canonicalisation.
- Line 4 covers the French language, for the France region. You’ll notice this uses a different domain entirely ‘asos.fr’ vs ‘asos.com’. Again, Google are happy for sites to mix different domains when it comes to HREFLang.
- Line 5 covers the Deutsch language (German), for Deutschland itself. Again, you’ll note that ASOS use a different domain for Germany.
- Line 6 covers Italian for Italy. You’ll notice something interesting here: This international version of the page is on ‘www.asos.com’ (just like line 2), but has its own subdirectory. As with domains, and subdomains, Google are happy for you to mix across these when using HREFLang.
- Line 7 covers the current page itself. This is important to note: The page where you denote international versions of pages denotes itself as one version of the page.
- Line 8 covers the English Language ‘Australia’ version of the page.
- Finally, line 9 covers the Russian version of the page, targeted at Russia itself.
9 simple lines, which when combined together explain to Google exactly the position of this page within ASOS’ international portfolio, which other language versions of the page exist, and which region they each target.
As ASOS’ example covers most of the issues a website owner may face, the above code and description acts as a very nice reference point for most Ecommerce website owners looking to understand how to implement HREFLang.