Conditional canonical link in head custom code

Design help Custom code
1

Canonical URL field in Blog Posts Collection (for syndicated blog posts)
I have created a Plain Text field called ‘Canonical URL’ in our ‘Blog Posts’ collection on our webflow website. I only set this for a one or two of our blog articles where we are using a syndicated article so we can point back to the canonical original article on the author’s blog using a canonical link.

How I am trying to code this: A canonical link in HTML <head> section ONLY for syndicated blog posts
To do this I am trying to get a rel=“canonical” link into the head area using the custom code section of our blog posts template, but make this conditional i.e. if the field called ‘Canonical URL’ is set then there should be a

<link rel="canonical" href="www.someblog.com/someblogpost">

in the head section else it should not add anything as the href would be blank if it did. I have tried all sorts of code to try to get this working for several hours now and I have looked through all the help information and forum posts I can find but I can’t find anything that matches this problem. I cannot believe that no one else has this use case as this will be a requirement for anybody that has blog posts that include at least one syndicated post (not least this is vital for SEO so syndication doesn’t look like duplication).

Can you please help?

1 Like
2

Hi @flow123

For dynamic template pages, you can add code to your head tag with the Slug of the page:

932×530 49 KB

Hope this helps :slight_smile:

1 Like
3

Thanks, I have already done this (except I am using a special field called Canonical URL) is not the issue. The issue is that this whole line needs to be conditional. This whole link line should ONLY appear in the head section for the one or two blog posts that are syndicated and NOT at all for all the other blog posts.

4

@flow123 Think I got your point

Sometimes you publish syndicated content, and sometimes you publish original (not syndicated) content, right?

Thing is: when you publish original content, your “href” stays in blank.

My doubt: is it bad to leave the “href” at “canonical” in blank? If so, what would be a solution for this, @pixelgeek ?

5

Correct. A blank URL for original content is not acceptable. We need a proper conditional that only puts in the whole line including URL ONLY IF we need a canonical link.

1 Like
6

@flow123 damn, so I’m stucked with the same problem.
@PixelGeek any ideas? maybe a work around it?

Regards guys!

7

Hey @jvictormendes

I’m not 100% sure if that would work (as it’s generated only after document is loaded), but this nifty little script I wrote adds that link conditionally:

const curl = "CANONICAL URL"
if (curl != "") {
  link=document.createElement('link');
  link.href='CANONICAL URL';
  link.rel='canonical';
  document.getElementsByTagName('head')[0].appendChild(link);
}

Should do the trick. The condition here works as following: If you haven’t set any Canonical URL inside of the Canonical Url field in your collection, then it won’t do anything. If you add a link, it would add it after document loads.

Please note that Webflow doesn’t support Custom Code help. If you run into any troubles with this script, feel free to ask on forum.

9 Likes
8

Many thanks! I think it worked.

This is what happens when no canonical is set

And then when I set the canonical…

2 Likes