Dynamically Add FAQ Schema to Your Content

While I still do FAQPage Schema like a caveman, JR Oakes recently shared a really clever way to dynamically add FAQPAge Schema to your pages by using specific class names for your question and answer content and a bit of Javascript. Code is also on Pastebin.

Here is the Zip file with 2 html files

• withjs.html- which dynamically adds the FAQPage Schema to the head
• nojs.html – the file without the script

Code:

  
// Define the class for your questions and answers here.
// They should be marked up in a consistent manner.
var questionClass = 'question';
var answerClass   = 'answer';

// Output schema to console. Set to `false` if adding via tag manager.
var logOutput     = false;

(function(){

    // Build Data
    var questions = Array.from(document.getElementsByClassName(questionClass)).map(function(e){return e.textContent});
    var answers = Array.from(document.getElementsByClassName(answerClass)).map(function(e){return e.textContent});

    if (questions.length && answers.length){

        var data = {
          "@context": "https://schema.org",
          "@type": "FAQPage",
          "mainEntity": []
        };

        buildItem = (q,a) => {

            var item = {
                "@type": "Question",
                "name": null ,
                "acceptedAnswer": {
                  "@type": "Answer",
                  "text":null }
                };

            item['name'] = q;
            item['acceptedAnswer']['text'] = a;

            return item;
        }
    
        console.assert(questions.length == answers.length, {questions: questions.length, answers: answers.length, errorMsg: "Questions and Answers are not the same lengths"});

        data['mainEntity'] = questions.map(function(q,i){return buildItem(q,answers[i])});

        var script = document.createElement('script');
        script.type = "application/ld+json";
        script.innerHTML = JSON.stringify(data);
        document.getElementsByTagName('head')[0].appendChild(script);

		if (logOutput){
        	console.log(script.outerHTML);
		}

    }

})(document);