Basic Concept of TDK
In SEO (Search Engine Optimization), TDK refers to Title, Description, and Keywords, which are three important elements of a webpage used to optimize its ranking and search visibility.
Among these attributes, the title and description will be displayed on the SERP (Search Engine Results Page), serving as the primary information for users. Keywords are important metrics that search engines consider, although their role in ranking has diminished over time, search engines now focusing more on content quality and relevance.
<title>Title</title>
<meta name="description" content="Description...">
<meta name="keyword" content="keyword1, keyword2, keyword3">
Search engines will promote pages in relevant locales for users. For example, searching for Facebook in the U.S. and Hong Kong may lead to different results.
Therefore, you need to prepare different TDKs for different locales to improve your SERP ranking.
Canonical Tag
Different websites may follow varying routing conventions, which can confuse search engines. This could result in the same content being accessed through different URLs.
For example, YouTube uses query parameters to distinguish between videos, so the following URLs point to different pages:
Other sites might use the path to differentiate content, meaning the following two URLs correspond to the same page:
Adding a canonical link tag can solve the problem:
<link rel="canonical" href="https://www.youtube.com/watch?v=ccEpTTZW34g">
The href acts like a unique identifier for the page, meaning that all pages with the same ID are treated as presenting the same content.
I18n for SEO
There are several techniques to determine a user’s preferred locale and display the corresponding content. For example, you can use the Accept-Language header or query an IP database to determine the user's region.
To display the same content in different locales, you can either share a single URL or use a URL with locale-specific variations. If you choose the locale-specific url, you need to make additional efforts for search engines. While it can be time-consuming to update your website and wait for the search engine to reflect the changes, here are some methods to help with this process. Typically, you only need to implement one of them.
HTML Tags (Recommended)
You can add an alternate tag in the head section to specify different versions of the page.
<link rel="alternate" hreflang="lang_code" href="url_of_page" />
For details on lang_code, please refer to this article:
Learn how you can use a sitemap and other methods to tell Google about all of the different language and regional versions of your pages.
And here’s an working example:
<link rel="alternate" hreflang="zh-Hans" href="https://example.com/zh/">
<link rel="alternate" hreflang="en" href="https://example.com/en/">
<link rel="alternate" hreflang="x-default" href="https://example.com" />
HTTP Headers
Another method is to use HTTP headers, which is useful for non-HTML content, like documents or PDF files. In a Node.js environment, you can implement this as follows:
const pathname = request.pathname;
response.header.set(
'Link',
[
`<https://example.com/en${pathname}>; rel="alternate"; hreflang="en"`,
`<https://example.com/zh${pathname}>; rel="alternate"; hreflang="zh-Hans"`,
`<https://example.com${pathname}>; rel="alternate"; hreflang="x-default"`,
].join(','),
);
A working example might look like this:
link: <https://example.com/en/>; rel="alternate"; hreflang="en",<https://example.com/zh/>; rel="alternate"; hreflang="zh-Hans"
Sitemap
When supporting i18n in a sitemap, pay special attention to the xmlns and xmlns:xhtml parts. Do not try to modify the HTTP protocol or pathname; leave it as is.
A working example:
<?xml version="1.0" encoding="UTF-8"?>
<urlset
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml"
>
<url>
<loc>https://example.com/</loc>
<xhtml:link rel="alternate" hreflang="zh-Hans" href="https://example.com/zh/" />
<xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/" />
<lastmod>2024-01-01T10:00:00+00:00</lastmod>
<priority>1.00</priority>
</url>
<!-- add more urls here -->
</urlset>
If you want to learn more about how this works, you can follow the guide below:
Learn how you can use a sitemap and other methods to tell Google about all of the different language and regional versions of your pages.