The hreflang tag is an HTML attribute that helps search engines understand the language of a web page.
It signals to Google which web page version they should show a user based on their geographical location and language.
Here’s what I mean:
Imagine someone in Spain makes a search on Google, and you have content in both Spanish and English that answers that search.
Naturally, you want Google to show them the Spanish one, right?
That’s where the hreflang tag comes into play. It tells Google the language of your page so it knows which version to show.
Simple as that!
The truth is that hreflang tags are probably one of the most complicated parts of SEO. But they can also be extremely important for your overall strategy!
What Will I Learn?
Hrefland tags are important for international SEO to specify which languages and geographical locations a web page is for.
If you have multiple versions of the same web page in different languages, you must implement hreflang correctly.
Here’s why:
The bottom line is that Hreflang tags are important for websites with content written in different languages.
They can boost your SEO, help you reach new audiences in different countries, and ultimately increase your website traffic.
Who doesn’t want that, right?
Hreflang tags look like this:
<link rel=”alternate” href=”https://example.com/en-us/” hreflang=”en-us” />
Here’s the breakdown of what each element in the hreflang tag means:
Hreflang tags are generally added to the page’s HTML <head> section. But it depends on your situation and goals.
You should use a hreflang tag when you have multiple versions of the same page in different languages.
This will ensure that search engines understand which version of a page they should serve to individual users.
Here are three scenarios when we typically use hreflang tags:
If your site fits one of those scenarios, it’s worth considering adding hreflang tags.
Follow these steps to create a hreflang tag correctly:
Use ISO 639-1 codes for languages.
For example “en” for English or “fr” for French.
This ensures you’re using standardised language codes that Google understands.
Next, determine the region codes.
This is also important if your content targets different regions that speak the same language (e.g. the US and the UK).
Use the ISO 3166-1 Alpha 2 codes to allocate regions, such as “US” for the United States or “FR” for France.
These region codes tell Google the geographical target of your content.
Now, simply combine language and region codes to form the hreflang attribute.
For English and the United States the combined code is “en-us”.
For French and France it would be “fr-fr”.
Not so hard, right?
Record each language and region code on a spreadsheet so you have a record for yourself. Then, it’s time to add the hreflang tags to your site.
There are three ways to add Hreflang tags to your site:
Note: Adding hreflang tags to your site is tricky (probably one of the most complex parts of SEO).
If you aren’t confident, get an SEO specialist to help you out.
Below is a simple overview of each.
This is the easiest way to implement the hreflang attribute on your site. It’s also ideal for beginners and smaller websites.
Add the hreflang tags within the <head> section of each website. Remember that each line needs a separate tag.
Here’s an example of how it should look:
<head>
<link rel=”alternate” href=”https://example.com/en-us/” hreflang=”en-us” />
<link rel=”alternate” href=”https://example.com/fr-fr/” hreflang=”fr-fr” />
<link rel=”alternate” href=”https://example.com/de-de/” hreflang=”de-de” />
</head>
This is advanced, so you might need an SEO or web developer to implement it for you.
Add the hreflang tags to your server’s configuration files. The process will be different depending on your server type.
Below is an example of the code for both Apache and Nginx servers.
<Files “index.html”>
Header set Link ‘<https://example.com/en-us/>; rel=”alternate”; hreflang=”en-us”‘
Header add Link ‘<https://example.com/fr-fr/>; rel=”alternate”; hreflang=”fr-fr”‘
Header add Link ‘<https://example.com/de-de/>; rel=”alternate”; hreflang=”de-de”‘
</Files>
location / {
add_header Link ‘<https://example.com/en-us/>; rel=”alternate”; hreflang=”en-us”‘;
add_header Link ‘<https://example.com/fr-fr/>; rel=”alternate”; hreflang=”fr-fr”‘;
add_header Link ‘<https://example.com/de-de/>; rel=”alternate”; hreflang=”de-de”‘;
}
To do this, you will need to modify your sitemap.
You will add the hreflang tags directly within your XML sitemap file, creating one URL entry per page.
Here’s an example of how it looks:
<url>
<loc>https://www.example.com/</loc>
<xhtml:link rel=”alternate” hreflang=”en” href=”https://www.example.com/” />
<xhtml:link rel=”alternate” hreflang=”de” href=”https://www.example.com/de/” />
<xhtml:link rel=”alternate” hreflang=”fr” href=”https://www.example.com/fr/” />
</url>
<url>
<loc>https://www.example.com/about/</loc>
<xhtml:link rel=”alternate” hreflang=”en” href=”https://www.example.com/about/” />
<xhtml:link rel=”alternate” hreflang=”de” href=”https://www.example.com/de/about/” />
<xhtml:link rel=”alternate” hreflang=”fr” href=”https://www.example.com/fr/about/” />
</url>
I hope this has made the Hreflang tag a bit easier to understand.
If you want to learn more SEO quick wins, check out my free course:
Increase Your Search Traffic
In Just 28 Days…