How to Set a Per‑Item Canonical URL in Webflow CMS

Nick Wade

October 9, 2025

And now for something different. If you publish much content using Webflow, you’ve probably at some point run into a common SEO snag with canonical links. Webflow’s global site settings make it easy to add a single canonical tag across all pages on your site. This is very helpful. But what happens when one specific CMS item, say, a blog post syndicated from another domain, needs its own canonical link? Out of the box, Webflow doesn’t provide per‑item control for canonicals at the CMS item level. And using custom code to add one can quickly mix global plus per‑page tags, leaving you with duplicates or empty href canonicals that confuse search engines and punish your SEO.

We use Webflow here at Opus Guard, and we really like it. But occasionally we have to customize behavior to get the right result. In this post, I’ll explain the canonical problem we face with syndicated blog posts from another original source. And I’ll share two resilient scripts you can use in your Blog Posts template (inside the custom code <head> area) to resolve this challenge for any individual blog post, all while leaving the global canonical tag setting enabled in Webflow for your site.

The problem: global canonical vs. occasional per‑item needs

Webflow’s Designer lets you define a global canonical link, but canonical tags are opinionated: each page should have at most one canonical link rel=“canonical” pointing to the definitive URL of that content. If they have more, search engines are confused and SEO usually suffers.
For CMS collections, especially blog posts, you sometimes need a per‑item canonical. For instance, when a post was originally published elsewhere and you want to re-share it (with permission!), or when an older URL structure needs to be honored for a single article.
Webflow CMS collections can have any number of fields added, so you can add a link type field with a name like “Canonical link” and using some simple custom code inject this into a blog post’s <head> area. Note: You should do this in the page template, rather than in code in an HTML embed in the article, in order for most crawlers to properly see the rendered tag.
If you do this without more careful handling, you will end up with multiple canonical tags: one from Webflow’s global settings, plus another injected via your custom code (or even worse, an empty/invalid canonical link). Search engines may ignore both duplicates, or pick the wrong one, but either way your SEO will usually suffer.

Solution overview

The solution is simple in nature: add your custom canonical and remove the other. In practice I’ve found it requires two pieces of javascript custom code inside the <head> tag of the CMS page template for such articles. The scripts do a few things in the following order:

Pick up a custom canonical link if it is optionally set for your article in the CMS
Remove other duplicates that come from your global site settings, thus ensuring only one canonical link exists for your post
Set the custom link in <head> as the canonical link for your published post

Steps and scripts

First, edit your CMS collection and add a new link field. We named ours Canonical link but you can name it whatever you like.

New field of type=link named **Canonical link,** added to the **Blog Post** Collection

Then, the code I’m using does a few things:

check if the CMS article has a value in the Canonical link field
if yes then
- remove all existing canonical links, and
- create the href with type rel=“canonical” using that value
otherwise do nothing
‍

Most Webflow community recommendations suggest that you turn off the global default canonical in your Site settings, and manage this manually via custom code on every static page and every CMS collection template. This certainly gives fine control everywhere, but it also creates additional work for those of us syndicating a post only once in a while. Since that is our use case, then our approach to the code is to simply always replace every canonical on onlythose posts that have a customized one instead. Note that the "otherwise do nothing" aspect of this script is very important, since it is very easy to accidentally set a duplicate canonical or even trash your canonical link altogether if the script is not careful with checks before actions.

Here's the script we're using: you can place this block inside the Blog Posts template Custom Code inside the <head> area. It reads the CMS collection field and guarantees a single, valid canonical tag. Just be sure to use your own [ Canonical link ▽ ] variable with whatever field name you chose for your own CMS collection.

<script>
    (function () {
        // If you have a canonical you want to remove (e.g., Webflow global root)
        function addCanonical(href) {
            link = document.createElement("link");
            link.href = href;
            link.rel = 'canonical';
            document.getElementsByTagName('head')[0].appendChild(link);
        }

        function removeEl(el) {
            if (el && el.parentNode) el.parentNode.removeChild(el);
        }

        function ensureZeroCanonical() {
            var links = Array.prototype.slice.call(document.querySelectorAll('link[rel="canonical"]'));

            // Remove empty or invalid canonical tags (e.g., href="")
            links.forEach(function (link) {
                var href = link.getAttribute("href") || "";
                removeEl(link);
            });
        }

        function runCleanup() {
            const curl = "[Canonical link ▽]"; // Set your preferred canonical URL here
            if (curl !== "") {
                ensureZeroCanonical();
                addCanonical(curl);
            }
        }

        if (document.readyState === "complete") {
            runCleanup();
        } else {
            window.addEventListener("load", runCleanup);
        }
    })();
</script>

Custom code added to the **Blog Post CMS page template**, inside the <head> area

And voila! With these fewthings in place and the site published again, my blog post now has one correct, valid canonical link set as I need it, while all others simply use the Webflow global default canonical setting.

Summary - setup checklist

Add a Link field named “Canonical link” to your Blog Posts CMS collection.
In the Blog Posts Template settings, paste the custom code above inside the <head> (be sure to use your own variable name).
Publish the site and a blog post with a custom canonical, open the post, and inspect the <head>:
- If the Canonical link field is populated: the canonical tag should point to your custom URL.
- If the field is empty: you should see one canonical pointing to the current page, with no duplicates.

When to use per‑item canonicals

Syndicated content originally published elsewhere.
Consolidating duplicate paths where only one should rank.
Legacy URLs that still accrue signals but redirect to a new structure.
Experimental pages or A/B variants where only one should be indexed as the authoritative source.

What not to do

Don’t include multiple canonicals hoping search engines will figure it out; they often won’t.
Don’t use relative URLs in canonical tags; always use absolute, normalized URLs.
Don’t point canonicals across completely different content; canonicals are for near‑identical pages where you want to consolidate signals.

Webflow’s simplicity is a strength, but SEO often needs nuanced control. With some custom code, you can keep the platform’s ease while giving your CMS items precise canonical behavior only when needed. The result: cleaner signals, fewer indexation surprises, and more reliable performance for syndicated or legacy content.

‍