How to Edit the Canonical Tag in Framer
Overview
Canonical tags can be fundamental in SEO if you are trying to avoid duplicate content issues.
Luckily, Framer makes it super easy to change them (and no, you don’t need the reverse proxy add-on to do it).
In this article, I cover:
What canonical tags are
How to set canonical tags in Framer (with any paid plan)
Canonical tags and reverse proxy setups
Let’s get into it!
What are canonical tags?
Google doesn’t like duplicate content and will penalise you if you have some on your site. So when we need to duplicate a page, we want to have a way to tell Google which one he should focus on and which one is just a copy.
Canonical tags do just that. They are little snippets of code that you add to the <head> of your site to tell Google what the preferred version of a page is.
Let’s look at a real-world example. Let’s say you are running A/B tests on a landing page, and you have a setup that looks like this:
https://domain.com/landing-page (control URL)
https://domain.com/landing-page-1 (test URL)
These two URLs will basically serve the same content, but only one should be indexed to avoid duplicate content issues.
In this case, we want to add a canonical tag pointing to the control URL to both page’s <head> tags. The canonical tag will look something along these lines:
This way, once Google crawls the test URL, it will know that it’s just a duplicate of the control URL and will ignore it without any negative consequence to your SEO rankings.
Unless you are purposefully creating a copy of a page, every page in your site should have a self-referencing canonical tag. In other words, each page on your site should point to itself as the preferred version for Google to index.
Luckily, among the many SEO things Framer does under the hood, it adds it automatically, saving you a lot of time. But what if you need to change it? How do you do it?
It’s actually super straightforward, here’s how…
How to set canonical tags in Framer
By default, Framer automatically sets a self-referencing canonical tag for each page on your website. However, you can overwrite this behaviour, and here’s how:
Go to settings and select the page on which you want to set a canonical tag.
Paste the new canonical tag in the <head> of the page (be it at the start or the end).
Save and publish.
When Framer detects a custom canonical tag in the <head> tag of the page, it will avoid adding the default self-referencing one, so it won’t cause any confusion to search engines.
That’s it!
As you can see, adding a canonical tag in Framer is super easy. The reason why there’s so much confusion around the topic is that Framer offers a “canonical URL” option for reverse proxies, so let’s quickly go over it to clear up all the doubts.
Canonical tag & reverse proxy setups
In Framer, if you go to settings > domains, you’ll notice a “Canonical URL” option only available if you buy the reverse proxy add-on.
Does that mean you need the add-on to add a canonical tag? Absolutely no, that’s only required if you have a reverse proxy.
A reverse proxy setup can be helpful for several reasons, among which is hosting multiple websites under the same domain.
For example, you mainly choose to have most of the site built in Framer but then have a /shop directory where you offer an e-commerce functionality powered by Shopify.
If that’s the case, you’ll have to connect your domain to the proxy, which will serve two different websites as if they were one.
The problem with this approach is that Framer doesn’t know which domain you are using, so it cannot set canonical tags (nor hreflang tags, if you are using localisation).
Therefore, the team at Framer added this “Canonical URL” functionality that allows you to set a domain for the canonical and hreflang tags without technically connecting the domain to Framer.
Conclusion
To set a canonical tag in Framer, all you have to do is add a custom one in the <head> of the page and it will overwrite the default, self-referencing one Framer adds.
The “Canonical URL” option you find under settings > domains is only needed if you have a reverse proxy setup.
Thanks for reading!
- Luca
