What does a hreflang tag look like?

app ssiptv
1 Dec, 2021

What does a hreflang tag look like?




Hreflang tags use simple and consistent syntax:



Here’s what each part of that code means in plain English:


How to construct a hreflang tag

Constructing a hreflang tag is as simple as looking up the code for your chosen language and filling in the tag. Hreflang supports any two-letter ISO 639–1 language code.

Example:

Say that we wanted to add a hreflang tag from the English version of our blog post about free keyword tools to the German version. This is the hreflang tag we’d end up with:



All we did was fill in the language code (de for Germany) and URL.

While it’s fine to specify a language and leave it there, hreflang tags also support the addition of a region or country. 

This is also a two-letter code, but this time it’s in the ISO 3166–1 alpha‑2 format (full list).

You only need to add this when you wish to target speakers of a particular language in a particular locale. 

For example:

English speakers in the UK: 


English speakers in the US: 



The basics of hreflang implementation

Hreflang tags are reasonably simple to implement, and we’ll discuss three methods for doing that in a moment. 

But no matter which method you opt for, there are three golden rules that you must remember at all times.

Rule #1: Hreflang tags are bidirectional

It’s critical to understand that hreflang tags work in pairs. 

In other words, if you add a hreflang tag to an English page pointing to the Italian variant, then the Italian variant must return the favor with a hreflang tag pointing to the English page.

This proves to search engines that you have control over both pages, and that they’re each in agreement about their relationship to one another.

It’s similar to setting a relationship status on Facebook. 

You could easily declare yourself as in a relationship with Jennifer Aniston or Brad Pitt, but unless they do the same, nobody is going to believe you.

As such, when the tags are broken, or the relationship hasn’t been fully established yet, you may see the wrong page, multiple pages, or the wrong title for the right URL shown in the search results.

Rule #2 self-referential hreflang attributes are good practice:

Google states that “each language version must list itself as well as all other language versions.” 

In plain English, that means that every page should have a self-referential hreflang tag—i.e., one that points back to itself.

So, if we want to add a hreflang tags between an English page:

(https://example.com/hello) and an Italian page (https://example.com/ciao), each should have the following hreflang tags:

The first specifies the URL of the alternate Italian version of the page, and the second is a self-referencing tag that points back to the page itself.

The Italian page would also need both of these hreflang tags.

SIDENOTE. Google’s John Mueller did recently say that “self referential hreflang is optional— but good practice.”

This is at odds with Google’s official recommendation on the matter. 

So our advice is to use them. 

Rule #3: X‑default tags are recommended, but not mandatory

The hreflang x‑default tag specifies the default or fallback page that gets shown to users when no other language variant is appropriate. 

You don’t have to use them, but Google recommends that you do. 

This is what one looks like:


How to implement hreflang tags

There are three ways to implement the hreflang attribute:

  1. HTML tags
  2. HTTP headers
  3. Sitemaps

1. Implementing hreflang tags using HTML

If you’re new to hreflang, then using basic HTML tags is probably the easiest and quickest way to implement. 

All you need to do is add any appropriate hreflang tags (as discussed above) in the <head> tag of your web page.

Example:

recently launched the Ahrefs blog in several different languages, including German, Russian, Chinese, and Spanish. We’re now slowly translating English versions of the posts on our main blog into these languages. 

One of the posts we’ve already translated into both Chinese and German is our list of the best free keyword research tools.

Here are the URLs for all three variants:



To implement hreflang tags correctly for this setup, we’d add this code to the <head> section of each of our pages:




The issue with this method is that it gets pretty time-consuming and messy very easily.

Case in point, if we were to also translate our list of free keyword research tools into Spanish, then we’d have to go back and add another hreflang tag to all other variations of that page.

There are no limits to the number of hreflang tags you can have on a page.

2. Implementing hreflang HTTP headers
For non-HTML pages such as PDFs, it’s not possible to implement hreflang by placing tags in the <head> of the HTML. 
Reason being, there is no HTML. 
In such cases, you can use HTTP headers to specify the relative language of document variants. 
This method also works fine with normal webpages but is more commonly used with other content types.

Example:
Imagine that we convert each version (English, Spanish, German) of our free keyword research tools post to PDF.

Here’s what the HTTP header should look like for each of those files:




3. Implementing hreflang in your XML sitemap

Sitemaps can include relevant markup to specify the hreflang of a page and its variants. 
For this, you can use the xhtml:link attribute.

Example:
If we run with our original example (the three HTML variants of our list of free keyword tools), then this is the full markup for our sitemap:



This may look like the least efficient and most nightmarish way to implement hreflang attributes, but often the opposite is true. 
Reason being, everything is defined in a single file. 
There’s no need to edit multiple HTML documents each time you make a slight change or delete a page.

What’s more, the additional overhead in headers and the added code in HTML means that a large number of hreflang tags can have an impact on your site speed whereas implementing through your sitemap does not cause the same slowdown.

SIDENOTE:
Hreflang tags are processed at the time of crawl no matter how they are implemented. 
Putting the tags in the sitemap does not mean they are processed when the sitemap is updated.
Next Post Previous Post
No Comment
Add Comment
comment url