If you have a website available in multiple languages, it is important to understand the hreflang tag and know how to use it.
Although hreflang is a simple HTML tag, in reality it is one of the most complex SEO
What Is Hreflang?
Hreflang is an HTML attribute that allows you to specify to search engines the language and geographic targeting of a page.
So, if you have a page available in multiple languages — that is, a multilingual
Why Is Hreflang Important for SEO?
Hreflang allows you to give Google precise information about the language targeting of a main page for different languages. This aids its understanding. It improves the search results provided to users based on their geolocation.
Moreover, hreflang tags can also have a direct impact on rankings, as pages in an hreflang cluster share each other’s ranking signals.
SEO TIP: if you have a multilingual site, use folders to specify your alternative languages, like this: site.com/en/page. Rather than a subdomain en.site.com/page/, unfortunately Google detects a different domain, so you lose the authority (backlinks) from your site’s domain. Also, do not use: blog.site.com but site.com/blog/.
What Does an Hreflang Tag Look Like?
Here in code is what an hreflang tag looks like:
Here is what each part of this code means in plain language:
link rel=”alternate”: The link in this tag is an alternative version of this page.
hreflang=”en”: It is alternative because it is in a different language, and that language is en.
href=”https://example.com/en/page/”: the alternative page is located at this URL.
The complete list of “639-1 codes” is available here: https://fr.wikipedia.org/wiki/Liste_des_codes_ISO_639-1
Regional & Country Targeting
Hreflang tags also take countries and regions into account, as well as language.
For example, if you are targeting the UK and the US, the same language is spoken in both countries, but with a few variations. On the other hand, the currencies differ (£ / $).
This time, the format is ISO 3166–1 alpha‑2. (https://fr.wikipedia.org/wiki/ISO_3166-1_alpha-2 or in English, the wiki is better informed: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)
In HTML, here is what it looks like:
UK: <link rel=”alternate” hreflang=”en-gb” href=”https://example.com/uk/hello” />
Which gives: language, followed by country. hreflang=“language-country”
While this can generally introduce duplicate content, it is nevertheless important to implement it to help Google understand that users need a different page if it is a product page with a different currency.
This also matters for countries that speak multiple languages. For example, our Canadian friends have the same currency but speak English and French (Quebec primarily), which gives:
hreflang=”fr-ca” / hreflang=”en-ca”
Hreflang Basics
Let us look at the basics of hreflang:
Bidirectional: a French page proposes an alternative English page; the English page also sends the alternative of the French page. Etc.
Self-referential: every page must have a self-referential hreflang tag. If you use alternatives, the page itself must self-reference with its language and URL.
Indicate the default version with x-default: <link rel=”alternate” hreflang=”x-default” href=”https://example.com/” />
The canonical tag URL must be equal to the URL specified in the hreflang tag
Use absolute and not relative URLs (“https://site.fr/page-1/” is better than specifying only the path: “/page-1/”)
Do not use hreflang with HTML + HTTP header + Sitemap simultaneously
How to Implement Hreflang?
There are three ways to implement hreflang:
HTML tags
HTTP headers
Sitemaps
You can also generate hreflang attributes with this tool: Hreflang attribute generator (https://www.aleydasolis.com/english/international-seo-tools/hreflang-tags-generator/)
Hreflang in the HTML <head>
Using the <head> of HTML pages is the simplest and fastest way to implement a multilingual site.
<head>
Hreflang on WordPress
If you want to add hreflang tags on WordPress and do not know how to modify the head of your child theme, it is possible to install a plugin such as WPML for WordPress Multilingual, one of the best-known.
HTTP Header
If you want to offer different language alternatives for resources that are not HTML pages — such as PDFs — place hreflang in the HTTP header in your .htaccess:
HTTP/1.1 200 OK
Sitemap
Generally the best method for large websites. Managing it via a sitemap is more complicated for small sites but easier for large ones.
<url>
Checking Your Hreflang Tags and Avoiding Errors
Check whether your hreflang attributes are correctly configured — to do so you can use tools such as Semrush or Ahrefs.
It is also possible to use these tools to avoid potential issues:
Hreflang tag generator by Aleyda Solis to generate or modify hreflang tagsHreflang tag testing tool by Merkle SEO to validate hreflang tags on a single page online
Even if these are tools suggested by Google, they are neither verified by Google nor edited by Google. Nevertheless, take care and perform a manual check.
Note: Watch out for special cases
If you do not specify the region, you could be mistaken about the language. For example, be: content in Belarusian regardless of the region (Google does not infer that it refers to Belgium). Whereas you should use:
fr-be: French for users in Belgium. nl-be: Dutch for users in Belgium.
