How to Use the Yoast FAQ Block

Alexa @ FBP
by Alexa @ FBP on Jun 10, 2021 in

Yoast SEO is one of the most powerful SEO plugins in the wonderful world of WordPress sites, and a powerful (and likely underutilized!) feature of the plugin is their FAQ block.

This WordPress block allows you to easily add FAQs (or questions and answers) to your blog posts and pages.

We’ve gotten a lot of questions about the FAQ block on the Food Blogger Pro forums over these past few months, so this blog post will serve as a handy-dandy deep-dive into the ins and outs of using this helpful feature.

a photo of a computer on a desk with a smoothie and a notebook and the title of this blog post, 'how to use the yoast faq block'

Structured Data and User Experience

Before we talk about the block and how to use it, let’s take a step back and talk about the why.

Why would you want to use a special WordPress block and not just type the FAQs into your blog post like normal text?

It’s the same reason why you’d want to use a recipe plugin over typing a recipe straight into your post editor!

Google is smart, but it needs a little help sometimes –– that’s where structured data comes in.

Recipe plugins and the FAQ block add special markup to the information in your blog posts to help Google understand the different parts of a recipe (think: ingredients vs. instructions) and, in the case of the FAQ block, recognize a question over an answer.

structured data for FAQ data in the Rich Results test

Even better: Your FAQs could end up as a rich result in the People Also Ask box:

The People Also Ask box in a Google Search Result for 'chocolate cake'

If you’re interested in learning more about structured data and recipe plugins, check out this article. And if you want to learn more about rich results, go here!

While the structured data benefits are great, the FAQ block also helps users easily locate answers to questions they potentially have about the post or page’s content.

We’ve been using the FAQ block on Pinch of Yum recipes to help readers get the best results from making our recipes. We used to simply add these FAQs in the Notes section of our recipe card, but now we’re adding them to their own standalone area within the Yoast FAQ block to help them stand out and to give them the correct structured data markup for search results. We source these questions from:

  • The People Also Ask area in the search results for the post’s keyword
  • Questions we get about the recipe on social media
  • The comments for that particular recipe

You can see an example of what this looks like on Pinch of Yum in this recipe post right above the recipe card.

The FAQ block for the Sticky Ginger Rice Bowls on Pinch of Yum using the Yoast FAQ block

How to Use the FAQ Block

You can add an FAQ block to any post or page on your site so long as you have the Yoast SEO plugin installed and activated and are using the WordPress Gutenberg block editor for your posts and pages.

Open a post or page, and click the plus button (+) to add a new block. Type “faq” in the search box, and you should see the Yoast FAQ block in the results:

How to search for the Yoast FAQ block on WordPress

Click the Yoast FAQ button to insert the block into your post or page. Then it’s as simple as typing your questions and answers in the spots provided! You can add and delete questions, reorder questions, and add images to customize each question and answer section:

The Yoast FAQ block in a post editor

If you want to separate the FAQ section from the rest of your blog post or page, you can add a heading above it using a heading block:

adding a heading block to a WordPress post

FAQs About the Yoast FAQ Block

Can I use the FAQ block with the free version of Yoast?

Yep! It’s a feature for both the free and premium versions of the plugin.

Can I add multiple FAQ blocks in one post?

Nope! Since you can add multiple questions per FAQ block, you should only use one FAQ block per post or page.

Will I need to style the FAQ block?

Out of the box, Yoast’s FAQ block’s styling is pretty minimal –– it bolds the questions, but that’s about it. You can get creative by adding a border around your FAQs or by adding a background color with some CSS!

You can target the .wp-block-yoast-faq-block class to add different stylings with CSS.

How about Yoast’s How To block?

Like the FAQ block, Yoast’s How To block adds structured data to How To content within your blog posts or pages. It works similarly to the FAQ block in the way that it can be added to your blog posts (just search for “how to” when you’re adding a block), but it’s for content that has ordered steps versus general questions and answers.

You can find more information about Yoast’s How To block here.

Was this section in this post made with Yoast’s FAQ block?

You betcha! 😊

Now let’s chat in the comments 👇:

  • Are you using the Yoast FAQ block in your blog posts?
  • How are you using it to add more value to your blog posts?
  • Do you have any other questions about the block?

Leave a Comment

Your email address will not be published.

31 Comments

          1. Hi Leslie! I would love to make the FAQ headers bigger and also make them H3. How can I do that?

            Thanks!

          2. Hi Sara! Unfortunately, there is no easy way to adjust the size/style of the FAQ headers (read more here). If you’re handy with code, you can try adding some CSS to customize your FAQ block. There are a few links in the blog post I linked to that can help. Leslie also had success adding this to the Additional CSS area:

            .schema-faq-question {
            font-size: 1em;
            display: block;
            margin-bottom: 7px;}

            Hope that helps!

  2. Hi. I just started using the FAQ block. Only problem is, the font doesn’t match the rest of my post and I can’t figure out how to change it. Am I overlooking it?? Thanks!

    Reply

        1. Thanks for that link, Anne!

          I actually had a similar issue with the FAQ blocks on my own blog, and I ended up adding this code to my ‘Additional CSS’ area to fix it:

          .schema-faq-question {
          font-size: 1em;
          display: block;
          margin-bottom: 7px;
          }

          (You can adjust the font size as needed to match your body font size.)

          That’s just one workaround — if you’re looking for a more permanent solution, you might want to reach out to the Yoast support team to see if they have any advice. I hope that helps in the meantime, though!

          Reply

          2. Hi Cindy,

            I took a look at the post you shared, and I think this CSS should do the trick for your site!

            .schema-faq-question {
            font-size: 30px;
            font-weight: 400;
            margin-bottom: 7px;
            }

            Can you try adding that in and let me know if it works?

  3. Hi this is so cool! My only question is, how you Food Blogger Pro and Pinch of Yum get a grey square/border/background around their questions? When I use this block it just looks like any other text. Thank you! 🙂

    Reply

    1. Hi, Darnell! We did that by adding a bit of CSS.

      You could try adding this by going to Customize –> Additional CSS, and to change the background color, you could add some CSS like this:

      .wp-block-yoast-faq-block {
      background-color: grey;
      }

      You might need to tweak the class a bit depending on your site, and you could play around with adding other elements to customize the FAQ block even more. Give that a try and let me know if you have any other questions!

      Reply

  4. I added code to the “Additional CSS” area for the Yoast FAQ block on a blog post and it didn’t change anything.

    .wp-block-yoast-faq-block {
    background-color: grey;
    }

    I also tried the font CSS addition mentioned in the comments and again, no change.

    Would there be some code somewhere else that’s overriding it or something?

    Reply

    1. Hi, Rae!

      Can you share a link to that blog post on your site with the Yoast FAQ block? I’ll take a look and see what might need to be changed with the CSS.

      Reply

        1. Hey, Natasha!

          I just took a look at your post, and I think this CSS might work. Can you try adding it in and see if it does the trick?

          .schema-faq.wp-block-yoast-faq-block {
          font-size: 20px;
          }

          Let me know!

          Reply

          1. Thank you SO MUCH! It worked! I see now what Rae’s issue was, too. She tried entering the code into the Additional CSS in the post but if you go to Customize the whole site page then there you can add the Additional CSS which solves the problem. I also tried the Additional CSS in the post in the FAQ block editing section but it did not do anything. Thank you again!

    1. Hey, Ebuka!

      We actually use TailwindCSS as our CSS framework for Food Blogger Pro, so the classes we use won’t be the same as you would have for your site. However, we:

      – Increase the question font size to 20px
      – Set the padding to top: 32px, right: 32px, bottom: 16px, left: 32px
      – Set the margin-bottom to 16px
      – Make the background light grey
      – Add a rounded grey border
      – Add a box shadow

      I hope that helps!

      Reply

  8. Thank you for this! I added a FAQ block and would really love background color around it like the way you have it above. I don’t know what CSS is or how on earth to do it, could you provide the code to get the background color? Sorry, I’m so new and just terrible at writing code and stuff!

    Reply

    1. Hi Erica!

      You can this:

      Go to Customize (not on the post, but the whole site page) –> Additional CSS, and to change the background color, you could add some CSS like this:

      .wp-block-yoast-faq-block {
      background-color: grey;
      }

      Hope that helps!

      Reply