How to Add a Dynamic Canonical Link in Webflow
If you're like me and cross-post your articles to Medium, you might worry about Google penalising you for duplicate content.
Here's how to add a canonical link to your blog posts to improve SEO and avoid any Google penalties 😊
When you need a Canonical Link
If you publish the same content on multiple platforms, search engines like Google can get confused about which version is the original. This can lead to SEO penalties, meaning your content might not rank as well as it should. By using a canonical link, you’re telling search engines which version is the "original" version, helping you avoid any penalties.
How to add Dynamic Canonical Links in Webflow
Here’s the code snippet I used to dynamically add a canonical link to certain blog posts on my Webflow site:
<script>
if ('INSERT WEBFLOW FIELD YOU CREATE HERE') {
var link = document.createElement('link');
link.rel = 'canonical';
link.href = 'INSERT WEBFLOW FIELD YOU CREATE HERE';
document.head.appendChild(link);
console.log("Canonical link appended:", link);
}
</script>- Create a "Canonical link" field in your CMS. Â If your article has an "original" version elsewhere, input the URL to this field.
- Add the above script to your <head> code. Do this in your Blog template page.
How it works
The script checks if a Canonical link exists for each blog post.
If it does, it creates a canonical link and appends it to the <head> of your page.
