Structured data (JSON-LD) in NextJS - Step-by-Step Execution

Concept Flow - Structured data (JSON-LD)

Create JSON-LD object

↓

Embed in <script type="application/ld+json">

↓

Place script in Next.js component

↓

Render component in page

↓

Browser reads script tag

↓

Search engines parse JSON-LD

↓

Rich results or better SEO

This flow shows how to create JSON-LD data, embed it in a Next.js component, render it, and how browsers and search engines use it.

Execution Sample

NextJS

export default function Page() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Person",
    "name": "Alice"
  };
  return <script type="application/ld+json">{JSON.stringify(jsonLd)}</script>;
}

This Next.js component renders a script tag with JSON-LD structured data describing a person named Alice.

Execution Table

Step	Action	Evaluation	Result
1	Define jsonLd object	Create JS object with @context, @type, name	{"@context":"https://schema.org","@type":"Person","name":"Alice"}
2	Convert jsonLd to string	JSON.stringify(jsonLd)	{"@context":"https://schema.org","@type":"Person","name":"Alice"}
3	Render <script> tag with JSON-LD	Insert string inside <script type="application/ld+json">	<script type="application/ld+json">{...}</script>
4	Browser parses page	Reads script tag content	JSON-LD data available in DOM
5	Search engine reads JSON-LD	Parses structured data	Improved SEO and rich results
6	End	No more steps	Execution complete

💡 All steps complete, JSON-LD embedded and ready for search engines

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
jsonLd	undefined	{"@context":"https://schema.org","@type":"Person","name":"Alice"}	{"@context":"https://schema.org","@type":"Person","name":"Alice"}	{"@context":"https://schema.org","@type":"Person","name":"Alice"}
stringifiedJsonLd	undefined	undefined	{"@context":"https://schema.org","@type":"Person","name":"Alice"}	{"@context":"https://schema.org","@type":"Person","name":"Alice"}

Key Moments - 3 Insights

Why do we use JSON.stringify on the jsonLd object before embedding it?

Because the script tag content must be a string, not a JavaScript object. JSON.stringify converts the object to a valid JSON string, as shown in execution_table step 2.

Can we put the JSON-LD object directly inside JSX without stringifying?

No, JSX expects string content inside the script tag. Without stringifying, it would cause an error or render [object Object], as seen in execution_table step 3.

Why is the script tag's type attribute set to 'application/ld+json'?

This tells browsers and search engines that the script content is JSON-LD structured data, so they parse it accordingly, as described in execution_table steps 4 and 5.

Visual Quiz - 3 Questions

Look at the execution_table at step 2. What is the value of the JSON string after JSON.stringify is called?

A {"@context":"https://schema.org","@type":"Person","name":"Alice"}

B {@context: "https://schema.org", @type: "Person", name: "Alice"}

C [object Object]

D undefined

💡 Hint

Check the 'Evaluation' and 'Result' columns at step 2 in the execution_table.

At which step does the browser read the JSON-LD data from the script tag?

A Step 1

B Step 4

C Step 3

D Step 6

💡 Hint

Look for when the browser parses the page and reads the script tag content in the execution_table.

If we forget to set type="application/ld+json" on the script tag, what would happen?

A The page would crash

B The JSON-LD data would still be parsed correctly

C Search engines might not recognize the data as JSON-LD

D The browser would ignore the script tag

💡 Hint

Refer to the key_moments explanation about the importance of the script tag's type attribute.

Concept Snapshot

Structured data with JSON-LD in Next.js:
- Create a JS object with schema.org context
- Use JSON.stringify to convert it to a string
- Embed inside <script type="application/ld+json"> in your component
- Render component in page
- Search engines read this for SEO and rich results

Full Transcript

This lesson shows how to add structured data using JSON-LD in a Next.js app. First, you create a JavaScript object describing your data with the '@context' and '@type' keys. Then, you convert this object to a JSON string using JSON.stringify. Next, you embed this string inside a script tag with type 'application/ld+json' in your React component's return statement. When the page renders, the browser includes this script tag in the DOM. Search engines then read this JSON-LD data to understand your page better, which can improve SEO and enable rich search results. Key points include always stringifying the object and setting the correct script type attribute.

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