NextjsHow-ToBeginner · 3 min read

How to Add Canonical URL in Next.js for SEO Best Practices

In Next.js, add a canonical URL by using the Head component from next/head and including a <link rel="canonical" href="your-url" /> tag inside it. This tells search engines the preferred URL for the page to avoid duplicate content issues.

📐

Syntax

Use the Head component from next/head to insert elements into the HTML <head> section. Inside it, add a <link> tag with rel="canonical" and the href set to your canonical URL.

Head: Next.js component to modify the document head.
link rel="canonical": Specifies the canonical URL for SEO.
href: The URL string that is the preferred page address.

javascript

import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <link rel="canonical" href="https://example.com/page" />
      </Head>
      <main>
        {/* Page content here */}
      </main>
    </>
  );
}

💻

Example

This example shows a Next.js page component that sets a canonical URL to https://example.com/blog/post-1. It demonstrates how to import and use the Head component to add the canonical link tag inside the page's head.

javascript

import Head from 'next/head';

export default function BlogPost() {
  return (
    <>
      <Head>
        <title>My Blog Post</title>
        <link rel="canonical" href="https://example.com/blog/post-1" />
      </Head>
      <main>
        <h1>My Blog Post</h1>
        <p>This is the content of the blog post.</p>
      </main>
    </>
  );
}

Output

<head> <title>My Blog Post</title> <link rel="canonical" href="https://example.com/blog/post-1" /> </head> <body> <main> <h1>My Blog Post</h1> <p>This is the content of the blog post.</p> </main> </body>

⚠️

Common Pitfalls

Not using the Head component from next/head and instead trying to add <link> tags directly in the JSX body, which won't work.
Forgetting to set the full absolute URL in the href attribute; canonical URLs must be absolute.
Adding multiple conflicting canonical tags on the same page, which confuses search engines.
Not updating the canonical URL dynamically for dynamic routes or pages with parameters.

javascript

/* Wrong way: Adding link tag outside Head component */
export default function Wrong() {
  return (
    <>
      <link rel="canonical" href="https://example.com/wrong" />
      <main>Content</main>
    </>
  );
}

/* Right way: Using Head component */
import Head from 'next/head';

export default function Right() {
  return (
    <>
      <Head>
        <link rel="canonical" href="https://example.com/right" />
      </Head>
      <main>Content</main>
    </>
  );
}

📊

Quick Reference

Remember these key points when adding canonical URLs in Next.js:

Always use Head from next/head.
Set rel="canonical" with an absolute URL in href.
Update canonical URLs dynamically for dynamic pages.
Only one canonical tag per page.

✅

Key Takeaways

Use the Head component from next/head to add canonical URLs in Next.js.

Canonical URLs must be absolute and unique per page to avoid SEO issues.

Do not place <link rel="canonical"> tags outside the Head component.

Update canonical URLs dynamically for pages with parameters or dynamic routes.

Avoid multiple canonical tags on the same page to prevent confusion for search engines.