What is Hreflang?
Hreflang is a code that signals to your computer what the language of your article is. It helps to prioritize your content in search results for people using that language. Hreflang is located in the <head> section of HTML.
Example:
www.example.com/en-us
www.example.com/en-ca
The URL slug in this example is not important; what is important is the hreflang that is associated with these pages. These two pages are targeting a) people located in the U.S – English and b) people located in Canada – English. If you have a French translation on your site for Canada, you would want to create a separate URL (www.example.com/fr-ca) and direct French-speaking Canadians to that specific page instead.
Hreflang can be referred to by one of two different tags:
rel=alternate or hreflang=x-default
The definition of the hreflang is the code that is read by search engines to specify URLs on your website which contain the same content. It can even be broken down further to tell search engines about the relationships that your content has with other content on your website. For example, it could tell search engines that this page is a Russian translation of this webpage.
When are you likely to use hreflang?
There are several different situations in which you’ll most likely use hreflang:
- Your main content is in one language, but you translate the template, such as, navigation and footers.
- You may decide to have variants of the same language. This is useful when you want to try and localize your content to make it more specialized for a certain market. For example, you have Portuguese as your principal language and then use Portuguese and Brazilian as the variants. This has many advantages, including little nuances between the countries in terms of their use of the language, different currencies, and seasonal, cultural and shipping variations. The most popular variants are between U.S., United Kingdom, and Canadian English.
- Where you have a direct translation of your website content from one language to another. For example, there’s a German translation of your webpage whose original content is in English.
Why is hreflang important?
Translated content on your website allows you to reach a wider audience, crossing language barriers and regions. Without hreflang, search engines are more likely to read your translated content as duplicates. This can negatively affect your SEO ranking.
The hreflang tag tells search engines that the content is a different language version of the same content which prevents them from labeling it as duplicate content. The hreflang tag also ensures that the correct version of the content reaches the appropriate user. For example, someone who uses your website in Spain will be presented with the Spanish version while someone in England will see the English version of the same content.
Hreflang is also useful if you need to determine what to rank a URL based on location. For instance, ranking a U.S English site in Australia as www.example.com instead of www.example.com/au. Hreflang will check whether that URL has hreflang annotations and present the searcher with the most appropriate URL.
What are the advantages of using the hreflang=x-default tag?
-
It decreases your bounce rate
Search engines have a few different tricks up their sleeve when choosing which language to put their search results in. They can use a user’s IP address as a guide, the hreflang=x-default tag can be extremely useful in situations where the user may key in their query in a foreign language.
This can aid in reducing bounce rates from users who wish to find a website in the language they have searched in, adding to a positive user experience. However, if you do not provide a language in a specific country, you can use x-default to label your situation and direct your user appropriately:
<link rel="alternate" href="http://example.com/en-gb" hreflang="en-gb" />
<link rel="alternate" href="http://example.com/en-us" hreflang="en-us" />
<link rel="alternate" href="http://example.com/en-au" hreflang="en-au" />
<link rel="alternate" href="http://example.com/" hreflang="x-default" />
The x-default hreflang attribute value signals to Google algorithms that x-default page doesn’t target any specific language or locale and is the default page when no other page is better suited.
-
It helps solve the issue of duplicate content (though not entirely)
As previously mentioned, search engines can sometimes see your website as having duplicate content even though it is merely a translation. The hreflang=x-default tag will identify which content is the translation.
It’s important to be aware, however, that this will not be a solution for all duplicate content. The tag will not hide actual duplicate content that you may have on your website, such as similar product descriptions for different items. Google will only read through your hreflang=x-default tag that content “a” is a translation of content “b.”
What is the difference between canonical tags and hreflang tags?
One way to deal with duplicate content is through canonical tags. Canonicalization is often referred to as the “rel=canonical” and is used to show search engines a more dominant version of a URI. This is to prevent the search engine bots from deciding which version of duplicate content to crawl and index.
The hreflang tag will instead display the correct version of the webpage in search results based on language or region.
The main difference between the canonical and hreflang tag is that the canonical has a predetermined dominant page while none of the hreflang pages are dominant and are instead selected based on the search query.
How Do I Implement Hreflang?
Implementing the hreflang tag onto your website correctly can be a bit tricky. Below is a guide on how to do it.
There are three different methods of implementing hreflang tags:
-
Adding link elements in headers (<head>)
If you have an HTML page, the hreflang tag goes in the <head>, like this:
<link rel=“alternate” hreflang=“fr” href=“https://www.website.com”>
-
Using hreflang in HTTP headers
For non-HTML pages, like PDFs, add the hreflang annotation in the HTTP header:
Link: <https://www.website.com/>; rel=“alternate”; hreflang=“en”
As you can see in the above examples, the hreflang=“en” part of those tags tell Google the listed URL is the English version of the page, so it would show that particular URL to users who have English set as their main language in their browser and those in English-speaking countries. If they had hreflang=“fr,” Google would display the URL for French.
It’s important that we add a link to all of the translated versions of our content. Additionally, we need to self-reference our hreflang tags. A page that has four different language variations (English, German, Italian, and Swedish) will look like this:
<link rel=“alternate” hreflang=“en” href=“https://www.website.com”>
<link rel=“alternate” hreflang=“de” href=“https://www.website.com/de”>
<link rel=“alternate” hreflang=“it” href=“https://www.website.com/it”>
<link rel=“alternate” hreflang=“sv” href=“https://www.website.com/sv”>
If we want to be more specific and add a regional variant to our language then we would add a country code after the language code. It’s important that we always follow this order and separate by a hyphen (as shown below). It’s also important to note that Google will not recognize cities and towns; it only recognizes a country as a whole.
Adding geographies to your hreflang tags can be done by adding a country code after the language code in the hreflang attribute. If the website above is targeting different countries with each language, they would look like this:
<link rel=“alternate” hreflang=“en-gb” href=“https://www.website.com”>
<link rel=“alternate” hreflang=“es-ar” href=“https://www.example.com/ar”>
<link rel=“alternate” hreflang=“pt-br” href=“https://www.example.com/pt”>
When Google sees these tags, it will know to show the English version to British users, Spanish to Argentinian users and Portuguese to Brazilian users.
We can find all of these codes at the following links. Languages ISO 639-1 and ISO 3166-1 Alpha 2 countries.
The drawback to using methods 1 and 2 is that both will slow down your page load time. If you have multiple translations and variants of your content and are finding that it is creating an issue, the third option might be best.
-
Using Sitemaps
The third method is to add hreflang tags to the XML sitemap. This is definitely the longest way of adding the annotations since every URL in your sitemap will need to include the hreflang annotations.
Here is an example of the code for a website that has English and Romanian versions:
<url>
<loc>https://www.website.com</loc>
<xhtml:link rel=“alternate” hreflang=“en” href=“https://www.website.com” />
<xhtml:link rel=“alternate” hreflang=“ro” href=“https://www.website.com/ro” />
</url>
<url>
<loc>https://www.website.com/ro</loc>
<xhtml:link rel=“alternate” hreflang=“ro” href=“https://www.website.com/ro” />
<xhtml:link rel=“alternate” hreflang=“en” href=“https://www.website.com” />
</url>
As you can see, a lot more coding is necessary. As your website grows, with multiple variations of content across multiple pages, the workload will increase rapidly. The upside to this extra effort is that the load time is not compromised. Again, a slow web page can cost you SEO rankings and increase bounce rates for potential users and customers. The sitemap is also a reference point for search engines when they are crawling your site. When you have alternate URLs in your sitemap, it allows them to be found more efficiently.
How do I use Hreflang and Canonical Tags Together?
As mentioned above, the hreflang and canonical tags have slight differences in their use and application. They can, however, be used in conjunction if you want to combine their applications. Simply add the canonical tag to each version of the page, pointing back to itself.
Here is an example of a website with three languages. The English markup would look like this:
<link rel=“canonical” href=https://www.example.com/”>
<link rel=“alternate” hreflang=“en-gb” href=“https://www.example.com”>
<link rel=“alternate” hreflang=“es-ar’’ href=“https://www.example.com/es”>
<link rel=“alternate” hreflang=“pt-br” href=“https://www.example.com/pt”>
You’d do the same for the Spanish version:
<link rel=“canonical” href=https://www.example.com/es”>
<link rel=“alternate” hreflang=“en-gb” href=“https://www.example.com”>
<link rel=“alternate” hreflang=“es-ar” href=“https://www.example.com/es”>
<link rel=“alternate” hreflang=“pt-br” href=“https://www.example.com/pt”>
And again for the Portuguese page:
<link rel=“canonical” href=https://www.example.com/fr”>
<link rel=“alternate” hreflang=“en-gb” href=“https://www.example.com”>
<link rel=“alternate” hreflang=“es-ar” href=“https://www.example.com/es”>
<link rel=“alternate” hreflang=“pt-br” href=“https://www.example.com/pt”>
Be careful when doing this as a common mistake is to use a non-canonical URL in the hreflang tag. An error here will confuse Google and cause a failure in its ability to function properly.
What Are Some Common Errors When Implementing Hreflang?
Though there are many advantages of using hreflang, especially if you have an international audience, mistakes can have a negative effect. Hreflang tags are used to make sure the right audience sees the content in the correct language. If you don’t achieve this, you will experience high bounce rates and miss out on site traffic in that region. Both of these mistakes will cause Google to penalize you. It is important that everything is correct so there’s not a reverse effect on your SEO.
-
Blank cells
If there are blank cells present when you convert your CSV file into XML, the data will not be validated. A blank cell may be caused by not entering the language or geographical information for some of the URLs.
-
Using incorrect language codes
A small typo when entering your language and country codes can cause Google to read your content in a completely different language. For example, if you accidentally type “fi” instead of “fr” then you will see your website being shown to Finnish users instead of French users. A small error in the abbreviations can cause higher bounce rates, so it’s important to double check all of your codes.
It is also important to note that you always need to identify the language code in addition to the region. The language code must be in the ISO 639-1 format and the country code in ISO 3166-1 Alpha 2.
-
Not using the proper URL
When you type example.com and it redirects to https://www.example.com, that is the URL you would need to add to your hreflang.
-
Using the wrong separators
When using multiple languages, it’s possible to misuse a separator. For example, in the German language they use a punctuation similar to the semicolon (;) as the default value separator. Our hreflang annotation generator tools do not.
-
Missing headers
Understand that the semicolon is a German alternative to the comma and will therefore be viewed as an error.
It is important to note that the hyphen should be used when separating our country values. The underscore is used a lot by developers so they are more prone to make this small (often overlooked) mistake when coding.
Another common mistake when using a generator tool for our hreflang codes is to not use a header column. The header column contains values like the language and region which are then converted into our hreflang values. If you don’t use a header column then these values will not translate. As mentioned above, you need to ensure that these values are always language and region or language only. If you use region only then there will bean error.
-
Redirect hreflang links
If there is a problem with your links then you will see a return of 4xx or 5xx HTTP status code. This can happen by linking to a page that doesn’t or no longer exists, by using a broken link or if the link has some other problem.
-
Wrong order of values
The hreflang needs to be written in the correct order. Failure to do this will create an error. The language code always comes first, followed by the country code.
-
Errant data
Errant data will cause problems with indexing. Errant data can be the result of the editing of previous files which has then been used for new hreflang tags without being cleared. A way around this is to use canonical URLs alongside the alternate/translated URLs while you do your markup. This helps because during crawling, a parameter or query may be added to URLs.
-
Conflicts in Page Source Code
A report conducted by SEMrush found that 58% of the analyzed websites using hreflang data they reviewed had conflicts with their source code. Unfortunately, you need to look at the entire page source code to detect these instances, which are often overlooked. This makes the errors hard to detect. An important thing to always do is self-reference. You can do this by checking that the last bit is the page’s URL and language code before closing your URL function to.
Other reasons for conflict may be due to multiple URLs being specified for the same language and country codes.
It’s important to be aware of these common mistakes so that you can resolve them before Google starts indexing your website.
How Do I Fix Common Hreflang Errors?
As with any problem, we need to identify it before we can fix it. By using Google’s Search Console and W3C, we can check the compliance:
On the Google Search Console, go to “search traffic”; from there, go to the International Targeting Section. In the middle of the page you should see the international targeting report. The language tab will tell you the page level markup and whether or not you have properly installed the hreflang. If there is a problem, the report will identify what and where it is.
Errors that Google will not penalize you for
At this point, it is important to note that there are some errors that Google may not penalize you for. Let’s look at some examples:
-
Using an underscore to separate language and country codes
There was a lot of confusion about this, but it was confirmed by Gary Illyes, the Webmaster Trends Analyst at Google, that the language and country codes don’t need to be separated by a hyphen as opposed to an underscore. This will not affect the display on the search engine results. Illyes does go on to say that the hyphen should be used so that there is consistency across the board.
-
Using exceptionally reserved language codes
There are some exceptions to the list of language code formats that will be accepted. These include ISO 639-1, which comes as a request from government organizations (e.g., “UK”). If you use this in your hreflang, you will not see any errors in your Google Search Console.
-
Failing to include self-referencing hreflang tags
Although it is not necessary to self-reference, it is highly recommended as it is considered to be at the core of hreflang.
-
Not using absolute URLs
Not using absolute URLs will not result in errors, though it is recommended that you do use absolute URLs whenever possible.
Each of these above errors will pass a test because they allow for a small amount of leeway in publishing online content. If you were to make one of these errors, it would mean that you wouldn’t be able to publish any page that has an error on it. Although you can get by with one of these errors, it’s highly recommended you follow Google’s guidelines and avoid these errors.
What Tools Can I use To Implement Hreflang?
If you want to implement the hreflang yourself, you will need to become familiar with the following tools:
This handy tool enables you to generate hreflang annotations as tags which you then copy into either the header HTML or the XML sitemap, depending on which method you decide to use. The main benefit of this tool is that all you need to do is upload the URLs and select which language and country you need it to be seen in. This can also be used for CSV files.
This tool is used to convert CSV files into multiple sitemaps. Simply add the URL to the CSV file and the desired locations of the files.
Can you use an automated translator on your site?
You might ask this question if you have an English translation of your site and a French site. Google does not consider your English-to-French translated site as duplicate content. However, Google Search Console guidelines mention that “text translated by an automated tool without human review or curation before publishing” is considered spam.
Google’s Matt Cutts says in this video:
“A word of caution: There are some people who might think, ‘Oh, I’ll just automatically translate all my content into 40 different languages. Now 40 different language markets can read what I have to say.’”
To be clear, our guidelines about auto-generated content can also apply to auto-translated text. If you are searching in French and you discover a French page that needs to be auto-translated, and it doesn’t read well, and no one has put any kind of human care into proofreading it or making sure that it flows, it results in a terrible user experience. Therefore, we recommend that you add a widget that says, “translate into this language,” or something similar, rather than just auto-translating content.
John Mueller from Google says the same thing:
“I just want to add a word of warning here—using automated translation tools to directly create content for your site could be seen as creating auto-generated content, which would be against our Webmaster Guidelines. Instead of just taking the output of a program like Google Translate, I’d strongly recommend at least having it corrected before putting it online. While Googlebot may initially fall for some Spanish keywords in your text, your users are not going to appreciate content that has been automatically translated and published without a review. I love Google Translate, but if you publish the results and get them indexed without having them reviewed, you’re not showing a lot of respect to your users…”
You will be penalized if you use Google Translate or another plugin or automated translation tool to translate your site to a different language.
Better translator plugin for WordPress
If you are using WordPress, using a plugin like Polylang, WPML, Weglot, or Bablic would be much more beneficial than running an automated translator for your site. Some of these tools provide a good amount of translation, but the most important part is providing visitors the perfect translation.
While every plugin has their benefits, we’ve picked the most lightweight option for your website load time. Polylang can help with creating multi-language pages or posts and translate widgets, URL slugs (pro-version only), other groups, site titles, descriptions, and also choose the date and time forms via the “Strings Translations” tab.
For pages or posts, your default language will automatically be selected. To add each translated content, you’ll need to click on the “+” button next to a language and then add content for that language.
With Polylang, you can install Lingotek Translation as an add-on for a professional or automatic translation service.
How to add hreflang to WordPress
Step1: If you are currently using Polylang or any other plugins, hreflang tags will either be automatic or need to be enabled under settings.
Step 2: With WPML, the correct hreflang links will be included in the site’s header.
Step 3: You can control it from WPML > Languages > SEO Options.
If you want to tell Google that content is intended for countries, the values in the screenshot below should contain pairs of languages and countries (like en-US and fr-FR). If content is designed for languages, without distinction per country, these values should include only the languages (like en or fr).
Step 4: You can go to WPML > Languages and click on the “Edit Languages” link.
Step 6: If you are not using any of these plugins to create your multilanguage site, you can install the HREFLANG Tags Lite plugin.
Step 7: You can also use a plugin called “Insert Header and Footer” in order to add your hreflang attributes there. In your WP dashboard, go to Settings > Insert Headers and Footers. There you’ll find two boxes; paste the hreflang tag code inside the “scripts in header” box and save it.
How to add hreflang to Wix
Currently, there is no easy way to create a multilingual site with Wix or add hreflang to your existing Wix site. You also cannot make any changes to your sitemap.xml file on Wix. However, you can vote to add this feature request here.
So what other hreflang solution is there for Wix?
You can insert hreflang using Google tag manager. Before you start adding hreflang to your Wix site, you will need to create those different language sites. To find out what languages they offer, go through their list of languages available.
One way you can create a multilingual site on Wix is to create a duplicate site for each language. Once you’ve identified the languages they offer, you can install their language app menu by following these steps:
Step 1: Go to “Edit Site” and click on “Add Apps,” then type in “Language.” Select and install the Wix Language Menu app.
Step 2: Follow the steps to make sure your multilingual site is successfully set up.
Step 3: Select the languages you want to display on the site.
Step 4: Customize the redirection settings for the site.
Step 5: Customize the design of the language picker.
You can follow Wix instructions on how to create duplicate pages for each multilanguage site you want to create.
How to add hreflang to Shopify
Adding hreflang to your Shopify can be done in two ways: from the Shopify theme.liquid file or through outside apps.
If you are adding different pages and products to create your multilingual site or using a multilingual theme, you can add your hreflang via the theme.liquid file.
Step 1: From your Shopify admin, go to Online Store > Themes
Step 2: Find the theme you want to edit, and then click Actions > Edit code
Step 3: Locate and open the theme.liquid file
Step 4: Locate the closing </head> tag
Step 5: Paste the hreflang tag right above the closing </head> tag. When you are finished, your code should look like this:
There are a few apps you can use to create your multilingual sites on Shopify:
Be sure to install necessary currency apps like Bold Multi-Currency so you can enable different currency and specify the country for each currency:
In conclusion
Now you know what Hreflang is, and how you can use it to provide the right translated version of your content to the right people. Preventing search engines from reading your content as duplicates of each translated version, and being able to specify your content for specific languages and regions will serve to benefit your website and SEO performance.
