What is the best way to handle canonical links on my website using Webflow?
TL;DR
- Manually add canonical tags in each static page's head section using the Custom Code area.
- For CMS pages, insert dynamic canonical URLs using field variables like {{slug}} in the CMS template head.
- Redirect Webflow.io to your custom domain to prevent duplicates and verify all canonical tags using SEO tools.
Managing canonical links in Webflow is essential for preventing duplicate content issues and ensuring SEO clarity. Here's the best way to implement and control canonical tags across your site.
1. Use Webflow’s Native SEO Settings for Static Pages
- Go to Page Settings for each static page (e.g., homepage, about, contact).
- In the SEO Settings section, scroll to Canonical URL or the custom Head Code area.
- Manually define the canonical link using a
<link rel="canonical" href="https://yourdomain.com/page" />tag in the Custom Code > Inside tag field. - Webflow does not auto-generate canonical tags, so you must enter them for each page if needed.
2. Use Dynamic Canonicals for CMS Templates
- For CMS collections (e.g., blog posts), use the Page Template Settings.
- In the Custom Head Code, add your tag like:
<link rel="canonical" href="https://yourdomain.com/blog/{{slug}}" /> - Use Webflow’s field variables, like
{{slug}}, to dynamically set the correct URL. - This ensures each blog post or collection item generates a unique canonical URL.
3. Avoid Unnecessary Duplicates
- Ensure you’re not serving the same content at multiple URLs (e.g., with or without trailing slashes, or using both the Webflow.io and custom domain).
- Redirect your Webflow.io domain in Project Settings > Hosting to your live custom domain to avoid duplicate indexed pages.
4. Use a Global Canonical in Page Head (Optional)
- If most of your content won't vary by query parameters or session IDs, you can include logic to auto-insert a canonical tag referencing the current canonical URL.
- However, Webflow doesn’t support dynamic scripting in the
<head>natively, so this would require custom JavaScript—which is less reliable for SEO than hard-coded canonical tags.
5. Test with SEO Tools
- Use tools like Google Search Console, Ahrefs, or Screaming Frog to verify your canonical tags are visible and correct.
- Also check that no pages are erroneously marked with self-canonicals when they shouldn’t be.
Summary
The best way to manage canonical links in Webflow is to manually define them per page using the Custom Head Code area, and for CMS pages, use dynamic slugs within canonical tags. Webflow does not automate this, so manual setup is required to avoid duplicate content issues and maintain strong SEO.