[a-blog cms/Multi-language site] How to tell Google about localized pages
Wrap up of this article
When you have a site with pages in multiple languages, or even in the same language but with different content for different regions, you can use HTML link tags to tell Google about it.
This article will show you how to do this.
Also, at the end of the article, I will show an example code for a-blog cms.
Benefits of telling Google about localized pages
Google will be able to display appropriate pages according to the attributes of the search user, which will be more convenient for the user. It would also prevent opportunity loss in searches.
If you have multiple versions of a page for different languages or regions, tell Google about these different variations. Doing so will help Google Search point users to the most > appropriate version of your page by language or region.
Note that even without taking action, Google might still find alternate language versions of your page, but it is usually best for you to explicitly indicate your language- or > region-specific pages.
Source: Localized Versions of your Pages | Google Search Central | Documentation | Google for Developers
Three methods to implement
There are three ways to deal with this.
- HTML
- HTTP Headers
- Sitemap
This article explains the HTML method.
Note that Google does not determine the language of a site by the value of the lang attribute of the html tag.
Google uses the visible content of your page to determine its language. We don't use any code-level language information such as lang attributes, or the URL. You can help Google determine the language correctly by using a single language for content and navigation on each page, and by avoiding side-by-side translations.
How to use HTML link tags
This method uses the link tag.
The syntax is as follows
<link rel="alternate" hreflang="lang_code" href="url_of_page" />
For lang_code use the language code and country code, or just the language code, and for href specify the URL of the page.
For example, if you have pages for 4 regions, you would write as follows
<head>
<title>Widgets, Inc</title>
<link rel="alternate" hreflang="en-gb" href="https://en-gb.example.com/page.html" />
<link rel="alternate" hreflang="en-us" href="https://en-us.example.com/page.html" />
<link rel="alternate" hreflang="en" href="https://en.example.com/page.html" />
<link rel="alternate" hreflang="de" href="https://de.example.com/page.html" />
<link rel="alternate" hreflang="x-default" href="https://www.example.com/" />
</head>
The above example is in two languages, English and German. However, for English, it has different pages for the United Kingdom and the United States, as well as a generic English page.
There is a <link rel="alternate" hreflang="x-default" href="https://www.example.com/" /> statement at the end of the tag. This is the default page to which users are directed if any country or language does not match.
Note that you will also need a link tag for the page you are currently displaying.
In the above example, there are five pages for each country and language, and the same statement must be given for each of the five pages.
This is because the target pages must be linked to each other.
Next, let's consider an example of a dual-language site (Japanese and English).
In this case, the code could look like this
<link rel="alternate" hreflang="ja" href="https://example.com/page.html" />
<link rel="alternate" hreflang="en" href="https://example.com/en/page.html" />
<link rel="alternate" hreflang="x-default" href="https://example.com/en/page.html" />
If you simply want to deliver information in both Japanese and English, regardless of region, the hreflang should only include the language code.
And for those who do not belong to either Japanese or English, we assign an English page. This is due to reasons that English would have more users worldwide.
results of hreflang Tags Testing Tool
What language is to be used for the default page should be considered based on the purpose of the page.
Example code for a-blog cms
In a-blog cms, you can get the URL of the current page with a global variable %{CURRENT_URL}.
It would be relatively easy to implement if this could be manipulated with proofreading options, but proofreading options are not available for global variables.
Therefore, you need to get the current location with the touch module and create the tag by using a combination of global variables.
The following code is an example of a bilingual site (Japanese and English) using the aliasing feature.
The point is to enclose Touch_Category with Touch_Index for category pages.
If you have child blogs, you can use Touch_RootBlog or Touch_NotRootBlog.
<!-- BEGIN_IF [%{ALIAS_ID}/eq/1] -->
<!--
[English] For Homepage
-->
<!-- BEGIN_MODULE Touch_Top -->
<link rel="alternate" href="%{HTTP_ROOT}" hreflang="ja" />
<link rel="alternate" href="%{CURRENT_URL}" hreflang="en" />
<link rel="alternate" href="%{CURRENT_URL}" hreflang="x-default" />
<!-- END_MODULE Touch_Top -->
<!--
[English] For Category page
-->
<!-- BEGIN_MODULE Touch_Index -->
<!-- BEGIN_MODULE Touch_Category -->
<link rel="alternate" href="%{HTTP_ROOT}%{CCD}/" hreflang="ja" />
<link rel="alternate" href="%{CURRENT_URL}" hreflang="en" />
<link rel="alternate" href="%{CURRENT_URL}" hreflang="x-default" />
<!-- END_MODULE Touch_Category -->
<!-- END_MODULE Touch_Index -->
<!--
[English] For Entry page
-->
<!-- BEGIN_MODULE Touch_Entry -->
<link rel="alternate" href="%{HTTP_ROOT}%{CCD}/%{ECD}" hreflang="ja" />
<link rel="alternate" href="%{CURRENT_URL}" hreflang="en" />
<link rel="alternate" href="%{CURRENT_URL}" hreflang="x-default" />
<!-- END_MODULE Touch_Entry -->
<!-- ELSE -->
<!--
[Japanese] For Homepage
-->
<!-- BEGIN_MODULE Touch_Top -->
<link rel="alternate" href="%{CURRENT_URL}" hreflang="ja" />
<link rel="alternate" href="%{HTTP_ROOT}en/" hreflang="en" />
<link rel="alternate" href="%{HTTP_ROOT}en/" hreflang="x-default" />
<!-- END_MODULE Touch_Top -->
<!--
[Japanese] For Category page
-->
<!-- BEGIN_MODULE Touch_Index -->
<!-- BEGIN_MODULE Touch_Category -->
<link rel="alternate" href="%{CURRENT_URL}" hreflang="ja" />
<link rel="alternate" href="%{HTTP_ROOT}en/%{CCD}/" hreflang="en" />
<link rel="alternate" href="%{HTTP_ROOT}en/%{CCD}/" hreflang="x-default" />
<!-- END_MODULE Touch_Category -->
<!-- END_MODULE Touch_Index -->
<!--
[Japanese] For Entry page
-->
<!-- BEGIN_MODULE Touch_Entry -->
<link rel="alternate" href="%{CURRENT_URL}" hreflang="ja" />
<link rel="alternate" href="%{HTTP_ROOT}en/%{CCD}/%{ECD}" hreflang="en" />
<link rel="alternate" href="%{HTTP_ROOT}en/%{CCD}/%{ECD}" hreflang="x-default" />
<!-- END_MODULE Touch_Entry -->
<!-- END_IF -->
Google Help Page and Testing Tools
- Localized Versions of your Pages | Google Search Central | Documentation | Google for Developers
- Hreflang Tags Generator Tool by @aleyda
- hreflang Tags Testing Tool | TechnicalSEO.com
