How to create multilingual website for SEO

The scenario in which our target audience is located in a single country and we have the website with the IP and domain of said country is ideal for International SEO, but not common, for the following reasons:

You cannot and/or want to change the location of the hosting or the type of domain because, for example, you already have it contracted.
Your market strategy or target audience is not in a single country or language, but in several.

Therefore, if what we want is to optimize International SEO we must follow the following steps to create a multilingual website:

Define a multilingual strategy to organize and structure urls and pages in different languages.
Know what language and region codes are to use them later in html tags.
Use the html lang tag on each page to tell search engines what language the page is in.
Use the link hreflang tag to indicate where and in what language the translated pages are found.
Add language information to the sitemap to indicate to search engines the different options, in terms of language, of our indexed content.
Optionally, review all language information in the content manager or CMS used, if we have one.

What multilanguage strategy to use in SEO

To organize and create a multilingual website we have three alternatives:

Geographic top level domains or country code top level domain (ccTLD).
Subdomains.
Subdirectories.

Geographic top level domains or ccTLDs

Also known as country code top level domain these are domains specific to each country, for example, .es (Spain), .fr (France) or . pt (Portugal).

This strategy consists of having as many country-specific domains (ccTLDs) as there are languages we are going to target.

For example, if our market is aimed at Spain, France and Portugal, we will need three domains: myWeb.es, myWeb.fr and myWeb.pt.

It is the strategy recommended by Google, however, as you can imagine, it is the most expensive strategy both in time and money since it requires purchasing, renewing and maintaining several domains for the same website.

Subdomains in SEO

Subdomains allow a main domain to be divided into several parts known as subdomains. This allows us to organize and divide a website by themes or, in our case, by languages.

It consists of adding a small text to the url of the main domain to differentiate one subdomain from another. Obviously the subdomains are related to the parent domain.

Regarding the language, which is what interests us, the strategy consists of having as many subdomains as there are languages we are going to target.

We have the clearest example on Wikipedia:

https://fr.wikipedia.org/ – Wikipedia in French
https://pt.wikipedia.org/ – Wikipedia in Portuguese
https://en.wikipedia.org/ – Wikipedia in Spanish

Like the previous strategy, this one also has a drawback, some hosting limits the number of subdomains we can have or increases the price depending on the number of subdomains we have.

Subdirectories or folders for SEO

It is very similar to the previous one but, instead of dividing a domain into several subdomains, we will have a single domain divided into several subdirectories.

Therefore, to have different languages using this strategy, we will have to create as many subdirectories as the languages we want to use.

For example, if we want to have a website in Spanish and English, the structure would be myWeb.com/es and myWeb.com/en.

Keep in mind that, for both subdomains and subdirectories, the text used to differentiate one language from another does not have to be the language code or the region code, we can use whatever we want. However, it is recommended, for simplicity and user experience, to use standard codes.

Likewise, several of them can also be combined. For example, we can use subdomains for language and subdirectories for topics. An example of this would be:

en.myWeb/blog/SEO/postX: Page in english for SEO topics
es.myWeb/blog/SEO/postX: Page in spanish for SEO topics
en.myWeb/blog/JavaScript/postY: Page in english for the topic of JavaScript.

Language and region codes

Before knowing how to create a multilingual website, you need to know what language and region codes are.

Basically they are a text in XX-YY format where:

XX indicates the language in ISO 639-1 format.
YY indicates the region in ISO 3166-1 Alpha 2 format.

The region is not mandatory, the language is. Furthermore, the language does not have to be related to the region.

For example, the code “es” means content in Spanish, regardless of the region, the code “es-AD” means content in Spanish aimed at users in Andorra, the code “en” means content in English regardless of the region and “en-ES” means content in English aimed at users in Spain.

Html lang tag

The html lang tag allows search engines to know the language and region of a certain page on our website.

This is actually an attribute of the <html> element and is set as follows:

<html lang=”codeLanguage-codeRegion”>

We must keep in mind that Google is capable of knowing the language in which the web page is located without the need for this tag. This means that it is not a mandatory tag, although it is recommended for minority languages since Google may fail when trying to guess the language in the absence of this tag.

Link hreflang tag

Another necessary step to create a multilingual website is to use the link hreflang tag which allows search engines and web spiders to know in what language and where translations are found of a specific page, including the current one.

These tags are found within the html header and follow the following format:

<html lang=”codeLanguage-codeRegion”>
    <head>
        <link rel="alternate" hreflang="languajeCode-regionCode" href="CurrentUrl" />
        <link rel="alternate" hreflang="languajeCode2-regionCode2" href="TranslatedPageUrl2" />
        <link rel="alternate" hreflang="languajeCode3-regionCode3" href="TranslatedPageUrl3" />
        … etc
    </head>
</html>

For example, if we have chosen the strategy of using subdirectories and we are within the Spanish page located at myWeb.com/es/myPage.html, the hreflang links that we must use for Portuguese and French will be the following:

<html lang=”es”>
    <head>
        <link rel="alternate" hreflang="es" href="http://myWeb.com/es/myPage.html" />
        <link rel="alternate" hreflang="fr" href="http://myWeb.com/fr/myPage.html" />
        <link rel="alternate" hreflang="pt" href="http://myWeb.com/pt/myPage.html" />
        … etc
    </head>
</html>

As you can see, it is necessary to include the href lang link of the current language, not just the translated languages.

A special case is hreflang default, which uses the format hreflang=”x-default“. This line will allow us to define the default page that will be shown to users whose language or region has not been defined.

Therefore, following our example, we can set the following value so that when a user comes with a language other than Spanish, French or Portuguese, the page is shown in spanish by default:

<link rel="alternate" hreflang="x-default" href="http://myWeb.com/es/myPage.html" />

Finally, you must keep in mind that both the lang tag and the link href lang tags must be present on all pages with the appropriate values, not just on the main one.

Language in the sitemap for SEO

On a website it is essential to create the sitemap and send it to the search engines, either manually or automatically.

It should be noted that, if you have used the html lang and link hreflang tags as indicated above, it is not necessary to have a multilingual sitemap as indicated by Google, although it is mandatory that your sitemap sends all pages regardless of their language.

Therefore, to create a multilingual website if we have not used the previous tags, we will need to indicate the language in the sitemap in a very similar way as we did with the HTML pages:

All content goes inside urlset.
We will have as many <url> elements as we have unique pages, not counting translations.
Within each <url> element we will have a single <loc> element where we will indicate the url of a specific page, no matter what its language is.
Within each <url> element we will have as many xhtml:link elements as we have translations of that page, including the one we have put in <loc> and, optionally, including a default value x-default. The order of these elements is not important.

An example of a sitemap with languages is the following:

<?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://myWeb.com/es/myPage1.html</loc>
		<xhtml:link
			rel="alternate"
			hreflang="es"
			href="http://myWeb.com/es/myPage1.html"/>
		<xhtml:link
			rel="alternate"
			hreflang="fr"
			href="http://myWeb.com/fr/myPage1.html" />
			<xhtml:link
			rel="alternate"
			hreflang="pt"
			href="http://myWeb.com/pt/myPage1.html" />
			<xhtml:link
			rel="alternate"
			hreflang="x-default"
			href="http://myWeb.com/es/myPage1.html" />
	</url>
 
	<url>
		<loc>http://myWeb.com/es/myPage2.html</loc>
		<xhtml:link
			rel="alternate"
			hreflang="es"
			href="http://myWeb.com/es/myPage2.html"/>
		<xhtml:link
			rel="alternate"
			hreflang="fr"
			href="http://myWeb.com/fr/myPage2.html" />
			<xhtml:link
			rel="alternate"
			hreflang="pt"
			href="http://myWeb.com/pt/myPage2.html" />
			<xhtml:link
			rel="alternate"
			hreflang="x-default"
			href="http://myWeb.com/es/myPage2.html" />
	</url>
 
</urlset>

As you can see, here we can also specify the x-default tag to indicate the default page that will be shown to users who do not match the defined languages/regions.

Content managers CMS and language

One of the factors for choosing a content manager or CMS has to do with its ability to deal with topics related to International SEO.

In summary, it will be necessary to investigate whether our content manager is capable of managing the following points in a simple and/or free way:

HTML lang tag.
Link hreflang tag.
Languages in the sitemap.

An example of a WordPress plugin to create a multilingual website is Polylang, which allows not only to translate the content, but also the categories, tags, paths, and specify alternative translations of the articles… etc.