<link rel="canonical"> / hreflang

Since:		HTML5(2014)

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="ja" 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

sample_link_canonical.html

<!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="ja"
        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>

View sample page

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.

View sample page

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).

Typical Scenarios That Require canonical

It is common for the same content to be reachable via multiple URLs. Review each pattern and its solution below.

Pattern	Problem	canonical to specify
URL with query parameters (?sort=date, ?page=1)	Sorting and pagination create multiple URLs for the same content	The URL without parameters
With/without www (www.example.com vs example.com)	Both URLs are accessible, splitting ranking signals	Pick one and stick with it
Mixed http and https	Both versions are reachable due to a missing redirect	The https version
Trailing slash vs. no slash	/page/ and /page both exist	Pick one and stick with it
Print or AMP versions	A different URL with the same content exists	The original page's URL

<!-- Example: product listing page with sorting and filtering on an e-commerce site -->
<!-- Current page URL: /products/?category=html&sort=price&page=2 -->
<head>
  <!-- canonical points to the URL without sort/page parameters -->
  <link rel="canonical" href="https://example.com/products/?category=html">
</head>

Complete hreflang Setup for Multilingual Sites

hreflang must be annotated bidirectionally on every page. For a site with Japanese, English, and Traditional Chinese, each page must list all three hreflang entries.

<!-- Japanese page (/en/html/) head -->
<head>
  <link rel="canonical" href="https://example.com/ja/html/">
  <link rel="alternate" hreflang="ja"      href="https://example.com/ja/html/">
  <link rel="alternate" hreflang="en"      href="https://example.com/en/html/">
  <link rel="alternate" hreflang="zh-TW"   href="https://example.com/zh-tw/html/">
  <link rel="alternate" hreflang="x-default" href="https://example.com/en/html/">
</head>

<!-- English page (/en/html/) head -->
<head>
  <link rel="canonical" href="https://example.com/en/html/">
  <link rel="alternate" hreflang="ja"      href="https://example.com/ja/html/">
  <link rel="alternate" hreflang="en"      href="https://example.com/en/html/">
  <link rel="alternate" hreflang="zh-TW"   href="https://example.com/zh-tw/html/">
  <link rel="alternate" hreflang="x-default" href="https://example.com/en/html/">
</head>

canonical points to the page's own URL in its language; hreflang must be annotated on every language version and must reference all other versions.

Common Mistakes

Mistake 1: Writing canonical with a relative URL

The href attribute of canonical must always be an absolute URL. Using a relative URL can lead to inconsistent interpretation by browsers and crawlers, causing canonicalization to fail.

<!-- NG: relative URL -->
<link rel="canonical" href="/articles/html-basics/?lang=en">

<!-- OK: absolute URL -->
<link rel="canonical" href="https://example.com/articles/html-basics/">

Mistake 2: Setting the same canonical URL on every page

Canonical is meant to declare "this is the authoritative URL for this page." Setting the same URL (e.g., the homepage) on every page would tell search engines that all pages are duplicates of the homepage, which prevents correct indexing. Each page should point canonical to its own URL.

<!-- NG: pointing all pages to the homepage -->
<link rel="canonical" href="https://example.com/">

<!-- OK: each page points to its own URL -->
<link rel="canonical" href="https://example.com/articles/html-basics/">

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

Home

HTML Dictionary