What Are Hreflang Tags?
Hreflang tags are HTML attributes used to specify the language you’re using on a web page, as well as to define geographical targeting for that page. Google can use this information to serve the appropriate version of the page to the user in case there are alternatives available.
Hreflang Sample Code
In its most basic form, a hreflang tag looks like this:
link rel=”alternate” href=”http://website.com” hreflang=”en-us” />
Most of the attributes in the code sample should already look familiar. Here’s a breakdown of what they mean:
link rel=“alternate”: The link specified in this tag is one of the alternate versions of the page.
href=”http://website.com”: The URL of the alternate page.
hreflang=”en-us”: Hreflang tag specifying that the page is alternate because of the language.
The link rel=“alternate” part of the code will always stay the same. It’s the URL and language codes in hreflang tags that change.
Why Use Hreflang Tags on Your Web Pages?
If you’ve gone through the trouble of translating your web pages to different languages, there’s no reason not to tell Google about it. The crawlers will find your alternate pages one way or the other, however, they might not understand the relationship between them. Using hreflang tags helps clear things up a bit for Google, but it also has some direct benefits.
The most important advantage is serving your users with content in their own language. Getting the right content and in the correct language to the right audience is the very definition of an outstanding user experience. It will reduce bounce rates and increase conversions, which is a substantial benefit in and of itself.
However, another reason to use hreflang tags is to avoid duplicate content. That’s not really an issue for pages that are translated from one language into the other, but it is a problem with regional variants. For example, pages in “en-us” and “en-gb” are different web pages, but their content is going to be almost identical. By pointing out to Google that these are two alternate versions of the same page, you’re letting it know of the relationship between the two and avoiding indexing issues.
However, you’ll often hear it said that hreflang tags are just signals and not directives. In other words, other factors may override the hreflang attribute and cause the wrong version of the page to rank higher. To alleviate that, ensure you’re localizing all the details, from using the correct currency to writing in the appropriate version of the English language (truck vs lorry in case of American and British English).
Hreflang Tag Rules
There are two rules you should never forget when writing hreflang tags:
- Hreflang tags are bidirectional. If you’re adding a hreflang tag into one of the pages to point to an alternate version of the page, then that other page should point back in the same manner.
- Hreflang tags are self-referential. Every web page that has alternate versions should also have a hreflang tag for itself.
We’ll demonstrate both of these rules in an example. Let’s say that you have a page in English and a version in Spanish. Both web pages should have something like this:
<link rel=”alternate” href=”http://website.com/es/article” hreflang=”es-es”
<link rel=”alternate” href=”http://website.com/en/article” hreflang=”en-gb”
They each refer to themselves, as well as to the other page pointing to them.
Implementing Hreflang Tags
It’s possible to implement the hreflang attribute in the HTML code of the page, in HTTP headers, or to include it in an XML sitemap. Only use one of these implementations.
HTML
Including the hreflang attribute in your HTML code is probably the easiest way to go. Just add the attribute in the <head> tag of the web page:
<link rel=”alternate” href=”https://website/en/article” hreflang=”en” />
<link rel=”alternate” href=”https://website/de/article” hreflang=”de” />
Don’t forget to add the same lines to the <head> tag of every alternate web page.
HTTP
When HTML is not available (e.g. in PDF files), you can use HTTP headers to specify languages of every document variant:
HTTP/1.1 200 OK
Content-Type: application/pdf
Link: <https://website/en/article>; rel=”alternate”;hreflang=”x-default”,
<https://https://website/en/article>; rel=”alternate”;hreflang=”en”,
<https://https://website/de/article>; rel=”alternate”;hreflang=”de”
XML Sitemap
XML sitemaps are, objectively speaking, the best place to include hreflang attributes because you get to define everything in a single file. You don’t have to repeat the process for every individual HTML <head> which also causes unnecessary clutter. A sitemap looks more complicated, but all you really have to do is use the xhtml:link attribute:
<url>
<loc>https://website/en/article</loc>
<xhtml:link rel=”alternate” href=”https://website/en/article” hreflang=”x-default” />
<xhtml:link rel=”alternate” href=”https://website/en/article” hreflang=”en” />
<xhtml:link rel=”alternate” href=”https://website/de/article” hreflang=”de” />
</url>
X-Default
The use of the x-default hreflang value is not mandatory, but it is recommended. X-default is the URL that Google will prioritize if it can’t find the right match for a user based on their IP and browser preferences. In our examples above, a user from Spain will be served a version of the web page that’s in English. A user from Germany, however, would get a page in their language.
X-default is also quite handy in case you let users choose their own language on the homepage. In that case, you could combine the hreflang=”x-default” with a URL pointing the user to the homepage.
Hreflang Tags and SEO
Hreflang tags don’t have any direct benefits for SEO. They can reduce bounce rates and increase the time users spend on the website while boosting conversions. However, your site is not going to rank much higher just because you included hreflang tags.
There is some proof to show that pages in a hreflang cluster do, in fact, share ranking signals. That would suggest that hreflang tags have the potential to improve SEO, even if it’s just by a small margin.