NextjsHow-ToBeginner · 4 min read

How to Add Structured Data in Next.js for SEO

In Next.js, add structured data by placing a <script> tag with JSON-LD inside the Head component from next/head. This script contains your structured data as a JSON string with application/ld+json type, helping search engines understand your page content.

📐

Syntax

Use the Head component from next/head to insert a <script> tag with your structured data in JSON-LD format. The script must have type="application/ld+json" and contain a JSON string representing your structured data.

This method ensures the structured data is included in the HTML head, where search engines expect it.

javascript

import Head from 'next/head';

export default function Page() {
  const structuredData = {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "Example Site",
    "url": "https://www.example.com"
  };

  return (
    <>
      <Head>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
        />
      </Head>
      <main>
        {/* Page content here */}
      </main>
    </>
  );
}

💻

Example

This example shows how to add structured data describing a local business using JSON-LD inside the Head component. It helps search engines display rich information like address and phone number in search results.

javascript

import Head from 'next/head';

export default function LocalBusinessPage() {
  const localBusinessData = {
    "@context": "https://schema.org",
    "@type": "LocalBusiness",
    "name": "Joe's Coffee Shop",
    "image": "https://www.example.com/photos/1x1/photo.jpg",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "123 Main St",
      "addressLocality": "Anytown",
      "addressRegion": "CA",
      "postalCode": "12345",
      "addressCountry": "US"
    },
    "telephone": "+1-555-555-5555",
    "url": "https://www.example.com/joe-coffee"
  };

  return (
    <>
      <Head>
        <title>Joe's Coffee Shop</title>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(localBusinessData) }}
        />
      </Head>
      <main>
        <h1>Welcome to Joe's Coffee Shop</h1>
        <p>Best coffee in town!</p>
      </main>
    </>
  );
}

Output

<!DOCTYPE html> <html lang="en"> <head> <title>Joe's Coffee Shop</title> <script type="application/ld+json">{"@context":"https://schema.org","@type":"LocalBusiness","name":"Joe's Coffee Shop","image":"https://www.example.com/photos/1x1/photo.jpg","address":{"@type":"PostalAddress","streetAddress":"123 Main St","addressLocality":"Anytown","addressRegion":"CA","postalCode":"12345","addressCountry":"US"},"telephone":"+1-555-555-5555","url":"https://www.example.com/joe-coffee"}</script> </head> <body> <main> <h1>Welcome to Joe's Coffee Shop</h1> <p>Best coffee in town!</p> </main> </body> </html>

⚠️

Common Pitfalls

Not using dangerouslySetInnerHTML: JSON-LD must be inserted as raw HTML inside the <script> tag, so using normal JSX content will not work.
Incorrect JSON format: The structured data must be valid JSON. Forgetting to stringify or including trailing commas can cause errors.
Placing script outside Head: Structured data should be inside the Head component to be recognized by search engines.

jsx

/* Wrong way: JSON object as JSX content (won't work) */
<Head>
  <script type="application/ld+json">
    {structuredData}
  </script>
</Head>

/* Right way: Use dangerouslySetInnerHTML with JSON.stringify */
<Head>
  <script
    type="application/ld+json"
    dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
  />
</Head>

📊

Quick Reference

Import Head from next/head.
Create your structured data as a JavaScript object following schema.org standards.
Insert a <script> tag with type="application/ld+json" inside Head.
Use dangerouslySetInnerHTML with JSON.stringify() to embed the JSON-LD.
Validate your structured data with Google's Rich Results Test tool.

✅

Key Takeaways

Always add structured data inside the Head component using a <script> tag with type "application/ld+json".

Use dangerouslySetInnerHTML with JSON.stringify() to insert JSON-LD correctly in Next.js.

Validate your structured data JSON to avoid syntax errors and ensure search engines can read it.

Place structured data scripts in the page head for best SEO results.

Follow schema.org standards to create meaningful structured data for your content.