HrefLang in 5 Minutes: International SEO
Cater to international website visitors with a simple and direct HTML function.
A hreflang tag is an HTML attribute that specifies the language and geographical targeting of webpages, aiding search engines in localisation.
Author: Tom C.
Tom is the Founder and SEO Lead at Semrank.
What is a hreflang tag?
Hreflang is an HTML attribute used to specify the language and geographical targeting of a webpage. When a website has multiple versions of the same page in different languages or for different regions, hreflang tags are used to inform search engines about these variations. This helps search engines serve the correct version of the page to users based on their language and location.
The signficance of hreflang tags
Improved User Experience: Hreflang ensures that users are directed to content in their preferred language or region, enhancing their experience on your website. This can reduce bounce rates and increase user engagement.
Geographical Targeting: For businesses that target specific regions or countries, hreflang helps search engines understand which version of the content should be shown to users in those regions. This can be crucial for local SEO.
Avoiding Duplicate Content Issues: Without hreflang tags, search engines might view similar content in different languages or regions as duplicate content. Hreflang helps clarify the distinctions between these versions, preventing potential SEO problems.
Ranking and Visibility: When implemented correctly, hreflang can positively impact rankings because it ensures that the most relevant content is displayed to users. This can lead to better visibility in search results.
A hrefland tag in action
A hreflang tag for the German version of a page might look like this:
<link rel="alternate" hreflang="de" href="https://example.com/de/page" />
How to implement hreflang tags
1. HTML Tags Method
One of the simplest ways to implement hreflang tags is by inserting them directly into the HTML code of your webpages. Here’s the format of an hreflang tag:
<link rel="alternate" hreflang="x" href="URL" />
Now, let’s break down what each part of this tag means:
<link rel="alternate">: This indicates that the link is an alternate version of the current page.hreflang="x": Replace “x” with the appropriate language or language-country code (e.g., “en” for English, “es-mx” for Mexican Spanish).href="URL": Replace “URL” with the URL of the alternate version of the page in the specified language or region.
2. Example Implementation
Let’s say you have a blog post about your products, and you want to implement hreflang tags for English and Spanish versions of this page. Here’s how you can construct the hreflang tags:
<!-- English Version -->
<link rel="alternate" hreflang="en" href="https://example.com/products" />
<!-- Spanish Version -->
<link rel="alternate" hreflang="es" href="https://example.com/productos" />
In this example, we have created hreflang tags for English and Spanish versions of the same content, indicating the appropriate language using the hreflang attribute and linking to the respective URLs.
3. Self-Referential Hreflang Tags
It’s essential to remember that hreflang tags should be bidirectional, meaning that if you add an hreflang tag to a page pointing to an alternate version, the alternate version should also have a corresponding hreflang tag pointing back to the original page. This establishes a clear relationship between the pages.
TL;DR? Don't worry, here are the key points.
Hreflang tags are HTML attributes used to specify language and geographical targeting for webpages. They help search engines deliver the right content to users in different regions.
To implement hreflang tags, use the following HTML syntax: <link rel="alternate" hreflang="x" href="URL" />, replacing “x” with the appropriate language or language-country code and “URL” with the URL of the alternate version.
Yes, hreflang tags can improve international search rankings by ensuring that search engines display the most relevant language and region-specific content to users, enhancing their user experience.
Without hreflang tags, search engines may struggle to identify the correct version of a page for specific language or region-based queries, potentially leading to lower search rankings and user confusion.
Common mistakes include missing self-referencing tags, using invalid language or locale codes, referencing the same page for multiple languages, and failing to include x-default tags.
Don’t find you answers? Contact us
Any questions? Don't hesitate to reach out and say Hi!
If you have a particular query around SEM or want to grow your business through Search Engine Marketing, why not hop on a no-obligation Discovery Call to see what types of results you can bring your business.