Canonical URLs in NextJS

Introduction

Canonical URLs tell search engines which page is the main version when there are similar pages. This helps avoid confusion and improves SEO.

When you have multiple pages with similar content and want to point to the main one.

When your site supports different URLs for the same page, like with or without query parameters.

When you want to prevent duplicate content penalties from search engines.

When you share content on social media and want consistent links.

When you want to improve your website's search ranking by consolidating page authority.

Syntax

NextJS

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>
    </>
  );
}

The <Head> component from Next.js lets you add elements to the HTML <head> section.

The rel="canonical" link tells search engines the preferred URL for the page.

Examples

Basic example setting the canonical URL for the homepage.

NextJS

import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <link rel="canonical" href="https://mysite.com/" />
      </Head>
      <h1>Welcome to my site</h1>
    </>
  );
}

Using a variable to set the canonical URL dynamically.

NextJS

import Head from 'next/head';

export default function BlogPost() {
  const canonicalUrl = 'https://mysite.com/blog/post-1';
  return (
    <>
      <Head>
        <link rel="canonical" href={canonicalUrl} />
      </Head>
      <article>Blog post content here</article>
    </>
  );
}

Setting canonical URL for a product page to avoid duplicate URLs with filters or tracking parameters.

NextJS

import Head from 'next/head';

export default function ProductPage() {
  return (
    <>
      <Head>
        <link rel="canonical" href="https://mysite.com/products/widget" />
      </Head>
      <section>Product details here</section>
    </>
  );
}

Sample Program

This component sets a canonical URL for the About page to tell search engines this is the main URL for this content.

NextJS

import Head from 'next/head';

export default function About() {
  return (
    <>
      <Head>
        <title>About Us - MySite</title>
        <link rel="canonical" href="https://mysite.com/about" />
      </Head>
      <main>
        <h1>About Us</h1>
        <p>Learn more about our company and values.</p>
      </main>
    </>
  );
}

Important Notes

Always use absolute URLs (including https://) in canonical links.

Make sure the canonical URL matches the main content page exactly.

Using canonical URLs helps prevent SEO issues with duplicate content.

Summary

Canonical URLs tell search engines which page is the main one.

Use Next.js <Head> to add canonical links easily.

This improves SEO and avoids duplicate content problems.

Practice

1. What is the main purpose of adding a canonical URL in a Next.js page using the <Head> component?

easy

A. To add a clickable link for users to share

B. To tell search engines which URL is the main version of a page

C. To style the page header with CSS

D. To load external JavaScript files

Solution

1. Step 1: Understand the role of canonical URLs

   Canonical URLs help search engines know the main page to avoid duplicate content issues.

2. Step 2: Recognize Next.js usage

   Using <Head> in Next.js allows adding a <link rel="canonical"> tag for SEO purposes.

3. Final Answer:

   To tell search engines which URL is the main version of a page -> Option B

4. Quick Check:

   Canonical URL = main page URL [OK]

Hint: Canonical URLs guide search engines to main pages [OK]

Common Mistakes:

• Thinking canonical URLs are for user navigation
• Confusing canonical URLs with CSS or scripts
• Using canonical URLs to load external files

2. Which of the following is the correct syntax to add a canonical URL in a Next.js page?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify correct Next.js Head usage

   The <Head> component is used to add tags inside the HTML head.

2. Step 2: Check canonical link tag syntax

   The canonical URL uses <link rel="canonical" href="URL" /> syntax.

3. Final Answer:

   <Head><link rel="canonical" href="https://example.com/page" /></Head> -> Option A

4. Quick Check:

   Canonical link tag = rel="canonical" [OK]

Hint: Use inside <Head> [OK]

Common Mistakes:

• Using lowercase <head> instead of Next.js <Head>
• Using <meta> instead of <link> for canonical
• Confusing stylesheet link with canonical link

3. Given this Next.js component, what will be the rendered HTML inside the <head> tag?

import Head from 'next/head';

export default function Page() {
  return (
    <>
      
        My Page
        
      
      
Content here
    </>
  );
}

medium

A. My Page

B. My Page

C.

D.

Solution

1. Step 1: Review the Head component content

   The component adds a <title> and a <link rel="canonical"> with full URL.

2. Step 2: Understand rendered HTML in head

   Next.js renders exactly the tags inside <Head> as HTML head children.

3. Final Answer:

   <title>My Page</title><link rel="canonical" href="https://example.com/mypage" /> -> Option A

4. Quick Check:

   Head content = title + canonical link [OK]

Hint: Head renders tags exactly as written inside it [OK]

Common Mistakes:

• Confusing canonical link with stylesheet link
• Using meta tag instead of link for canonical
• Using relative URL instead of full URL in canonical

4. What is wrong with this Next.js code snippet that tries to add a canonical URL?

import Head from 'next/head';

export default function Page() {
  return (
    
      
    
  );
}

medium

A. The component must return a single <div> element

B. The <Head> component cannot contain <link> tags

C. The rel attribute should be "stylesheet"

D. The href URL is missing the protocol (https://)

Solution

1. Step 1: Check the href attribute value

   The href is "example.com/page" without "https://", which is invalid for canonical URLs.

2. Step 2: Verify Next.js Head usage

   The <Head> can contain <link> tags, and rel="canonical" is correct.

3. Final Answer:

   The href URL is missing the protocol (https://) -> Option D

4. Quick Check:

   Canonical href needs full URL [OK]

Hint: Canonical href must include https:// or http:// [OK]

Common Mistakes:

• Omitting protocol in href URL
• Thinking <Head> can't have <link> tags
• Using wrong rel attribute value

5. You have two Next.js pages: /blog/post1 and /blog/post1?ref=twitter. To avoid duplicate content issues, how should you add canonical URLs in both pages?

hard

A. Add different canonical URLs matching each page's full URL

B. Add <link rel="canonical" href="https://example.com/blog/post1?ref=twitter" /> in both pages

C. Add <link rel="canonical" href="https://example.com/blog/post1" /> in both pages' <Head>

D. Do not add canonical URLs to avoid confusion

Solution

1. Step 1: Understand duplicate content from query parameters

   Both URLs show the same content but differ by query string, which can cause SEO duplication.

2. Step 2: Use canonical URL to point to main page

   Both pages should have the canonical URL set to the main clean URL without query parameters.

3. Final Answer:

   Add <link rel="canonical" href="https://example.com/blog/post1" /> in both pages' <Head> -> Option C

4. Quick Check:

   Canonical URL = main page URL without query [OK]

Hint: Canonical URL should be clean main URL without query [OK]

Common Mistakes:

• Using full URL with query as canonical
• Skipping canonical tags on query pages
• Setting different canonicals for same content