Imagine you have a page accessible at three different URLs — with and without "www", with and without "index.html", or with different query parameters. Search engines might treat these as separate pages and split your ranking power between them. A canonical URL tells search engines: "this is the one true URL for this content."
The Canonical Link Tag
The <link rel="canonical"> tag goes in the <head> of your page and points to the preferred URL. Search engines will index the canonical version and attribute all ranking signals — like backlinks — to that URL instead of spreading them across duplicates.
<head>
<link rel="canonical" href="https://example.com/learn-html">
</head>
When You Need a Canonical URL
You need canonical URLs when the same content is accessible at multiple URLs. This happens with trailing slashes, www vs non-www, HTTP vs HTTPS, www vs non-www, query parameters for sorting or filtering, and printer-friendly versions of pages.
<!-- These might all serve the same content -->
<!-- https://example.com/learn-html -->
<!-- https://example.com/learn-html/ -->
<!-- https://www.example.com/learn-html -->
<!-- http://example.com/learn-html -->
<!-- Pick one as canonical -->
<link rel="canonical" href="https://www.example.com/learn-html">
Self-Referencing Canonical
Even if you do not have duplicate content issues, it is a best practice to add a canonical tag that points to the current page itself. This is called a self-referencing canonical. It protects you against URL parameter variations and ensures the correct URL is always indexed.
<!-- On the page at https://example.com/courses/html -->
<link rel="canonical" href="https://example.com/courses/html">
Canonical vs Redirects
Canonical tags and redirects serve different purposes. Use a redirect (301) when one URL should permanently replace another. Use a canonical tag when both URLs need to be accessible but you want search engines to focus on one. They can also work together — redirect when you can, canonical when you must keep both URLs live.
<!-- If example.com redirects to www.example.com, add canonical too -->
<link rel="canonical" href="https://www.example.com/learn-html">
<!-- For paginated content, canonical points to the first page or itself -->
<link rel="canonical" href="https://example.com/articles?page=2">