Introduction
Canonical URLs solve duplicate content — the same content appearing at multiple URLs due to trailing slashes, query parameters, HTTP/HTTPS, or syndication. Without canonicals, search engines split ranking signals between versions.
Canonical tags declare the 'official' URL, consolidating signals into one strong page instead of several weak ones.
This guide covers implementation for every common scenario with framework-specific examples.
Key Concepts
The Canonical Tag
html
<link rel="canonical" href="https://example.com/blog/my-post">
<!-- Must be: absolute URL, self-referencing, lowercase, consistent trailing slash -->
Common Duplicate Scenarios
javascript
// All show same content:
https://example.com/shoes
https://example.com/shoes/
https://example.com/shoes?color=red
https://example.com/shoes?utm_source=facebook
// All canonical to: https://example.com/shoes
Practical Examples
1. Next.js Canonical URLs
typescript
export async function generateMetadata({ params }) {
return { alternates: { canonical: `/blog/${params.slug}` } };
}
2. Enforcing Consistent URLs
typescript
// middleware.ts
export function middleware(request) {
const url = request.nextUrl.clone();
let redirect = false;
if (url.pathname !== '/' && url.pathname.endsWith('/')) {
url.pathname = url.pathname.slice(0, -1);
redirect = true;
}
if (redirect) return NextResponse.redirect(url, 308);
}
3. Cross-Domain Canonicals
html
<!-- On partner-site.com -->
<link rel="canonical" href="https://your-site.com/original-article">
Best Practices
- ✅ Add self-referencing canonical to every indexable page
- ✅ Use absolute URLs in canonical tags
- ✅ Strip tracking parameters from canonical URLs
- ✅ Enforce consistent URL format with redirects
- ❌ Don't canonical to a 404 or redirect
- ❌ Don't use relative URLs in canonical tags
Common Pitfalls
- 🚫 Canonical to wrong page — pointing to homepage removes page from results
- 🚫 Conflicting signals between canonical, hreflang, and sitemap
- 🚫 Not handling www/non-www with 301 redirect
- 🚫 Canonicalizing pagination pages incorrectly