# Add Article JSON-LD structured data to a page

`seo-in-nextjs` provides the `JsonLdForArticle` component to easily add Article-specific JSON-LD structured data to a page.

## Using the JsonLdForArticle component

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

   ```tsx
   // app/article/getting-started/page.tsx
   export default function ArticlePage() {
     return (
       <>
         <JsonLdForArticle
           type="Article"
           headline="Getting Started with Next.js"
           images={["/article-image.jpg"]}
           datePublished={new Date("2024-01-15")}
           dateModified={new Date("2024-01-20")}
           authors={[
             {
               name: "John Doe",
               url: "https://example.com/authors/john-doe",
             },
           ]}
           scriptKey="article-json-ld"
         />
         <article>
           <h1>Getting Started with Next.js</h1>
           {/* Your content */}
         </article>
       </>
     );
   }
   ```

2. Check the generated JSON-LD by inspecting the body element of your page.

<Aside type="tip">
  You can use the `JsonLdForArticle` component in layout files, but it's
  recommended to use it in page files instead. Since layouts can be nested,
  adding JSON-LD in layouts can lead to duplicate or conflicting structured data
  when parent and child layouts both include JSON-LD scripts.
</Aside>

## Related

View related API references.

[JsonLdForArticle](https://seo-in-nextjs.dlcastillop.com/docs/reference/json-ld-for-article)