<link rel="canonical"> / hreflang

link rel="canonical" tells search engines the canonical URL when duplicate content exists. hreflang is used to inform search engines about the relationship between pages targeting different languages or regions.

Syntax

<!-- Specify the canonical URL (place inside <head>) -->
<link rel="canonical" href="https://example.com/page/">

<!-- hreflang: specify the relationship between Japanese and English pages -->
<link rel="alternate" hreflang="en" href="https://example.com/ja/page/">
<link rel="alternate" hreflang="en" href="https://example.com/en/page/">
<!-- Default for users who don't match any language -->
<link rel="alternate" hreflang="x-default" href="https://example.com/page/">

Attributes

Attribute / Value	Description
rel="canonical"	Specifies the canonical URL for this page. When multiple duplicate URLs exist, this tells search engines which URL is the authoritative one.
rel="alternate"	Used together with `hreflang` to specify an alternate page targeting a different language or region.
hreflang	Specifies the language (and optionally the region) of the target page. Language codes follow ISO standards (e.g., `ja`, `en`, `zh-TW`).
hreflang="x-default"	Specifies the default page to show when no language tag matches the user.
href	Specifies the canonical URL or the URL of the alternate page. Always use an absolute URL.

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <!-- Specify the canonical URL (normalizes pages with URL parameters) -->
  <link rel="canonical" href="https://example.com/articles/html-basics/">

  <!-- hreflang: specify Japanese, English, and Traditional Chinese versions -->
  <link rel="alternate" hreflang="en"
        href="https://example.com/ja/articles/html-basics/">
  <link rel="alternate" hreflang="en"
        href="https://example.com/en/articles/html-basics/">
  <link rel="alternate" hreflang="zh-TW"
        href="https://example.com/zh-tw/articles/html-basics/">
  <!-- Default URL (used when the user's language cannot be determined) -->
  <link rel="alternate" hreflang="x-default"
        href="https://example.com/articles/html-basics/">

  <title>HTML Basics | Easy Programming</title>
</head>
<body>
  <h1>HTML Basics</h1>
</body>
</html>

Result

There is no visible change in the browser, but when the Googlebot visits the page, it reads the canonical and hreflang information and reflects it in the search index.

<!-- How Google interprets the information -->
This page has multiple URLs, but:
Canonical URL → https://example.com/articles/html-basics/

Japanese users  → show /ja/articles/html-basics/
English users   → show /en/articles/html-basics/
Taiwanese users → show /zh-tw/articles/html-basics/
All others      → show /articles/html-basics/ (x-default)

Notes

link rel="canonical" is used to consolidate duplicate URLs. When the same content is accessible via multiple URLs — such as those with query parameters like ?sort=date, with or without www, or mixing http and https — search engines cannot determine which URL is the original and may split ranking signals across them. By specifying canonical, you explicitly declare "this is the authoritative version," consolidating search ranking signals to the canonical URL. Always specify an absolute URL for canonical. Relative URLs are not recommended.

hreflang is a configuration for multilingual and multi-regional sites. When Japanese, English, and Chinese versions of the same topic exist, each page must include hreflang annotations pointing to all language versions. One-way hreflang (only on one page) does not work correctly, so all language versions must reference each other — bidirectional annotation is required.

canonical and hreflang are independent settings, but they are commonly used together on multilingual sites. The canonical on each language version should point to that version's own URL, while hreflang indicates the relationships between language versions. Consistency with OGP URLs is also important — it is recommended to specify the canonical URL in og:url as well (see 『meta name="description" / OGP』 for details).

If you find any errors or copyright issues, please contact us.

Home