Canonical URLs in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a canonical link tag in a Next.js Head component.

NextJS

import Head from 'next/head';

export default function Page() {
  return (
    <Head>
      <link rel="canonical" href=[1] />
    </Head>
  );
}

Drag options to blanks, or click blank then click option'

Ahref

BcanonicalUrl

C"https://example.com/page"

Durl

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name without quotes

Omitting quotes around the URL string

Using incorrect attribute names

The href attribute in the link tag must be a string URL representing the canonical page address.

2fill in blank

medium

Complete the code to dynamically set the canonical URL using Next.js useRouter hook.

NextJS

import Head from 'next/head';
import { useRouter } from 'next/router';

export default function Page() {
  const router = useRouter();
  const canonicalUrl = (`https://example.com$[1]`).split('?')[0];

  return (
    <Head>
      <link rel="canonical" href={canonicalUrl} />
    </Head>
  );
}

Drag options to blanks, or click blank then click option'

Arouter.pathname

Brouter.asPath

Crouter.query

Drouter.route

Attempts:

3 left

💡 Hint

Common Mistakes

Using router.pathname which excludes dynamic parts

Using router.query which is an object, not a string

Using router.route which is the page route pattern

router.asPath gives the full path including query strings, so splitting at '?' removes queries for the canonical URL.

3fill in blank

hard

Fix the error in the canonical URL generation by choosing the correct method to get the current path in Next.js.

NextJS

import Head from 'next/head';
import { useRouter } from 'next/router';

export default function Page() {
  const router = useRouter();
  const canonicalUrl = `https://example.com$[1]`;

  return (
    <Head>
      <link rel="canonical" href={canonicalUrl} />
    </Head>
  );
}

Drag options to blanks, or click blank then click option'

Arouter.asPath

Brouter.query

Crouter.pathname

Drouter.basePath

Attempts:

3 left

💡 Hint

Common Mistakes

Using router.query which causes errors

Using router.pathname which does not reflect dynamic URL parts

Using router.basePath which is a prefix, not the full path

router.asPath returns the actual path shown in the browser, including dynamic segments and query strings, which is best for canonical URLs.

4fill in blank

hard

Fill both blanks to create a canonical URL that removes query parameters and hash fragments.

NextJS

import Head from 'next/head';
import { useRouter } from 'next/router';

export default function Page() {
  const router = useRouter();
  const cleanPath = router.asPath.split([1])[0].split([2])[0];
  const canonicalUrl = `https://example.com${cleanPath}`;

  return (
    <Head>
      <link rel="canonical" href={canonicalUrl} />
    </Head>
  );
}

Drag options to blanks, or click blank then click option'

A"?"

B"#"

C"/"

D"&"

Attempts:

3 left

💡 Hint

Common Mistakes

Using slash / which breaks the path

Using ampersand & which is part of query, not separator

Splitting first by "?" removes query parameters, then splitting by "#" removes hash fragments from the URL path.

5fill in blank

hard

Fill all three blanks to create a Next.js component that sets a canonical URL using useRouter and cleans query and hash.

NextJS

import Head from 'next/head';
import { useRouter } from 'next/router';

export default function Canonical() {
  const router = useRouter();
  const path = router.[1];
  const cleanPath = path.split([2])[0].split([3])[0];
  const canonicalUrl = `https://example.com${cleanPath}`;

  return (
    <Head>
      <link rel="canonical" href={canonicalUrl} />
    </Head>
  );
}

Drag options to blanks, or click blank then click option'

AasPath

B"?"

C"#"

Dpathname

Attempts:

3 left

💡 Hint

Common Mistakes

Using router.pathname which does not include query or hash

Using wrong split characters like slash or ampersand

Use router.asPath to get the full path, then split by "?" and "#" to remove query and hash parts for the canonical 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