Metadata API for SEO in NextJS - Mini Project: Build & Apply

Metadata API for SEO in Next.js

📖 Scenario: You are building a simple Next.js website. You want to improve how search engines see your pages by adding metadata like page titles and descriptions.

🎯 Goal: Create a Next.js page that uses the Metadata API to set the page title and description for SEO.

📋 What You'll Learn

Create a Next.js page component

Define a metadata object with title and description

Export the metadata object from the page

Render a simple heading in the page

💡 Why This Matters

🌍 Real World

SEO metadata helps search engines understand your page content better, improving your website's visibility and ranking.

💼 Career

Knowing how to add metadata in Next.js is important for frontend developers to build SEO-friendly web applications.

1

Create the Next.js page component

Create a file named page.tsx and write a React functional component called Page that returns a <main> element with a heading <h1>Welcome to My Site</h1>.

NextJS

// Your code here

export default function Page() {
  return (
    
      Welcome to My Site
    
  )
}

Need a hint?

Define a function named Page that returns JSX with a <main> and <h1> inside.

2

Add metadata object with title and description

Above the Page component, create a constant called metadata that is an object with title set to 'My Site Home' and description set to 'This is the homepage of my Next.js site.'.

NextJS

// Your code here

export default function Page() {
  return (
    
      Welcome to My Site
    
  )
}

Need a hint?

Create a constant named metadata with title and description properties as strings.

3

Export the metadata object

Make sure the metadata object is exported using export const metadata so Next.js can use it for SEO.

NextJS

// Your code here

export const metadata = {
  title: 'My Site Home',
  description: 'This is the homepage of my Next.js site.'
}

export default function Page() {
  return (
    
      Welcome to My Site
    
  )
}

Need a hint?

Use export const metadata to export the metadata object.

4

Complete the page with metadata for SEO

Ensure the file page.tsx exports the metadata object and the default Page component with the heading inside <main>. This completes the SEO metadata setup.

NextJS

// Your code here

export const metadata = {
  title: 'My Site Home',
  description: 'This is the homepage of my Next.js site.'
}

export default function Page() {
  return (
    
      Welcome to My Site
    
  )
}

Need a hint?

Check that both metadata and Page are exported correctly and the JSX is inside <main>.