Canonical URLs in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Next.js component?

Consider this Next.js component that sets a canonical URL in the head. What will be the exact tag rendered inside the ?

NextJS

import Head from 'next/head';

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

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

B <link rel="canonical" href="page" />

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

D <link rel="canonical" href="/page" />

💡 Hint

Look at the href attribute inside the tag in the Head component.

The component explicitly sets the canonical URL to 'https://example.com/page' inside the Head component, so the rendered tag will have that exact href.

📝 Syntax

intermediate

Which option correctly sets a canonical URL in Next.js using the Head component?

You want to add a canonical URL to your Next.js page. Which code snippet correctly sets it?

A <head><link rel="canonical" href="https://mysite.com/home" /></head>

B <Head><link rel="canonical" href="https://mysite.com/home" /></Head>

C <Head><canonical href="https://mysite.com/home" /></Head>

D <Head><link rel="canonical" url="https://mysite.com/home" /></Head>

💡 Hint

Remember the correct React component and attribute names.

Next.js uses the Head component imported from 'next/head' to add elements to the HTML head. The correct tag for canonical URLs is .

❓ state_output

advanced

What is the canonical URL after this dynamic Next.js page renders?

Given this dynamic Next.js page that sets the canonical URL based on props, what is the canonical URL in the rendered HTML if the prop slug is 'blog-post'?

NextJS

import Head from 'next/head';

export default function Post({ slug }) {
  const canonicalUrl = `https://example.com/${slug}`;
  return (
    <>
      <Head>
        <link rel="canonical" href={canonicalUrl} />
      </Head>
      <article>
        <h1>Post: {slug}</h1>
      </article>
    </>
  );
}

A /blog-post

B https://example.com/

C blog-post

D https://example.com/blog-post

💡 Hint

Check how the canonicalUrl variable is constructed using the slug prop.

The canonicalUrl is built by combining the base URL 'https://example.com/' with the slug prop 'blog-post', resulting in 'https://example.com/blog-post'.

🔧 Debug

advanced

Why does this Next.js page fail to set the canonical URL correctly?

This Next.js page tries to set a canonical URL but it does not appear in the page source. What is the cause?

NextJS

import Head from 'next/head';

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

A The <link> tag must be outside the <head> tag.

B The href attribute is missing in the <link> tag.

C Using lowercase <head> instead of Next.js <Head> component prevents correct rendering.

D The canonical URL must be set in a separate _document.js file.

💡 Hint

Check the difference between HTML and Next.js Head component.

Next.js requires using the imported Head component from 'next/head' to modify the document head. Using lowercase is ignored by React and does not inject tags into the HTML head.

🧠 Conceptual

expert

Why is setting a canonical URL important in Next.js SEO?

Which of the following best explains why you should set canonical URLs in your Next.js pages?

A To tell search engines which URL is the preferred version to avoid duplicate content penalties.

B To improve page load speed by caching the canonical URL.

C To enable client-side routing between pages in Next.js.

D To automatically generate sitemap.xml files for the site.

💡 Hint

Think about SEO and duplicate content issues.

Canonical URLs inform search engines which URL is the main one when multiple URLs have similar content, preventing duplicate content penalties and improving SEO.

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