Implementing the hreflang tag isn’t as simple as you might think. Simply implementing the components of the hreflang tag between <head> and </head> does not make hreflang work well. Let’s take a look at (1) canonical links (2) self-links (3) return links (4) X-default links.
■ What is a canonical link?
A canonical link is responsible for designating the main page of the current page and notifying Google.
Even a single page can have multiple addresses, in which case the search engine will collect all the pages without distinction and say this. “Huh? There are multiple identical contents! I hate duplicate contents, so I have to lower the rankings.”
Improperly planting hreflang tags like this can negatively affect your ranking.
If the URL is duplicated, it is as follows:
index.php / main.html / presence of www / presence of https / presence of url parameter in search results, etc…
At this time, you can use a canonical link to tell Google like this. “Hey Google, take it easy. They are actually the same pages, and I only want this one page for the main URL, so you only need to include this one in the search results.”
Google’s detailed guide to standard links can be found at the following link:
https://support.google.com/webmasters/answer/139066?hl=en
■ Canonical Link in hreflang Tag
So how do you specify a canonical link for a multilingual page?
For multilingual pages, we need to index all pages. This is because english pages should be shown to English-speaking users, and Korean pages should be shown to users who speak Korean.
In other words, a canonical link on every page that will be implemented hreflang tags should be the page itself!
Canonical Link example:
<link rel=”canonical” href=”https://example.com/ko/pants” />
Self Link example:
<link rel=”alternate” href=”https://example.com/ko/pants” hreflang=”ko” />
■ Self link
Self-link literally means a link where a page named A points to A. Every page should be able to point to itself.
In the Self link example above, you can see that the “link rel” attribute is the same as the hreflang tag seen in the previous post, which is the same as ‘alternate’.
■ Return link
A return link is a link that points to a page configured in another language. English pages should point to Korean pages, and Korean pages should point to English pages, i.e. each other’s pages.
NOTE: If any link is missing from this structure, the hreflang tag will not work properly.
Assuming that you only run Korean and English pages, the tag example for the Korean page is as follows:
<link rel=”canonical” href=”https://example.com/ko/pants” />
<link rel=”alternate” href=”https://example.com/ko/pants” hreflang=”ko” />
<link rel=”alternate” href=”https://example.com/en/pants” hreflang=”en” />
A canonical link(first link), Self link (second link), and Return link (third link) for English page are as follows:
<link rel=”canonical” href=”https://example.com/en/pants” />
<link rel=”alternate” href=”https://example.com/en/pants” hreflang=”en” />
<link rel=”alternate” href=”https://example.com/ko/pants” hreflang=”ko” />
What if a German page is added? In this case, you can add a return link to the German page on Korean and English pages. A sample return link of German page is:
<link rel=”alternate” href=”https://example.com/de/pants” hreflang=”de” />
Of course, the German page should have a canonical link, a self link, and a return link to the Korean/English page.
■ X-default link
X-default is optional. For example, let’s say you only have English, Korean, and German pages. What if Japanese users try to access your site? Google will be confused about which page to show to Japanese users.
X-default link is set to “If a user who speaks a language not specified by me wants to access this site, please link to the following language page.”
The link to the English page as the X-default link looks like this.
<link rel=”alternate” href=”https://example.com/en/pants” hreflang=”x-default” />
Now if Japanes user will be directed to English page. In the next article, I’ll talk about how to implement a hreflang tag.