DEV Community

priteshbaviskar
priteshbaviskar

Posted on

Add JSON LD schema with NextJS in these 2 steps.

#nextjs #javascript

We recently upgraded the NextJS version for our CMS portal at Storeplum and decided to add structured data for each page.

Found a npm library but it was kind of outdated. After a lot of searching, I found that the solution was fairly straightforward.

All I did was added the schema definition into a script tag as below-

  1. Get your schema definition - 
let schema = { "@context": "https://schema.org", "@type": "Article", "mainEntityOfPage": { "@type": "WebPage", "@id": "example.com/articleURL" }, "headline": "Article title", "image": [ spContent.metaData.twitterCard ], "datePublished": spContent.created_at, "dateModified": spContent.metaData.articleModifiedTime, "author": [{ "@type": "Person", "name": "Json Bourne", "url": "example.com/jbourne" }], "publisher": { "@type": "Organization", "name": "abc", "logo": { "@type": "ImageObject", "url": "example.com/image" } }, "description": "some description" };
Enter fullscreen mode Exit fullscreen mode
  1. Put your data string inside a script tag as below 
 <script type='application/ld+json' dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} />
Enter fullscreen mode Exit fullscreen mode

That's all! You can verify your changes once you deploy using this tool by Google.

Top comments (0)