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.
<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
<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.
<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
