How to Add JSON-LD Structured Data to a Next.js Website

#nextjs #javascript #abotwrotethis

How to Add JSON-LD Structured Data to a Next.js Website

JSON-LD (JavaScript Object Notation for Linked Data) is a format for structured data markup that helps search engines better understand the content of your website. Adding JSON-LD to your Next.js website can improve SEO and enhance the display of your site in search engine results. In this guide, we'll walk through the steps to add JSON-LD structured data to a Next.js website.

Step 1: Create a JSON-LD Component

The first step is to create a reusable component for rendering JSON-LD data. This component will output the JSON-LD script tag into the <head> of your HTML document.

Create a new file JsonLd.js in your components folder:

const JsonLd = ({ data }) => (
  <script
    type="application/ld+json"
    dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
  />
);

export default JsonLd;

Step 2: Use the Component in a Page

Next, let's create a page where we want to add JSON-LD structured data. For example, let's say we have a blog post and we want to add structured data for this post.

Create a new page BlogPost.js in your pages folder:

import JsonLd from '../components/JsonLd';

const BlogPost = () => {
  // Sample blog post data
  const post = {
    title: 'How to Add JSON-LD Structured Data to a Next.js Website',
    description: 'Learn how to improve your Next.js website\'s SEO by adding JSON-LD structured data.',
    datePublished: '2024-03-23',
    author: {
      "@type": "Person",
      "name": "John Doe"
    },
    image: "https://via.placeholder.com/800x400",
    publisher: {
      "@type": "Organization",
      "name": "My Blog",
      "logo": {
        "@type": "ImageObject",
        "url": "https://via.placeholder.com/200x100"
      }
    },
    mainEntityOfPage: {
      "@type": "WebPage",
      "@id": "https://www.example.com/blog/how-to-add-json-ld-to-next-js"
    }
  };

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.description}</p>
      <p>Date Published: {post.datePublished}</p>
      <p>Author: {post.author.name}</p>
      <img src={post.image} alt={post.title} />

      {/* JSON-LD for Blog Post */}
      <JsonLd data={{
        "@context": "https://schema.org",
        "@type": "BlogPosting",
        "headline": post.title,
        "description": post.description,
        "datePublished": post.datePublished,
        "author": post.author,
        "image": [post.image],
        "publisher": post.publisher,
        "mainEntityOfPage": post.mainEntityOfPage
      }} />
    </div>
  );
};

export default BlogPost;

Step 3: Verify and Test

Now, when you visit the /blogpost route (or whatever route you've set up for this page) of your Next.js application and inspect the page source, you should see the JSON-LD structured data included:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "How to Add JSON-LD Structured Data to a Next.js Website",
  "description": "Learn how to improve your Next.js website's SEO by adding JSON-LD structured data.",
  "datePublished": "2024-03-23",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
  "image": ["https://via.placeholder.com/800x400"],
  "publisher": {
    "@type": "Organization",
    "name": "My Blog",
    "logo": {
      "@type": "ImageObject",
      "url": "https://via.placeholder.com/200x100"
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.example.com/blog/how-to-add-json-ld-to-next-js"
  }
}
</script>

On single Page (Code for Copy Pasting)

const Article = () => {
  // Dummy article data
  const article = {
    title: 'Sample Article Title',
    description: 'This is a sample article description.',
    datePublished: '2024-03-23',
    author: {
      "@type": "Person",
      "name": "John Doe"
    },
    image: "https://via.placeholder.com/800x400",
    publisher: {
      "@type": "Organization",
      "name": "Sample News",
      "logo": {
        "@type": "ImageObject",
        "url": "https://via.placeholder.com/200x100"
      }
    },
    mainEntityOfPage: {
      "@type": "WebPage",
      "@id": "https://www.example.com/article"
    }
  };

  // Define the JsonLd component within the Article component
  const JsonLd = ({ data }) => (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
    />
  );

  return (
    <div>
      <h1>{article.title}</h1>
      <p>{article.description}</p>
      <p>Date Published: {article.datePublished}</p>
      <p>Author: {article.author.name}</p>
      <img src={article.image} alt={article.title} />

      {/* JSON-LD for Article */}
      <JsonLd data={{
        "@context": "https://schema.org",
        "@type": "NewsArticle",
        "headline": article.title,
        "description": article.description,
        "datePublished": article.datePublished,
        "author": article.author,
        "image": [article.image],
        "publisher": article.publisher,
        "mainEntityOfPage": article.mainEntityOfPage
      }} />
    </div>
  );
};

export default Article;

Conclusion

In this guide, we've created a reusable JsonLd component and used it to add JSON-LD structured data to a Next.js blog post page. You can customize the post object with your actual blog post data. This structured data will help search engines understand the content of your website better, potentially improving your site's visibility and SEO performance. Remember to always validate your JSON-LD using tools like Google's Structured Data Testing Tool to ensure it meets the schema.org guidelines.

DEV Community

How to Add JSON-LD Structured Data to a Next.js Website