Hello,I have a dynamic FAQ component that pulls

aalex FR

Hello,

I have a dynamic FAQ component that pulls question–answer pairs from my database and renders them correctly on the page. Now I need to output a valid FAQPage JSON-LD schema so Google can recognize my FAQ rich result, but I think WebStudio doesn’t allow me to insert Collection tags inside a <script type="application/ld+json"> block.

What’s the best way to generate and inject the following schema dynamically (based on my rendered FAQs) without hard-coding every question and answer?

{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Where are you located?",
"acceptedAnswer": {
"@type": "Answer",
"text": "We are based in Paris, France."
}
},
{
"@type": "Question",
"name": "Do you offer private sailing lessons?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, private lessons are available on request."
}
}
/* …and so on for each FAQ item… */
]
}

Has anyone implemented a solution (JavaScript embed or WebStudio workaround) that reads the rendered FAQ items and automatically generates this <script type="application/ld+json"> block? Any code snippets or step-by-step guidance would be greatly appreciated.

15 comments

MMikeoxygen

Hmmm 🤔

MMikeoxygen

are you allowed to loop FAQ selectors

MMikeoxygen

Using query selector all to get the FAQ questions and answers

MMikeoxygen

loop through each FAQ item and build the schema using the FAQ item.question.textcontent

MMikeoxygen

make sure you trim it so it is exactly as the rendered text

MMikeoxygen

that's the idea. I haven't not tested but let's hope it works.

MMikeoxygen

https://gist.github.com/Blazing-Mike/4f175ea809384943ea81ba779fc7ae22

MMikeoxygen

Here's a GitHub gist to the code, couldn't pastw the whole code in discord

MMikeoxygen

prompted AI and it gave me something that looks promising.

Make you have the selectors in html as well.

aalex FR

Mikeoxygen - Thank you for your reply! Yes, that's the way I'm going now, generate faq shema with js based on what's on the page.

But I have a legitimate question, maybe there is a way to do it more nicely directly in Webstudio

OOleg Isonen

sounds like you want to build a json of a specific structure based on a response from the api in a different stucture, esstially this is about transforming one object into another object, is that correct?

OOleg Isonen

if yes, ideal place to do this is backend

OOleg Isonen

specific endpoint that returns you the schema

aalex FR

Thanks for your hints friends! Finally solved the problem with this script, which is inserted into the HTML embed in the FAQ block on the page and the webstudio outputs the FAQ page array right there. Probably not the most elegant solution, but it seems to work.

<script>
  function generateFaqSchema() {
    var results = ${FAQ$32$.data.results}; 

    if (!Array.isArray(results) || results.length === 0) {
      return;
    }

    var faqItems = [];

    results.forEach(function(item) {
      var questionText = item["field_2660140"];
      var answerText = item["field_2660146"];

      if (questionText && answerText) {
        faqItems.push({
          "@type": "Question",
          "name": questionText.trim(),
          "acceptedAnswer": {
            "@type": "Answer",
            "text": answerText.trim()
          }
        });
      }
    });

    if (faqItems.length > 0) {
      var faqSchema = {
        "@context": "https://schema.org",
        "@type": "FAQPage",
        "mainEntity": faqItems
      };

      var oldSchema = document.querySelector('script[type="application/ld+json"][data-schema-type="FAQPage"]');
      if (oldSchema) {
        oldSchema.remove();
      }

      var scriptTag = document.createElement('script');
      scriptTag.type = 'application/ld+json';
      scriptTag.setAttribute('data-schema-type', 'FAQPage'); 
      scriptTag.textContent = JSON.stringify(faqSchema, null, 2);

      document.head.appendChild(scriptTag);
    }
  }

  try {
    generateFaqSchema();
  } catch (e) {
   }
</script>

OOleg Isonen

Yeah, this is purely client side, but could work well enough

Add a reply

Join the Webstudio community

Hello,I have a dynamic FAQ component that pulls