🔗URL & UTM

Canonical URL Best Practices

Implement canonical URLs to prevent duplicate content issues

Explanation

Canonical URLs tell search engines which version of a page is the "official" one when multiple URLs have similar content.

Examples

Canonical tag

Input

<link rel="canonical" href="https://example.com/page">

Output

Tells search engines this is the preferred URL

With query params

Input

https://example.com/product?color=blue&size=M

Output

Canonical: https://example.com/product

Code Examples

HTML

<!-- In <head> section -->
<link rel="canonical" href="https://example.com/preferred-url" />

<!-- Self-referencing canonical (best practice) -->
<link rel="canonical" href="https://example.com/current-page" />

React/Next.js

// Next.js Head component
import Head from 'next/head';

function ProductPage({ product }) {
  const canonicalUrl = `https://example.com/products/${product.slug}`;
  
  return (
    <>
      <Head>
        <link rel="canonical" href={canonicalUrl} />
      </Head>
      {/* Page content */}
    </>
  );
}

// React Helmet
import { Helmet } from 'react-helmet';

function Page() {
  return (
    <Helmet>
      <link rel="canonical" href="https://example.com/page" />
    </Helmet>
  );
}

Nginx

# Nginx: Add canonical header
location / {
    add_header Link "<https://example.com$request_uri>; rel=\"canonical\"";
}

Try it Now

Open in URL Parser

💡 Tips

Always use absolute URLs, not relative
Include protocol (https://)
Use lowercase for consistency
Remove tracking parameters from canonical
Self-reference canonical on all pages
Canonical should be accessible (not 404 or redirect)
Mobile and desktop should have same canonical

⚠️ Common Pitfalls

Conflicting canonical and redirect
Canonical pointing to 404 page
Multiple canonical tags on same page
Using relative URLs instead of absolute
Canonical with noindex creates conflict