Why SEO matters for Next.js - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Next.js page that sets a custom page title for SEO.

NextJS

import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>[1]</title>
      </Head>
      <main>
        <h1>Welcome to my site</h1>
      </main>
    </>
  );
}

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

AMy Next.js SEO Page

Bindex.js

CSEO Title

DHomePage

Attempts:

3 left

💡 Hint

Common Mistakes

Using a filename or generic word as the title.

Leaving the title empty or missing.

The <title> tag inside Head sets the page title, which is important for SEO. Here, 'My Next.js SEO Page' is a meaningful title.

2fill in blank

medium

Complete the code to add a meta description tag for SEO in a Next.js page.

NextJS

import Head from 'next/head';

export default function About() {
  return (
    <>
      <Head>
        <meta name="description" content="[1]" />
      </Head>
      <main>
        <h1>About Us</h1>
      </main>
    </>
  );
}

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

AAbout page

BNext.js app

CLearn more about our company and values.

DCompany info

Attempts:

3 left

💡 Hint

Common Mistakes

Using very short or vague descriptions.

Omitting the meta description tag.

The meta description provides a summary for search engines. A clear, informative description like 'Learn more about our company and values.' helps SEO.

3fill in blank

hard

Fix the error in the Next.js page to ensure the meta viewport tag is correctly added for SEO and responsiveness.

NextJS

import Head from 'next/head';

export default function Contact() {
  return (
    <>
      <Head>
        <meta name="viewport" content=[1] />
      </Head>
      <main>
        <h1>Contact Us</h1>
      </main>
    </>
  );
}

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

A'width=device-width, initial-scale=1'

B"width=device-width, initial-scale=1"

Cwidth=device-width, initial-scale=1

D{width=device-width, initial-scale=1}

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes around the content string causing syntax errors.

Using single quotes or curly braces incorrectly.

The content attribute value must be a string enclosed in double quotes inside JSX. So it should be "width=device-width, initial-scale=1".

4fill in blank

hard

Fill both blanks to create a Next.js page that uses server-side rendering to improve SEO by fetching data before rendering.

NextJS

export async function getServerSideProps() {
  const res = await fetch('[1]');
  const data = await res.json();
  return { props: { data: [2] } };
}

export default function Blog({ data }) {
  return (
    <main>
      <h1>Blog Posts</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </main>
  );
}

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

Ahttps://api.example.com/posts

Bposts

Cdata.posts

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect or incomplete API URLs.

Passing wrong data property to props.

To fetch blog posts from an API, the URL is 'https://api.example.com/posts'. The fetched JSON is assigned to data and passed as props.

5fill in blank

hard

Fill all three blanks to add SEO-friendly Open Graph meta tags in a Next.js page.

NextJS

import Head from 'next/head';

export default function Product() {
  return (
    <>
      <Head>
        <meta property="og:title" content="[1]" />
        <meta property="og:description" content="[2]" />
        <meta property="og:image" content="[3]" />
      </Head>
      <main>
        <h1>Product Details</h1>
      </main>
    </>
  );
}

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

ASuper Gadget 3000

BThe best gadget for all your needs.

Chttps://example.com/images/gadget.png

DGadget

Attempts:

3 left

💡 Hint

Common Mistakes

Using vague or generic content in Open Graph tags.

Providing invalid or missing image URLs.

Open Graph tags help social media show rich previews. Use a clear title, descriptive text, and a valid image URL.

Practice

1. Why is SEO important for a Next.js website?

easy

A. It makes the website load faster on mobile devices.

B. It helps the website appear higher in search engine results.

C. It automatically creates user accounts for visitors.

D. It changes the website's color scheme based on user preference.

Solution

1. Step 1: Understand SEO's role in web visibility

   SEO improves how search engines rank and show your website to users.

2. Step 2: Connect SEO to Next.js benefits

   Next.js sites with good SEO get more visitors because they appear higher in search results.

3. Final Answer:

   It helps the website appear higher in search engine results. -> Option B

4. Quick Check:

   SEO = better search ranking [OK]

Hint: SEO means better search ranking and more visitors [OK]

Common Mistakes:

• Confusing SEO with website speed
• Thinking SEO creates user accounts
• Believing SEO changes website colors

2. Which Next.js component is used to add SEO-friendly titles and descriptions to a page?

easy

A. <Meta>

B. <SEO>

C. <Title>

D. <Head>

Solution

1. Step 1: Recall Next.js components for page metadata

   Next.js uses the <Head> component to insert metadata like titles and descriptions.

2. Step 2: Identify the correct component name

   The official component for SEO metadata is <Head>, not <Meta>, <Title>, or <SEO>.

3. Final Answer:

   <Head> -> Option D

4. Quick Check:

   Metadata component = <Head> [OK]

Hint: Use <Head> to add SEO tags in Next.js pages [OK]

Common Mistakes:

• Using non-existent components like <Meta>
• Confusing <Title> with <Head>
• Assuming <SEO> is a built-in component

3. What will be the effect of this Next.js code snippet on SEO?

import Head from 'next/head';

export default function Home() {
  return (
    <>
      
        My Next.js Site
        
      
      
Content here
    </>
  );
}

medium

A. The page will have a title and description visible to search engines.

B. The page will not have any title or description for SEO.

C. The page will show an error because <Head> is not imported.

D. The page will only have a title but no description.

Solution

1. Step 1: Check the use of <Head> component

   The code imports Head and uses it to add a <title> and <meta name="description"> tag.

2. Step 2: Understand SEO impact of these tags

   Search engines read the title and description tags to understand page content, improving SEO.

3. Final Answer:

   The page will have a title and description visible to search engines. -> Option A

4. Quick Check:

   Title + description tags = SEO boost [OK]

Hint: Title and meta description tags improve SEO visibility [OK]

Common Mistakes:

• Forgetting to import <Head>
• Assuming meta tags are ignored by search engines
• Thinking only visible content affects SEO

4. Identify the error in this Next.js SEO code snippet:

import Head from 'next/head';

export default function About() {
  return (
    <>
      
        About Us
        
      
      
About content
    </>
  );
}

medium

A. The <Head> component is not imported.

B. The <title> tag should be outside <Head>.

C. The <meta> tag is missing the name attribute.

D. The <main> tag cannot be used inside fragments.

Solution

1. Step 1: Review the meta tag syntax

   The meta tag for description must have name="description", not just description="...".

2. Step 2: Confirm other parts are correct

   The <title> is correctly inside <Head>, and <main> inside fragments is valid.

3. Final Answer:

   The <meta> tag is missing the name attribute. -> Option C

4. Quick Check:

   Meta description needs name="description" [OK]

Hint: Meta tags need name="description" for SEO [OK]

Common Mistakes:

• Using description attribute instead of name
• Placing title outside Head
• Assuming main can't be inside fragments

5. You want to improve SEO for a Next.js blog with many posts. Which approach best helps search engines index each post properly?

hard

A. Use static generation with dynamic routes and add unique <Head> metadata for each post.

B. Load all posts on one page and hide content with CSS to keep it clean.

C. Use client-side rendering only and add metadata in a global layout component.

D. Avoid using <Head> and rely on default browser titles.

Solution

1. Step 1: Understand SEO for multiple pages

   Each blog post should have its own URL and unique metadata so search engines can index them separately.

2. Step 2: Choose Next.js features that support SEO

   Static generation with dynamic routes allows pre-rendering pages with unique <Head> tags for each post, improving SEO.

3. Final Answer:

   Use static generation with dynamic routes and add unique <Head> metadata for each post. -> Option A

4. Quick Check:

   Static generation + unique metadata = best SEO [OK]

Hint: Static generation with unique metadata boosts SEO for many pages [OK]

Common Mistakes:

• Hiding content with CSS to improve SEO
• Relying only on client-side rendering for SEO
• Ignoring metadata for individual posts