Dynamic JSON-LD generation

At a glance

The community member is working on a blog project using Payload CMS and Webstudio. They have set up a GraphQL API on Payload to retrieve blog post data and are able to successfully retrieve the data in Webstudio. Their goal is to dynamically generate JSON-LD code for each post's structured data within Webstudio, and they are unsure how to create a JSON-LD template that can use variables based on the API response and adapt to each post's data. The community member has also implemented structured data using microdata, but would like to generate JSON-LD for optimal implementation as recommended by Google.

In the comments, a community member provides a sample script tag with JSON-LD code that uses variables from the API response to populate the structured data fields. The community member suggests pasting this into the expression editor in an HTML embed.

Useful resources

MMr Bean

Hi Webstudio community,

I'm currently working on a blog project using Payload CMS and Webstudio. I've set up a GraphQL API on Payload to retrieve my blog post data (title, description, author, image, etc.). I'm able to successfully retrieve the data in Webstudio via an API request.

My goal is to dynamically generate JSON-LD code for each post's structured data, directly within Webstudio. I'm not sure how to create a JSON-LD template in Webstudio that can use variables based on the API response and that would change based on the post's slug (URL parameter). How can I make the JSON-LD code automatically adapt to each post's data?

I've also implemented structured data using microdata with itemscope, itemtype, and itemprop attributes directly in my HTML. However, I'd also like to generate JSON-LD for optimal implementation, as recommended by Google.

JJohn Siciliano

Marked as solution

Plain Text

`<script type="application/ld+json">
    {
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "${myVar.data.posts[0].title}",
  "image": [
    "${myVar.data.posts[0]["feature_image"]}"
  ],
  "datePublished": "${myVar.data.posts[0]["published_at"]}",
  "dateModified": "${myVar.data.posts[0]["updated_at"]}",
  "author": [
    {
      "@type": "Person",
      "name": "${myVar.data.posts[0].authors[0].name}",
      "url": "${system.origin}/team/${myVar.data.posts[0].authors[0].slug}"
    }
  ]
}
</script>`

here's what I have on webstudio's site.

View full solution

3 comments

JJohn Siciliano

Plain Text

`<script type="application/ld+json">
    {
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "${myVar.data.posts[0].title}",
  "image": [
    "${myVar.data.posts[0]["feature_image"]}"
  ],
  "datePublished": "${myVar.data.posts[0]["published_at"]}",
  "dateModified": "${myVar.data.posts[0]["updated_at"]}",
  "author": [
    {
      "@type": "Person",
      "name": "${myVar.data.posts[0].authors[0].name}",
      "url": "${system.origin}/team/${myVar.data.posts[0].authors[0].slug}"
    }
  ]
}
</script>`

here's what I have on webstudio's site.

JJohn Siciliano

And paste this into the expression editor in an html embed

MMr Bean

Love y so much 🙂

Add a reply

Join the Webstudio community

Dynamic JSON-LD generation