What is a canonical URL?
A canonical URL is an HTML tag, <link rel="canonical" href="...">, placed in the <head> of a page that tells search engines which URL is the 'main version' when the same or similar content is reachable via multiple URLs.
Why is it needed? Duplicate content
Take example.com/product and example.com/product?utm=fb: technically two different URLs, exactly the same content. Without a canonical, Google might index the wrong version, ranking signals such as links can splinter across multiple URLs, or in rare cases a duplicate-content penalty could apply.
Other common sources of duplicate URLs: filter parameters on a product listing, sort-order parameters, and http vs https variants of the same page.
How do you implement it in HTML
Add the tag inside the <head> of your page: <link rel="canonical" href="https://example.com/product" />. Every page, including the canonical target itself, should have a self-referencing canonical, a tag pointing to its own URL. That's standard practice for every unique page.
Cross-domain canonical
A less common use case: when the same content lives on two different domains, for example a syndicated article that also appears on a partner site, you can point the canonical on the copy to the original domain. That prevents the copy from ranking instead of the original.
Common mistakes
A handful of mistakes show up repeatedly and are worth checking on your own site.
- Missing self-canonical: the page points to nothing, or accidentally to a different page.
- Canonical pointing to a noindex page, a contradictory signal to search engines.
- Canonical pointing to http instead of https, or vice versa.
- Trailing-slash inconsistency between the canonical and the actual URL.
- Canonical that doesn't match the hreflang set on multilingual sites.
In Next.js: via alternates.canonical
In Next.js you set the canonical via the metadata API instead of writing HTML by hand: export const metadata = { alternates: { canonical: "https://example.com/product" } }. This generates exactly the same <link rel="canonical"> tag, but type-safe and managed centrally per page.
Want to know if your site has duplicate-content risks?
Request a technical SEO check →