Metadata API for SEO in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Metadata type from Next.js.

NextJS

import type { [1] } from 'next';

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

AHead

BMetadata

CSeo

DMeta

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Head' which is a component, not a type.

Using 'Seo' or 'Meta' which are not valid imports.

The Metadata type is imported from 'next' to define page metadata in Next.js.

2fill in blank

medium

Complete the code to export a metadata object with a title.

NextJS

export const metadata: Metadata = {
  title: [1]
};

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

A'My Page Title'

Btitle

C"My Page Title"

DMy Page Title

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the title string.

Using an undefined variable instead of a string.

The title value must be a string literal, so it needs quotes.

3fill in blank

hard

Fix the error in the metadata description property.

NextJS

export const metadata: Metadata = {
  description: [1]
};

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

A'This is my page description'

BThis is my page description

C"This is my page description"

Ddescription

Attempts:

3 left

💡 Hint

Common Mistakes

Writing description without quotes causing syntax error.

Using a variable name instead of a string.

The description must be a string literal, so it requires quotes.

4fill in blank

hard

Fill both blanks to add openGraph title and description in metadata.

NextJS

export const metadata: Metadata = {
  openGraph: {
    title: [1],
    description: [2]
  }
};

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

A'Open Graph Title'

B'Open Graph Description'

C"Open Graph Description"

D"Open Graph Title"

Attempts:

3 left

💡 Hint

Common Mistakes

Missing quotes causing syntax errors.

Swapping title and description values.

Both title and description must be string literals with quotes.

5fill in blank

hard

Fill all three blanks to add twitter card metadata with card type, title, and description.

NextJS

export const metadata: Metadata = {
  twitter: {
    card: [1],
    title: [2],
    description: [3]
  }
};

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

A'summary_large_image'

B'Twitter Card Title'

C'Twitter Card Description'

D'summary'

Attempts:

3 left

💡 Hint

Common Mistakes

Using card type without quotes.

Mixing up title and description values.

The twitter card type is usually 'summary_large_image' or 'summary'. Title and description must be strings.