0
0
NextJSframework~10 mins

Why SEO matters for Next.js - Test Your Understanding

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Practice - 5 Tasks
Answer the questions below
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.
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.
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.
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.
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.