What is hreflang?

Hreflang is an important HTML tag for websites with content in multiple languages. Hreflang tags enable search engines to display your website’s content in the user’s preferred language, so implementing hreflang is important for user experience and the visibility of your website. 

In this beginner’s guide, we’ll go over the benefits of hreflang tags and show you how to insert them into your website.

Why are hreflang tags important for SEO?

Hreflang tags play a crucial role for search engine optimisation (SEO) if you want to reach users in multiple countries. This is because the tag ensures that the search engines display the content in the correct language and help you avoid duplicate content.

Show content in multiple languages

Are you considering creating a multilingual online shop where you sell to customers in several countries? Then it is necessary that you add hreflang tags, as search engines use hreflang tags when they determine which language the content should be displayed in.  

Let’s assume you are visiting Netflix from Spain. Even if you enter Netflix.com in the search field, you will probably see the website’s content in Spanish. This is how hreflang tags should work when inserted correctly.  

The same applies to the content on your website or in your online shop. If your page lacks hreflang tags, you risk that your translated content will not be shown to the right users. 

Avoid duplicate content

Hreflang can also help you prevent search engines from registering the content of your translated pages as duplicate content. Duplicate content is content that is identical to content that already exists on other pages. This applies both to content that is identical to the content on your own website and to the content on other websites. Duplicate content is a problem because websites with content that is not unique risk getting a lower ranking in the search results. 

Hreflang tags are important for duplicate content because they signal to search engines that the different language versions of the content are targeting users in multiple countries or regions. If you have written, for example, a product description for a handmade ceramic vase that sells in your online shop, and had the description translated into Swedish, Norwegian and Finnish, the hreflang tag prevents your nearly identical texts from being registered as duplicate content.  

What do hreflang tags look like?

Hreflang tags consist of a simple and uniform syntax. A good understanding of the hreflang structure is essential when implementing the correct tags on your website. Below we take a closer look at three specific examples of hreflang tags that can be used in different contexts. 

Hreflang-tags – 3 examples

1. Let’s assume that you have a travel blog where you write exciting posts about all your travels in English, Spanish, and Danish. You have spent a lot of time writing and translating, so you want to be sure that your blog posts are displayed correctly in search engines. In this case, use these hreflang tags to distinguish between the three:
   
   <link rel=”alternate” href=”https://example.com/en/page” hreflang=”en”> 
   <link rel=”alternate” href=”https://example.com/es/page” hreflang=”es”> 
   <link rel=”alternate” href=”https://example.com/da/page” hreflang=”da”> 
   
2. Another example could be a dental clinic in Spain, which has recently translated the content on its website into Portuguese in the hope of attracting Portuguese clients. If the dental clinic also has pages in English, its hreflang tags should look like this:
   
   <link rel=”alternate” href=”https://example.com/en/page” hreflang=”en”> 
   <link rel=”alternate” href=”https://example.com/da/page” hreflang=”da”> 
   <link rel=”alternate” href=”https://example.com/se/page” hreflang=”se”> 
   
3. Finally, let’s look at an example where different tags are needed for several variants of the same language. Imagine a large online news platform that writes articles in British English, American English, and Indian English. These variants of English have the following regional language codes: EN-GB, EN-US, and EN-IN. 
   
   This news platform’s hreflang tags should look like this:  
    
   <link rel=”alternate” href=”https://example.com/en-gb/page” hreflang=”en-gb”> 
   <link rel=”alternate” href=”https://example.com/en-in/page” hreflang=”en-in”> 
   <link rel=”alternate” href=”https://example.com/en-us/page” hreflang=”en-us”> 

How are hreflang tags constructed? 

We just saw three examples of what hreflang tags can look like. Now we are going to break one down into smaller parts and look at what the individual parts mean. 

Let’s look at a tag from the travel blog from the example in the previous section. 

<link rel=”alternate” href=”https://example.com/da/page” hreflang=”da”> 

link rel=“alternate”: The link in this tag is an alternate version of this page.

hreflang=“da”: It is alternative because the content is written in another language, and that language is Spanish.

href=“https://example.com/da/page”: The alternative page can be found on this URL.

Hreflang language codes

When composing hreflang tags for your own website or online shop, you can use the same syntax seen in the examples. The only thing you have to change is the language code, i.e. the two letters that indicate the languages in which the content is available. The language codes follow the ISO standard 639-1, which is used worldwide. 

Here is a list of some of them:

• Dansk: DA 
• Svensk: SE 
• Norsk: NO  
• Arabic: AR 
• English: EN 
• British English: EN-GB 
• American English: EN-US 
• Japanese: JA 

You can easily find language codes for all languages online. 

Hreflang tag generator

The actual process of creating hreflang tags is quite simple, but if you need to use tags for many languages and pages, the process can be time-consuming. Here you can save time by using a hreflang tag generator such as this one. 

3 tips before you implement hreflang tags

Before we dive into how to insert hreflang tags into your website, let’s look at three rules of thumb that minimise the risk of error. Although the tags themselves are quite simple, mistakes can easily occur if you insert them incorrectly. 

1. Hreflang tags are bidirectional: This means they must always point both ways. Specifically, this means that if the tag on your Danish page points to the French one, then the tag on the French page must point back to the Danish one. In this way, you signal to the search engines that you manage both pages and that the two pages are linked to each other. 

2. Self-referencing hreflang tags are a good idea: This means, in short, that hreflang tags should not only point to other languages, but also to themselves. Suppose you have the same category page in your online shop in English (https://example.com/cat-food) and in Swedish (https://example.com/kattmat). Each of these pages must then have these hreflang tags:
    
   <link rel=”alternate” hreflang=”en” href=”https://example.com/cat-food”/> 
   
   <link rel=”alternate” hreflang=”se” href=”https://example.com/kattmat”/> 
    

3. Use x-default tags to improve the user experience: This tag is very useful if you have a website with content in Danish, Swedish and English, but regularly have visitors from, for example, Germany.
    
   Here you can use hreflang x-default tags to ensure that your German-speaking visitors are directed to the English page, which they will probably understand better than the Danish one.  
    
   Hreflang x-default tags thus give users a better experience on your website, because they do not end up on a page with content they cannot understand.
   
   This tag looks like this:
   
   <link rel=”alternate” hreflang=”x-default” href=”https://example.com/”/> 

How are hreflang tags implemented?

Now that we’ve seen what hreflang tags look like, let’s look at how they are implemented. This can be done using three methods depending on context and content type.  

Using HTML

The most basic way to signal to search engines that your page exists in multiple languages is to insert the hreflang tag into a webpage’s HTML code. The tag must be inserted at the top of the code in the <head> element. 

<head>- is a container for metadata and is placed between the <html> tag and the <body> tag. 

Here is an example of a page that is available in English, Spanish, and Danish. 

<!DOCTYPE html>  
< >  
<head>  
  <title>Your amazing page title</title>  

<link rel=”alternate” href=”https://example.com/en/page” hreflang=”en”>  

<link rel=”alternate” href=”https://example.com/es/page” hreflang=”es”>  

<link rel=”alternate” href=”https://example.com/da/page” hreflang=”da”>  

  
</head>  
<body>  
  
Your magical page content  
  
</body>  
</html>  

Each time you translate a page, a new hreflang tag must be added to all versions of the page. For example, if you already have the page in Danish, English, and Spanish, but decide to translate it into German, the German hreflang tag must be inserted in the HTML code on all pages. This means that you now have four tags in total on each page, because all versions must be bidirectional and point to each other, as well as to themselves. 

This method can end up being time-consuming, especially if you have many pages and many languages on your website. Here it can be advantageous to use the hreflang generator we mentioned above. 

Using the HTTP header

If you have pages with content that is not in HTML format, you can advantageously insert your hreflang tag in the page’s http header. An example of this type of content are PDF files. 

HTTP header codes contain information about the data that is sent from a server to a client, such as the date and the preferred language. 

Let’s assume you have the same PDF in three different languages: English, German, and Swedish. The HTTP header in each of the files should then look like this: 

HTTP/1.1 200 OK 

Content-Type: application/pdf 

Link: <https://example.com/en/doc.pdf>; rel=”alternate”; hreflang=”en“   

<https://example.com/de/doc.pdf>; rel=”alternate”; hreflang=”de”   

<https://example.com/se/doc.pdf>; rel=”alternate”; hreflang=”se”  

XML sitemap

The third method you can use to implement your hreflang tags is to insert them into your page’s XML sitemap. You can read more about sitemaps right here.  

In short, an XML sitemap is a file that provides search engines with information about the individual pages of your website. 

The main advantage of this method is that you can edit all your hreflang tags in one place. When using the HTML method and the http header method, you must add a new tag to every page each time you translate existing content into a new language. It can be quite time consuming. 

If you choose this method, add a <loc> element for each URL and insert <xhtml:link> for each of the languages the page is available in. 

You can read Google’s instructions and see an example here. 

HTML-lang vs Hreflang 

HTML-lang is also a tag that can be implemented to optimise websites with content in multiple languages. However, there is a difference between the two tags.  

The main difference is that HTML-lang is a tag inserted into HTML to signal to search engines and users about the language of the entire website. 

Hreflang sends more detailed signals by specifying languages on all the individual pages of your website. This makes it easier to tailor content to multiple countries and languages.  

Google’s search engine does not use HTML-lang. Therefore, they recommend that websites with content in several languages use the hreflang tag. However, Microsoft Bing and certain screen readers use HTML language. It can therefore make sense to use both if you want to optimise your website for several search engines and screen readers. 

Hreflang tags: vital for multilingual websites

If you want to improve the user experience and increase traffic to your website by publishing content in multiple languages, it is crucial that you know how to create and implement hreflang tags. A multilingual website opens up for new opportunities, new users, new readers and more conversions. We hope this guide helps you get started!