DEV Community


Posted on


Add JSON LD schema with NextJS in these 2 steps.

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": "",
  "@type": "Article",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": ""
  "headline": "Article title",
  "image": [
  "datePublished": spContent.created_at,
  "dateModified": spContent.metaData.articleModifiedTime,
  "author": [{
      "@type": "Person",
      "name": "Json Bourne",
      "url": ""
  "publisher": {
      "@type": "Organization",
      "name": "abc",
      "logo": {
        "@type": "ImageObject",
        "url": ""
  "description": "some description"

Enter fullscreen mode Exit fullscreen mode
  1. Put your data string inside a script tag as below
            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)

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post