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

Developers Developer Resources
1

Recently we started syndicating occasional blog posts in from another original source on our website. Now we use the Webflow global default canonical link setting for our site, and want to keep that. It greatly simplifies things. In order to strip that and replace it with a custom canonical link on occasional CMS articles only, we wrote a small script-based solution for the CMS collection’s template page. This picks up content of a custom field in that CMS collection if it has a value only, and sets only that value as the canonical link. It’s simple to use and in case this helps anyone else, the full write-up is also found on our blog: How to Set a Per‑Item Canonical URL in Webflow CMS

Script for insertion in the of the CMS Collection template page, just be sure to use your own [ Canonical link ▽] variable from 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>
2 Likes