Open In App

How To Add a Canonical Tag in HTML?

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

To add a canonical tag in HTML, you simply put a <link> element in the <head> section of your webpage. The canonical tag tells search engines which version of a page is the main one when there are multiple similar pages or duplicates. This helps improve your website's SEO by making it clear which page should be prioritized in search results, preventing issues from duplicate content.

Adding a Canonical Tag to the <head> Section

The simplest way to add a canonical tag is by including a <link> element with the rel="canonical" attribute in the <head> section of your HTML. The href attribute should point to the preferred URL.

Syntax

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

Example: Adding a canonical tag in the <head> section of an HTML document.

HTML 
<html>

    <head>
        <link rel="canonical" href="https://write.geeksforgeeks.org/posts-new">
    </head>

    <body>
        <h3>GeeksforGeeks</h3>
        <p>
            This example shows how to
            add a canonical tag in the HTML document.
        </p>
    </body>

</html>

Output

canonical-tag-html
Add a Canonical Tag in HTML

Alternative Approaches To Add Canonical Tag in HTML

Table of Content

Using Canonical Tags for Multiple Similar URLs

When you have multiple pages with similar or duplicate content, use the canonical tag to point all of them to a single preferred version. Add a canonical tag to each duplicate page. Set the href attribute to the URL of the main page.

Syntax

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

Example: Multiple pages pointing to a single canonical URL.

HTML 
<html>

<head>
    <link rel="canonical" 
          href="https://www.geeksforgeeks.com/main-page">
</head>

<body>
    <h3>GeeksforGeeks</h3>
    <p>
      	This page is similar to the 
      	main page but includes a canonical 
      	tag to avoid duplicate content issues.
  	</p>
</body>

</html>

Output

canonical-tag-main
Add a Canonical Tag in HTML

Dynamically Setting the Canonical Tag with JavaScript

You can also use JavaScript to set the canonical tag dynamically, which can be useful for web applications where content changes based on user interaction or URL parameters.

Use JavaScript to create a new <link> element. Set the rel attribute to "canonical" and the href to the preferred URL.

Syntax

var link = document.createElement('link');
link.rel = 'canonical';
link.href = 'https://www.example.com/preferred-page';
document.head.appendChild(link);

Example: Dynamically adding a canonical tag using JavaScript.

HTML 
<body>
    <h3>GeeksforGeeks</h3>
    <p>
        This example shows how to dynamically
        add a canonical tag using JavaScript.
    </p>

    <script>
        var link = document.createElement('link');
        link.rel = 'canonical';
        link.href = 'https://www.geeksforgeeks.com/preferred-page';
        document.head.appendChild(link);
    </script>
</body>

Output

dynamic-canonical
Add a Canonical Tag in HTML

Next Article
HTML Introduction

P
pankaj2025
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox