Canonical URLs in NextJS - Step-by-Step Execution

Concept Flow - Canonical URLs

Page Request Received

↓

Check if Canonical URL is set

Yes | No↓

Add <link rel="canonical"> tag

↓

Render Page with Canonical URL

↓

Browser & Search Engines read canonical tag

↓

Search engines use canonical URL for indexing

When a page is requested, Next.js checks if a canonical URL is set. If yes, it adds a <link rel="canonical"> tag in the page head. This helps browsers and search engines know the preferred URL for the content.

Execution Sample

NextJS

import Head from 'next/head';

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

This Next.js component adds a canonical URL tag to the page head to tell search engines the preferred URL.

Execution Table

Step	Action	Result	Notes
1	Page requested by browser	Next.js starts rendering	Initial request triggers render
2	Check for canonical URL in Head	Found <link rel="canonical" href="https://example.com/page" />	Canonical URL is set
3	Add canonical tag to HTML head	HTML head includes canonical link tag	Tag added before main content
4	Render main content	<main>Page content</main>	Page body rendered
5	Send full HTML to browser	Browser receives HTML with canonical tag	Browser and search engines see canonical URL
6	Search engines read canonical URL	Use canonical URL for indexing	Avoids duplicate content issues
7	End	Page fully rendered and indexed	Process complete

💡 All steps complete; canonical URL tag added and page rendered

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
canonicalTag	undefined	<link rel="canonical" href="https://example.com/page" />	<link rel="canonical" href="https://example.com/page" />	Present in HTML head
pageContent	undefined	undefined	undefined	<main>Page content</main>

Key Moments - 2 Insights

Why do we add a canonical URL tag in the page head?

The canonical tag tells search engines which URL is the preferred one to index, preventing duplicate content issues. See execution_table step 6.

What happens if we don't add a canonical URL tag?

Search engines might index multiple URLs with the same content, which can hurt SEO. In execution_table step 2, if no canonical tag is found, it is not added.

Visual Quiz - 3 Questions

Look at the execution_table, what is the canonicalTag variable after step 3?

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

B undefined

C <main>Page content</main>

D No tag present

💡 Hint

Check variable_tracker row for canonicalTag after Step 3

At which step does the canonical URL tag get added to the HTML head?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

See execution_table action column for when the tag is added

If the canonical URL was missing, what would change in the execution_table?

A Step 6 would still use a canonical URL

B Step 2 would show no canonical tag found

C Step 3 would add a default canonical tag

D Page content would not render

💡 Hint

Refer to key_moments about missing canonical tag and execution_table step 2

Concept Snapshot

Canonical URLs in Next.js:
- Add <link rel="canonical" href="URL" /> inside <Head>
- Helps search engines know the preferred page URL
- Prevents duplicate content SEO issues
- Rendered in HTML head before page content
- Essential for SEO best practices

Full Transcript

When a page is requested in Next.js, the system checks if a canonical URL is set in the Head component. If found, it adds a <link rel="canonical"> tag to the HTML head. This tag tells browsers and search engines which URL is the preferred one for indexing. The page content is then rendered and sent to the browser. Search engines read the canonical tag to avoid indexing duplicate content. If no canonical URL is set, the tag is not added, which can cause SEO problems. This process ensures the page is properly indexed with the correct URL.

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