Script for conditional canonical URL not executing

Design help Custom code
1

Hi,

I have the following head custom code for the CMS project we call Perspectives to set the canonical code to the page’s URL or to an external resource when we occasionally syndicate content.

<script>
const curl = "CANONICAL URL";

if (curl !== "") {
    link = document.createElement('link');
    link.href = 'CANONICAL URL';
    link.rel = 'canonical';
    document.getElementsByTagName('head')[0].appendChild(link);
} else {
    link = document.createElement('link');
    link.href = 'https://www.unnamedlabs.com/perspectives/SLUG';
    link.rel = 'canonical';
    document.getElementsByTagName('head')[0].appendChild(link);
}
</script>

When I view the page source of a Perspective after publishing I see the code in the header rather than the result of the code (see the following screenshot of the relevant page source):

Screenshot 2023-09-08 at 14.03.08
Screenshot 2023-09-08 at 14.03.08808×345 57.8 KB

I’m a Webflow newbie so I’m sure I must be missing something obvious?!

Thanks in advance for any help.

Here is my site Read-Only: Webflow - Unnamed Labs

2

The script would not go away, it would just execute and make its additional modifications.
However you’ve got a synchronous script here running before the DOM is built, so it’s possible that’s tripping things up.

Try changing <script> to <script defer>.

3

Thanks @memetican, you are quite right. I should have written “I see the code in the header but not the result of the code”.

I made the change you propose, but the script still doesn’t have the effect intended. :thinking:

4

Just noticed that I’d typed the strict inequality in line 4.

Changed to:

if (curl != "") {

but that hasn’t made this script do what it’s supposed to do.

:thinking:

5

Still no luck and the conversation here is a bit quiet so I thought I’d try chatting it through with pi.ai. This was my first experience of pi, and it was unexpectedly delightful.

Still no solution to my problem though. The ai chatbot describes it as “a bit of head-scratcher!” :laughing:

I copied our chat to a google doc to share here should anyone be interested:

6

Hi @psheld

What is it exactly that is not working?

https://unnamed-labs-83623f.webflow.io/perspectives/digital-identity-is-not-human-identity

image
image1074×715 92.3 KB

7

Hi @memetican, I think I’m about to be educated :laughing:

So I’ve been checking to see if a canonical link is set by viewing the page source in the browser. When I view page source in Firefox, the relevant section reads:

document.getElementsByTagName('head')[0].appendChild(link);
}
</script>
<script type="text/javascript">window.__WEBFLOW_CURRENCY_SETTINGS = ....

You’ll note that the line you have identified with the green rectangle is conspicuous by its absence.

However, now that I’ve used Firefox Web Developer Tools to inspect the page, there it is … exactly where you show it! :man_facepalming:

It appears then that I have been trying to fix something that does not need fixing!

So now I appreciate that this may happen, I’ve done a web search and found this explanation. Is that what’s happening here?

Thank you.

P.S. If you reply with “Yes, javascript can only change the DOM (what the user can see), not the source itself” I’ll tick it as the solution here to give you the credit :slight_smile:

8

It depends on the browser, but in most cases when you view source, you are viewing the source before any JS has been run.

I use chrome, and the dev tools there are excellent for seeing the page as-it-is-now, whatever state it might have been changed to.

When it comes to things like canonicals and robot meta tags, google indexes the page after executing your initial scripts

1 Like