NextJSframework~30 mins

Canonical URLs in NextJS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

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
    
  )
}

Need a hint?

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

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
    
  )
}

Need a hint?

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

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 */}
    
  )
}

Need a hint?

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