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)
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.
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/
