Thẻ hreflang là một thẻ siêu dữ liệu khai báo trên đầu của website giúp các công cụ tìm kiếm trích xuất dữ liệu theo đúng ngôn ngữ mà website đang viết, và nhờ vào việc khai báo ngôn ngữ này, Google có thể cho xếp hạng của website lên cao hơn tại các ngôn ngữ mà website hỗ trợ. Ngoài ra còn giúp Google hiển thị đề nghị dịch sang ngôn ngữ sở tại nếu website của bạn có ngôn ngữ khác với khách truy cập, thật tuyệt phải không nào ?
Khai báo và các kiểu khai báo
Thẻ hreflang có thể dùng nhiều lần để khai báo các version khác nhau của môt website với các ngôn ngữ khác nhau, tôi có thể lấy ví dụ thế này:
<link rel="alternate" href="example.com" hreflang="es-es" /> <link rel="alternate" href="example.com/fr/" hreflang="fr-fr" /> <link rel="alternate" href="example.com/pt/" hreflang="pt-pt" />
Trong một trường hợp khác, nếu các bạn không chia các vùng khác nhau trong URL nhưng lại hỗ trợ đa ngôn ngữ bằng việc phát hiện ngôn ngữ trình duyệt, các bạn cũng có thể khai báo thế này:
<link rel="alternate" href="example.com" hreflang="vn-vi" /> <link rel="alternate" href="example.com" hreflang="en" />
Trong trường hợp bạn không muốn chỉ định một ngôn ngữ nào nhưng lại muốn tiếp cận nhiều vùng theo mặc định của thiết bị, hãy thử code này:
<link rel="alternate" href="//example.com/" hreflang="x-default" />
Code trên giúp bạn không phải chỉ định bất kì vùng hay ngôn ngữ nào, đồng nghĩa với việc bạn sẽ phân phối website của mình tới nhiều đối tượng hơn.
Các bạn nếu muốn nhúng đúng mã vùng và ngôn ngữ hỗ trợ, hãy sử dụng tool sau để tạo nhé: //www.internationalseomap.com/hreflang-tags-generator/
Thẻ Hreflang có giúp gia tăng truy cập ?
Thẻ Hreflang dùng để khai báo vùng và ngôn ngữ được hỗ trợ, vì thế mà các máy tìm kiếm có thể phân phối kết quả tìm kiếm của mình tại đúng nơi có ngôn ngữ mà bạn muốn, và đồng nghĩa với việc rank của từ khóa có thể cao hơn trên vùng mà bạn chỉ định.
Ngoài ra cỗ máy dịch tự động sẽ giúp bạn một tay nếu người truy cập không nằm trong vùng ngôn ngữ chỉ định, tăng lượt truy cập cho website của bạn.
Nhúng vào Website
Để cài đặt thẻ này rất dễ, trước thẻ đóng các bạn thêm mã bên trên vào đó, trong trường hợp website của bạn là WordPress, hãy mở file header.php lên, tìm dòng có đóng thẻ và thêm vào bất kì vị trí nào bạn thích !
If you already have a good idea what hreflang tags do then skip to the “How Do You Fix The No Return Tags Issue?” section of this article.
If you would also like an overview of what hreflang is and why we use them, keep reading.
When you tailor your content to different regions such as the UK, CA and the US. Or when you use different languages such as English, French, and German.
You want to make sure that Google finds your content and shows it to the right customers.
This is where hreflang tags come in.
hreflang tags tell Google that the content is the same but written in another language or region.
Telling Google that you have content for a particular market such as the UK is smart. It improves search rankings for that page in the UK Google search results.
It also stops Google penalizing you for having the same content many times on your site.
Next, let’s look at what hreflang tags are.
hreflang tags contain two pieces of information.
The first is the language or region code.
The format should be language then region, for example:
- en-GB to show English for Great Britain
- en-US to show English for the United States
It is also possible to set a language only, for example:
- de to show German
-
<head> <link rel="alternate" hreflang="en" href="//example.com/en" /> <link rel="alternate" hreflang="fr" href="//example.com/fr" /> <link rel="alternate" hreflang="de" href="//example.com/de" /> <link rel="alternate" hreflang="x-default" href="//example.com/en" /> ... </head>
0 to show Dutch -
<head> <link rel="alternate" hreflang="en" href="//example.com/en" /> <link rel="alternate" hreflang="fr" href="//example.com/fr" /> <link rel="alternate" hreflang="de" href="//example.com/de" /> <link rel="alternate" hreflang="x-default" href="//example.com/en" /> ... </head>
1 to show French
You can then mix and match the languages and countries, for example:
-
<head> <link rel="alternate" hreflang="en" href="//example.com/en" /> <link rel="alternate" hreflang="fr" href="//example.com/fr" /> <link rel="alternate" hreflang="de" href="//example.com/de" /> <link rel="alternate" hreflang="x-default" href="//example.com/en" /> ... </head>
2 to show Dutch for Belgium -
<head> <link rel="alternate" hreflang="en" href="//example.com/en" /> <link rel="alternate" hreflang="fr" href="//example.com/fr" /> <link rel="alternate" hreflang="de" href="//example.com/de" /> <link rel="alternate" hreflang="x-default" href="//example.com/en" /> ... </head>
3 to show French for Belgium
The language or region code has to be in a specific format. A common error is when the language and region code is incorrect.
To help reduce the errors it can be useful to use an hreflang generator tool.
To recap you can have a language on its own or you can mix and match the language and region.
You cannot have a region on its own, this is not a valid hreflang and will cause an error.
Here is a full list of all the valid Language codes and the list of region codes.
When there is no matching language or region, Google will send users to the default language. You can define which page is the default language.
To do this we must set the language/region to <head> <link rel="alternate" hreflang="en" href="//example.com/en" /> <link rel="alternate" hreflang="fr" href="//example.com/fr" /> <link rel="alternate" hreflang="de" href="//example.com/de" /> <link rel="alternate" hreflang="x-default" href="//example.com/en" /> ... </head>
4.
The second piece of information on a hreflang is the page URL. This is the URL for the same content written in various languages.
Once you have these two pieces of information you are ready to set the tags.
How Do You Set Them?
There are three options to set hreflang tags:
- Add hreflang tags to the HTML
- Use HTTP headers
- Set them in the Sitemap
Let's go through each implementation.
Add hreflang tags to the HTML
We can link to all the alternative language pages using HTML.
Adding <head> <link rel="alternate" hreflang="en" href="//example.com/en" /> <link rel="alternate" hreflang="fr" href="//example.com/fr" /> <link rel="alternate" hreflang="de" href="//example.com/de" /> <link rel="alternate" hreflang="x-default" href="//example.com/en" /> ... </head>
5 tags to the <head> <link rel="alternate" hreflang="en" href="//example.com/en" /> <link rel="alternate" hreflang="fr" href="//example.com/fr" /> <link rel="alternate" hreflang="de" href="//example.com/de" /> <link rel="alternate" hreflang="x-default" href="//example.com/en" /> ... </head>
6 of the HTML will inform Google where the alternative content is.
The links are in this format: <link rel="alternate" hreflang="lang_code" href="url_of_page" />
Where <head> <link rel="alternate" hreflang="en" href="//example.com/en" /> <link rel="alternate" hreflang="fr" href="//example.com/fr" /> <link rel="alternate" hreflang="de" href="//example.com/de" /> <link rel="alternate" hreflang="x-default" href="//example.com/en" /> ... </head>
7 is the language/region and the <head> <link rel="alternate" hreflang="en" href="//example.com/en" /> <link rel="alternate" hreflang="fr" href="//example.com/fr" /> <link rel="alternate" hreflang="de" href="//example.com/de" /> <link rel="alternate" hreflang="x-default" href="//example.com/en" /> ... </head>
8 is the page URL.
For example, let's say we have an English version of our site at <head> <link rel="alternate" hreflang="en" href="//example.com/en" /> <link rel="alternate" hreflang="fr" href="//example.com/fr" /> <link rel="alternate" hreflang="de" href="//example.com/de" /> <link rel="alternate" hreflang="x-default" href="//example.com/en" /> ... </head>
9. We also have the same content in French and German the links on the page would look like this: <head> <link rel="alternate" hreflang="en" href="//example.com/en" /> <link rel="alternate" hreflang="fr" href="//example.com/fr" /> <link rel="alternate" hreflang="de" href="//example.com/de" /> <link rel="alternate" hreflang="x-default" href="//example.com/en" /> ... </head>
Here we have listed the alternate pages and we have set english to the default language.
You should also set the tags as high up in the head as possible, after the opening <head> <link rel="alternate" hreflang="en" href="//example.com/en" /> <link rel="alternate" hreflang="fr" href="//example.com/fr" /> <link rel="alternate" hreflang="de" href="//example.com/de" /> <link rel="alternate" hreflang="x-default" href="//example.com/en" /> ... </head>
6 tag. This is because you want to make sure that it is readable before any external file requests.
Next, let's look at how we can do the same with HTTP headers.
An alternative to setting them as HTML is to use HTTP headers. The content of the header is the same yet, it is not a part of the file but the request.
It is common to see HTTP headers used to return an alternate version of a PDF. As PDFs are not HTML based we cannot use the method above.
This is the format of the header: Link: <url1>; rel="alternate"; hreflang="lang_code_1", <url2>; rel="alternate"; hreflang="lang_code_2", ...
In the above, we would replace the Link: <url1>; rel="alternate"; hreflang="lang_code_1", <url2>; rel="alternate"; hreflang="lang_code_2", ...
1 with that of the alternate page, for the various PDFs.
For example a request to Link: <url1>; rel="alternate"; hreflang="lang_code_1", <url2>; rel="alternate"; hreflang="lang_code_2", ...
2 would look like this: Link: <//example.com/en/file.pdf>; hreflang="en" rel="alternate";, <//example.com/fr/file.pdf>; hreflang="fr" rel="alternate";, <//example.com/de/file.pdf>; hreflang="de" rel="alternate";, <//example.com/en/file.pdf>; hreflang="x-default rel="alternate";"
Again, we have set the matching language code.
Next, we will look at setting these using the sitemap.
Set them in the Sitemap
Our last option is to use the sitemap.
This allows us to specify in the XML any alternate pages we may have.
On some sites, it can be easier to maintain the hreflang tags in one place. The sitemap gives us a single file to manage all the alternatives rather than in each of the HTML files.
To do this we must follow the following rules:
- The sitemap must start with
Link: <url1>; rel="alternate"; hreflang="lang_code_1", <url2>; rel="alternate"; hreflang="lang_code_2", ...
3 - Each URL is then added with the
Link: <url1>; rel="alternate"; hreflang="lang_code_1", <url2>; rel="alternate"; hreflang="lang_code_2", ...
4 element - Inside the
Link: <url1>; rel="alternate"; hreflang="lang_code_1", <url2>; rel="alternate"; hreflang="lang_code_2", ...
4 add a
Link: <url1>; rel="alternate"; hreflang="lang_code_1", <url2>; rel="alternate"; hreflang="lang_code_2", ...
6 element with links to the page URL. - Underneath the
Link: <url1>; rel="alternate"; hreflang="lang_code_1", <url2>; rel="alternate"; hreflang="lang_code_2", ...
6 element we can then list all the alternate pages using the
Link: <url1>; rel="alternate"; hreflang="lang_code_1", <url2>; rel="alternate"; hreflang="lang_code_2", ...
8 element. This should also link to itself.
Using the example above for <head> <link rel="alternate" hreflang="en" href="//example.com/en" /> <link rel="alternate" hreflang="fr" href="//example.com/fr" /> <link rel="alternate" hreflang="de" href="//example.com/de" /> <link rel="alternate" hreflang="x-default" href="//example.com/en" /> ... </head>
9 we would need to create a sitemap which looks like this: <?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="//www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="//www.w3.org/1999/xhtml"> <url> <loc>//example.com/en</loc> <xhtml:link rel="alternate" hreflang="de" href="//www.example.com/de"/> <xhtml:link rel="alternate" hreflang="fr" href="//www.example.com/fr"/> <xhtml:link rel="alternate" hreflang="en" href="//example.com/en"/> </url> <url> <loc>//www.example.com/de</loc> <xhtml:link rel="alternate" hreflang="de" href="//www.example.com/de"/> <xhtml:link rel="alternate" hreflang="fr" href="//www.example.com/fr"/> <xhtml:link rel="alternate" hreflang="en" href="//www.example.com/en"/> </url> <url> <loc>//www.example.com/fr</loc> <xhtml:link rel="alternate" hreflang="de" href="//www.example.com/de"/> <xhtml:link rel="alternate" hreflang="fr" href="//www.example.com/fr"/> <xhtml:link rel="alternate" hreflang="en" href="//www.example.com/en"/> </url> </urlset>
Now we know how we should be setting up these tags let's look at the “no return tags” issue.
In the Google Search Console click on the legacy tools. Then click the “International Targeting” link.
You will see a list of all the HREFLang errors, something like this:
In the above image, you can see that there are a few “no return tags” errors.
To see what page is at fault click on one of the errors.
This will give you a list of pages with this error.
Content that is the same but written in different languages must have the same hreflang links.
The “no return tags” error means that one or more of the pages is missing the identical hreflang links.
Let's look at an example using the HTML tags.
Here the English page found at <head> <link rel="alternate" hreflang="en" href="//example.com/en" /> <link rel="alternate" hreflang="fr" href="//example.com/fr" /> <link rel="alternate" hreflang="de" href="//example.com/de" /> <link rel="alternate" hreflang="x-default" href="//example.com/en" /> ... </head>
9 has set the following tags: <head> <link rel="alternate" hreflang="en" href="//example.com/en" /> <link rel="alternate" hreflang="fr" href="//example.com/fr" /> <link rel="alternate" hreflang="de" href="//example.com/de" /> <link rel="alternate" hreflang="x-default" href="//example.com/en" /> ... </head>
Yet, when we inspect the HTML for the French page Link: <//example.com/en/file.pdf>; hreflang="en" rel="alternate";, <//example.com/fr/file.pdf>; hreflang="fr" rel="alternate";, <//example.com/de/file.pdf>; hreflang="de" rel="alternate";, <//example.com/en/file.pdf>; hreflang="x-default rel="alternate";"
1 we find the following tags: <head> <link rel="alternate" hreflang="fr" href="//example.com/fr" /> <link rel="alternate" hreflang="de" href="//example.com/de" /> <link rel="alternate" hreflang="x-default" href="//example.com/en" /> ... </head>
We can see here that it is missing the English hreflang link.
And this is the cause of the “no return tags” error.
To fix this error you need to ensure that all pages have identical hreflang links.
Remember you may have to fix this in any of the following three locations:
- HTML Tags
- HTTP Headers
- Sitemap
To check that the new links are correct you can use a tool such as hreflang Ninja. When you give it your URL it will check that the links are working.