FAQ schema implementation with GTM
68 / 100 SEO Score

In this article, we will show you how to dynamically publish FAQ Schema via Google Tag Manager and how to add FAQ schema to your site.

The strength of #SEO lies in knowledge sharing and this article is my small contribution to the SEO community.
Please note that this is a technical article and it assumes that you are already familiar with publishing JSON-LD Schema via #GTM, especially capturing content from a webpage using CSS Selectors. This means that I’ll skip these steps, but I’ll include useful links about them within comments.

Although you can easily find multiple articles and code examples on how to use #GTM to publish Schema with a number of set items which will update their values depending on the page being indexed by Google, you will struggle to find any guidance on how to implement proper dynamic Schema with a flexible and unknown set of items such as Carousel (ItemList Schema), Breadcrumb (BreadcrumbList Schema), How-to (HowTo Schema) or FAQ (#FAQPage Schema).

Total time: 10 minutes

1. First step – add the code

GTM Custom tag configuration

Although the code provided at the end of this article can be adapted for any Schema, its easiest implementation is for FAQ Schema as you only have to create one empty “mainEntity” item:

“mainEntity”:[]

This empty item will then be dynamically populated with “Question” and “Answer” items by the JavaScript Loop included below:

<code> for (i = 0; i < document.querySelectorAll(‘CSS_Selector_of_Question’).length; i++) { data.mainEntity.push({   “@type”:”Question”,   “name”:document.querySelectorAll(‘CSS_Selector_of_Question’)[i].innerText,   “acceptedAnswer”: {   “@type”: “Answer”,   “text”:document.querySelectorAll(‘CSS_Selector_of_Answer’)[i].innerText} }; }); </code>

2. Second step – identify the CSS selectors

Using devTools

As you can see above, all you need to do is to identify two CSS Selectors:

1. One for the Questions on your page in order to identify the number of items to be created (see the .length in the first line of code) and to capture the .innerText of each question.

2. One for the Answers on your page in order to capture the .innerText of each answer.

The box below contains the code needed to dynamically implement FAQ Schema on your site via a Custom HTML tag in GTM.

3. Final step – replace the CSS selectors

changing css selectors in GTM Tag configuration

Important: Don’t forget to replace in the code below these two pieces of text with the correct values for your site:

CSS_Selector_of_Question
CSS_Selector_of_Answer

The next steps are to test, test and then test again before publishing your new and dynamic FAQ Schema tag via GTM. Best of luck.

Below is the entire code that you have to insert in Google Tag Manager and you can easy copy/paste it in your HTML GTM tags configuration, just remember to replace the parts of the code with your values.

After you implement FAQ Schema you can check it in Structured Data Testing Tool.

<script>
  (function(){
    var data = {
    "@context":"https://schema.org",
  "@type":"FAQPage",
  "mainEntity":[]
}
    for (i = 0; i < document.querySelectorAll('CSS_Selector_of_Question').length; i++) 
{
        data.mainEntity.push({
            "@type":"Question",
            "name":document.querySelectorAll('CSS_Selector_of_Question')[i].innerText,
            "acceptedAnswer": {
                "@type": "Answer",
                "text":document.querySelectorAll('CSS_Selector_of_Answer')[i].innerText
            }
        });
    };
      
  var script = document.createElement('script');
  script.type = "application/ld+json";
  script.innerHTML = JSON.stringify(data);
  document.getElementsByTagName('head')[0].appendChild(script);
})(document);
</script>

You can add FAQ schema in any site, built with WordPress or a custom one as long as you have your GTM code installed.

This implementation of schema can save you time and money, for reference you can see how much to spend on SEO and also see our professional search engine optimisation services if you need help.

If you want to track more events with GTM we are here to help you accomplish that. Contact us and we can implement schema through Google Tag Manager for you but this how-to article should help you implement with ease FAQ Schema on your site.

Source code here.