Create an automatic FAQ Schema for an Nestable Accordion

I was looking for how to create a Squema type FAQ in Bricks with a nestable accordion but I didn’t find much information, so I decided to create my own code.

Reading Time: 1 min.

Automatic FAQ Schema for Bricks Builder

To create an automatic FAQ Squema from a Nestable accordion in Bricks we need a little bit of code, but don’t panic, you just need to copy and paste.

Before adding the code it is important that you keep the following structure and that the elements have the indicated classes (Remember that you must duplicate each item “.fb-faqs__item to create” more questions and answers within FAQ)

Accordion structure for FAQs Schema
Accordion structure for FAQs Schema

Outside the FAQ block add the following code:

<script>
// Obtén todos los elementos .fb-faqs__item dentro del acordeón
const items = document.querySelectorAll('.fb-faqs__item');

// Crea un objeto para almacenar las preguntas y respuestas
const faqData = {
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": []
};

// Itera sobre cada elemento .fb-faqs__item
items.forEach(item => {
  // Obtén la pregunta y respuesta dentro de cada elemento
  const question = item.querySelector('.fb-faqs__question').textContent;
  const answer = item.querySelector('.fb-faqs__answer').textContent;

  // Crea un objeto para la pregunta y respuesta actual
  const faqItem = {
    "@type": "Question",
    "name": question,
    "acceptedAnswer": {
      "@type": "Answer",
      "text": answer
    }
  };

  // Agrega el objeto al arreglo mainEntity
  faqData.mainEntity.push(faqItem);
});

// Convierte el objeto a formato JSON
const jsonLD = JSON.stringify(faqData, null, 2);

// Crea el elemento <script> y agrega el esquema generado
const script = document.createElement('script');
script.type = "application/ld+json";
script.innerHTML = jsonLD;

// Agrega el script al elemento <head> o <body> de tu página
document.head.appendChild(script);

</script>

How to test a Schema FAQ on google?

Before going to the google tool, inspect the code of your website and in Head you will find the code with the Schema.

FAQ Schema Structure

To verify that Google is identifying the Schema you must enter the following link and analyze the page where your FAQ is https://developers.google.com/search/docs/appearance/structured-data/

Related posts

Sticky sidebar | Floating column - Bricks Builder

Sticky sidebar | Floating column – Bricks Builder

Reading Time: 2 min.

In this post I will show you how to create a sticky sidebar in the right way, no more hiding…

Leer artículo
display on sale products query loop in Bricks

How to display simple and variable products on sale within a query loop in Bricks

Reading Time: 1 min.

In this post I’m going to show you how to display products on sale within a query loop in bricks…

Leer artículo

Leave the first comment