Structured data (JSON-LD) in NextJS - Mini Project: Build & Apply

Structured data (JSON-LD) in Next.js

📖 Scenario: You are building a simple Next.js page for a local bakery. You want to add structured data using JSON-LD to help search engines understand your business details better.

🎯 Goal: Create a Next.js page that includes JSON-LD structured data for the bakery using a <script> tag inside the <head>. The structured data should describe the bakery's name, address, and opening hours.

📋 What You'll Learn

Create a Next.js page component named BakeryPage

Add a JSON-LD object describing the bakery with these exact details:

name: "Sweet Treats Bakery"

address: "123 Candy Lane, Sugar City, CA 90210"

openingHours: "Mo-Fr 08:00-18:00"

Insert the JSON-LD inside a <script type=\"application/ld+json\"> tag in the <head> using Next.js Head component

💡 Why This Matters

🌍 Real World

Structured data helps search engines understand your website content better, improving SEO and enabling rich search results.

💼 Career

Knowing how to add JSON-LD in Next.js is useful for frontend developers working on SEO optimization and enhancing website visibility.

1

Create the bakery data object

Create a constant called bakeryData with the following JSON-LD structure as a JavaScript object: @context set to "https://schema.org", @type set to "Bakery", name set to "Sweet Treats Bakery", address set to "123 Candy Lane, Sugar City, CA 90210", and openingHours set to "Mo-Fr 08:00-18:00".

NextJS

# Your code here
// Create bakeryData object with JSON-LD info

Hint

Use a JavaScript object with keys exactly as shown. Use double quotes for JSON keys and string values.

2

Import Next.js Head component

Add an import statement at the top of the file to import Head from next/head.

NextJS

const bakeryData = {
  "@context": "https://schema.org",
  "@type": "Bakery",
  "name": "Sweet Treats Bakery",
  "address": "123 Candy Lane, Sugar City, CA 90210",
  "openingHours": "Mo-Fr 08:00-18:00"
};

// Import Head from next/head
# Your code here

Hint

Use the exact import syntax: import Head from "next/head";

3

Create the BakeryPage component with JSON-LD script

Create a React functional component called BakeryPage that returns a fragment containing a <Head> component. Inside <Head>, add a <script> tag with type="application/ld+json" and set its content to the stringified bakeryData object using JSON.stringify(bakeryData).

NextJS

import Head from "next/head";

const bakeryData = {
  "@context": "https://schema.org",
  "@type": "Bakery",
  "name": "Sweet Treats Bakery",
  "address": "123 Candy Lane, Sugar City, CA 90210",
  "openingHours": "Mo-Fr 08:00-18:00"
};

// Create BakeryPage component with Head and JSON-LD script
# Your code here

Hint

Use dangerouslySetInnerHTML to insert JSON-LD inside the <script> tag in React.

4

Add a simple page heading inside the component

Inside the BakeryPage component's fragment, below the <Head> tag, add an <h1> element with the text "Welcome to Sweet Treats Bakery".

NextJS

import Head from "next/head";

const bakeryData = {
  "@context": "https://schema.org",
  "@type": "Bakery",
  "name": "Sweet Treats Bakery",
  "address": "123 Candy Lane, Sugar City, CA 90210",
  "openingHours": "Mo-Fr 08:00-18:00"
};

export default function BakeryPage() {
  return (
    
      
        
      
      {/* Add heading below */}
      # Your code here
    
  );
}

Hint

Place the <h1> inside the fragment but outside the <Head> tag.

Practice

1. What is the main purpose of adding JSON-LD structured data in a Next.js page?

easy

A. To improve server response time

B. To help search engines understand the page content better

C. To add interactive animations to the page

D. To style the page with custom CSS

Solution

1. Step 1: Understand JSON-LD role

   JSON-LD is a format for structured data that helps search engines understand the content of a webpage.

2. Step 2: Identify its use in Next.js

   In Next.js, JSON-LD is used to improve SEO by providing clear data to search engines, not for styling or animations.

3. Final Answer:

   To help search engines understand the page content better -> Option B

4. Quick Check:

   JSON-LD purpose = SEO improvement [OK]

Hint: JSON-LD is for SEO, not styling or animations [OK]

Common Mistakes:

• Confusing JSON-LD with CSS or JavaScript animations
• Thinking JSON-LD speeds up server response
• Assuming JSON-LD changes page appearance

2. Which is the correct way to include JSON-LD structured data in a Next.js component?

easy

A.

B.

C.

D.

Solution

1. Step 1: Use Next.js Script component

   Next.js provides the Script component from next/script to safely add scripts including JSON-LD.

2. Step 2: Use dangerouslySetInnerHTML correctly

   JSON-LD must be added as a string inside dangerouslySetInnerHTML to avoid React escaping it.

3. Final Answer:

   <Script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} /> -> Option C

4. Quick Check:

   Use Next.js Script + dangerouslySetInnerHTML [OK]

Hint: Use Next.js Script with dangerouslySetInnerHTML for JSON-LD [OK]

Common Mistakes:

• Using lowercase <script> tag directly in JSX
• Not using dangerouslySetInnerHTML for JSON-LD
• Forgetting to import Script from next/script

3. Given this Next.js code snippet, what will be the rendered output in the HTML?

import Script from 'next/script';

const data = {"@context": "https://schema.org", "@type": "Person", "name": "Alice"};

export default function Page() {
  return (
    <>
      <h1>Profile</h1>
      <Script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} />
    </>
  );
}

medium

A. Profile

B. Profile

C. Profile

D. Profile

Solution

1. Step 1: Understand Script output

   The Next.js Script component renders a <script> tag with the specified type and inner HTML.

2. Step 2: Check JSON-LD content

   The JSON-LD data is stringified and inserted as raw JSON inside the script tag with type application/ld+json.

3. Final Answer:

   <h1>Profile</h1><script type="application/ld+json">{"@context":"https://schema.org","@type":"Person","name":"Alice"}</script> -> Option D

4. Quick Check:

   JSON-LD script tag with stringified data [OK]

Hint: JSON-LD renders as script with type and stringified JSON [OK]

Common Mistakes:

• Using wrong script type attribute
• Rendering JSON object instead of string
• Placing JSON inside curly braces in HTML output

4. What is wrong with this Next.js code for adding JSON-LD?

import Script from 'next/script';

const data = {"@context": "https://schema.org", "@type": "Organization", "name": "My Company"};

export default function Home() {
  return (
    <Script type="application/ld+json">{JSON.stringify(data)}</Script>
  );
}

medium

A. Using <Script> without dangerouslySetInnerHTML causes JSON to render as text, not script content

B. Missing import of React causes error

C. JSON.stringify should not be used inside Script

D. Script component must be self-closing

Solution

1. Step 1: Check Script usage

   The Script component requires dangerouslySetInnerHTML to insert raw JSON-LD content inside the script tag.

2. Step 2: Identify the error

   Passing JSON string as children renders it as text inside the script tag, which is invalid for JSON-LD.

3. Final Answer:

   Using <Script> without dangerouslySetInnerHTML causes JSON to render as text, not script content -> Option A

4. Quick Check:

   Use dangerouslySetInnerHTML for JSON-LD scripts [OK]

Hint: Always use dangerouslySetInnerHTML for JSON-LD in Script [OK]

Common Mistakes:

• Passing JSON as children instead of dangerouslySetInnerHTML
• Forgetting to stringify JSON data
• Assuming Script auto-inserts raw JSON

5. You want to add multiple JSON-LD scripts for different entities on a Next.js page. Which approach correctly adds two JSON-LD scripts safely?

hard

A. Use two <Script> components each with type="application/ld+json" and dangerouslySetInnerHTML containing separate JSON objects

B. Combine both JSON objects into one and add a single <Script> with dangerouslySetInnerHTML

C. Add one <Script> with an array of JSON objects inside dangerouslySetInnerHTML

D. Add JSON-LD as inline JavaScript variables inside a single <Script> tag

Solution

1. Step 1: Understand JSON-LD script requirements

   Each JSON-LD script tag should contain a single JSON object describing one entity for clarity and correctness.

2. Step 2: Use multiple Script components

   In Next.js, you can safely add multiple Script components each with their own JSON-LD data using dangerouslySetInnerHTML.

3. Final Answer:

   Use two <Script> components each with type="application/ld+json" and dangerouslySetInnerHTML containing separate JSON objects -> Option A

4. Quick Check:

   Multiple Script tags with separate JSON-LD objects [OK]

Hint: Use separate Script tags for each JSON-LD object [OK]

Common Mistakes:

• Putting multiple JSON objects in one script tag without array
• Using arrays inside JSON-LD script which is invalid
• Embedding JSON-LD as JS variables instead of script content