What are Hreflang tags in SEO? The ultimate guide.
Before starting it right away, let me ask you a few questions. Do you serve content in multiple languages to target different locales on your site? If yes, do you use Hreflang tags to signal search engines about them? If it’s a “No,” you may fall behind or might hurt your SEO badly. Let us explain what hreflang tags are in SEO and why you must use them.
Hreflang tags are HTML attributes that are essential to implement if you serve content in different languages.
Understanding the Hreflang tag can be a bit demanding task, as it’s perhaps the most challenging part of SEO. This is because doing it right is an onerous and time taking task.
However, if you focus your attention on it, you’ll be able to comprehend it easily. We have created this written piece to help you understand everything concerning Hreflang tags in SEO. Why it is essential, how you can implement it, and the common issue related to it along with its fixes.
What are Hreflang tags in SEO?
The Hreflang tag is an HTML attribute you can use to specify the language of a web page and its targeted geographical locale.
If your site contains multiple language versions of the same page, you can use Hreflang tags to signal search engines about these translations. These help them to understand the relation between different versions of the same page in different languages and serve the appropriate version to its users based on their geographical location.
To put it simply- if a particular page exists in several languages on your site, inform search engines about its language and the locale it targets.
Let us take the example of Apple’s official website.
When a person searches for the Apple website in “The US,” he’ll witness the first version.
when he searches for it in Spain, he’ll witness the second version.
This is what the hreflang tag does.
Although Google may discover different language versions of your page, it’ll be best if you clearly indicate the page’s language and its targeted location.
Note that the Hreflang tag is just a signal, not a directive. With this, we mean that search engines might rank a different version higher other than what you specified. This is because other SEO factors may dominate the hreflang tag.
How does a hreflang tag appear?
Hreflang tags look like this:
<link rel="alternate" hreflang="x" href="https://xyz.com/alternate-page" />
Where,
- link rel= “alternate” suggest that the link in this tag is an alternate version of this page.
- hreflang= “x” suggests it’s in “x” language, and
- href=https://xyz.com/alternate-page suggests that the alternate page is at this URL.
How do different search engines treat Hreflang tags?
Different search engines treat hreflang tags differently. To Google and Yandex, hreflang tags are important signals to understand different language versions. Contrary to this, Baidu completely uses the content-language HTML for this and overlooks the hreflang tag. Bing also relies on the content-language HTML attribute majorly but suggests using hreflang tags.
Why are Hreflang tags important in SEO?
Hreflang tags are really important from an SEO point of view. Although these are signals not directive but still using them is a good practice. The main reasons to use the Hreflang tag are better user experience, reduced bounce rate, reduced duplication issues, and higher rankings.
Firstly, it enhances the user experience on your site. If your site holds different language versions, implementing the hreflang tag will help search engines serve the most appropriate version to the user based on his location. This reduces the chances of the result appearing in the wrong language. This lowers your bounce rate, boosts user experience, and hence rewards you with better rankings.
Next, it prevents duplicate content issues on your site. If you have near duplicates of a page for targeting different locales, hreflang tags can signal search engines the relationship between those pages, hence preventing the duplicate content issue.
For example, your page’s English versions are to target UK, Australia, and the US with little variations in prices, currency, etc. Google might consider them as duplicates without a hreflang tag and may index only a single version. Thus, hreflang tags are important from an SEO point of view.
How can you create a Hreflang tag in SEO?
You can easily create an hreflang tag. You need to look for the code of the language you want to choose and add it to the tag. Explore the list of “language codes” here. Any two-letter ISO 639-1 language code is supported by the hreflang tag.
For example: Let’s add a hreflang tag from the English version of a blog post “SEO tools” to its French version.
Here, to create the tag, find the language code for French that is “fr,” and then add the URL of the blog.
The hreflang tag would look like this:
<link rel="alternate" hreflang="fr" href="https://xyz.com/blog/fr/seo-tools/" />
Creating a tag to target a locale (optional)
In hreflang tags, you can also specify a region or a country. You can only specify the language, but if you want to add the locale, you can do that as well. It’s a similar two-letter code as used above, but the locale list is different. Look at the locale code in the ISO 3166-1 alpha-2 list here.
Use this only when targeting users of a particular language in a particular location.
For example:
When targeting English speakers in the UK:
<link rel="alternate" hreflang="en-gb" href="https://xyz.com/uk/" />
When targeting English speakers in the US:
<link rel="alternate" hreflang="en-us" href="https://xyz.com/us/" />
See that the code here represents hreflang= “language-country.
Can you specify both? Why and How?
Yes, you may need to specify both the language as well the location.
Suppose you target to sell your products in the US as well as the UK. Both are English-speaking countries, but the currency differs. It’s dollars in the US while pounds in the UK. Now, to sell products in both countries, you need to create two versions of your product page with different pricing methods.
Thus, the two pages are almost identical besides pricing, so you are required to implement hreflang tags to signal search engines the relation between both pages.
Similarly, there may be a situation when you need to target different people speaking multiple languages within the same country.
Suppose you have a blog to target the people of Scotland. People there speak two different languages, English and Scots Gaelic. So, you can have two language variations of your post to target two different communities.
The Rules to implement Hreflang tags.
There are three rules you should keep in mind while implementing Hreflang tags.
1. Always remember, Hreflang tags are bidirectional.
To implement hreflang the right way, always keep in mind that hreflang tags are bidirectional in nature; this means they work in pairs. For instance, your site contains two different language versions of the same page, one in English and the other in French.
If you implement the hreflang tag to the English version directing to the French version, then the French version must point back to the English version in return. This helps search engines to understand the relationship between both pages.
If tags are not implemented correctly or are broken, no relationship can be established successfully, and Google may display unexpected results.
2. Practice using a Self-referential hreflang tag.
According to Google using Self-referential Hreflang tags to point itself is a good practice.
If multiple language versions are present, each language version must list itself as well as the other language variations.
For instance: There are English and French version of a blog called “keyword research”.
So, if we want to implement the herflang tag between both versions, they must have both the tags:
<link rel="alternate" hreflang="fr" href="https://xyz.com/ recherche-de-mots-cles" /> <link rel="alternate" hreflang="en" href="https://xyz.com/keyword-research" />
These tags are for the English version of the page. The first one points to the French version, and the second one is the self-referential tag pointing back to itself.
Similarly, the French version must have both tags.
3. Using X-default tags (recommended, not mandatory
Google also recommends using the hreflang x-default tag to specify the fallback page or default page to display when any specific language or country page is not appropriate to display. The tag looks like this:
<link rel=”alternate” hreflang=”x-default” href=”https://xyz.com/” />
How does Google use the hreflang tag?
Google looks for the hreflang tag that best matches the searcher signals.
This means google displays the result that it considers to be the best match with the searcher’s language settings and country.
Let us help you understand this with an example-
An English-speaking user performs a search from Spain. To display the most relevant result, Google looks for the language-country code in the tag (i.e., en-es); if the page is there, it displays it in the result. If not, next, it looks for the language code (i.e., en-us); please note that language code matters more. If it’s there, it’ll display it or else display the x-default version.
How to implement hreflang tags for your alternate pages?
We can implement Hreflang tags in three different manners:
1. Using HTML tags
2. Using HTTP headers
3. In Sitemaps
1. Adding hreflang tags using HTML
Adding hreflang tags using HTML is the easiest and simplest method. For this, you need to add the hreflang tag in the <head> tag of the webpage.
The hreflang tag in the <head> section looks like this:
<link rel="alternate" hreflang="en" href="https://xyz.com/seo"/> <link rel="alternate" hreflang="en-gb" href="https://xyz.com/seo"/> <link rel="alternate" hreflang="en-us" href="https://xyz.com/seo"/>
The method is easy to implement, and there’s no limit to the number of tags you can use for a particular page.
However, it demands much time and becomes very messy if you have a large number of language variations for particular content. This is because you know that it’s bi-directional in nature, which means you need to implement all the tags on all the other pages. This requires time and also slows down your site’s speed as it puts a load on each request.
If you have a large site targeting different languages, using this method becomes painful.
If you want, you can use a WordPress plugin named “HREFLANG Tags Lite” to add HTML hreflang tags quickly.
2. Adding hreflang tags using HTTP headers
The next method to add Hreflang tags is to use the HTTP headers.
This method is majorly for PDFs and non-HTML content, where you can’t place hreflang tags in <head> of the HTML. This is because there isn’t any HTML. So, you can use HTTP headers to implement the hreflang tag to specify the alternatives. You can also use this method for your regular web pages, but these are usually used for non-HTML pages and PDFs.
This is what the HTTP header looks like with hreflang tags:
<https://es.xyz.com/document.pdf>; rel="alternate"; hreflang="es", <https://en.xyz.com/document.pdf>; rel="alternate"; hreflang="en", <https://de.xyz.com/document.pdf>; rel="alternate"; hreflang="de"
3. Adding hreflang tag in the XML sitemap
The third method to add the herflang tags to tell search engines your alternatives is to use the sitemaps.
There are two important elements for this- <loc> and <xhtml:link>, see how to use them.
- <loc> Use this to specify a single URL.
- <xhtml:link> Use this to list all the language/locale alternatives of the page, including itself.
Let us give you an example. The following is the markup for one URL with two other languages:
<url> <loc>https://www.xyz.com/uk/</loc> <xhtml:link rel="alternate" hreflang="en" href="https://www.xyz.com/" /> <xhtml:link rel="alternate" hreflang="en-au" href="https://www.xyz.com/au/" /> <xhtml:link rel="alternate" hreflang="en-gb" href="https://www.xyz.com/uk/" /> </url>
See that the third URL is the self-referencing URL that specifies that the URL is for en-gb, and the markup also defines two other languages.
As the other URLs should be added to the sitemap, the other two URLs’ markup looks like this:
<url> <loc>https://www.xyz.com/</loc> <xhtml:link rel="alternate" hreflang="en" href="https://www.xyz.com/" /> <xhtml:link rel="alternate" hreflang="en-au" href="https://www.xyz.com/au/" /> <xhtml:link rel="alternate" hreflang="en-gb" href="https://www.xyz.com/uk/" /> </url> <url> <loc>https://www.xyz.com/au/</loc> <xhtml:link rel="alternate" hreflang="en" href="https://www.xyz.com/" /> <xhtml:link rel="alternate" hreflang="en-au" href="https://www.xyz.com/au/" /> <xhtml:link rel="alternate" hreflang="en-gb" href="https://www.xyz.com/uk/" /> </url>
Note that the whole markup for each URL is the same; only the URL within the <loc>element is changing.
Although this requires a lot of work, there are a couple of benefits to implementing hreflang using the sitemap.
First, it doesn’t put the load on the page, and your site’s speed remains unaffected, so it won’t bother your users. Next, it’s easier to make changes to the sitemap than edit multiple HTTP headers and HTML tags.
Tools to implement Hreflang tags
There are plenty of tools in the market that can help you implement Hreflang tags.
1. The Herflang Tags Generator Tool
This hreflang tags Generator tool can help you generate hreflang tags for your site containing pages in multiple languages. To generate the tag, you can either add the URL, select the language of the URL and the country it targets or add them via a CSV (you can generate up to 50 URLs at a time).
2. The Hreflang XML sitemap generator tool
This hreflang XML sitemap generator tool helps you create a hreflang XML sitemap. You need to create a CSV file including all the URLs of your site that are in multiple languages or target multiple regions and upload it to create your hreflang XML sitemap.
3. Geo Targetly
The next hreflang generator tool is Geo Targetly. This is a free, easy, and user-friendly tool that lets you generate hreflang tags quickly. To use this, you need to add the URLs and their language, and it will create the hreflang tags for you.
What are the common Hreflangs tags issues and their fixes?
You can use Google Search Console’s international targeting report to see the hreflang errors or use Ahref’s Site Audit Tool.
1. Not using self-referencing hreflang tags
Google recommends using self-referencing hreflang tags whenever you use a hreflang tag on your web pages.
To fix this, you can check out your site’s hreflang tags and implement a self-referencing hreflang tag to your web pages using any of your preferred methods.
2. Not using the reciprocal/return hreflang tag.
As discussed above, herflangs are bidirectional tags. They work in pairs. When you haven’t placed a returning herflang tag to its alternate version, it becomes an issue.
To fix this issue, check for the missing returning hreflang tags and implement its reciprocal tags to signal search engines about the page’s alternate version.
3. Herflang tags pointing to a page for multiple languages
You may have incorrectly used hreflang tags and targeted a single page for multiple languages. This may confuse search engines, and they may ignore both the hreflang tags.
For example:
<link rel="alternate" hreflang="en" href="http://xyz.com/page.html" /> <link rel="alternate" hreflang="fr" href="http://xyz.com/page.html" />
To fix this issue, analyze your hreflang tags and check if each is targeting the correct language or local version. Remove any incorrect hreflang tag to send the correct signal to search engines.
4. Hreflang tags directing multiple pages for the same language
An issue may arise when multiple URLs are targeted for the same language using herflangs. This will confuse search engines, and they may misinterpret or ignore both the Hreflang tags. To fix this issue, look for such herflang tags and remove one tag to ensure that a single URL is targeted for one particular language.
5. Hreflangs with invalid language and locale codes.
While implementing hreflangs, you may have used invalid and incorrect language and locale codes pointing to your web pages. Search engines will bypass any invalid code and may ignore its other alternatives as well. In such cases, Google may display the result it deems to be the most appropriate.
Check for any such incorrect and invalid hreflang tags and fix them using the correct codes to serve the most appropriate version of your web pages.
6. Not using X-default hreflang tag
Basically, it’s not an issue, as x-default hreflang tags are optional. However, for SEO best practice, Google suggests using it to signal a fallback page when no language page matches the searcher’s query. These X-default target pages do not target any specific language or region.
Thus, to implement the x-default hreflang tags, check for the missing x-default tags and implement them as usual tags. Also, ensure that all your hreflang tags have an x-default tag.
7. Using Hreflang Tags to non-canonical version
Using the Hreflang tag with a non-canonical version is a contradicting signal and will confuse search engines. This is because the Rel= “alternate” hreflang= “x” will signal search engines to display the translated version of a page, and the rel=canonical tag will signal that this is not the canonical version. Google will be puzzled and may bypass the tags.
To fix this issue, check your hreflang tags and point them to the canonical version of your web pages.
8. Inconsistency between Hreflang tags and HTML lang tag
If you’ve used a hreflang tag as well as an HTML lang tag, both should be complementary to each other. Otherwise, inconsistency between both can create an issue and may confuse search engines.
Although Google does not consider the HTML lang tag, other search engines do. So, look for the conflicting hreflang and HTML lang tags and make sure both tags complement each other.
To Conclude-
Understanding and implementing Hreflang tags is a daunting task. However, anyone can learn it if taken carefully. Sites having multilingual pages must implement hreflang tags to signal search engines about them. This helps them to understand the relationship between them and offer the most appropriate version of your pages to users.
Hreflengs are important from the SEO point of view. Thus, here, we’ve discussed almost everything about the hreflang tags in SEO, including what they are, their importance, their implementation, and issue related to them, along with their fixes. We hope this has helped you learn hreflang tags.