JSON-LD is a critical piece of the SEO puzzle, especially when you want to enrich your search results with valuable information such as the opening hours of your hair salon, the menu items of your restaurant, or the venue details of your event. In short: you need this to stand out in search results.

What is JSON-LD?

JSON-LD stands for JavaScript Object Notation for Linked Data. It’s a lightweight and easy-to-use format to structure your website’s data so that search engines like Google can better understand and enhance your content with rich snippets, knowledge panels, and other search features.

While there are other types of structured data formats, such as Microdata and RDFa, it’s important to note that Google recommends using JSON-LD for implementing structured data.

Getting Started with JSON-LD

Setting up JSON-LD on your website might seem daunting, but rest assured—it’s simpler than it sounds. While anything related to SEO can appear complex, JSON-LD is just a matter of embedding some structured data in your HTML.

The JSON-LD data should be placed inside a <script/> tag with the type attribute set to application/ld+json. Here’s a basic example:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "John Doe",
  "jobTitle": "Software Engineer",
  "url": "https://www.johndoe.com",
  "sameAs": [
    "https://www.linkedin.com/in/johndoe",
    "https://twitter.com/johndoe"
  ]
}
</script>

Not too bad, right? This example is for a personal CV page that includes links to John Doe’s social media profiles. Keep in mind that different pages on your website will require different kinds of JSON-LD data, depending on their content.

Implementing JSON-LD in Next.js

Now that you’ve got a handle on the basics, let’s integrate JSON-LD into a Next.js application. We’ll create a reusable React component for embedding JSON-LD data. First, install the schema-dts library to help with TypeScript types:

npm install schema-dts

Next, create the JsonLd component:

import { FC } from 'react';
import { Thing, WithContext } from 'schema-dts';

type Props<T extends Thing> = {
  data: WithContext<T>;
};

const JsonLd: FC<
  Props<
    Thing & {
      '@context': 'https://schema.org';
    }
  >
> = ({ data }) => {
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
    />
  );
};

export default JsonLd;

This component allows you to pass any structured data object, ensuring it’s properly formatted and injected into your Next.js pages.

Where to Use the JSON-LD Component

Now that your JsonLd component is ready, you can use it throughout your application. For example, let’s add structured data to the homepage of a restaurant in src/app/page.tsx:

import { FC } from 'react';
import JsonLd from '../components/JsonLd'; // Adjust the import path as necessary
import { Restaurant, WithContext } from 'schema-dts';

const RestaurantPage: FC = () => {
  const restaurantJsonLd: WithContext<Restaurant> = {
    '@type': 'Restaurant',
    '@context': 'https://schema.org',
    name: 'The Gourmet Kitchen',
    address: {
      '@type': 'PostalAddress',
      streetAddress: '123 Delicious Ave',
      addressLocality: 'Food City',
      addressRegion: 'FC',
      postalCode: '12345',
      addressCountry: 'US',
    },
    telephone: '+1-800-555-1234',
    openingHours: ['Mo-Sa 11:00-22:00', 'Su 12:00-20:00'],
    hasMenu: {
      '@type': 'Menu',
      name: 'Main Menu',
      hasMenuSection: [
        {
          '@type': 'MenuSection',
          name: 'Pizza',
          hasMenuItem: [
            {
              '@type': 'MenuItem',
              name: 'Margherita Pizza',
              offers: {
                '@type': 'Offer',
                priceCurrency: 'USD',
                price: '12.99',
              },
            },
          ],
        },
        {
          '@type': 'MenuSection',
          name: 'Salads',
          hasMenuItem: [
            {
              '@type': 'MenuItem',
              name: 'Caesar Salad',
              offers: {
                '@type': 'Offer',
                priceCurrency: 'USD',
                price: '8.99',
              },
            },
          ],
        },
        {
          '@type': 'MenuSection',
          name: 'Pasta',
          hasMenuItem: [
            {
              '@type': 'MenuItem',
              name: 'Spaghetti Bolognese',
              offers: {
                '@type': 'Offer',
                priceCurrency: 'USD',
                price: '14.99',
              },
            },
          ],
        },
      ],
    },
  };

  return (
    <>
      <h1>The Gourmet Kitchen</h1>
      <p>
        Welcome to The Gourmet Kitchen! Enjoy our exquisite dishes made with
        love.
      </p>

      {/* Insert the JSON-LD data for the restaurant */}
      <JsonLd data={restaurantJsonLd} />
    </>
  );
};

export default RestaurantPage;

Not a Restaurant Owner?

No worries! JSON-LD isn’t limited to restaurants. You can find supported schemas for various types of businesses and entities on the schema.org website. They even provide a search tool to help you find the appropriate schema for your needs—how cool is that?

Wrapping Up

By implementing JSON-LD structured data, you’re taking a significant step toward improving your website’s SEO and enriching your search results. While this doesn’t guarantee instant results, it’s a powerful tool in making your content more accessible and attractive to search engines.

And hey, you’ve made it this far—here’s a virtual avocado 🥑 for your efforts. Keep up the great work, and your website will be all the better for it!

Enhance Your SEO with JSON-LD: A Practical Guide