SEO / GEO

3 views

6 min

How to Set a Dynamic Canonical Tag in Webflow CMS

Learn how to implement dynamic canonical tags in Webflow CMS to avoid duplicate content and consolidate SEO authority across your template pages.

The canonical tag tells Google which version of a page is the reference when several URLs point to similar content. In Webflow CMS, it needs to be dynamic: each article should point to its own canonical URL. Sandro, cofounder of Gemeos Webflow agency, shows you how to implement it cleanly.

Why canonical tags are crucial in Webflow CMS

Webflow sometimes generates multiple accessible URLs for the same CMS content: with and without a trailing slash, with filter or pagination parameters, or through preview pages. Without an explicit canonical, Google can index duplicates and dilute your SEO authority.

Trailing-slash URL: gemeos.wf/blog/article/ vs gemeos.wf/blog/article
URLs with parameters: gemeos.wf/blog?filter=seo
Publicly accessible Webflow Editor preview pages

1. Check whether Webflow already generates a canonical tag

Webflow automatically generates a canonical tag on all published pages since the 2023 version. Inspect the source code of one of your pages (right-click > View Page Source) and look for the <link rel="canonical"> tag in the <head>. If it’s there and correct, you’re done.

good to know

Webflow’s automatic canonical points to the live page URL. If your site is accessible on multiple domains (for example: the default Webflow domain + a custom domain), make sure the canonical points to your custom domain, not your-project.webflow.io.

2. Force a custom canonical with a CMS embed

If you need a custom canonical (for example, for syndicated content or a CMS page that should point to an external URL), use an HTML Embed element in your CMS template.

In the CMS template, add an "HTML Embed" element outside the Rich Text element. Paste the code below and bind the href field to your CMS "Canonical URL" field:

<link rel="canonical" href="{{Canonical URL}}">

In the Designer, select the value in quotes and use "Add Field" to replace it with the corresponding CMS field. Webflow will inject the URL dynamically on each article.

3. Create the CMS field "Canonical URL"

In your CMS collection, add a "Plain Text" field named "Canonical URL." Leave it empty by default: it will only be filled in for articles whose canonical should point somewhere other than their own URL.

4. Handle canonicals for paginated pages

If you use pagination on your CMS collections, each pagination page (/blog?page=2) should have a canonical that points to the first page (/blog). Add this script to the project’s global Head Code:

<script>
  var canonical = document.querySelector('link[rel="canonical"]');
  if (canonical) {
    var url = new URL(canonical.href);
    url.search = '';
    canonical.href = url.toString();
  }
script>

Situation	Recommended canonical	Method
Standard CMS article	The article’s own URL	Webflow automatic canonical
Syndicated content (republished elsewhere)	The original source URL	CMS field + embed
Pagination pages	The first page of the list	JS script to clean params
Pages with URL filters	URL without filter parameters	JS script to clean params

Conclusion

Canonical handling in Webflow CMS is automatic in most cases. Manual intervention is only needed for specific cases: syndicated content, pagination, or URLs with dynamic parameters.

Use case 1: a blog that republishes articles originally published on LinkedIn or Medium
Use case 2: a site with Finsweet CMS filters that generate parameterized URLs
Use case 3: a multilingual site where the FR version is the canonical reference for translated versions

Good to know

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Let's discuss