Hreflang and SEO: Full Guide for Newbies

Every day, millions of French users visit global websites like Amazon.com. Although the official page of Amazon.com is in English, users can still see text and product descriptions in French. This is because Amazon’s global website has a localized version for France, ensuring that all French users can automatically see the website content in French. 

If your website has pages localized into several languages, similarly to Amazon, you can specify the right language for each page by using hreflang attributes. 

Hreflang makes it easy for search engines to identify that your website has content in different languages, streamlining the process of redirecting visitors to the page that corresponds to their geographic region.

What is hreflang?

This essentially means that if the home page, example.com, is translated into German and English, you can use the hreflang attribute to indicate the language and/or the region for your pages. Depending on the user’s location, Google will pick and show them the corresponding version of the page.

What does a hreflang tag look like?

An hreflang tag typically takes on the form of the following HTML tag:

<link rel="alternate" hreflang="language_code" href="URL_of_alternative_page">

Now let’s see how the hreflang tag is implemented on SE Ranking’s main page:

<link rel="alternate" hreflang="fr" href="https://seranking.com/fr/">

What do these elements mean? 

• link rel = “alternate”: The alternate attribute indicates that the link represents an alternative version of the current page, in our case—the French version.
• hreflang = “fr”: This attribute indicates the language or language-region of the alternative page. In our case, the alternative link points to ”fr”, which is the French language code. 
• href =“https://seranking.com/fr/”: This attribute specifies the URL of the alternative page associated with the specified language. In our case, the URL points to the page in French, allowing users access to the French version of the content.

How sites use the hreflang attribute

If you lived in France and Googled “Samsung official site,” you would see the following results:

By clicking on the first link, you would be taken to https://www.samsung.com/fr/. Basically, Google would identify your location and take you to the French version of the website.

How many language versions your website really needs

Creating localized pages for lots of different regions might seem like the best solution for user experience, as users are clearly more likely to spend more time on the site if it is presented in their native language.

Still, it’s important to balance the benefits with the resources required to create and maintain a multilingual site. Translating and localizing content can be time-consuming and costly.

Investigate your website analytics to determine the countries or regions where your user base is thriving. Conduct user research to gauge their language preferences and expectations. This will help you make informed decisions concerning the number of language versions your website truly needs.

Is hreflang important for SEO?

Hreflang implementation is important for SEO because these tags help search engines understand the relationship between different language versions or regional variations of your web pages.

By setting hreflang correctly, you can benefit in the following ways:

Improving UX

Hreflang allows search engines to deliver the most suitable language version or regional variation of your web page to users based on their language preferences or geographical location. This personalized approach ensures that users find the content that’s most relevant to them, resulting in an improved user experience on your website. Google values websites that provide a good user experience.

For example, visitors to Nike’s website from France will see the layout presented in this way:

On the other hand, users accessing Nike’s Japan website will encounter a different range of products and content, specifically customized for their market.

Preventing duplicate content problems

Search engines may interpret similar content in multiple language versions or region-specific content in the same language as duplicate content, which can have a negative impact on your website’s rankings. Hreflang tags signal to search engines that these are alternative versions of the same content, eliminating the risk of duplicate content issues.

Targeting specific audiences

Hreflang empowers you to effectively target specific language-speaking or region-specific audiences. This capability enables you to drive more targeted traffic to your website from different markets.

Boosting international SEO

If you have an international website targeting different countries or language markets, hreflang is instrumental in improving your international SEO efforts. By helping search engines understand the language and geographic targeting of your content, hreflang ensures that it is appropriately displayed to users in their preferred language or region.

When you need the hreflang attribute

Now, let’s figure out when you need to use the hreflang attribute: 

1. When only certain parts of a webpage (a template, header, footer, or navigation elements) are translated. 

2. When the site has different content for different regions. For example, English content for US users and French content for Canadian users. 

3. When the site is fully localized into several languages:

4. When global sites have several versions for different regions in one language. This can include the UK, USA, and Canada versions.

5. When websites are available in different languages: English, Italian, and Chinese.

6. When sites cater to visitors from specific regions and offer content in English and French only for visitors from the UK.

If your website is similar to any of the examples above, it is necessary to implement the hreflang attribute.

When you shouldn’t use hreflang 

Let’s consider several scenarios where either you don’t need to use hreflang or should exercise caution:

• When you don’t target other languages or countries

Hreflang annotations are primarily used to indicate language and regional targeting for international or multilingual websites. If your website is exclusively focused on serving a specific language or country, and you have no plans to cater to other regions, implementing hreflang isn’t necessary.

• For non-canonical pages 

Using the rel=canonical incorrectly together with the hreflang attribute can cause conflicts and confuse search engines. If the page is a duplicate and the canonical tag points to another page, you cannot use hreflang. 

When the rel=canonical redirects a user to another page, it sends the following signal to search engines: “Don’t pay attention to this page, please index another canonical page instead.” When hreflang attributes are used on the same page, search engines may interpret them as: “Please index this page; we have great content here. And don’t forget about the versions in other languages too.”

• When you target different cities in the same country

If you have a local business and a website that targets several cities within the same country, and your audience in those cities speaks the same language, you can do without hreflang tags. But if your visitors from those cities use different languages or dialects, and you have specific content tailored for them, make sure to use hreflang tags. 

In cases where your same-language content only contains slight differences in some parts (like the product delivery info for different cities), you may want to apply a universal solution such as adding a toggle or price calculator. 

Remember that while there are country and language codes, there are no specific codes for cities.

One more thing to keep in mind is to avoid using hreflangs that point to nonexisting pages. This can confuse search engines, lead to errors in indexing, and ruin user experience.

The basics of hreflang implementation

The following fundamental hreflang SEO practices ensure that these annotations function correctly and effectively indicate the language and regional variations of web pages. Read them carefully to properly use hreflang tags in your international SEO strategy.

Include all language versions of a page with the hreflang tag, including the page itself

This means that in addition to mentioning other language versions, hreflang should also point back to the original page. This is called a self-referential hreflang tag. For instance, if you use hreflang on an English page pointing to the German version of a page, you should also add a hreflang for the English version.

<link rel="alternate" hreflang="de" href="http://www.example.com/de" />
<link rel="alternate" hreflang="en" href="http://www.example.com/us" />

You should add both tags to both pages. By including all language versions, search engines can accurately determine the appropriate version to display based on user preferences.

Specify the full address of the alternative URL (absolute URLs)

Hreflang annotations should use fully-qualified URLs for both the original and alternative versions of the page, including the protocol (http/https). This ensures clarity and prevents any ambiguity in interpreting the URLs. 

For example:

<link rel="alternate" hreflang="en-us" href="//example.com/page-us" />

Search engines will ignore this hreflang tag because the URL isn’t complete.

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

This hreflang tag will work because the URL address is complete and includes protocol.

Include bidirectional links

When implementing hreflang tags, it’s essential to establish bidirectional links between your pages. This means that each page with an hreflang tag should reference its alternate language versions, and vice versa. By doing so, you ensure that search engines fully understand the relationship between the different localized versions of your content.

For example, if you have a page in English (en) and a corresponding page in Spanish (es), the English page should contain a hreflang tag pointing to the Spanish page, and the Spanish page should contain a hreflang tag pointing back to the English version. This bidirectional setup eliminates any ambiguity for search engines, helping them deliver the most relevant content to users based on their language or region.

Consider including alternative URLs that belong to different domains

In certain cases, multilingual versions of a website may exist on separate domains, such as examplesite.com and examplesite.co.uk. But you can still use the hreflang tag to establish connections between these sites, regardless of different domain names, as long as you meet the requirements mentioned above.

Languages and region codes

The language and region codes are used to specify the targeted language or region for alternative versions of a web page. These codes can be single codes like it, en, es, de, etc., while in other cases, you may notice a combination of codes like en-US, en-GB, etc.

The first code type (language code) indicates a specific language and follows the ISO 639-1 format. it stands for Italian, en for English, es for Spanish, de for German, etc. The second code type (country code), which is in the combined example, specifies the region for a certain language and follows the ISO 3166-1 Alpha 2 format. For example, en-US represents English as the page is shown in the United States, and en-GB is used to show pages in English for the United Kingdom. 

The language code is mandatory and always comes first, whereas the country code is optional and comes second. For example, if you write be with the intent of targeting Belgium, it won’t work. This is because Google perceives the first code as language and be is recognized as the Belarusian language code.

In some countries, users may speak different dialects or use different writing systems. For example, China has 10 dialect groups, and the Japanese language has at least four. In cases such as these, language script variations can be used to represent different writing systems or scripts used for the same language. 

If your page is in Japanese and targets Japan, you would use ja-JP as the language and country code. But if you use Japanese syllabaries (Hiragana and Katakana), you should use Hrkt as the script code, and the final language code would be ja-Hrkt. You can also add a region code to specify whom to serve the page, such as ja-Hrkt-US. Search engines will understand that your page is written in Japanese syllabaries and will display it to users in the US.

The full collection of scripts is available in the ISO 15924 list. 

How to set up the hreflang attribute

TThere are three ways to inform Google about multiple language versions of a page through hreflang implementation: 

• HTML tags
• HTTP header
• XML sitemap

Let’s learn more about each of them so you can direct users and search engines to the most relevant version of a webpage based on language or region.

HTML tags

Here is a sample piece of HTML code from seranking.com that includes hreflang attributes and HTML tags. To bring users from different regions to the right pages, you should insert the <link> tag into the <head> element for each page that you want to include.

Each element must have the following structure:

<link rel="alternate" hreflang="lang_code" href="url_of_page" />

The bold elements, “lang_code” and “url_of_page“, are variables representing the language code and/or region, along with the corresponding link. For example, if you want to specify the code for visitors from France, you would use fr as the language code and then add the appropriate link:

<link rel="alternate" hreflang="fr" href="https://seranking.fr/">

You can find a full list of supported language/region codes here.

Hreflang HTTP headers

If you have non-HTML files like PDFs, you can use an HTTP header to inform search engines about pages available in multiple languages.

The HTTP header must have the following structure:

Link: <url1>; rel="alternate"; hreflang="lang_code_1", <url2>; rel="alternate"; hreflang="lang_code_2", …

• url: This refers to the full URL of a localized version of your page.
• lang_code: This represents a supported language/region code.

Let’s say you want to provide two German versions of a PDF file: one for users from the United Kingdom and another for international users. The HTTP header would be as follows:

 Link: <http://de-gb.example.com/file.pdf>; rel="alternate"; hreflang="de-GB",
       <http://de.example.com/file.pdf>; rel="alternate"; hreflang="de"   

XML sitemap

Let’s explore how to use a sitemap to inform search engines about alternative versions of a page, using the example below. 

Suppose we have two pages: one for Spanish-speaking visitors from Argentina and another for Spanish-speaking visitors from other countries

• www.example.com/es-ar/page.html: Spanish website for users from Argentina 
• www.example.com/es/page.html: Spanish website for users from other countries   

The sitemap will contain the following code:

 <?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://www.example.com/es/page.html</loc>
     <xhtml:link
                rel="alternate"
                hreflang="es-ar"
                href="http://www.example.com/es-ar/page.html"/>
     <xhtml:link
                rel="alternate"
                hreflang="es"
                href="http://www.example.com/es/page.html"/>
   </url>
   <url>
     <loc>http://www.example.com/es-ar/page.html</loc>
     <xhtml:link
                rel="alternate"
                hreflang="es"
                href="http://www.example.com/es/page.html"/>
     <xhtml:link
                rel="alternate"
                hreflang="es-ar"
                href="http://www.example.com/es-ar/page.html"/>
      </url>
 </urlset> 

How to audit your website for hreflang issues

Manually checking all pages can be very difficult, if not impossible. A more efficient approach is to use dedicated tools like SE Ranking’s website audit tool, which streamlines the technical SEO process. Not only does it check your hreflangs and provide error details, but it also offers recommendations on how to rectify them.

Particularly, with the Website Audit 2.0 version, featuring a revamped health score, you can now expect to receive even more reliable data on your website’s performance from a technical standpoint.

The upgraded version of this tool allows you to identify the following hreflang issues:

• Invalid language code
• Hreflang and HTML lang do not match
• Language duplicates in hreflang
• Multiple language codes for one page
• Hreflang to non-canonical
• Hreflang to 3XX, 4XX or 5XX
• Confirmation (return) links missing on hreflang pages
• Hreflang page doesn’t link out to itself
• X-default hreflang attribute missing

To see if your website is affected by these errors, log in to your account, select your project, and then go to Website Audit → Issue Report → Localization:

Note: We re-evaluated the relevance of each group and updated the category weights accordingly. As a result, the Localization category’s weight was increased from 2% to 7%.

Read our detailed website audit guide and take the time to check your website with SE Ranking’s Website Audit tool, which is excellent for detecting SEO issues, including broken internal links, crawling problems, duplicate content, redirect errors, etc.

Common hreflang mistakes

Implementing hreflang correctly can be challenging. Even minor mistakes can have a significant negative impact on your website’s visibility and user experience.

Let’s analyze these mistakes in more detail.

Missing return links

If page A has an hreflang tag pointing to page B, then page B must also include an hreflang tag pointing back to page A. Failing to include reciprocal links can cause search engines to misinterpret the guidelines. 

For example, if the French page uses an hreflang annotation for the German version, the German page must also link back to the French page.

The French version of the page should look like this:

Page 1: https://www.example.com/fr

 ✅<link rel="alternate" href="https://example.com/de" hreflang="de" />
 <link rel="alternate" href="https://example.com/en" hreflang="en" />
 <link rel="alternate" href="https://example.com/fr" hreflang="fr" /> 

However, in the example below, the German version is missing the URL of the French page: 

Page 2: https://www.example.com/de

 <link rel="alternate" href="https://example.com/de" hreflang="de" />
 <link rel="alternate" href="https://example.com/en" hreflang="en" />
 ❗ <link rel="alternate" href="https://www.example.com/fr" hreflang="fr" />  

— the German page doesn’t link back to the French page.

No self-referencing hreflang

Each page should not only include URLs of other language versions but also reference itself. In the example below, the French page contains the required URL, but the German version does not.

Page 1: www.example.com/fr

 ✅<link rel="alternate" href="https://example.com/de" hreflang="de" />
 <link rel="alternate" href="https://example.com/en" hreflang="en" />
 <link rel="alternate" href="https://example.com/fr" hreflang="fr" /> 

—the French page references itself in hreflang annotations

Page 2: https://www.example.com/de

 <link rel="alternate" href="https://example.com/en" hreflang="en" />
 <link rel="alternate" hreflang="fr" href="https://www.example.com/fr"/>
 ❗ <link rel="alternate" href="https://example.com/de" hreflang="de" /> 

—the German page doesn’t reference itself in hreflang annotations

Region code alone is specified (missing language code)

When specifying hreflang, it is necessary to include either the language code or both the language code and the region code if required. Specifying only the region (country code) will not work because the search engine will not be able to determine the language solely based on the country code.

To implement the hreflang correctly, write it like this:

• fr-FR—to specify the language and the region
• fr— to specify only the language for accessibility to users from all countries.

Also, keep in mind that hreflangs are not case-sensitive. This means that country code written in upper case and language code written in lower case, or vice versa, will both be accepted. The same rule applies if you write everything in uppercase or lowercase.

Invalid language code

Making a mistake in language code can result in the hreflang tag not functioning correctly or at all. 

For example, if you mistakenly use sl instead of sk as the language code for Slovak, the page will be targeted to the Slovenian language. Similarly, specifying the code al instead of sq as the code for the Albanian language will cause the tag to fail because the code of the Albanian language is sq.

To avoid errors with your hrelfang annotations, double-check the correctness of the language codes.

Several language codes for one URL

If multiple language codes have the same URL, search engines are unlikely to determine which language version to show.

For example, if hreflang = “fr” and hreflang = “de” lead to https://www.example.com/de, this will create a conflict.

Multiple pages with the same language code

When multiple pages in a set have the same language code, this can create confusion and dampen the effectiveness of hreflang annotations.

Let’s say your website has two versions of a page that both mistakenly share the same hreflang language code, such as de: https://www.example.com/ and https://www.example.com/de. This creates difficulty for search engines in determining which version to display for visitors who prefer to see content written in German.

Hreflang to non-canonical URLs

Hreflang tags should be used specifically to indicate language and regional alternatives of canonical URLs. 

Placing hreflang tags on or pointing to non-canonical URLs can confuse search engines about the relationship between different language or regional versions. This is because:

• The hreflang tag requests search engines to show the localized version of a page in search results based on users’ language and location.
• However, the canonical tag instructs search engines to index another URL instead.

These conflicting instructions can misdirect search engine indexing and impact the visibility of pages for users. Make sure that your hreflang tags point only to canonical pages.

Hreflang to non-200 pages

If the page returns anything other than the 200 OK status code, something is wrong with that page. It may be currently unavailable or no longer exist, among other issues. If your hreflang tag links to this kind of page, you are essentially asking search engines to display a broken page in search results. Since search engines can’t show their users content that doesn’t exist or is unavailable, it’s important to ensure that sure your hreflang attributes point to active pages.

Hreflang to noindexed pages

“Noindex” is a directive that instructs search engines not to include a particular page in their index, resulting in the page not appearing in search engine results. 

If you add an hreflang tag to a noindexed page, you’ll confuse search engines with conflicting directives, similar to the situation with hreflang on a non-canonical page.

On the one hand, your hreflang informs search bots that this page has alternative language versions that they should process. On the other hand, the noindex directive tells them that the page should not be indexed. Because of this, search bots can misinterpret your requests or ignore them altogether.

Missing x-default

The x-default hreflang attribute is used to specify a default page when none of the specified language or regional variants match the user’s preferences. It directs users to a generic or fallback version of the content, ensuring they still find relevant information. This is particularly useful for global landing pages or pages that act as language selectors.

Below is an HTML example that contains the line with the x-default hreflang attribute.

While it is not mandatory to use “x-default”, we highly recommend doing so. Including an “x-default” pages allows for better targeting of users from countries outside of your core regions who may also want to visit your website. Without specifying a default page, search engines may choose a URL that isn’t the one you intended. For example, if your site doesn’t have a French version, you can specify that all visitors from France should be redirected to the main version of the page, typically the English version that is not region-specific.

Conclusion

Applying hreflang tags is an excellent strategy for assisting search engines in delivering the right page results to users who are searching within distinct languages and regions. By implementing hreflang correctly, you can address duplicate content issues, improve the user experience, and give your content a major global SEO boost. 

One final thing to consider is that implementing hreflang attributes requires attention to detail. Even the smallest mistake can result in lost rankings and duplicates, but doing it correctly can result in nominal benefits for both websites and users.