How to get canonical URL using JavaScript or jQuery


This article will help you to obtain the website canonical URL set in the head section. Canonical URL helps the search engines that certain similar URLs are actually one and the same. This solves the duplicate content problem where search engines don’t know which version of the content to show.

In this example, I have used some JavaScrip and jQuery code to obtain it.

Using jQuery

By using jQuery library you can obtain the website canonical URL in a single line of code via attr() method.

jquery-can-url.html
<html>
    <head>
        <title>How to get canonical URL using JavaScript or jQuery</title>
        <link rel="canonical" href="https://websparrow.org/web/how-to-get-canonical-url-using-javascript-or-jquery" />
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("button").click(function () {
                    var canUrl = $("link[rel='canonical']").attr("href");
                    if (canUrl !== "") {
                        $("#canUrlValue").html(canUrl);
                    } else {
                        $("#canUrlValue").html("Error: Unable to obtain URL");
                    }
                });
            });
        </script>
    </head>
    <body>
        <h1>How to get canonical URL using JavaScript or jQuery</h1>
        <button type="button">Click me</button>
        <p>Hello, your website Canonical URL is : <span id="canUrlValue"></span></p>
    </body>
</html>

Using JavaScript

Modern Way 

It can be also obtained by using JavaScript querySelector() method. This method only supported by the modern browser.

document.querySelector("link[rel='canonical']").getAttribute("href");

The above script will return the true value of href attribute like /misc/how-to-install-maven-in-eclipse-ide

document.querySelector("link[rel='canonical']").href;

But method .href will always return the full path of URL with the domain like https://websparrow.org/misc/how-to-install-maven-in-eclipse-ide

javascript-can-url-mod.html
<html>
    <head>
        <title>How to get canonical URL using JavaScript or jQuery</title>
        <link rel="canonical" href="https://websparrow.org/web/how-to-get-canonical-url-using-javascript-or-jquery" />
        <script type="text/javascript">
            function obatinCanUrlMod() {
                var canonical = document.querySelector("link[rel='canonical']").getAttribute("href");
                //var canonical = document.querySelector("link[rel='canonical']").href;

                if (canonical !== "") {
                    document.getElementById("canUrlValue").innerHTML = canonical;
                } else {
                    document.getElementById("canUrlValue").innerHTML = "Error: Unable to obtain URL";
                }
            }
        </script>
    </head>
    <body>
        <h1>How to get canonical URL using JavaScript or jQuery</h1>
        <button type="button" onclick="obatinCanUrlMod();">Click me</button>
        <p>Hello, your website Canonical URL is : <span id="canUrlValue"></span></p>
    </body>
</html>

Traditional Way

You can also use the loop to obtain the canonical URL if your browser is not supported the querySelector() method. It will work mostly in all browser.

javascript-can-url-trad.html
<html>
    <head>
        <title>How to get canonical URL using JavaScript or jQuery</title>
        <link rel="canonical" href="https://websparrow.org/web/how-to-get-canonical-url-using-javascript-or-jquery" />
        <script type="text/javascript">
            function obatinCanUrlTrad() {
                var canonical = "";
                var links = document.getElementsByTagName("link");
                for (var i = 0; i < links.length; i++) {
                    if (links[i].getAttribute("rel") === "canonical") {
                        canonical = links[i].getAttribute("href");
                    }
                }
                document.getElementById("canUrlValue").innerHTML = canonical;
            }
        </script>
    </head>
    <body>
        <h1>How to get canonical URL using JavaScript or jQuery</h1>
        <button type="button" onclick="obatinCanUrlTrad();">Click me</button>
        <p>Hello, your website Canonical URL is : <span id="canUrlValue"></span></p>
    </body>
</html>

Similar Posts

About the Author

Atul Rai
I love sharing my experiments and ideas with everyone by writing articles on the latest technological trends. Read all published posts by Atul Rai.