HtmlConceptBeginner · 3 min read

What is Canonical URL in HTML and How to Use It

A canonical URL in HTML is a way to tell search engines which version of a webpage is the main or preferred one. It is set using a <link rel="canonical" href="URL"> tag in the page's <head> section to avoid duplicate content problems.

⚙️

How It Works

Imagine you have several copies of the same article on different web addresses. Search engines might get confused about which one to show in search results. The canonical URL acts like a signpost pointing to the main version of the page.

When you add a <link rel="canonical" href="URL"> tag in your HTML, you tell search engines, "This is the original page you should index and rank." This helps avoid splitting the page's ranking power across duplicates.

It works behind the scenes by guiding search engines to treat all duplicates as one, improving your site's SEO and user experience.

💻

Example

This example shows how to set a canonical URL in the HTML <head> section.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example Page</title>
  <link rel="canonical" href="https://www.example.com/main-article" />
</head>
<body>
  <h1>Welcome to the Example Page</h1>
  <p>This page has a canonical URL pointing to the main article.</p>
</body>
</html>

Output

A webpage titled "Example Page" with a heading and paragraph. Search engines see the canonical URL as https://www.example.com/main-article.

🎯

When to Use

Use canonical URLs when you have multiple pages with very similar or duplicate content. For example:

Different URLs showing the same product or article (e.g., with tracking parameters).
Printer-friendly versions of pages.
Pages accessible via multiple paths or sorting options.

Setting a canonical URL helps search engines know which page to rank, preventing SEO penalties for duplicate content and improving your site's search visibility.

✅

Key Points

The canonical URL is set with a <link rel="canonical" href="URL"> tag in the HTML <head>.
It tells search engines the preferred version of a page.
Helps avoid duplicate content issues and improves SEO.
Always use absolute URLs in the canonical tag.
Only one canonical tag should be used per page.

✅

Key Takeaways

Use the rel="canonical" link tag to specify the main URL of a page.

Canonical URLs prevent duplicate content problems in search engines.

Always use full absolute URLs in the canonical tag.

Only one canonical URL should be declared per page.

Canonical tags improve SEO by consolidating page ranking signals.