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 search but also to display localized content correctly. Also, try not to forget about behavioral factors.
Let’s talk about significant steps in multilingual website optimization.
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:
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.
<link rel = "alternate" hreflang = "it-IT" href = "/it/" />
<link rel = "alternate" hreflang = "it-IT" href = "https://C3PO.com/it/" />
There are 3 ways of hreflang implementation:
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>
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.
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.
Ignoring these simple steps can mislead visitors and significantly spoil statistics of behavioral indicators, so readily taken into account by the search engines.
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 ;)