So far, we’ve talked about hreflang tag and its four essential links: canonical link, self link, return link, and x-default link. Now let’s talk about how to actually implement it on the site.
■ Method 1: HTML <head>
The most basic implementation method is to add hreflang tag into socalled ‘meta tags’ on each page. Check your site’s HTML <head> and If you are using a WordPress, plugins like polylang and WPML can help you run a global site. Those plugins make it easy to translate and install the hreflang tag. If you think such plugin is a bit heavy(slows down your site), then check out this plugin as well: preflang tags lite.
If you run an independent site, you can insert the appropriate hreflang tag into the individual page meta-information. You can also ask the developer to insert, and/or if you use Google Tag Manager (GTM), you can insert it by yourself. I’ll make a detailed post about it in another post.
When operating only Korean and English pages, here is the example meta tag for the Korean page (The x-default site is in English.): If you are unfamiliar with these terms, please see the previous article.
<head>
<title>Korean Page Title in Korean(한국어 페이지 제목)</title>
<meta name=”description” content=”describe your pages in Korean(한국어 페이지에 대한 설명을 써주세요.)”>
<link rel=”canonical” href=”https://example.com/ko”>
<link rel=”alternate” href=”https://example.com/ko” hreflang=”ko”>
<link rel=”alternate” href=”https://example.com/en” hreflang=”en”>
<link rel=”alternate” href=”https://example.com/en” hreflang=”x-default”>
</head>
The advantage of inserting multilingual-related information into meta-information is that it is easy to implement. It is also easy to maintain. You can just push F12 key on the page you want to check, and see whether the tags are implemented correctly inbetween <head> and </head>.
The downside to this method is that each page can easily get heavier. For example, if you have more than 30 languages, your visitors may need to load a link on your page, which will affect the speed of your site.
■ Method 2: XML sitemap
The second method is using an XML sitemap. An XML site map is a list of all URLs associated with your site. For small sites that don’t have many links, there are a number of sites that automatically generate XML sitemaps (it’s free!). If you are a WordPress user, you can use plugins like ALL in One SEO or YOAST SEO.
You can open the XML sitemap file and insert the hreflang tag under the URL where you want to add multilingual information.
There seems bit different. For example, there is no canonical link, and the hreflang and href order are reversed, and so on. Check the example of the XML sitemap below.
When operating only Korean and English pages, the example tags for the English page are as follows(The x-default site is in English.):
<url>
<loc>https://example.com/en/pants</loc>
<xhtml:link rel=”alternate” hreflang=”en” href=”example.com/en/pants” />
<xhtml:link rel=”alternate” hreflang=”ko” href=”example.com/ko/pants” />
<xhtml:link rel=”alternate” hreflang=”x-default” href=”example.com/en/pants” />
</url>
Using the above method, it is easy to manage large sites with many links. Instead of using meta information for every page, you only need to create a hreflang once in the XML sitemap. In addition, there is no burden on page’s capacity.
However, it takes time to create one, and because the XML sitemap exists outside the page, debugging is not as simple as method 1.
■ Method 3: HTTP Header
You can also inject hreflang tags via HTTP headers. HTTP headers are the mechanism for requesting and responding to HTTP. This means that when Google requests a site, the site sends a link in the HTTP header and also sends the hreflang information.
Examples of HTTP headers are as follows: Each sentence is separated by a semicolon (;). Also, each hreflang attribute is separated by a comma (,). The difference from the first method is that the order of the hreflang tags is different, and there is no canonical link.
Link: <https: example.com/en/pants/size-info.pdf>; rel=”alternate”; hreflang=”en”,
<https: example.com/ko/pants/size-info.pdf>; rel=”alternate”; hreflang=”ko”
HTTP headers are only used for non-HTML links, such as PDF or DOC documents. In terms of SEO, there’s absolutely no reason to index these links separately – let’s not use the above method by default.
■ Summary
| HTML | XML | HTTP |
|---|---|---|
| Easy installation/management | Exists outside the page (No burden on page capacity) | Available for non-HTML elements (PDF, etc.) |
| In most cases, USE this method! | Use for large sites | Do not use it… |
In summary, when operating a global site, let’s put multilingual information in HTML meta information. If your site offers more than 10 languages, use an XML site map.