Saijo George

Curated by Saijo George

Read more

tuesday5 May 2020

Dynamically Add FAQ Schema to Your Content

https://twitter.com

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);
Tips and Tricks

We all have access to all the music in the world, as well as easy software and tools to create playlists, in any way we want.

Yet, if you’ve been to a party where someone tries to be the DJ using their phone, you’ve probably appreciated the need for a good DJ who can can select the right playlist for the right crowd, and knows exactly what the party needs, and when it needs it.

Saijo is The DJ when it comes to digital marketing news.