How to obtain link rel="canonical" url - maybe via Javascript? - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

How to obtain link rel="canonical" url - maybe via Javascript?

killua

7:42 am on Apr 18, 2022 (gmt 0)

10+ Year Member

I'm using Disqus comments system and I'm trying to use the feature of adding comment count links.

The code that I can use is below:

<p><a href="https://www.example.com/thisiscanonicalurl1.html#disqus_thread">Comments</a></p>

The above code works but this is where I have some issue. The thing is I have several hundreds of pages so editing the href value with #disqus_thread appended on it for each and every html pages will take a very long time and not feasible. Is there maybe some Javascript code that will dynamically input my canonical url in an <a href> tag with #disqus_thread appended to the end of the url?

I can't use php code since I'm using html files but I have SSI enabled since I need to use includes for easy template management. Also, all my html pages already have a unique meta tag for rel="canonical".

So what I want to do is something like this:

<p><a href="(some javascript code or other similar codes that will obtain rel=canonical value from the page)#disqus_thread">Comments</a></p>

Is this possible? Or maybe other alternatives?

graeme_p

11:23 am on Apr 18, 2022 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Are you changing an existing href value?

Then you might be able to use text search and replace tool that will work over multiple values, but it will probably require a script to do it. However you do it (and you could use php, BTW - configure the server/hosting to treat html as php) you are going to have to do a global search and replace of some kind.

You are going to have this problem every time you make a global change. Seriously think about importing this into something that provides a templating system. I use a static site generator for static sites.

killua

12:20 pm on Apr 18, 2022 (gmt 0)

10+ Year Member

Yes the href value should change for every different html page to their canonical url. I'm wondering if can this be done via Javascript.

Actually the code I wrote above is inside an include file. I already have the server configured to treat html just like .shtml for a long time already so I can do server side includes. Therefore, I only need to change that single line of code. But I'm not sure if there's a Javascript code that will help change that href value dynamically. Or is PHP the only workaround for this?

graeme_p

12:54 pm on Apr 18, 2022 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

I think JS would work. You can find and extract the value of the cannoncial tag and and insert it into a placeholder. You will have to do that before the Disqus JS runs.

How are the canonical urls inserted, and how do you have a problem with duplicate urls on a purelys tatic site?

Can you insert an SSI set above the rel=canonical so a variable contains the url url and then echo it where needed?

killua

1:27 pm on Apr 18, 2022 (gmt 0)

10+ Year Member

The canonical urls are inserted in the meta tag. So they look like below format:

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

The href value is of course unique in every html page. They were modified manually a long time ago (almost 500 individual pages).

>>>Can you insert an SSI set above the rel=canonical so a variable contains the url url and then echo it where needed?<<<

Do you know of the code for this so I can have it tested?

phranque

8:59 pm on Apr 18, 2022 (gmt 0)

WebmasterWorld Administrator

10+ Year Member

Top Contributors Of The Month

this bit of JS should return the value you are looking for:

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

killua

1:01 am on Apr 19, 2022 (gmt 0)

10+ Year Member

Not sure if I'm doing this right. So I placed exactly below script in the head section:

<script>
document.querySelector("link[rel='canonical']").href;
</script>

Do you know how we can call the script so it will dynamically fill-in the href value like below?

<p><a href="https//canonical-url.here/example.html#disqus_thread">Comments</a></p>

graeme_p

1:45 am on Apr 19, 2022 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

I could not post the code for doing it with SSI (got errors when I tried to post it) but the Apache docs on it should be easy to follow.

essentialy use the set command to set a variable value to the URL, then use echo to echo it in the rel=canonical and then again to create the first part of the disqus url

phranque

9:23 pm on Apr 19, 2022 (gmt 0)

WebmasterWorld Administrator

10+ Year Member

Top Contributors Of The Month

Do you know how we can call the script so it will dynamically fill-in the href value like below?

since this is now clearly a javascript question, i have moved this thread to the appropriate forum.