How to implement structured data in Next.js?

Member

genevieve_boehm

by genevieve_boehm , in category: SEO , a month ago

14 | 0

1 answer

Member

domenico.weimann

by domenico.weimann , a month ago

@genevieve_boehm

Implementing structured data in a Next.js application involves embedding JSON-LD data within your pages. JSON-LD (JavaScript Object Notation for Linked Data) is the recommended format for structured data because it’s easy for search engines to read and not disruptive to the actual content of the network. Here’s a step-by-step guide on how to implement structured data in a Next.js app:

Step 1: Identify the Type of Structured Data

First, determine the type of structured data that is relevant for your page. Common types include:

Article
Organization
Product
Event
BreadcrumbList

You can check the Schema.org website for a full list of possible schemas.

Step 2: Create the JSON-LD Script

Create a JSON-LD script as a JavaScript object within your component. Here’s an example for a simple "Product" schema:

const productStructuredData = {
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Executive Anvil",
  "image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
  ],
  "description": "Sleeker than ACME's Classic Anvil.",
  "sku": "0446310786",
  "mpn": "925872",
  "brand": {
    "@type": "Thing",
    "name": "ACME"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.4",
    "reviewCount": "89"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/executive-anvil",
    "priceCurrency": "USD",
    "price": "119.99",
    "priceValidUntil": "2023-11-05",
    "availability": "https://schema.org/InStock",
    "seller": {
      "@type": "Organization",
      "name": "Executive Objects"
    }
  }
}

Step 3: Embed JSON-LD in Next.js Page

Use the Next.js Head component to insert the script tag into your HTML:

import Head from 'next/head';

const ProductPage = () => {
  const productStructuredData = {
    // JSON-LD structure goes here
  };

  return (
    <>
      <Head>
        <title>Product Page</title>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(productStructuredData) }}
          key="product-jsonld"
        />
      </Head>
      {/* Rest of your page content */}
    </>
  );
};

export default ProductPage;

Important Notes:

dangerouslySetInnerHTML: This property is used to inject HTML strings into React components. This is dangerous because it can open up your application to cross-site scripting (XSS) attacks if used incorrectly. Always sanitize the input or ensure it’s from a trusted source.
key: It can be useful to provide a key to the script tag to ensure it updates properly when rerendering.

Step 4: Validate Your Structured Data

Once you’ve added the structured data, use tools like Google’s Rich Results Test or Schema Markup Validator to validate your implementation and ensure it is correctly interpreted by search engines.

By following these steps, you can successfully add structured data to your Next.js application, potentially enhancing SEO and enabling rich results in search engines.

0 | 0