Structured data (JSON-LD) in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add JSON-LD structured data inside a Next.js component.

NextJS

import Script from 'next/script';

export default function Product() {
  return (
    <>
      <h1>Product Page</h1>
      <Script type="application/ld+json" id="product-jsonld">
        {JSON.stringify([1])}
      </Script>
    </>
  );
}

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

A{ "@context": "https://schema.org", "@type": "Product", "name": "Coffee Mug" }

B"@context": "https://schema.org"

C<script type="application/ld+json"></script>

Dconsole.log('JSON-LD')

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a string instead of an object to JSON.stringify

Not using the Script component from next/script

Forgetting to set the correct type attribute

You need to pass a valid JSON-LD object inside JSON.stringify() to embed structured data.

2fill in blank

medium

Complete the code to add a JSON-LD breadcrumb list in Next.js.

NextJS

import Script from 'next/script';

export default function Breadcrumb() {
  const breadcrumb = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Home",
        "item": "https://example.com"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "[1]",
        "item": "https://example.com/products"
      }
    ]
  };

  return (
    <Script type="application/ld+json" id="breadcrumb-jsonld">
      {JSON.stringify(breadcrumb)}
    </Script>
  );
}

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

AContact

BBlog

CAbout

DProducts

Attempts:

3 left

💡 Hint

Common Mistakes

Using a name that does not match the URL

Leaving the name blank

Using invalid JSON syntax

The second breadcrumb item should be named "Products" to match the URL and page context.

3fill in blank

hard

Fix the error in the JSON-LD script by completing the missing key.

NextJS

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "How to use JSON-LD",
  [1]: "John Doe"
};

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

Aimage

Bauthor

CdatePublished

Dpublisher

Attempts:

3 left

💡 Hint

Common Mistakes

Using publisher instead of author

Using a key that expects an object instead of a string

Omitting the key name

The key for the article's writer is author. This fixes the missing key error.

4fill in blank

hard

Fill both blanks to create a JSON-LD object for a local business with name and address.

NextJS

const localBusiness = {
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": [1],
  "address": {
    "@type": "PostalAddress",
    "streetAddress": [2]
  }
};

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

A"Joe's Cafe"

B"123 Main St"

C"Joe's Cafe, 123 Main St"

D"Main Street"

Attempts:

3 left

💡 Hint

Common Mistakes

Putting both name and address in one string

Forgetting quotes around string values

Using incorrect keys for address

The business name should be a string like "Joe's Cafe", and the street address should be "123 Main St".

5fill in blank

hard

Fill all three blanks to create a JSON-LD object for an event with name, startDate, and location.

NextJS

const event = {
  "@context": "https://schema.org",
  "@type": "Event",
  "name": [1],
  "startDate": [2],
  "location": {
    "@type": "Place",
    "name": [3]
  }
};

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

A"Summer Festival"

B"2024-07-01T19:00"

C"Central Park"

D"July 1st"

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-ISO date format

Omitting quotes around strings

Putting location name outside the location object

The event name is a string, the startDate must be in ISO format string, and the location name is a string.