Canonical URLs in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a canonical URL?

A canonical URL is the main web address that you want search engines to consider as the original source of a page. It helps avoid duplicate content issues by telling search engines which URL to index.

beginner

Why use canonical URLs in Next.js apps?

Using canonical URLs in Next.js helps search engines understand which page version to rank. This improves SEO by preventing duplicate content penalties when the same content is accessible via different URLs.

beginner

How do you add a canonical URL in a Next.js page?

You add a canonical URL by including a <link rel="canonical" href="https://example.com/page" /> tag inside the <Head> component from 'next/head'. This tag tells search engines the preferred URL.

intermediate

What can happen if you don’t use canonical URLs on pages with similar content?

Search engines might treat similar pages as duplicates, which can lower your site's ranking or split ranking power between pages. Canonical URLs help consolidate ranking to one main page.

intermediate

Can canonical URLs be dynamic in Next.js?

Yes, you can set canonical URLs dynamically in Next.js by generating the URL based on the page’s data or route inside the <Head> component. This ensures each page has the correct canonical link.

What is the main purpose of a canonical URL?

A To load external scripts

B To redirect users to another page

C To style the page header

D To tell search engines the preferred URL for a page

Canonical URLs tell search engines which URL is the main one to index, avoiding duplicate content issues.

Where do you place the canonical URL tag in a Next.js page?

A In the page’s main <div>

B Inside the <Head> component

C Inside the <footer> element

D In the global CSS file

The canonical link tag must be inside the component to be recognized by browsers and search engines.

What can happen if multiple URLs show the same content without canonical tags?

A Search engines may penalize for duplicate content

B The page will load faster

C Users will see different content

D The site will automatically merge URLs

Without canonical tags, search engines may see duplicate content and reduce your page’s ranking.

How can you make canonical URLs dynamic in Next.js?

A By generating the URL inside the <Head> component based on page data

B By hardcoding the URL in a global file

C By using CSS variables

D By adding a script tag in the body

Dynamic canonical URLs are created by computing the URL inside the component using page data or route info.

Which Next.js import is needed to add a canonical URL tag?

A import Link from 'next/link'

B import Router from 'next/router'

C import Head from 'next/head'

D import Image from 'next/image'

The component from 'next/head' is used to add meta tags like canonical URLs.

Explain what a canonical URL is and why it is important in Next.js applications.

Think about how search engines decide which page to show when there are multiple URLs with the same content.

Describe how to implement a dynamic canonical URL in a Next.js page.

Consider how you can use JavaScript inside the component to create the 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