By Mehdi HassanWhat is a canonical tag?
A canonical tag is a link element placed in the head of a page that points to the canonical URL, meaning the single address you want search engines to index and show. It looks like this in plain HTML: link rel="canonical" href="https://example.com/pricing".
Duplicates happen more than most teams expect. The same page can load with and without a trailing slash, with tracking parameters such as utm_source, on a staging subdomain, or under two different paths. Without a canonical, search engines guess which one matters and may split signals between them. Google explains the mechanics in its guide to consolidating duplicate URLs. The term sits with other technical SEO basics in our SEO and AEO glossary.
What does a canonical tag look like on a real site?
On a real site, canonical tags mostly work in the background to collapse URL variations into one. Shopify is a well-known example of this behavior by default.
Example: one product, two URLs
In a standard Shopify store, a product can be reached through a collection path, such as /collections/new/products/blue-mug, and through its direct path, /products/blue-mug. Both show the same page. Shopify's themes set the canonical on both to the direct /products/ URL, so search engines index one address and credit all links to it.
The B2B marketing-site version is simpler. A pricing page shared in a newsletter as /pricing?utm_source=newsletter should carry a canonical pointing to /pricing, so the tracked links don't become separate indexed pages.
Parameters, pagination and filtered URLs are the most common sources of duplicates on marketing sites, and we cover them in pagination, faceted URLs and parameters.
Where do you set a canonical tag in Webflow, Framer and Next.js?
Where you set a canonical tag depends on the platform, and each one has a different default worth checking.
Platform | Where canonicals are set | What to check |
|---|---|---|
Webflow | Site settings, SEO tab: a global canonical URL; check current docs for page-level options | The global URL uses your primary domain, with no staging domain |
Framer | Set automatically for your primary custom domain; check current docs for overrides | Old domains and the framer.app address aren't the canonical |
Next.js | The metadata API: alternates.canonical in metadata or generateMetadata, with metadataBase for the domain | Dynamic routes output their own URL, not a shared template value |
Platform settings change, so confirm the result in the live page source after every launch. In Next.js the generateMetadata reference documents the options. If your marketing site is a client-rendered React app, canonicals may not be in the initial HTML at all; see fixing a React SPA for SEO.
What are common canonical tag mistakes?
The most common canonical tag mistakes point search engines at the wrong page, and they usually come from templates or migrations rather than manual edits.
- Every page canonicalized to the homepage, often from a template value copied site-wide. Google may ignore inner pages.
- Canonicals to staging or old domains left over after a rebuild or a cloned site. See website cloner tools and SEO.
- Canonical pointing to a redirected or noindexed URL, which sends mixed signals.
- Canonical used instead of a redirect for pages that have permanently moved. A 301 is the right tool there.
- Paginated pages all canonicalized to page one, which can hide the items listed on later pages.
How does a canonical tag relate to other SEO terms?
A canonical tag is one of several signals that tell search engines which URL to trust. A 301 redirect moves a page permanently; a noindex tag removes a page from results; a sitemap lists preferred URLs; and internal links show which version you treat as primary. All of them should agree. Consistent URLs also support a clear entity, because engines see one stable address for each important page about your company.
