Digital Marriage Invitation Card

How to get canonical URL using JavaScript or jQuery


This article will help you to obtain the web site 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="http://www.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>

Output:

Hello, your website Canonical URL is :

Using JavaScript

Modern Way

It can be also obtain 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 http://www.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="http://www.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="http://www.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>

Output:

Hello, your website Canonical URL is :


Share this article on: