Here’s a free Schema FAQ Generator for you to use on your websites. No attributions required. No hidden code. Just clean Schema goodness to help improve your SEO rankings…
Add Your Questions
Copy Your HTML Code
Watch This Video On How To Use This Tool:
Turn It Into A Well Designed Accordion…
How do I get my FAQs in Google?
You can often get your FAQs to appear underneath your listing in Google if you use FAQ schema markup.
What is FAQ schema?
FAQ (frequently asked questions) schema is a type of structured markup you can add to your website to help Google understand your content. It allows Google to easily see what the frequently asked questions are, and what your answers to these questions is. The most common reason SEO’s use FAQ schema is to increase the size of their listing inside the SERPs.
How do I create schema FAQ markup?
You can create schema faq markup manually using Google’s structured data markup helper, or you can use the free tool on this page to do it for you.
How do I add faq schema in WordPress?
Yoast SEO now includes a FAQ block that contains schema markup which is 100% free to use inside the Gutenberg editor. You can also use the free tool on this page if you want a little bit more control over the HTML, or you’re wanting to add schema FAQ markup into a custom HTML block, theme file, custom field – or anywhere else that allows HTML.
If you’d like to turn this into a fully-responsive accordion, feel free to add the following code to your website.
Add This CSS To Your Style Sheet:
.schema-faq-code {
border: 1px solid #dedee0;
border-radius: 10px;
background-color:#fefbf9;
overflow:hidden;
}
.schema-faq-code .faq-q {
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 12px 56px 12px 12px;
line-height: 1.4;
cursor: pointer;
position: relative;
border-bottom: 1px solid #dedee0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.faq-q:after {
content: "+";
position: absolute;
top: 50%;
right: 0;
width: 56px;
text-align: center;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-weight: bold;
color: #000;
font-size: 20px;
}
.faq-q.faq-q-open:after {
content: "-";
}
.faq-a {
margin: 0;
padding: 12px;
background-color:#fff;
font-size: 14px;
line-height: 1.4;
border-bottom: 1px solid #dedee0;
display: none;
}
.schema-faq-code .faq-question:last-child .faq-a {
border-bottom:0px;
}
And The Following jQuery To Your Webpage:
jQuery('.faq-q').click(function(){
if (jQuery(this).siblings().find('.faq-a').is(':visible')) {
jQuery(this).removeClass('faq-q-open');
jQuery(this).siblings().find('.faq-a').removeClass('faq-a-open').slideUp();
}
else {
jQuery(this).addClass('faq-q-open');
jQuery(this).siblings().find('.faq-a').addClass('faq-a-open').slideDown();
}
})
Done.
And that’s all you need to do! I hope this tool helps improve your SEO. When it does, be sure to let me know in the comments below and have a great day! 🙂
This Faq generator has more benefits. Than some paid versions out there.
Really appreciate the positive feedback Edwin thanks. Always thought it was crazy that people still pay for schema FAQ when you can use this tool for free!
thanks for the sciprt save my hours, help to rank my faq in SEO
can you add modified name of person who answer and asking and vote count?
Hi Ara, I think you might be looking for Q&A schema (not FAQ schema). See here: https://developers.google.com/search/docs/data-types/qapage
Hi Daniel,
Thanks for this tool, quick question:
Once I add the code to my website, I don’t see the FAQ coming up in the Google rich results tool.
Should I be adding both your code? and JSON JS schema?
Thanks,
Hi Claudio, the tool adds in the microdata, so there’s no need to add JSON schema as well. Could it be that your WYSIWYG editor is stripping out the microdata?
If you send me your URL I’ll happily take a look for you.
Cheers,
I’m not getting the JQuery to work. What I’m doing is wrapping it within and </script) and placing it in the head via the Header/Footer scripts as part of Genesis. I can see the code is there via DevTools, but the FAQs are not opening.
I can’t seem to get the jQuery to work. I have the following in my section.
jQuery(‘.faq-q’).click(function(){
if (jQuery(this).siblings().find(‘.faq-a’).is(‘:visible’)) {
jQuery(this).removeClass(‘faq-q-open’);
jQuery(this).siblings().find(‘.faq-a’).removeClass(‘faq-a-open’).slideUp();
}
else {
jQuery(this).addClass(‘faq-q-open’);
jQuery(this).siblings().find(‘.faq-a’).addClass(‘faq-a-open’).slideDown();
}
})
Hi Mike,
I can’t see it in the page you’ve got linked to this comment but yep you’re right about wrapping the jQuery code inside < script > < /script > tags.
Another thing you might have to do is place the code inside a document ready function, so it’d look like this:
< script >
jQuery(document).ready(function(){
jQuery(‘.faq-q’).click(function(){
if (jQuery(this).siblings().find(‘.faq-a’).is(‘:visible’)) {
jQuery(this).removeClass(‘faq-q-open’);
jQuery(this).siblings().find(‘.faq-a’).removeClass(‘faq-a-open’).slideUp();
}
else {
jQuery(this).addClass(‘faq-q-open’);
jQuery(this).siblings().find(‘.faq-a’).addClass(‘faq-a-open’).slideDown();
}
})
});
< /script >
(remove the spaces around the script tags, had to put them there to stop the code rendering)
Hope this helps,
Dan
Thanks Dan. Much appreciated.
You’re welcome. Just an update for anyone else with the same issue.
The above code (in my comment to Mike) outputs apostrophes as the curly ones, not the straight ones used for coding and that was causing part of the issue.
The other issue was Mike’s WYSIWYG was outputting empty
tags. The solution to this was to minify the HTML code.