Dynamic Structured Data FAQ Schema Builder

If you're building a FAQ page for your website, you should take advantage of Google's rich snippets with FAQ structured data.

But who's got the time to write your questions and answers on both your page and in your FAQ structured data?

We can make this a lot quicker, by adding a script to your page, and some small modifications to your HTML.

When you're done, a script with type "ld+json" will be added to your page.

Be sure to test the code with Google's rich results test tool.

How to structure your HTML

It's really easy to use. Just wrap your question/answer areas with a data-qa attribute. Then wrap the question with a data-question attribute. Finally, wrap the answer with a data-answer attribute.

Now include the script included below on the bottom of your page. Any question you've marked up with those attributes will automatically be structured with the FAQ schema!

/**
 * Dynamically build ld json schema for a FAQ.
 * Wrap your question/answer areas with a data-qa attribute.
 * Wrap the question with data-question.
 * Wrap the answer with data-answer.
 *
 * A ld json script tag element with a FAQPage type will be created dynamically
 * and appended to your page head.
 *
 * @author  Nick Adams - Arcane Web Design
 * @license  MIT
 */
function buildLdJsonScriptElement() {
    let ldJsonScriptElement = document.createElement("script");
    ldJsonScriptElement.setAttribute("type", "application/ld+json");
    let o = {
        "@context": "https://schema.org",
        "@type": "FAQPage",
        "mainEntity": []
    };
    const qas = document.querySelectorAll("[data-qa]");
    qas.forEach((qa) => {
        const q = qa.querySelector("[data-question]").innerText;
        const a = qa.querySelector("[data-answer]").innerText;
        addQuestion(o, q, a);
    });
    ldJsonScriptElement.innerText = JSON.stringify(o);
    return ldJsonScriptElement;
}
function addQuestion(o, question, answer) {
    o.mainEntity.push({
    "@type": "Question",
        "name": question,
        "acceptedAnswer": {
            "@type": "Answer",
            "text": answer
        }
    })
}
document.head.append(buildLdJsonScriptElement());