SEO in Next.js logo

Generate JSON-LD structured data for an article page in Next.js

Use the JsonLdForArticle component to generate JSON-LD structured data for an article page in Next.js, including the headline, description, author information, and more.

Props

  • Name
    url
    Type
    string
    Required
    required
    Description

    The URL of the page.

  • Name
    headline
    Type
    string
    Required
    required
    Description

    The headline of the article.

  • Name
    description
    Type
    string
    Required
    required
    Description

    The description of the article.

  • Name
    image
    Type
    string
    Required
    required
    Description

    The image associated with the article.

  • Name
    datePublished
    Type
    string
    Required
    required
    Description

    The publication date of the article.

  • Name
    dateModified
    Type
    string
    Required
    required
    Description

    The last modification date of the article.

  • Name
    author
    Type
    Object
    Required
    required
    Description

    The author information of the article.

  • Name
    author.name
    Type
    string
    Required
    required
    Description

    The name of the author of the article.

  • Name
    author.url
    Type
    string
    Required
    required
    Description

    The URL of the author of the article.

Usage

Add the file to your project

Copy the JsonLdForArticle.tsx or JsonLdForArticle.jsx file to your project.

Import the JsonLdForArticle component

Import the JsonLdForArticle component into every page where you want to generate the JSON-LD structured data.

src/app/page.tsx

import { JsonLdForArticle } from "@/components/JsonLdForArticle";

export default function Page() {
  return (
    <JsonLdForArticle
      url="https://novajs.dev/getting-started"
      headline="Getting started with Nova.js"
      description="Learn how to add dependency-free React hooks to your project in 3 easy steps."
      image="https://novajs.dev/getting-started.png"
      datePublished="2024-01-06"
      dateModified="2025-01-06"
      author={{ name: "Daniel Castillo", url: "https://dlcastillop.com" }}
    />
  );
}