October 13, 2022localization

What is language localization of the website and how to do it correctly

Website language localization

The goal of every search engine is to provide users with the most relevant search results for their query.

Besides other factors, Google considers each indexed website's language and geographical affiliation to provide localized and personalized results in SERP.

This means the search results for the same query entered in different languages could be different.

The good news is that you can influence how your website is indexed in terms of geolocation and language. You can do this with website language localization and proper website architecture as a part of your localization strategy. We’ll show you how in this article.

What is website language localization

Language localization, in terms of website architecture, is a process of creation of a set of interrelated website pages with content written in a specific language. This set of pages is called a website's language version. There’s no limit to the number of language versions a website can have.

No matter if you’re publishing in one or multiple languages, you'll need to set up the site's localization correctly to enable Google’s crawler to accurately identify your website's linguistic and geographical affiliation.

Location of language versions

One language website

If a website only has one language version, all of its pages will be located in the root folders and subfolders.

This means you won't have a language mark inside the URL like in this example:

https://website.com/page.html
https://website.com/catalog/page.html

Multilingual websites

However, if a website has multiple language versions, all existing pages of each language version should be grouped together. This means that every language group should be clearly marked in your URL structure, and the pages you are creating in French should be in the folder with the rest of the French pages.

If you have a mix of German, English, and French pages in the same folder, the ones that are not corresponding to the language folder won't be properly indexed.

This grouping can be implemented in two ways. You can place all pages from the same language in separate

  1. Directory:

    • https://website.com/de – German version of the website;

    • https://website.com/fr – French version of the website;

    • https://website.com/it – Italian version of the website.

      The advantage of subdirectories is that they inherit the authority of the main domain. This means that Google is treating all language versions of your site as one whole website.

      When should language versions be placed in subdirectories?
      ☞ The website is small and has low loads.
      ☞ All language versions have the same admin panel.
      ☞ Each page has a counterpart in each language.

  2. Subdomain:

    • https://de.website.com/ – German version of the website;

    • https://fr.website.com/ – French version of the website;

    • https://it.website.com/ – Italian version of the website.

      Subdomain language versions need to gain their own authority, as Google indexes subdomains as separate websites, where a subdomain is like a child domain to the main domain.

      When should subdomains be used to create language versions?
      ☞ The website is large and needs to support heavy loads. In this case, each subdomain can be deployed on a separate server.
      ☞ Each language version has its own admin panel.
      ☞ The pages of each language version have their own style and contain different content.

Switching between language versions

If your site contains two or more language versions, you’ll need to create a switch that links to analogous pages of different language versions. This will enable your user to reach a page in the desired language without leaving it.

So, when the user switches a page’s language version, they should be sent to the analogous page in another version.

For example, if the user is on an English-language page with the URL https://website.com/page.html, and they change the language to Italian, they should be redirected to the page https://website.com/it/page.html.

To make that possible, links to similar pages in other language versions must be implemented using the HTML <a> tag. Like in the following example:

<a href="https://website.com/de">DE</a>
<a href="https://website.com/fr">FR</a>
<a href="https://website.com/it">IT</a>

If you put just the ISO code for the language, the page won’t be linked properly, as the code won’t be sure what needs to connect, like in this example for the page in French:

<a href="https://website.com/de">DE</a>
FR
<a href="https://website.com/it">IT</a>

For a better user experience, when you have more than three language versions of the website, implement the switch as a drop-down list placed at the top of the page.


Language switch


Identifying language versions

To identify the language on each website page in the <html> tag, you need to specify the lang attribute with the language code of the current language version in ISO 639-1 format.

Example of the tab for all pages in the English version:

<html lang="en">

If different language versions are created for different countries that speak the same language but have different dialects (such as British English, US English, and Australian English), then the country code in ISO 3166-1 alpha-2 format should be added in addition to the language code.

Example for individual English version pages in the US, UK, and Australia:

  • for the USA
    <html lang="en-us">
    
  • for Great Britain
    <html lang="en-gb">
    
  • for Australia
    <html lang="en-au">
    

Linking similar pages in different language versions

As we mentioned earlier, you’ll need to specify the URLs of all alternate versions of pages in other languages. To do this, add a <link> tag for each page between the <head> tags, specifying each version of the page, including the page of the current language version.

Alternate URLs in the href attribute must be specified in full, including protocol names (HTTP or HTTPS) and website domains. You should use the format https://website.com/page.html, not //website.com/page.html or /page.html.

Your sample code in the head section should look something like this:

<link rel="alternate" href="https://website.com/page.html" hreflang="en" />
<link rel="alternate" href="https://website.com/de/page.html" hreflang="de" />
<link rel="alternate" href="https://website.com/fr/page.html" hreflang="fr" />
<link rel="alternate" href="https://website.com/it/page.html" hreflang="it" />

Once you have implemented all codes for all alternate pages, you can use Netpeak Spider to doublecheck hreflang tags and whether they are correct and present on all pages.


Netpeak Spider


Update the sitemap to accelerate indexing

You’ll need to create a separate XML map file for each page version. For example:

  • https://website.com/sitemap.xml – XML map for pages in English
  • https://website.com/de/sitemap.xml – XML map for pages in German
  • https://website.com/fr/sitemap.xml – XML map for pages in French
  • https://website.com/it/sitemap.xml – XML ​​map for pages in Italian

Important! All XML maps must comply with Google's official requirements.

Conclusion

Setting up language localizations correctly will help search engines better understand content written in different languages published on the same website and index your content accurately.

This will increase the relevance of the website and improve its position in search results.

Enjoying the read?

Subscribe to the Localizely blog newsletter for quality product content in your inbox.

Related

Improve the UI design of multilingual apps with Figma
November 10, 2022
In “Localization
Localization specialist: understanding the role
October 21, 2022
In “Localization
Copyrights 2022 © Localizely