A problematic issue I faced in the process of creating my website was indexing different language versions of the site. On the one hand, I wanted the different language versions to be comfortable to use from a user’s perspective, but on the other hand, manual translation of each entry and separate pages of the site is a significant obstacle. How to design a website so that each language version is comfortable to use? I invite you to read this post, in which I try to clearly explain the language versions, using the official materials available from Google.

When is it a good idea to mark the language versions of the website?

  • a template for a page that is to be displayed in multiple languages, e.g., a contact page or a page with information about the site
  • language differences between regions (e.g. British English and American English)
  • all website content translated into multiple languages

Why is this worth taking care of? As Google itself states in official sources: 

Localized versions of a page are considered duplicates only if the main content of the page remains untranslated.

Duplicate content causes a decrease in the quality of our site and indicates unavoidable content spreading across the internet.

Methods of indicating language pages

  1. HTML tag – we add an attribute in the page header with an indication of the language code.

Example:

<head>
<title>TEST</title>
<link rel=”alternate” hreflang=”en-gb”
href=”http://en-gb.example.com/page.html” />
<link rel=”alternate” hreflang=”en-us”
href=”http://en-us.example.com/page.html” />
<link rel=”alternate” hreflang=”en”
href=”http://en.example.com/page.html” />
<link rel=”alternate” hreflang=”de”
href=”http://de.example.com/page.html” />
<link rel=”alternate” hreflang=”x-default”
href=”http://www.example.com/” />
</head>

  1. HTTP header – return the header along with the appropriate language code.

Example:

<url1>; rel=”alternate”; hreflang=”language_code_1„, <url2>; rel=”alternate”; hreflang=”language_code_2„, …

  1. Site map – the most convenient way to define all language versions using separate commands with the language code.

Example:

<loc>http://www.example.com/english/page.html</loc>
<xhtml:link
rel=”alternate”
hreflang=”de”
href=”http://www.example.com/deutsch/page.html”/>

I hope the topic of language attributes is now clearer to you. It’s a good idea to take care of such details from the very beginning, so that you can enjoy indexing each language version in the right form. If you neglect this when running a site, it can take a lot of work to get your site back to the right position in the search engine. Interested in the topic? I refer you to an interesting MOZ blog post on the topic of hreflang. To be read soon!

Udostępnij wpis w social mediach