Canonical URLs in NextJS - Mini Project: Build & Apply

Adding Canonical URLs in Next.js

📖 Scenario: You are building a blog website using Next.js. To help search engines understand the main URL for each blog post and avoid duplicate content issues, you want to add canonical URLs to your pages.

🎯 Goal: Create a Next.js page component that includes a canonical URL link tag in the HTML head section. This canonical URL should point to the main URL of the current page.

📋 What You'll Learn

Create a Next.js page component named BlogPost.

Use the Head component from next/head to add elements to the HTML head.

Create a variable canonicalUrl that holds the full canonical URL string.

Add a <link> tag with rel="canonical" and href set to canonicalUrl inside <Head>.

Render a simple heading with the blog post title.

💡 Why This Matters

🌍 Real World

Adding canonical URLs is important for SEO to avoid duplicate content penalties and to tell search engines which URL is the main one for a page.

💼 Career

Web developers often need to optimize websites for search engines by adding canonical URLs and meta tags to improve site ranking and user experience.

1

Set up the BlogPost component and import Head

Create a Next.js functional component named BlogPost. Import the Head component from next/head. Inside the component, return a fragment with an <h1> element containing the text My First Blog Post.

NextJS

import Head from 'next/head'

// Your code here

Hint

Remember to import Head from next/head and create a functional component named BlogPost.

2

Create the canonicalUrl variable

Inside the BlogPost component, create a constant variable named canonicalUrl and set it to the string https://www.example.com/blog/my-first-post.

NextJS

import Head from 'next/head'

export default function BlogPost() {
  // Create canonicalUrl variable here
  
  return (
    
      My First Blog Post
    
  )
}

Hint

Use const canonicalUrl = 'https://www.example.com/blog/my-first-post' inside the component.

3

Add the canonical link tag inside Head

Inside the returned fragment of the BlogPost component, add a <Head> component. Inside <Head>, add a <link> tag with rel="canonical" and href set to the canonicalUrl variable.

NextJS

import Head from 'next/head'

export default function BlogPost() {
  const canonicalUrl = 'https://www.example.com/blog/my-first-post'

  return (
    
      {/* Add Head with canonical link here */}
      My First Blog Post
    
  )
}

Hint

Use the Head component and add a link tag with rel="canonical" and href={canonicalUrl}.

4

Complete the BlogPost component with canonical URL

Ensure the BlogPost component returns a fragment containing the Head component with the canonical link and the <h1> heading. The canonical link's href must be set to the canonicalUrl variable.

NextJS

import Head from 'next/head'

export default function BlogPost() {
  const canonicalUrl = 'https://www.example.com/blog/my-first-post'

  return (
    
      {/* Confirm canonical link and heading here */}
    
  )
}

Hint

Make sure the canonical link and heading are inside the returned fragment.

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