HtmlHow-ToBeginner · 3 min read

How to Add Canonical Tag in HTML for SEO Best Practices

Add a <link rel="canonical" href="URL" /> tag inside the <head> section of your HTML page. This tag tells search engines which URL is the preferred version to index, helping avoid duplicate content problems.

📐

Syntax

The canonical tag uses the <link> element with rel="canonical" and an href attribute pointing to the preferred URL.

<link>: HTML element to link external resources or metadata.
rel="canonical": Specifies the relationship as canonical, meaning the preferred URL.
href="URL": The full URL of the preferred page version.

html

<link rel="canonical" href="https://example.com/preferred-page">

💻

Example

This example shows a simple HTML page with a canonical tag in the <head>. It tells search engines that the preferred URL for this page is https://example.com/preferred-page.

html

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

Output

A webpage titled 'Sample Page' with a heading 'Welcome to the Sample Page' and a paragraph explaining the canonical tag.

⚠️

Common Pitfalls

Common mistakes when adding canonical tags include:

Using a relative URL instead of a full absolute URL in the href.
Pointing the canonical tag to a different domain unintentionally.
Missing the canonical tag on duplicate pages, causing SEO issues.
Adding multiple canonical tags on the same page, which confuses search engines.

Always use the full URL starting with https:// or http:// and only one canonical tag per page.

html

<!-- Wrong: relative URL -->
<link rel="canonical" href="/page">

<!-- Right: absolute URL -->
<link rel="canonical" href="https://example.com/page">

📊

Quick Reference

Remember these tips when using canonical tags:

Place the canonical tag inside the <head> section.
Use the full absolute URL in the href.
Use only one canonical tag per page.
Ensure the canonical URL is the preferred version you want search engines to index.

✅

Key Takeaways

Add the canonical tag inside the section using .

Always use the full absolute URL in the href attribute to avoid confusion.

Use only one canonical tag per page to clearly indicate the preferred URL.

Canonical tags help prevent duplicate content issues and improve SEO.

Check that the canonical URL matches the page you want search engines to index.