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.