Hreflang tag might seem like just another piece of Technical SEO, but in reality, they unlock opportunities to connect with global audiences.
It is a common experience that if we look up the Adidas website, it shows up like this:
However, if someone from Germany scrolls the same website, it pops up in the German language, looking like this:
This seamless switch between languages and regions is smart SEO at work. Websites like Adidas use the hreflang tag to guide search engines in delivering the right version of their content to the right audience.
What is a Hreflang Tag?
Simply put, Hreflang is an HTML tag used to indicate content in multiple languages on a website, along with its geographical targeting. This HTML attribute functions by informing search engines about the presence of more than one language on different areas of your website, like webpages, domains, and subdomains.
If you also have one of those websites that has localized pages for different regions, featuring content in the respective multiple languages, then mastering and implementing the Hreflang tag becomes essential.
One of the Hreflang attribute examples could be a website that features wide-ranging webpages in English, Spanish, and Arabic, then the Hreflang tag enables search engines to show the right version to the audience on the basis of the respective geographic region and users’ language settings.
<link rel=”alternate” hreflang=”en-us” href=”https://example.com/en-us/” />
<link rel=”alternate” hreflang=”es-es” href=”https://example.com/es-es/” />
<link rel=”alternate” hreflang=”ar-ae” href=”https://example.com/ar-sa/” />
As this code highlights the targeted language and audience for every specified region to the search engine algorithms, this makes it easier to redirect the visitors to the relevant webpage or domain that corresponds to their geographic region.
Structure of Hreflang Tag
At a glance, the Hreflang tag appears to be a command string that refers to the specified region and language. Each component is important in the tag as it completes the tag that pops up the correct pages for the user’s search query.
- The component rel=”alternate” defines that the linked page is an alternate version of the current one, as it’s meant to serve a different set of users speaking another language in a different region.
- hreflang=”en-us” refers to the language and region codes for the linked page. Here, it defines that the page is targeting English-speaking users in the United States.
- And as the name suggests, the example URL is the linked URL of the page the tag is referring to.
<link rel=”alternate” hreflang=”ar-ae” href=”https://example.com/ar-sa/” />
The above attribute indicates that hreflang=”ar-ae” informs search engines that the specified webpage is in Arabic and meant for users in the United Arab Emirates.
However, it should be noted that using region codes is not necessary if you want to specify that the page is for all the speakers of the language, irrespective of their region or location. In that case, you can follow this Hreflang structure without the inclusion of the region codes.
For example,
<link rel=”alternate” hreflang=”en” href=”https://example.com/en/” />
This tag will target all people who use the English language, regardless of their region.
When do you need the Hreflang Attribute?
When it comes to where to put Hreflang tags, there can be multiple scenarios where using Hreflangs can be beneficial.
We’ve established that the hreflang tag’s purpose is to highlight the content in different languages. But, there’s more to it than just the basic concept. By that, we mean different use cases in which using Hreflang can greatly benefit your SEO Strategy to a great extent. We can use Hreflang tags when your webpages have the following traits.
- A range of content with some regional variations, for instance, English webpages for the US and UK with slight variations.
- When the site has different dedicated content for different regions. For example, German content for users in Germany, English content for US users, etc.
- In some cases, websites offer single-language content but target different regions and markets. In such scenarios, Hreflangs tags are useful for classifying these regions and differentiating between them. Like, to differentiate between Germany and Austria, the US and the UK, etc.
- It can be the case that some sites receive traffic from a certain region and offer content to those users in a variety of languages, like English, Polish, and Portuguese languages for the users in the UK.
- It can be a case for some websites where only certain parts of the webpages, such as the footer, header, template, or other navigational elements, are translated.
These are all the possible use cases for the Hreflang tags. If your website or domain falls under any of the examples above, then it’s essential to apply the Hreflang Tags to reap their benefits and solidify your SEO strategy.
Let’s reflect on some benefits of implementing the Hreflangs attribute on your website and in what ways it strengthens the SEO strategy for businesses.
Benefits of Hreflang Tags
Better Geotargeting
Starting off from the top of the list, it goes without saying that Hreflang tags provide the convenience of showcasing the relevant version to the appropriate audiences across the world. This not only allows your business to connect better with the audience but also impacts its local relevance in different regions.
Relevant Language Version
No matter where your user is searching from, they will see a page in the language they speak and understand. Based on the personal language settings on the browser, a Spanish-speaking individual will see page content in Spanish, whereas a German-speaking individual will see the same page in German.
More Engagement
Using the Hreflangs tags in the right manner enhances dwell times, decreases bounce rates, and can be also conducive to increasing your conversion rates.
Increased Ranking Opportunities
Hreflang tags also help in Classifying your webpages and content according to the specific languages and regions and increase your ranking opportunities as they appear more relevant in search results for users.
Enhanced User Experience
The right use of Hreflang tags takes a user experience up a notch and delivers a more coherent, seamless experience to the users. People surfing the internet are more likely to engage with content in their own language rather than a secondary language. This can lead to an increase in traffic and conversions. And we know that Google algorithms do value a good user experience.
Eliminate Duplicate Content Issues
With Hreflang attribute tags, you don’t have to worry about duplicate content issues. Hreflang does the job of informing search algorithms that there are two or more versions of the same content targeting different regions, thereby eliminating the risk of getting flagged.
Boosts International SEO
Using Hreflang tags is among the international SEO best practices as they allow crawlers to explore webpages targeted for different regions and users across the world.
What does Hreflang achieve?
According to Yoast’s Hreflang implementation guide, the URL defines the multiple variations that are available. And when a user looks up a specific query on Google, the algorithm follows the process of:
- Determining that it wants to rank the URL
- Analyzing if the said URL contains the Hreflang attribute
- Depicting an apt URL for the relevant search query and users
Take note that every user’s location and fixed language settings make a difference when it comes to the SERPs for different queries. You can read more about it in the article linked above.
ISO Language and Region Codes
For the effective implementation, note that Google Hreflang SEO supports ISO 3166-1 Alpha 2 for region codes and ISO 639-1 for language codes. These code formats allow Google search algorithms to comprehend what specific regions and languages your webpages are targeting.
Also, look out for the different codes for the countries, as they can be perplexing. For instance, the United Kingdom is not represented by “uk” but “gb”.
Similarly, if you want to cater to people of two different regions who speak the same language, you’ll have to use hreflang=”en-gb” and hreflang=”en-us” to distinguish between English speakers in the UK and America.
Check out this Hreflang tag generator as it’s helpful and easy to use.
The Basics of Technical Implementation
There are some common technical rules for implementing the Hreflang attribute that also significantly impact your site’s multilingual SEO optimization and geographic targeting. They should be meticulously applied in order to avoid SEO errors.
Bidirectional Tags
When it comes to establishing Hreflang tags, it is essential to build and maintain bidirectional tags between the linked pages. The bidirectional tags work in pairs — a combination.
For instance, if you have an English version pointing to a Spanish version, then the Spanish version should also refer to the English version.
On the English (US) page, you’ll have
<link rel=”alternate” hreflang=”en-us” href=”https://example.com/en-us” />
<link rel=”alternate” hreflang=”es-es” href=”https://example.com/es-es” />
On the Spanish (Spain) page, you’ll have
<link rel=”alternate” hreflang=”es-es” href=”https://example.com/es-es” />
<link rel=”alternate” hreflang=”en-us” href=”https://example.com/en-us” />
Another important fact about this reciprocal or bidirectional tag is that it only functions if it’s implemented both ways. Which means if one version is pointing to the second version, and the other version is not, then the first link becomes invalid, too.
Self-referencing Tags
Every page should have a self-referencing tag that links back to its own version, along with tags for all other language versions available. For instance, if you have an English version page pointing to the Spanish version, then you should also add the Hreflang Tag referencing the English Version itself.
For example, an English site selling hiking gear to customers in the US, UK, and Australia might use:
<link rel=”alternate” hreflang=”en-us” href=”http://example.com/us/” />
<link rel=”alternate” hreflang=”en-gb” href=”http://example.com/uk/” />
<link rel=”alternate” hreflang=”en-au” href=”http://example.com/au/” />
This practice helps search engines to register that there are multiple variations of the original version and picks up the suitable version to display in the search results based on users’ preferences.
Alternate URLs of different domains
It can be the case that the different language versions of the same website exist on different domains. Something like abcjelly.com and abcjelly.com.us. And it can also be the case that the names of these domains don’t match. In these specific scenarios, you can still use the Hreflang tags to show the technical connection between these individual domains and let the search engine algorithm pick up on that. As long as you’re doing the Hreflang implementation in the right manner, it doesn’t matter if the domain names are different.
What are X-default Hreflang Tags?
The x-default tags signal search engines to display the default pages when no language or region of the users’ preferences match any component of the Hreflang tags. In most cases, it is somewhat of a generic or fallback page that still does the job of providing basic, relevant information.
It looks like this:
<link rel=”alternate” hreflang=”x-default” href=”https://example.com/” />
The tag is ideally applicable if your website has a global landing page or the introductory language selection page. It further informs the algorithms that your default page isn’t entirely dependent on a single language and region, but does branch out to the other multiple versions too.
Note that without the x-default present, the search engine algorithm may choose the URL of its own choice to display to users outside of your specified regions.
How to Implement Hreflang Tags
As far as the placement of the Hreflang attribute goes, it can be placed either in XML Sitemaps, HTTP headers (for non-HTML files), or On-page markup (HTML <head>).
Note that only one Hreflang implementation method can be used per page.
Here’s the detailed breakdown of how you can implement Hreflang tags in the aforementioned ways.
HTML Tags
You can add Hreflang tags to the head section of HTML. Being one of the most convenient and simplest methods to embed the Hreflang tag, it is most appropriate to apply this method if you haven’t implemented Hreflang before. In addition, this method also ensures the tags are processed when the page loads.
XML Sitemaps
If you have so many pages to work with and it’s just not practical to incorporate Hreflang for all of them in HTML, then try implementing them in XML Sitemaps.
As with sitemaps, all hreflang tags are embedded into a single file. Not only does this method work better for applying hreflang for many pages, but also the code can be changed conveniently without having the need to make changes to the HTML heads individually.
HTTP Headers for non-HTML Files
Of course, it’s a common occurrence to work with files that are in non-HTML format. For instance, PDFs. In such cases, it is recommended to use the HTTP header of the page to embed the Hreflang tags and define the language and targeted region.
Conclusion
Undoubtedly, Hreflang tags offer a range of benefits, including the perks of technical SEO and international SEO. They conveniently connect users to your business, bridging the communication gap and providing the ease of understanding information in the native language.
Hopefully, the information presented in the blog may have helped you cement your knowledge about the Hreflangs tags and how to correctly implement them.
We’ll come with more knowledge-filled pieces, so keep following the LBHQ blog!
