How to Optimize Multilingual Website for Local Search: Intricacies of Hreflang Implementation

How to
12Like
Comments
Share
How to Optimize Multilingual Website for Local Search: Intricacies of Hreflang Implementation

If you make a multilingual website and want to attract overseas visitors, which ultimately leads to increasing sales, you need to take care of many things. You have to work hard not only to achieve the best position in local search but also to display localized content correctly. Also, try not to forget about behavioral factors.

In this blog post, I'm going to talk about significant steps in multilingual website optimization and dissect the ways of hreflang attribute checks.

1. URL Form

The first step is to determine in what form your multilingual website will be organized:

  • Separate domains: C3PO.en

It’s the most crucial step. This option can be convenient for companies with local representations in different countries that are independent from the main office or, for example, work on separate site engines.

  • Sub-domains: en.C3PO.com

Very similar to the previous form, but easier to manage. These two options are easily implemented on physically different hosts, so they can be placed in different countries.

  • Subfolders: C3PO.com/en/

As practice shows, subfolders form is more advantageous because it entails fewer problems with optimizing and promotion and even simplifies this process. All it takes is to enter internal input address (written in URL after the primary domain).

  • URL extensions: C3PO.com/?hl=en&gl=EN

This type of URL structure is not recommended because of a number of challenges such as difficult URL-based segmentation and inability to set up geotargeting in Search Console.

Anyway, you should choose URL form according to your aims because all of these types have pros and cons. You can find out which type is preferable for your website using Search Console Guidelines.

2. How to Create Multilingual Websites Using Optimal Techniques

HTML lang Attribute

Сode of all pages of each website language version should include the <html lang="xx"> tag (where xx is the language identifier) before <head> section. It indicates to the search engine the language of content contained on pages.

You can see how it is implemented on IBM web page:

Lang Attribute

Hreflang Implementation

If you have several versions of the same page in different languages with different URLs, you need to use the hreflang and alternate attributes to tell the search engine about it. For example, this is how it’s done for the English version of a web page with Italian and French ones:

<link rel="alternate" href="https://C3PO.com/en/" hreflang="en-US" /> <link rel="alternate" href="https://C3PO.com/it/" hreflang="it-IT" /> <link rel="alternate" href="https://C3PO.com/fr/" hreflang="fr-FR" /> <link rel="alternate" href="https://C3PO.com/" hreflang="x-default" />

Common tips for using hreflang attribute:

  • In the hreflang block there should be links not only to alternative pages of the current page, but also to the current page itself. So English version of a web page should consist the hreflang tag to itself, the second one – to the Italian version and the third one – to the French one. Why is it important to implement hreflang tags on each web page in such a logical way? Because it affects your ranking in all of these regions.
  • As you can see in our example, we also use x-default hreflang value. This attribute signals that this page doesn’t target any specific language or locale. So it will be shown to the user when there are no pages that would be more appropriate. Using our example, when Spanish-speaking user searches worldwide, https://C3PO.com page will be default for him. You can find more in Google blog.
  • Do not add links to alternative pages that are closed from indexation (in robots.txt, noindex meta tags, X-Robots-Tag headers). It will reduce your crawling budget.
  • Do not add links to alternative pages that return any response code other than 200 (for example, this error may occur when URLs in various languages differ and erroneously point to non-existent pages).
  • The hreflang attribute indicates the language (in ISO 639-1 format) and, if it is necessary, the region (in ISO 3166-1 Alpha 2 format) of the alternate URL. For example: it — content in Italian for any region; en-US — English content for US users; fr-CH — content in French for users from Switzerland.
  • Characters should be written in lowercase when specifying a language and in upper for a region: hreflang = "xx-YY" href = "URL".
  • Language attributes must always contain absolute URLs, regardless of whether the website has a cross-domain structure or folder structure.

Not correct:

<link rel = "alternate" hreflang = "it-IT" href = "/it/" />

Correct:

<link rel = "alternate" hreflang = "it-IT" href = "https://C3PO.com/it/" />

Read more → Hreflang checker

How to Check Hreflang Attribute with Netpeak Spider

Probably, you've already noticed that the hreflang attribute needs your watchful eye. You have to configure it correctly and regularly check if nothing slipped through the cracks. I recommend you make hreflang attribute checks a kind of rut.

You can check hreflang attributes even in the free version of Netpeak Spider crawler that is not limited by the term of use and the number of analyzed URLs. Other basic features are also available in the Freemium version of the program.

To get access to free Netpeak Spider, you just need to sign up, download, and launch the program 😉

Sign Up and Download Freemium Version of Netpeak Spider

P.S. Right after signup, you'll also have the opportunity to try all paid functionality and then compare all our plans and pick the most suitable for you.

  1. Launch Netpeak Spider and enter the domain of your multilingual website into the 'Initial URL' tab.
  2. Check if ‘Crawl all subdomains’ is turned on in the ‘General’ settings.

    Before crawling in Nepteak Spider, check if ‘Crawl all subdomains’ is turned on

  3. Go to the ‘Head tags’ in a sidebar and tick necessary hreflang parameters.

    In the ‘Head tags’ of Netpeak Spider, tick the hreflang parameters you want to check

  4. Hit the ‘Start’ button to start crawling.
  5. When the crawling is completed, switch to ‘Reports’ → the ‘Issues’ tab to see the results.

    When the crawling is completed, go to the ‘Issues’ tab to see the results

  6. Also, you can see the results in the diagram on the dashboard.

    You can see the results in the diagram on the dashboard

  7. To export the results, go to the ‘Export’ tab → ‘XL (extra large) reports from database’, and choose the report related to hreflang checks.

    You can export the crawling results in ‘XL (extra large) reports from database’

There are 3 ways of hreflang implementation:

✔ HTML-tags

Add a link element indicating, for example, English, French and Italian website version in the HTML <head> section of the page.

<link rel="alternate" hreflang="en" href="https://C3PO.com/en/" /> <link rel="alternate" hreflang="fr" href="https://C3PO.com/fr/" /> <link rel="alternate" hreflang="it" href="https://C3PO.com/it/" /> <link rel="alternate" hreflang="x-default" href="https://C3PO.com/" />

✔ HTTP header

Implementation via HTTP header is possible for non-HTML files.
Link: <https://C3PO.com/en/file.pdf/>; rel="alternate"; hreflang="en", <https://C3PO.com/fr/file.pdf/>; rel="alternate"; hreflang="fr", <https://C3PO.com/it/file.pdf/>; rel="alternate"; hreflang="it".

✔ XML sitemap

If you have a large number of alternate pages, it is preferable to implement hreflang with XML sitemap. You should add xhtml:link element to all pages with alternate versions. This tag points to alternate addresses including current ones. Include xhtml:link element with links to alternate web page versions in <url>. This is how it’s done for https://C3PO.com and its Italian and French versions:

<?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>https://C3PO.com/en/</loc> <xhtml:link rel="alternate" hreflang="en" href="https://C3PO.com/en/" /> <xhtml:link rel="alternate" hreflang="it" href="https://C3PO.com/it/" /> <xhtml:link rel="alternate" hreflang="fr" href="https://C3PO.com/fr/" /> </url> <url> <loc>https://C3PO.com/it/</loc> <xhtml:link rel="alternate" hreflang="en" href="https://C3PO.com/en/" /> <xhtml:link rel="alternate" hreflang="it" href="https://C3PO.com/it/" /> <xhtml:link rel="alternate" hreflang="fr" href="https://C3PO.com/fr/" /> </url> <url> <loc>https://C3PO.com/fr/</loc> <xhtml:link rel="alternate" hreflang="en" href="https://C3PO.com/en/" /> <xhtml:link rel="alternate" hreflang="it" href="https://C3PO.com/it/" /> <xhtml:link rel="alternate" hreflang="fr" href="https://C3PO.com/fr/" /> </url> </urlset>

So it is very important to implement the hreflang attributes properly. You can check their implementation using Custom Search in Netpeak Spider. Select CSS selector and data extraction from entire HTML element.

Custom Search

As you can see in the first example above, all values will be extracted. In the second one, only the line with hreflang="en-US" attribute is extracted (with the link to the English version of the page for users from the United States).

Machines are Good, but Don’t Rely on Their Translation

Pages with automatically translated content can spoil the promotion of a multilingual website. You should consider that such text is usually unreadable nonsense, so it can be perceived by the search engines as spam. Therefore, it is better not to use automatic translation.

Set up Geotargeting

If top-level domain is used to host a website in another language (especially if it doesn’t correspond to particular country), it is advisable to help Google determine its focus correctly and set up geotargeting in Search Console.

Use Unique URL Addresses and Canonicals

Each language version should have a unique address. It is uneссeptable to simply replace the page content without redirecting it to another URL. Otherwise, the promotion of a multilingual website can be difficult, and most likely just one version of it will appear in search. 

In case when certain language version of the website is available for several URLs (for example C3PO.fr and C3PO.com/fr/), use rel="canonical" to specify the main one that should be in the search, otherwise it can be perceived as content duplication.

3. Usability

If a visitor comes to a multilingual website from Google, he should always have the option to choose a different language version, regardless of his location and language specified in the search engine settings.

It’s better to use text (not only flag icons) while creating menu items for website’s language versions. Native names of languages are perceived much easier. Also, there are often problems with flag icons because visitors may not recognize them on your web page. Although the ideal option would be combination of text and flag.

Usability

Ignoring these simple steps can mislead visitors and significantly spoil statistics of behavioral indicators, so readily taken into account by the search engines.

Summary

When making a multilingual website, you should bear in mind the following details to get targeted traffic for every version:

  • Choose URL form your website will be organized in. If you want to simplify the process, you can use subfolders because this form entails fewer problems with optimizing and promotion.
  • Double-check hreflang attribute implementation.
  • Don’t use automatic translation.
  • Set up geotargeting in Google Search Console.
  • Make it easy for a visitor to choose other language versions of your website.

As it usually happens in SEO, promotion of a multilingual website can be successful only if it simultaneously follows the requirements of both search engines and potential visitors. So remember about balance between clear usability and technical aspects.

Was this post useful for you? Make sure to share it on Facebook, Twitter or LinkedIn. 

Know more tips? Leave a comment below, let’s discuss further ;)