About FAQPage Schema and Google Rich Snippet FAQs
Back in May 2019, Google included support for the FAQ and How-to schema code to display FAQs within Google Search results and Google Assistant.
Adding this FAQ schema to your site helps Google show questions and answers directly on Google Search and the Assistant.
Google says that “A Frequently Asked Question (FAQ) page contains a list of questions and answers pertaining to a particular topic.” and they look like this within a Google search:
These FAQs can appear in all countries and languages where Google Search is available. The FAQs can appear on desktop and mobile devices. FAQ Schema doesn’t have to be reserved only for company FAQ pages; you can create a “frequently asked questions” resource on any topic and use the Schema to indicate that the content is structured as an FAQ.
However, Google warns you not to confuse this with QA pages, which is devoted to forums or other pages where users can submit answers to questions.
If your page has a single question and users can submit alternative answers, use QAPage instead.
Divi Toggles and FAQ Schema
I was looking for a way to easily add in these FAQ schema without having to duplicate my efforts in writing my questions and answers. And I did not want to have to edit both locations every time I updated a question or answer.
In comes Divi Toggles.
As I hardly ever use these modules within my websites, I saw these as an easy way for both myself and my clients to add FAQs to their sites. With this code added to only a single page or to the footer of a site, it would take the title of the toggle and the body text of a toggle and turn it into the JSON schema code needed for Google to pick the questions and answers.
Important Note: Google has updated the guidelines adding this line “If you have FAQ content that is repetitive on your site (meaning, the same question and answer appear on multiple pages on your site), mark up only one instance of that FAQ for your entire site.”
If you do mark up multiple FAQs that are the same, you are potentially in violation of Google’s new guidelines, which can potentially lead to all your pages not showing FAQ rich results in the Google search results.
The JavaScript Code For Divi
Add this enclosed with the script tags to a single page or to the global footer of your website.
<script>
function utmtagurl(text)
{
/* Code for UTM tracking within Google Analytics */
var urlRegex = /href=['"]?([^'" >]+)/g;
var newtext = text.replace(urlRegex, function(url) {
return url + '?utm_source=google&utm_medium=organic&utm_campaign=faq';
});
return newtext;
}
var count = 0;
var first = '{ "@context": "https://schema.org","@type": "FAQPage", "mainEntity": [';
var last = ']}';
var middle = "";
var faqtoggles = document.getElementsByClassName("et_pb_toggle");
for (var faqtoggle in faqtoggles) {
var faq = faqtoggles[faqtoggle];
try {
var title = faq.getElementsByClassName("et_pb_toggle_title")[0].innerText;
var content = utmtagurl(faq.getElementsByClassName("et_pb_toggle_content")[0].getElementsByTagName("p")[0].innerHTML);
if(count == 0){
var obj = '{"@type": "Question","name": '+JSON.stringify(title)+',"acceptedAnswer": {"@type": "Answer","text": '+JSON.stringify(content)+'}}';
}
else{
var obj = ',{"@type": "Question","name": '+JSON.stringify(title)+',"acceptedAnswer": {"@type": "Answer","text": '+JSON.stringify(content)+'}}';
}
var middle = middle+obj;
var count = count + 1;
}
catch (e)
{
/* do nothing */
/* console.error(e); */
}
}
if(count!=0){
var json = first+middle+last;
var faq_script = document.createElement('script');
faq_script.setAttribute('type','application/ld+json');
faq_script.innerHTML = json;document.body.appendChild(faq_script);
}
</script>Last tested with Divi Version 4.7.7
But won’t that reduce traffic to your site as the answers are already on Google?
It’s also something that had many SEOs concerned when this first rolled out. They’re worried that their sites might lose traffic based on how it’s displayed in the SERPs (Search Engine Result Pages).
Fortunately, it was discovered that SEOs can optimise answers with links and styles. They are also finding out that the FAQ rich results may also increase traffic, not decrease it.
If the content is too informational in nature, it can create a situation where users to get the answers they need entirely within the search results.
Look for opportunities within your FAQ answers to link to other relevant pages on your site, and you can use FAQ Schema to drive organic users to more than one page on your website. This is a great way to use informational content to drive users to your product or service pages.
Leveraging this feature correctly can help you to drive relevant, targeted traffic to important pages on your site using purely informational content. It also allows you to get traffic to more than one page from just one ranking result – a rarity in a landscape in which clicks to organic results are otherwise on the decline.
How to I track the FAQ Schema results?
You can track how often searchers click on links in FAQ answers if you add UTM tracking codes to the links! The code already added the UTM tags into the schema for you – it does not touch the original links.
Google also launched a Google Search Console enhancement report for FAQ structured data that shows all errors, warnings and valid items related to your marked-up FAQ pages.
You just need to add it your page or website, and you can check if it’s working as expected by validating the page with Google’s Rich Result Testing tool. You don’t need to do anything extra for it to be picked up by Google assistant powered devices.
Will emojis and HTML tags work with FAQPage Schema?
Google does seem to accept things like emoji and unicode characters like strikethrough text but according to Google officially the answer section can contain these HTML tags:
- headings – h1, h2, h3, h4, h5, h6
- links – a
- line breaks – br
- lists – ol, ul, li
- paragraph – p, div
- bold – b, strong
- italics – i, em
What is the difference between FAQ and QA Schema Markup?
FAQ and QA are two different structured data markups that can be used on your page to get rich results in Google search results. While they sound similar they have a slightly different purpose.
If you offer a page where multiple users can submit alternative answers to a question think sites like Quora, StackOverflow etc then you have to use QA Schema.
If you have a FAQ page with questions and a specific answer to those questions around the same topic you will have to use FAQ Schema.
